/* CSS Document */
:root{
	--root-font-size: 14;
	--rem: 1rem / var(--root-font-size);

	/*カラー設定*/	
	--main-color: #00a8a8;
	--sp-color:#e75297;
	--jh-color:#ed848c;
	--hs-color:#44bcce;
	--sub-color:#f5aa00;
	--veige-color:#fffbda;
	--tannowa-color:#004da0;
	--five-color:#6cbb63;
	--link-color:#00a8a8;
	--link-color-rev:#7effff;
}

.mc{color:var(--main-color);}
.spc{color:var(--sp-color);}
.wc{color:white;}
.bgwhite{
	background-color:white;
	margin:15px 0px 0px 0px;
	padding: 10px 0px;  
}
.aligncenter{text-align: center;}
.alignleft{text-align: left;}

.wd80 img{width: 80%;}
.wd80{padding: 0% 10%;}

.wd90 img{width: 90%;}
.wd90{padding: 0% 5%;}

.wd100 img{width: 100%;}
.wd100{padding: 0%;}

a.txt-link{
	color:var(--link-color);
	font-weight: bold;
	text-decoration: underline;
	vertical-align: middle;
	display:inline-block;
	padding: 8px 20px 8px 20px;
	border:1px solid var(--link-color);
	border-radius: 999px;
	overflow: hidden;
}
a.txt-link img{
	display: inline-block;
	vertical-align: middle;
	margin-right: 4px;
	border-radius: 0%;
}
a.txt-link.rev{
	color:var(--link-color-rev);
	border-color: var(--link-color-rev);
}
a.txt-link:hover{
	text-decoration: none;
	background-color:var(--link-color);
	color:white;
}
a.txt-link.rev:hover{
	text-decoration: none;
	background-color:white;
	color:var(--link-color);
}

a.txt-link span{
	display: inline-block;
	vertical-align:middle;
}


p.centerbox{text-align: center;}

.para{margin: 10px 10px 10px 10px;}

.bold{font-weight: bold;}

/*フォントサイズ*/
.bigger{font-size: calc(62 * var(--rem));}
.big{font-size: calc(44 * var(--rem));}
.middle{
	font-size: calc(24 * var(--rem));
	line-height: calc(32 * var(--rem));
}
.small{/*標準文章*/
	font-size: calc(17 * var(--rem));
	line-height: calc(26 * var(--rem));
}
.exsmall{font-size: calc(13 * var(--rem));}
.petit{font-size: calc(10 * var(--rem));}



body{
	background-color: white;
	background-image: url("../images/main_bg.jpg");
	background-position: center top;
	background-attachment: fixed;
	padding: 0px;
	margin: 0px;
}
h1{
	margin: 0px;
	padding: 0px;
	vertical-align: bottom;
}
h1 img{width: 100%;}

iframe.gmap{
	min-height: 600px;
}

div.structure{
	width: 85%;
	margin: 0px auto;
	text-align: left;
	align-items: center;
	
}
div.structure table{
	margin: 0px auto;
}

div.main-wrap{
	position: relative;
	/*background: repeat-y url("../images/0_base1.jpg") center top;*/
}

div.box-wrap{
	display: flex;
	justify-content: center;
	align-items: left;
}
span.obi{
	display: inline-block;
	background-color: var(--main-color);
	color:white;
	margin: 0px;
	padding: 5px;
}
span.senobi{
	display: inline-block;
	background-color: white;
	border:1px solid var(--main-color);
	border-width: 1px 0px 1px 0px;
	color:var(--main-color);
	margin: 0px;
	padding: 5px;
}

/*ＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶ--RESPONSIVE*/

div.main{
	width: 480px;
	padding: 0px;
	margin: 0px auto;
	background-color: var(--main-color);
	text-align: center;
	position: relative;
	z-index: 999;
	min-height: 2000px;
}

@media screen and (max-width: 500px) {/*幅下回ったらautoに*/
	div.main{
		width:auto;
		padding: 0px;
	}

}

/*∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆--RESPONSIVE*/

span.century{
	font-family: "century-gothic", sans-serif;
	font-weight: 400;
	font-style: italic;
}

span.maru{
	display:inline-block;
	width: 22px;
	height: 22px;
	font-size:15px;
	border-radius: 50%;
	color:white;
	text-align:center;
	line-hight:18px;
	background: var(--main-color);
}
span.maru.marumain{background: var(--main-color);}
span.maru.marusp{background: var(--sp-color);}

