@charset "UTF-8";

/*======================================================
使い回せる便利なcss
======================================================*/

/*----------------------------------------------------
表示に関するcss
-----------------------------------------------------*/

@media screen and (max-width:768px){    
    /*スマホのときだけ表示しない設定*/
    .s-none{
        display: none;
    }
    /* スマホの時だけセンター表示 */
    .s-center{
        text-align: center;
    }
}

@media (min-width:769px){
    /* パソコン以上で表示しない */
    .pc-none{
        display: none;
    }
    /* PCの時だけセンター表示 */
    .pc-center{
        text-align:center;
    }
}


/*----------------------------------------------------
コンテンツ幅の固定
-----------------------------------------------------*/
.w100{
    max-width:100% !important;
}

.w300{
    max-width:300px;
    margin:auto;
}

.w400{
    max-width:400px;
    margin:auto;
}

.w500{
    max-width:500px;
    margin:auto;
}

.w600{
    max-width:600px;
    margin:auto;
}

.w768{
	max-width: 768px;
	margin: auto;
}

.w800{
    max-width:800px;
    margin: auto;
}

.w1000{
    max-width: 1000px;
    margin: auto;
}

.w1200{
    max-width: 1200px;
    margin: 0 auto;
}

@media(max-width:767px){
    .w768,.w800,.w1000,.w1200{padding:0 2%;}
}

/*----------------------------------------------------
余白に関する指定
-----------------------------------------------------*/

.m0{margin:0;}
.m10{margin:10px;}
.m20{margin:20px;}
.m30{margin:30px;}

.mb0{margin-bottom: 0 !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom:50px !important;}
.mb60{margin-bottom:60px !important;}
.mb70{margin-bottom:70px !important;}
.mb80{margin-bottom:80px !important;}

.mt0{margin-top:0px !important;}
.mt10{margin-top:10px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mt40{margin-top:40px !important;}
.mt50{margin-top:50px !important;}
.mt60{margin-top:60px !important;}
.mt70{margin-top:70px !important;}

.mr0{margin-right:0px !important;}
.mr10{margin-right:10px !important;}
.mr20{margin-right:20px !important;}
.mr30{margin-right:30px !important;}
.mr40{margin-right:40px !important;}
.mr50{margin-right:50px !important;}

.ml0{margin-left:0px !important;}
.ml10{margin-left:10px !important;}
.ml20{margin-left:20px !important;}
.ml30{margin-left:30px !important;}
.ml40{margin-left:40px !important;}
.ml50{margin-left:50px !important;}

.p0{padding:0 !important;}
.p10{padding:10px !important;}
.p20{padding:20px !important;}
.p30{padding:30px !important;}
.p40{padding:40px !important;}
.p50{padding:50px !important;}


.gap10{gap:10px !important;}
.gap20{gap:20px !important;}
.gap30{gap:30px !important;}
.gap40{gap:40px !important;}
.gap50{gap:50px !important;}

.gap10-20{gap:10px 20px !important;}
.gap10-30{gap:10px 30px !important;}
.gap20-10{gap:20px 10px !important;}
.gap30-10{gap:30px 10px !important;}

/*----------------------------------------------------
インデント
-----------------------------------------------------*/

.indent-1{text-indent: 1em;}
.indent-2{text-indent: 2em;}
.indent-3{text-indent: 3em;}

/*----------------------------------------------------
行間指定
-----------------------------------------------------*/

.lh12{line-height: 1.2em;}
.lh15{line-height:1.5em;}
.lh175{line-height:1.75em;}
.lh20{line-height:2em;}

/*----------------------------------------------------
左右中寄せ指定
-----------------------------------------------------*/

.alignleft {
    margin-right: 80px;
	margin-bottom: 20px;
	float: left;
}

.alignright {
	margin-left: 80px;
	margin-bottom: 20px;
	float: right;
}

.left {
	text-align: left !important;
}

.right {
    text-align: right !important;
}

.center {
    text-align: center !important;
}

@media(min-width:768px){
    .pc-center{
        text-align:center !important;
    }
}

/*----------------------------------------------------
flexboxで並び順を変えたい場合（PCのみ）
-----------------------------------------------------*/

/* order-1から左に表示される */

@media(min-width:768px){
    .order-1{order:1;}
    .order-2{order:2;}
    .order-3{order:3;}
    .order-4{order:4;}
    .order-5{order:5;}
    .order-6{order:6;}
}

/*----------------------------------------------------
配置に関する設定（relative,absolute)
-----------------------------------------------------*/
.relative{
    position:relative;
}

.absolute{
    position:absolute;
}

/*----------------------------------------------------
YouTubeの埋め込み　アスペクト比
-----------------------------------------------------*/
.ratio{
    width:100%;
    aspect-ratio: 16 / 9;
}
.ratio iframe{
    width:100%;
    height:100%;
}

/*----------------------------------------------------
フォントの太さを戻したい時（見出し等）
-----------------------------------------------------*/

.normal{
    font-weight: normal !important;
}

.bold{
    font-weight:bold !important;
}

/*----------------------------------------------------
FONTサイズ　font18からは相対指定
-----------------------------------------------------*/

.font10 {
    font-size:10px;
	font-size: 1.0rem;
}

.font11{
    font-size:11px;
    font-size:1.1rem;
}

.font12{
    font-size:12px;
    font-size:1.2rem;
}

.font13{
    font-size:13px;
    font-size:1.3rem;
}

.font14{
    font-size:14px;
    font-size:1.4rem;
}

.font15{
    font-size:15px;
    font-size:1.5rem;
}

.font16{
    font-size:16px;
    font-size:1.6rem;
}

.font17{
    font-size:17px;
    font-size:1.7rem;
}

.font18{
    font-size:18px;
    font-size:1.8rem;
}

.font19{
    font-size:19px;
    font-size:1.9rem;
    font-size: clamp(1.6rem, 2.0vw, 1.9rem);
}

.font20{
    font-size:20px;
    font-size:2.0rem;
    font-size: clamp(1.6rem, 2.2vw, 2.0rem);
}

.font21{
    font-size:21px;
    font-size:2.1rem;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}

.font22{
    font-size:22px;
    font-size:2.2rem;
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
}

.font23{
    font-size:23px;
    font-size:2.3rem;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
}

.font24{
    font-size:24px;
    font-size:2.4rem;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.font25{
    font-size:25px;
    font-size:2.5rem;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
}

.font26{
    font-size:26px;
    font-size:2.6rem;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}

.font27{
    font-size:27px;
    font-size:2.7rem ;
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
}

.font28{
    font-size:28px;
    font-size:2.8rem ;
    font-size: clamp(1.8rem, 3.7vw, 2.8rem);
}

.font29{
    font-size:29px;
    font-size:2.9rem;
    font-size: clamp(1.8rem, 3.8vw, 2.9rem);
}

.font30{
    font-size:30px;
    font-size:3.0rem;
    font-size: clamp(1.8rem, 4vw, 3.0rem);
}