@charset "UTF-8";


/* レイアウト
----------------------------------------*/
html {
	height: 100%;
}

body {
	height: 100%;
}

.visible_s{
	display: none!important;
}

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

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

/*--------------------------- 
管理画面
ユーザー画面　共通
基本項目
----------------------------- */
/*----------------------------- 
	レイアウト
----------------------------- */

.txt_idt {
   padding-left: 1em;
   text-indent: -1em;	
}
.txt_idt2{
   padding-left: 2.6em;
   text-indent: -2.6em;	
}

a[href^="tel:"] {
    pointer-events: none;
}

.f-left{
		float:left;
	}
.f-right{
		float:right;
	}
.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{
	display: inline!important;
	vertical-align: middle;
}

img.auto{
	width:auto!important;
}
img.center{
	display:block;
	margin:0 auto;
}

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

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

/*bottom*/
.mb0 { margin-bottom: 0px !important; }
.mb05 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { 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; }

/*right*/
.mr05 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr25 { margin-right: 25px !important; }
.mr30 { margin-right: 30px !important; }
.mr35 { margin-right: 35px !important; }
.mr40 { margin-right: 40px !important; }
.mr50 { margin-right: 50px !important; }
.mr60 { margin-right: 60px !important; }
.mr70 { margin-right: 70px !important; }
.mr80 { margin-right: 80px !important; }
.mr90 { margin-right: 90px !important; }

/*left*/
.ml05 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.ml35 { margin-left: 35px !important; }
.ml40 { margin-left: 40px !important; }
.ml50 { margin-left: 50px !important; }
.ml60 { margin-left: 60px !important; }
.ml70 { margin-left: 70px !important; }
.ml80 { margin-left: 80px !important; }
.ml90 { margin-left: 90px !important; }
.ml100 { margin-left: 100px !important; }
.pl35{padding-left:35px;}



/*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: 23px !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:120% !important;}
.font-s140{ font-size:140% !important;}


/*font-color
----------------------------------------*/
.red{color:#D6000F!important;}
.blue{color:#005BAC!important;}
.light_blue{color:#3E98DB!important;}
.green{	color:#73a728!important;}
.green2{color:#74d793!important;}
.ygreen{color:#9adb77!important;}
.pink{color:#fd3bcd!important;}
.og{color:#D98338;}
.bg_pink{background:#de7676;}
.bg_gray{background:#f5f4f4;}
.bg_gray2{background:#ededed!important;}
.bg_black{background:#000;}
.bg_white{background:#fff;}

.font_bo{
	font-weight:bold;
}

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

/* 字下げ */
.txt_idt{
	padding-left: 1em !important;
	text-indent: -1em !important;
	display:block;
}
/* 字下げ 5*/
.txt_idt2{
   padding-left: 3em !important;
   text-indent: -3em !important;
}

/*幅指定*/
.w200{
	width:200px;
	margin:0 auto;
}

/*ボタン*/
/*右矢印act black*/
a.btn_ar,a.btn_ar_lo,a.btn_newtab{
    margin: 40px auto 0;
    text-align: center;
    display: inline-block;
    background: #F2FAFF;
    width: 400px;
    padding: 16px 0;
    line-height: 1.8;
	font-weight:normal;
    position: relative;
    overflow: hidden;
	border:1px solid #1a1a1a;
}
a.btn_ar_lo{
	width:340px;
}
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: 38px;
    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: 300px;
	padding: 0.8em 1.2em;
	text-align: center;
	text-decoration: none;
	background: #EC407A;
	color: #fff;
	font-weight:600;
	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: 15px;
    content: '';
    display: inline-block;
    background-image: url("../images/common/arrow_w01.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_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%, #FFF890 20%);
	border-radius:6px;	
}
.marker_yl_k{
	display:inline !important;
	background: linear-gradient(transparent 70%, #FFF890 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:2.2;
}
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.8em;
	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: 1em;
	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;
}

/*ボーダー*/
.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;
}
.flex{
	display:flex;
}
ul.w-harf{
	width:46%;
	background:#EDEDED;
	padding:15px 15px;
	font-size:85%;
	margin-bottom:20px;
}
ul.w-harf:last-of-type{
	margin-left:8%;
}
ul.w-harf li,
ul.w-all li{
	padding-left: 1em !important;
	text-indent: -1em !important;
}

ul.w-all{
	width:60%;
	margin:0 auto 60px;
	background:#FBFFEE;
	padding:15px 30px;
	font-size:90%;
}

/*ふわっと*/
/* 画面外にいる状態 */
.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; /* 横の余白を均等に設定 */
	/*justify-content: flex-start; /* 子要素を左詰めにする */
  }

  /* 最後のコンテンツを左寄せにする指定 */
.flex_03:after {
    content: "";
    display: block;
    width: calc(33.333% - 10px);  /* .cl3に指定したwidthと同じ幅を指定する */
    height: 0;
}


  /*2カラム */
  .flex > div.cl2,
  .flex > div.cl2_s1{
	width: calc(50% - 10px); /* 余白を考慮して幅を計算 */
	margin-bottom: 20px; /* 下方向の余白 */
  }
  
  .flex > div.cl2:nth-child(odd) ,
  .flex > div.cl2_s1: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) {
	margin-bottom: 0; /* 最後の2つの要素の下余白を削除 */
  }

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

  /*3カラム */
  .flex_03 > div.cl3  {
  width: calc(33.333% - 10px); /* 余白を考慮して幅を計算（3つで均等に分けるために100%を3で割った値） */
  margin-bottom: 20px; /* 下方向の余白 */
 font-size: 92%;
}

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

/* 最後の行には下余白が不要なので、最後の3つの要素の下余白を削除 */
.flex_03 > div.cl3:nth-last-child(-n+3) {
  margin-bottom: 0;
}

/* 最後の列の余白を削除 */
.flex_03 > div.cl3:nth-child(3n) {
  margin-right: 0;
}



  /*4カラム */
.flex > div.cl4 {
	width: calc(25% - 15px); /* 余白を考慮して幅を計算（4つで均等に分けるために100%を4で割った値から、余白分を引く） */
	margin-bottom: 20px; /* 下方向の余白 */
  }
  
  .flex > div.cl4 img {
	width: 100%; /* 親要素の幅に合わせる */
	height: auto; /* 高さは自動調整（元の画像比率を保つ） */
	display: block; /* 画像がインライン要素であるのをブロック要素にする（余白を削除） */
  }
  
  /* 最後の行の子要素には、下余白が不要なので削除 */
  .flex > div.cl4:nth-last-child(-n+4) {
	margin-bottom: 0;
  }
  
  /* 最後の列の要素の余白を削除 */
  .flex > div.cl4:nth-child(4n) {
	margin-right: 0;
  }