span.siromaruwrap{
	height: 60px;
	line-height: 60px;
}
span.siromaru{
	display:inline-block;
	width: 72px;
	height: 72px;
	font-size:15px;
	border-radius: 50%;
	margin-right: 18px;
	color:var(--main-color);
	text-align:center;

	line-height:72px;
	background-color: white;
	border:solid 1px var(--main-color);
}
p.borderbox{
	border: 1px solid var(--main-color);
	padding:12px;
	margin:10px 30px;
}


/*VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVテーブル*/
table.detail{
	width: 90%;
	padding:15px 0px;
	border:2px dotted var(--main-color);
	border-width: 2px 0px;
	margin: 0px auto 30px auto;
}
table.detail th{
	vertical-align: top;
	width: 20%;
	padding: 0px;
}
table.detail th .obi{
	display:block;
}

table.detail td{
	padding:5px 0px 5px 15px;
	text-align:left;
	vertical-align: top;

}
table.detail ul li{padding-bottom:12px;}

/*ΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔテーブル*/

p.youtube{
	padding-bottom: 40px;
}

.program-wrap img.program-title{
	position:relative;
	margin-top: -57px;
}

/*VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVテーブル（プログラム）*/
table.program{
	width: 90%;
	padding:0px;
	margin: 0px auto;
	column-span: none;
	border-spacing: 0px;
}
table.program.jh thead th{background-color: var(--jh-color);}
table.program.hs thead th{background-color: var(--hs-color);}
table.program.jh tbody .bdbox span.middle{color: var(--jh-color);}
table.program.hs tbody .bdbox span.middle{color: var(--hs-color);}

.jhcolor{color:var(--jh-color);}
.hscolor{color:var(--hs-color);}


table.program.jh tbody th{
	background-color: #fce3e6;
	color: var(--jh-color);
}
table.program.hs tbody th{
	background-color: #daeff0;
	color: var(--hs-color);
}
table.program tbody p{
	margin: 8px auto;
}

table.program.hs span.hscolor{color:var(--hs-color);}

table.program tbody th.vg{
	background-color: var(--veige-color);
	padding:10px 0px 10px 15px;
}

table.program tbody td .obi{
	background-color: var(--sub-color);
	padding: 2px;
	margin-left: 4px;
}
table.program.jh tbody td.border{
	border-bottom:2px dotted var(--jh-color);
	margin-bottom: 8px;
}
table.program.hs tbody td.border{
	border-bottom:2px dotted var(--hs-color);
	margin-bottom: 8px;
}
table.program p.comment{
	display: inline-block;
	padding: 15px;
	background-color: #ebf3d8;
	border-radius: 8px;
}
table.program .bdbox{
	display: inline-block;
	padding: 10px;
	border: 1px solid var(--jh-color);
	border-radius: 8px;
}
table.program.hs .bdbox{
	border-color: var(--hs-color);
}

table.program span.borderbox span{
	color:var(--jh-color);
}

table.program img{
	float: left;
	vertical-align: middle;
	margin-right: 5px;
	margin-bottom: 4px;
}

table.program td{
	padding:25px 0px 25px 15px;
	text-align:left;
	vertical-align: top;
}

table.program td.image1{
	background: url("../images/jh_image1.png") no-repeat;
	background-position:  right 10% bottom 50%;
}
table.program td.image2{
	background: url("../images/jh_image2.png") no-repeat;
	background-position:  right 10% bottom 50%;
}
table.program td.imageh1{
	background: url("../images/hs_image1.png") no-repeat;
	background-position:  right 10% bottom 50%;
}
table.program td.imageh2{
	background: url("../images/hs_image2.png") no-repeat;
	background-position:  right 10% bottom 50%;
}



ol.starlist{
	margin: 0px;
	list-style-type: none;
	padding: 8px;
}
ol.starlist li{
	background-repeat: no-repeat;
	padding: 0px 0px 15px 32px;
}
ol.starlist li:nth-child(-n + 2){
	padding-right:110px;
}

table.jh ol.starlist li:nth-child(1){background-image: url("../images/jh_star1.png");}
table.jh ol.starlist li:nth-child(2){background-image: url("../images/jh_star2.png");}
table.jh ol.starlist li:nth-child(3){background-image: url("../images/jh_star3.png");}

table.hs ol.starlist li:nth-child(1){background-image: url("../images/hs_star1.png");}
table.hs ol.starlist li:nth-child(2){background-image: url("../images/hs_star2.png");}
table.hs ol.starlist li:nth-child(3){background-image: url("../images/hs_star3.png");}


