﻿@charset "UTF-8";
/* PCだけ表示 */
.visible_l,img.visible_l,span.visible_l,br.visible_l,td.visible_l,th.visible_l,tr.visible_l,table.visible_l,span.dispn {
	display: none !important;
}

/* SPだけ表示 */
.visible_s {
	display: block !important;
}
span.visible_s,img.visible_s,br.visible_s {
	display: inline !important;
}
table.visible_s {
	display: table !important;
}


.a-left{
		text-align:left;
	}
.a-right{
		text-align:right;
	}
.a-center{
		text-align:center;
	}
	
.f-center{
	display: block!important;
	text-align:center!important;
	margin-left:auto!important;
	margin-right:auto!important;
	}

.va-m{
	width:auto;
	vertical-align: middle;
}
img{
	max-width:100%;
	width:100%;
	height:auto;
	margin:0;
}
img.auto{
	width:auto!important;
}

img.border{
	border:1px solid #ccc;
}

img.center{
	display: block;
	width:auto !important;
	max-width: 100%;
	margin:0 auto ;
}
img.s_60p{
	width:60%;
	height:auto;
	margin:0 auto;
	display: block;
}

/*clearfix
----------------------------------------*/
.clearfix { zoom:1; }

.clearfix:after {
	content: "";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	font-size: 0.1em;
	line-height: 0;
}
.clr,.sclr{
	clear: both;
}

/*margin
----------------------------------------*/

/*top*/
.mt0{ margin-top: 0px !important; }
.mt05{ margin-top: 5px !important; }
.mt10{ margin-top: 10px !important; }
.mt15{ margin-top: 15px !important; }
.mt20,.smt20{ margin-top: 20px !important; }
.mt25{ margin-top: 25px !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; }
.mt80{ margin-top: 80px !important; }
.pt30{padding-top:30px !important;}
.pt40{padding-top:40px !important;}

