@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;
}

.making-img{
	width:100%;
	height:auto;
}

.css-fade1{
  /* アニメーション設定*/
  animation-name:fade-in1;
  animation-duration:1s; /*アニメーション時間*/
  animation-timing-function: ease-out; /*アニメーションさせるイージング*/
  animation-delay:0.1s; /*アニメーション開始させる時間*/
  animation-iteration-count:1; /*繰り返し回数*/
  animation-direction:normal; /*往復処理をするかどうか*/
  animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
/* アニメーション*/
@keyframes fade-in1 {
  0% {opacity: 0; transform: translate3d(0,0,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}
.css-fade2{
  /* アニメーション設定*/
  animation-name:fade-in2;
  animation-duration:6s; /*アニメーション時間*/
  animation-timing-function: ease-out; /*アニメーションさせるイージング*/
  animation-delay:1s; /*アニメーション開始させる時間*/
  animation-iteration-count:1; /*繰り返し回数*/
  animation-direction:normal; /*往復処理をするかどうか*/
  animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
/* アニメーション*/
@keyframes fade-in2 {
  0% {opacity: 0; transform: translate3d(0,20px,0);}
  20% {opacity: 1; transform: translate3d(0,0,0);}
  80% {opacity: 1; transform: translate3d(0,0,0);}
  100% {opacity: 0; transform: translate3d(0,0,0);}	
}
.css-fade3{
  /* アニメーション設定*/
  animation-name:fade-in3;
  animation-duration:6s; /*アニメーション時間*/
  animation-timing-function: ease-out; /*アニメーションさせるイージング*/
  animation-delay:1.5s; /*アニメーション開始させる時間*/
  animation-iteration-count:1; /*繰り返し回数*/
  animation-direction:normal; /*往復処理をするかどうか*/
  animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
/* アニメーション*/
@keyframes fade-in3 {
  0% {opacity: 0; transform: translate3d(0,20px,0);}
  20% {opacity: 1; transform: translate3d(0,0,0);}
  80% {opacity: 1; transform: translate3d(0,0,0);}
  100% {opacity: 0; transform: translate3d(0,0,0);}	
}
.css-fade4{
  /* アニメーション設定*/
  animation-name:fade-in4;
  animation-duration:6s; /*アニメーション時間*/
  animation-timing-function: ease-out; /*アニメーションさせるイージング*/
  animation-delay:8s; /*アニメーション開始させる時間*/
  animation-iteration-count:1; /*繰り返し回数*/
  animation-direction:normal; /*往復処理をするかどうか*/
  animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
/* アニメーション*/
@keyframes fade-in4 {
   0% {opacity: 0; transform: translate3d(0,20px,0);}
  20% {opacity: 1; transform: translate3d(0,0,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}
.css-fade5{
  /* アニメーション設定*/
  animation-name:fade-in5;
  animation-duration:6s; /*アニメーション時間*/
  animation-timing-function: ease-out; /*アニメーションさせるイージング*/
  animation-delay:8.5s; /*アニメーション開始させる時間*/
  animation-iteration-count:1; /*繰り返し回数*/
  animation-direction:normal; /*往復処理をするかどうか*/
  animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
/* アニメーション*/
@keyframes fade-in5 {
   0% {opacity: 0; transform: translate3d(0,20px,0);}
  20% {opacity: 1; transform: translate3d(0,0,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}
.css-fade6{
  /* アニメーション設定*/
  animation-name:fade-in6;
  animation-duration:4s; /*アニメーション時間*/
  animation-timing-function: ease-out; /*アニメーションさせるイージング*/
  animation-delay:1.5s; /*アニメーション開始させる時間*/
  animation-iteration-count:1; /*繰り返し回数*/
  animation-direction:normal; /*往復処理をするかどうか*/
  animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
/* アニメーション*/
@keyframes fade-in6 {
  0% {opacity: 0; transform: translate3d(0,20px,0);}
  20% {opacity: 1; transform: translate3d(0,0,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}
/*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{ margin-top: 80px !important; }
.pt30{padding-top:30px!important;}

/*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; }

.pt40{
	padding-top:40px;
}

/*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-color
----------------------------------------*/
.red{color:#cc0000!important;}
.blue{color:#3c76fc!important;}
.green{	color:#73a728!important;}
.green2{color:#74d793!important;}
.ygreen{color:#9adb77!important;}
.pink{color:#e68282!important;}
.og{color:#DC6C00;}
.bg_pink{background:#de7676;}
.bg_gray{background:#f5f4f2;}
.bg_gray2{background:#ededed;}

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

div.moushikomi{
	clear: both;
	background: url(../images/top/bg_pink.png) no-repeat;
	background-size:100% 100%;
	padding:50px 0;
}
.waku_border_pink{
	font-size:14px;
	padding:15px;
	margin:20px 0 0 30px;
	line-height: 200%;
	border:1px dotted #de7676;
	width:650px;
}

/*タブ切り替え全体のスタイル*/
.tabs{
	width:900px;
	margin: 50px auto 40px auto;
	background-color: #fff;
	box-sizing: border-box;
}

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 800px;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 50px;
  border-bottom: 3px solid #de7676;
  background: #d9d9d9 url("../images/base/mouse.png") no-repeat  80px center;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  transition: all 0.2s ease;

}
.tab_item:hover {
  opacity: 0.75;
	cursor: pointer;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#net:checked ~ #net_content,
#net2:checked ~ #net2_content{
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #de7676;
  color: #fff;
	background-image: none;
}
.tab_item2 {
	width: calc(100%/2);
	height: 50px;
	border-bottom: 3px solid #de7676;
	line-height: 50px;
	font-size: 18px;
	text-align: center;
	display: block;
	float: left;
	transition: all 0.2s ease;
	background-color: #de7676;
	color: #fff;
	background-image: none;
}
.tab_content ul span{
	font-size:30px;
	color:#de7676;
	vertical-align: middle;
}
.tab_content ul  li{
	counter-increment : chapter;
	padding:10px 0 0 20px;
	padding-left:2em;
	text-indent:-2em;
}
.tab_content ul li:before {
	content : counter(chapter);
	padding-right: 10px;
	color:#de7676;
	font-size:30px;
} 

.tab_content ul  li img{
	width:50px;
	vertical-align: middle;
}
.tab_content ul  li .tel{
	font-size:26px;
}
.tab_content ul  li .form{
	background:#de7676;
	color:#fff;
	border-radius: 20px;
	padding:5px 0;
	text-align: center;
	display: block;
	width:350px;
	margin-top:10px;
}
.kit{
	width:700px;
	background: #fff;
	margin:30px auto 0 auto;
	padding:30px 40px;
}
.kit h3{
	text-align: center;
	font-size:18px;
	font-family: "NotoSerif_R";
}
.to_cart{
	padding:30px 0;
	background: url(../images/top/bg_green.png) no-repeat;
	background-size:100% auto;
	margin:0 auto;
	text-align: center;
	font-size:18px;
	line-height: 200%;
}
.to_cart div{
	width:800px;
	border:2px solid #377c90;
	background: #fff;
	margin:0 auto;
	padding:30px 0;
}
.to_cart div .tel{
	font-size:30px;
	font-family: "NotoSerif_R";
	margin:20px 0;
}