/*5step用==========================================*/
.five-color{color:var(--five-color);}



table.program.fivestep thead th{background-color: var(--five-color);}
table.program.fivestep thead .bdbox span.small{color: var(--five-color);}
table.program.fivestep thead .bdbox{margin: 4px 0px;
}
table.program.fivestep{border-spacing: 2px;}
table.program.fivestep{height: calc(100% - 60px);}
table.program.fivestep tbody th{
/*	display: flex;
	align-items: stretch;
	height: 100%;*/
	padding: 12px;
	color: white;
	background-color: var(--five-color);
}
/*table.program.fivestep tbody th p{
	background-color: var(--five-color);
	color: white;
	margin:0px 0px 60px 0px;
	padding: 0px;
	width: 60px;
	height: 100%;
	position: relative;
	vertical-align: middle;

}*/
/*table.program.fivestep tbody th p:after{
	margin:0px;
	padding: 0px;
	content: '';
	position: absolute;
	left: 0px;
	top: 60px;
	width: 0;
	height: 0;
	border: 30px solid transparent;
	border-top-color:  var(--five-color); 
}*/


table.program.fivestep thead td{
	margin: 0px;
	padding: 0px;
}
h4.fivestep-title{
	margin: 0px;
	padding: 0px;
	position: relative;
}
h4.fivestep-title img{
	position:relative;
	top:14px;
	vertical-align: middle;
}
table.program.fivestep tbody .border{
	border-bottom:2px dotted var(--five-color);
	margin-bottom: 8px;
}
table.program.fivestep tbody h5{
	color: var(--five-color);
	margin: 0px;
	padding: 0px;
}
table.program.fivestep .bdbox{border-color: var(--five-color);}

details.acco{
	border:1px solid var(--jh-color);
	margin:0px 5% 10px 5%;;
	border-radius:15px;
}
details.acco.jh summary p{color:var(--jh-color);}
deta
ils.acco.jh{border-color:var(--jh-color);}
details.acco.hs summary p{color:var(--hs-color);}
details.acco.hs{border-color:var(--hs-color);}

details.acco summary p{
	display: flex;
	justify-content: space-between;
	text-align:left;
	font-weight: bold;
	cursor: pointer;
}
details.acco summary p::after{
	display: flex;
	align-items: center;
	content: "▼";
	font-weight: 900;
	transition: all 0.3s;
	font-size:15px;
}


/*ΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔテーブル（プログラム）*/

div.flow{
	padding-bottom: 80px;
}
div.flow img{width: 90%;}
/*VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVQ&A*/

dl.q-a{
	background-color: white;
	background-image: url("../images/gridpat.gif");
	text-align: left;
	padding:35px;
	margin: 0px;
}
dl.q-a dt{
	margin: 5px 0px;
	padding: 10px 0px 0px 0px;
}
dl.q-a dd{
	margin: 0px 0px 10px 0px;
	padding: 0px;
}
dl.q-a img{
	margin-right: 10px;

}
dl.q-a dt:first-child{
	position: relative;
	margin-top: -75px;
	padding-bottom: 0px;
}

/*ΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔΔQ&A*/

summary {list-style: none;}
.acco::details-content {
  opacity: 0;
  block-size: 0;
  transition: .3s;
  transition-property: display, opacity, block-size, padding;
  transition-behavior: allow-discrete;
  line-height: 1.6em;
}
/*
.acco .acco_content {
  padding: 0 2em 0 3em;
}

.acco .acco_content > *:first-of-type {
  margin-top: 0;
}

.acco .acco_content > *:last-of-type {
  margin-bottom: 0;
}
*/

.acco[open]::details-content {
  opacity: 1;
  block-size: auto;
  block-size: calc-size(auto, size);
}
div.shots{
	background-color:#ebf3d8;
	margin:0px 0px 0px 0px;
	padding: 10px 0px 58px 0px;  
}
div#CANCEL{
	padding: 18px 0px 18px 0px;
}
div#CANCEL table,div#CANCEL td,div#CANCEL th{
	border-collapse: collapse;
	border:1px solid white;

}
div.policy{
	width: 80%;
	border: 1px solid white;
	color:white;
	padding:24px;
	text-align: left;
	margin: 0px auto;
}
div.tannowa{
	background-color: #cceafb;
	padding: 5px 0px 18px 0px;
}
div.tannowa h4{
	color: var(--tannowa-color);
	font-weight: bold;
	padding: 18px 0px 0px 8px;
}
dl.access{
	margin: 0px;
	padding: 0px 18px 18px 18px;
	text-align: left;
}
dl.access dt{
	margin: 0px;
	padding: 10px 0px 10px 0px;
	font-weight: bold;
}
dl.access dd{
	margin: 0px;
	padding: 0px;
}
p.andy img:first-child{
	position: relative;
	margin-top: -55px;
}