/*bottom*/
.mb0 { margin-bottom: 0px !important; }
.mb05 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20,smb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb45 { margin-bottom: 45px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb70 { margin-bottom: 70px !important; }
.mb80 { margin-bottom: 80px !important; }

.pl35{padding-left:0;}

.sp-pd{
	padding:0 20px;
}

/*font-size
----------------------------------------*/

.font10 { font-size: 77% !important; }
.font11 { font-size: 85% !important; }
.font12 { font-size: 93% !important; }
.font13 { font-size: 100% !important; }
.font14 { font-size: 108% !important; }
.font15 { font-size: 116% !important; }
.font16 { font-size: 123.1% !important; }
.font17 { font-size: 131% !important; }
.font18 { font-size: 138.5% !important; }
.font19 { font-size: 146.5% !important; }
.font20 { font-size: 153.9% !important; }
.font21 { font-size: 161.6% !important; }
.font22 { font-size: 167% !important; }
.font23 { font-size: 174% !important; }
.font24 { font-size: 182% !important; }
.font25 { font-size: 189% !important; }
.font26 { font-size: 197% !important; }
.fontb { font-weight: bold !important; }
.font-s90{ font-size:90% !important;}
.font-s80{ font-size:80% !important;}
.font-s120{ font-size:110% !important;}
.font-s140{ font-size:125% !important;}

/*font-color
----------------------------------------*/
.red{color:#D6000F!important;}
.blue{color:#005BAC!important;}
.light_blue{color:#3E98DB!important;}
.green{	color:#129330!important;}
.ygreen{color:#9adb77!important;}
.pink{color:#fd3bcd!important;}
.og{color:#D98338;}

.bg_gray{background:#f5f4f2;}
.bg_gray2{background:#ededed;}

.font_bo{
	font-weight:bold;
}
/*キャッチ*/
.txt_catch{
	font-size:125%;
	font-weight:bold;
	line-height:1.5;
}

/*字下げ
----------------------------------------*/
.txt_idt {
	padding-left: 1em;
	text-indent: -1em;
	display:block;
}
.txt_idt2{
   padding-left: 3em;
   text-indent: -3em;	
}
/*幅指定*/
.w200{
	width:100px;
	margin:0 auto;
}

/*ボタン*/
/*右矢印act black*/
a.btn_ar,a.btn_ar_lo,a.btn_newtab{
    margin: 20px auto 0;
    text-align: center;
    display: inline-block;
    background: #F2FAFF;
    width: 80%;
    padding: 16px 0;
    line-height: 1.8;
	font-weight:normal;
	font-size:0.95rem;
    position: relative;
    overflow: hidden;
	border:1px solid #1a1a1a;
}
a.btn_ar_lo{
	width:90%;
}
a.btn_ar::after,a.btn_ar_lo::after,a.btn_newtab::after{
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 22px;
    content: '';
    display: inline-block;
    background-image: url("../../images/common/arrow_b01.png");
    width: 23px;
    height: 8px;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s,-webkit-transform .5s;
}
a.btn_ar:hover,a.btn_ar_lo:hover{
	text-decoration:none;
}
a.btn_ar:hover:after,a.btn_ar_lo:hover:after{
	-webkit-transform:translateX(10px);transform:translateX(10px);
}
/*別ウィンドウ*/
a.btn_newtab{
	width:50%;
}
a.btn_newtab::after{
    background-image: url("../../images/common/newtab_b.png");
    width:26px;
    height: 24px;
}

/*pink　btn*/
a.btn_01{
    display: inline-block;
	position: relative;
	width: 90%;
	padding: 0.8em 0.6em;
	text-align: center;
	text-decoration: none;
	background: #EC407A;
	color: #fff;
	font-weight:600;
    font-size: 0.95rem;
	border: 2px solid #EC407A;
	border-radius: 3px;
	transition: .4s;
	margin:30px auto 0;
}
a.btn_01::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 12px;
    content: '';
    display: inline-block;
    background-image: url("../../images/common/arrow_w02.png");
    width: 19px;
    height: 6px;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s,-webkit-transform .5s;
}
a.btn_01:hover{
	text-decoration:none;
}
a.btn_01:hover:after{
	-webkit-transform:translateX(10px);transform:translateX(10px);
}

/* マーカー　*/
.marker_yl {
	display:inline !important;
	background: linear-gradient(transparent 20%, #FFF660 20%);
	border-radius:6px;	
}
.marker_yl_k{
	display:inline !important;
	background: linear-gradient(transparent 70%, #FFF660 70%);
	border-radius:6px;	
}

.marker_Pblue,.marker_Pblue_b {
	display:inline !important;
	background: linear-gradient(transparent 70%, #E0F3FF 70%);
	border-radius:6px;	
}
.marker_Pblue_b {
	background: linear-gradient(transparent 20%, #E0F3FF 20%);
}

/*チェックリスト*/
ul.check_list li,ul.check_list_blue li {
	position:relative;
	padding: 0em 0.3em 0.3em 1.3em;
	line-height:1.6;
	margin-bottom:6px;
	font-size:95%;
}
ul.check_list li:after,ul.check_list li:before,
ul.check_list_blue li:after,ul.check_list_blue li:before {
	position:absolute;
	content:'';
	display:block;
	background: #D98338;
	top: 0.6em;
	left: 0.5em;
	height: 11px;
	width: 4px;
	border-radius: 10px;
	transform: rotate(45deg);
}
ul.check_list_blue li:after,ul.check_list_blue li:before {
	background: #4082B5;
}
ul.check_list li:before,ul.check_list_blue li:before {
	top: 0.8em;
	left: 0.2em;
	height:8px;
	transform:rotate(-45deg);
}
ul.check_list li > ul li:after,ul.check_list li > ul li:before{
	width:0;
	height:0;
}
ul.check_list li > ul li{
   padding-left: 1em !important;
   text-indent: -1em !important;	
}

/*ボーダー*/
.border_og {
    border-bottom: solid 2px #D98338;
}

/*囲み枠*/
.waku_bgog,.waku_bglblue{
    margin: 0.8em 0 2em;
    padding: 1em 1.5em;
    background-color: #FCF1ED;
    border-radius: 8px;
}
.waku_bglblue{
    background-color: #EDF5FC;
}
.waku_dotog, .waku_dotlblue {
    margin: 0.8em 0 2em;
    padding: 1em 1.5em;
    border: dotted 2px #D98338;
    border-radius: 8px;
}
.waku_dotlblue {
    border: dotted 2px #EDF5FC;
}
.waku_dotog ul li, .waku_dotlblue ul li{
	line-height:2;
	margin-bottom:14px;
}

ul.w-harf,
ul.w-all{
	width:92%;
	margin:0 auto 10px;
	background:#EDEDED;
	padding:9px 15px;
}
ul.w-harf li,
ul.w-all li{
	padding-left: 1em !important;
	text-indent: -1em !important;
}

ul.w-all{
	background:#FBFFEE;
	margin-bottom:50px;
}

/*ふわっと*/
/* 画面外にいる状態 */
.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 1400ms;
	}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}

/*三角　矢印　下*/
.triangle_b{
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 25px solid #EC407A;
	margin: 0 auto 10px;
}


/*----------------------------- 
flex box   
----------------------------- */
.flex,.flex_03 {
	display: flex;
	flex-wrap: wrap; /* コンテンツを複数行に折り返す */
	/*width: 100%;*/ 
	justify-content: space-between; /* 横の余白を均等に設定 */
  }

  /*2カラム */
  .flex > div.cl2,
  .flex > div.cl4 ,
  .flex_03 > div.cl3{
	width: calc(50% - 10px); /* 余白を考慮して幅を計算 */
	margin-bottom: 20px; /* 下方向の余白 */
  }
    /*3カラム */
.flex_03 > div.cl3{
	width: 100% !important;
	margin-bottom: 25px; 
	font-size: 92%;
}
.flex_03 > div.cl3 img{
	width: 100%; /* 親要素の幅に合わせる */
	height: auto; /* 高さは自動調整（元の画像比率を保つ） */
	display: block; /* 画像がインライン要素であるのをブロック要素にする（余白を削除） */
  }
  
	
  .flex > div.cl2_s1{
	width:96%;
	margin:0 auto 30px;
  }

  .flex > div.cl2:nth-child(odd) {
	margin-right: 20px; /* 奇数番目の要素に右余白を設定 */
  }

  .flex > div.cl2:last-child,
  .flex > div.cl2_s1:last-child,
  .flex > div.cl2:nth-last-child(2),
  .flex > div.cl2_S1:nth-last-child(2) {
  .flex > div.cl4:nth-last-child(-n+4){
	margin-bottom: 0; /* 最後の2つの要素の下余白を削除 */
  }

  .flex > div.cl2 img,
  .flex > div.cl2_s1 img{
	width: 100%;
	height: auto;
	display: block;
  }

  .flex > div.cl4 img {
	width: 100%; /* 親要素の幅に合わせる */
	height: auto; /* 高さは自動調整（元の画像比率を保つ） */
	display: block; /* 画像がインライン要素であるのをブロック要素にする（余白を削除） */
  }
