@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD W3
    Theme URI: https://w3planning.com/
    Description: SWELLの子テーマ by W3
    Version: 1.0.0
    Author: W3
    Author URI: https://w3planning.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/







/* ======================================
   W3 Width System (Numeric Controlled)
====================================== */

/* ベース */
.w3box{
  box-sizing: border-box;
  width: 100%;
}

/* --------------------------------------
   配置
-------------------------------------- */
.w3a-c{ margin-left:auto; margin-right:auto; }
.w3a-l{ margin-left:0; margin-right:auto; }
.w3a-r{ margin-left:auto; margin-right:0; }

/* --------------------------------------
   固定幅 px
-------------------------------------- */
.w3w-600px { max-width:600px; }
.w3w-720px { max-width:720px; }
.w3w-840px { max-width:840px; }
.w3w-960px { max-width:960px; }
.w3w-1100px{ max-width:1100px; }
.w3w-1280px{ max-width:1280px; }

/* SPでは少し余白を持たせる */
@media (max-width: 767px){
  .w3w-600px,
  .w3w-720px,
  .w3w-840px,
  .w3w-960px,
  .w3w-1100px,
  .w3w-1280px{
    width:92%;
  }
}

/* --------------------------------------
   % 指定
-------------------------------------- */
.w3w-80p  { width:80%; }
.w3w-90p  { width:90%; }
.w3w-100p { width:100%; }

/* --------------------------------------
   vw 指定
-------------------------------------- */
.w3w-60vw { width:60vw; max-width:100%; }
.w3w-70vw { width:70vw; max-width:100%; }
.w3w-80vw { width:80vw; max-width:100%; }
.w3w-90vw { width:90vw; max-width:100%; }

/* SPでのvw補正（はみ出し防止） */
@media (max-width: 767px){
  .w3w-60vw,
  .w3w-70vw,
  .w3w-80vw,
  .w3w-90vw{
    width:92vw;
  }
}