/*▼▼▼ -----------------------------------アニメーションボタン */

/*== グラデーション線から塗に変化する */

.button1,
.button3,
.button2{
    /*ボタンの形状*/
    display: inline-block;
	text-align: center;
    padding: 18px 0px;
	min-width: 70%;
	width: 100%;
	background-color: white;
    text-decoration: none;
    border:4px solid #F08D08;
	border-bottom:10px solid #F08D08;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);	
    border-radius:30px;
	color: #F08D08;
    outline: none;
    /*アニメーションの指定*/ 
    transition: all 0.4s ease-out;
	font-weight: bold;
	font-size: 1.5rem;
}

a.button1::after{
	content: "";
	border:none;
}
.button2{
	font-size:1.2rem;
	border-color: darkgray;
	color: darkgray;
	padding: 10px auto;
}
.button3{
	font-size:0.9rem;
	border-color: #004da0;
	color: #004da0;
	padding: 3px auto;
}


/*hoverした際、グラデーションと影を付ける*/
.button3:hover,
.button2:hover,
.button1:hover{
    /*ボタンの形状*/
    border-color:transparent;
    color: #fff;
    /*背景の色と形状*/
    background: -webkit-linear-gradient(right, #F08D08 0%, #F0D708 50%, #F08D08 100%);
    background: -o-linear-gradient(right, #F08D08 0%, #F0D708 50%, #F08D08 100%);
    background: linear-gradient(to left, #F08D08 0%, #F0D708 50%, #F08D08 100%);
    background-size: 200% auto;
    background-position: right center;
    /*ボックスの影*/   
    box-shadow: 0 5px 10px rgb(240,215,8,0.4);
}
/*▲▲▲ -----------------------------------アニメーションボタン */


/*ＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶ--下矢印*/

.shitayajirushi {
  display: inline-block;
  vertical-align: middle;
  color: #f08d08;
  line-height: 1;
  position: relative;
  width: 0.5em;
  height: 2.4em;
  background: currentColor;
}

.shitayajirushi::before {
  content: '';
  width: 2em;
  height: 2em;
  border: 0.5em solid currentColor;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  position: absolute;
  left: 50%;
  bottom: -0.2em;
  box-sizing: border-box;
}

.hyoko{
	animation: hyoko 1s ease-in infinite;
	animation-direction: alternate;
/*	animation-name: ;*/
}

@keyframes hyoko{
  0% {transform: translate(0, 0px);}
  100% {transform: translate(0, 18px);}
}
/*∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆--下矢印*/

p.aplis{vertical-align: middle;}
p.aplis img {margin-right: 5px;}

p.aplis a,p.aplis a:link , p.aplis a:visited , p.aplis a:hover{
	color: white;
	vertical-align: middle;
	text-decoration: none;
}
div.foot p{
	color: white;
	margin: 0px;
	padding: 0px 0px 10px 0px;
}

/*ＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶＶ--背景*/

/*--左右中央に置く場合--*/
img.badge-left{
	opacity: 1;
	width: calc((100% - 480px) / 2 * 0.4);
	position: fixed;
	left: calc((100% - 480px) / 4);
	top: 40%;
	transform: translate(-50%, -50%);
}
img.badge-right{
	opacity: 1;
	width: calc((100% - 480px) / 2 * 0.4);
	position: fixed;
	left: calc((100% - 480px) / 4 * 3 + 480px);
	top: 40%;
	transform: translate(-50%, -50%);
}

/*--少しずらして置く場合--*/
/*img.badge-left{
	opacity: 1;
	width: calc((100% - 480px) / 2 * 0.8);
	position: fixed;
	left: calc((100% - 480px) / 6 * 2);
	top: 30%;
	transform: translate(-50%, -50%);
}
img.badge-right{
	opacity: 1;
	width: calc((100% - 480px) / 2 * 0.8);
	position: fixed;
	left: calc((100% - 480px) / 4 * 3 + 350px);
	top: 60%;
	transform: translate(-50%, -50%);
}*/

/*∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆∆--背景*/