/*
Theme Name : test
Author : amano
*/
@chaeset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
    line-height: 1;
    box-sizing: border-box;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/* ここから */
body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #333333;
  font-size: 20px;
  line-height:1.6;
  border-top: 1px solid #008C7B;  
font-family:Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
}

p,h1,h2,h3,h4,h5,h6 {
  margin: 0;
}
ul li {
	list-style:none;
}

img {
  vertical-align: bottom;
}

a:hover {
  opacity: 0.8;
}
a { text-decoration:none; }

/* レイアウト */
.container { width:1170px; margin:0 auto; }
.clear { clear:both; }
.sp {display: none;}
.pc {display:block;margin:0 auto;}
section { padding:50px 0; }
.clearfix:after {content: "";display: block;clear: both;}
h2 { text-align:left;color:#008c7b;font-size:3rem;font-weight:900;padding:20px 0;line-height:1;margin-bottom: 20px; }
.rd { color:#E61064;font-weight:800; }
.gr{color:#008c7b;font-weight:800;}
.yellow{color:#ff6;font-weight:800;}
.sm { font-size:60%; }
.yl {background:linear-gradient(transparent 60%, #ff6 60%);}
.b{font-weight:bold;}
.c{text-align:center;}
.d-flex{display:flex;}
.w-30{width:30%;}
.w-70{width:70%;}
.color-white{color:#fff !important;}
.fs-15{font-size:1.5rem;}
.fs-2{font-size:2rem;}
.fs-3{font-size:3rem;}
.fs-5{font-size:5rem;}
.mt-10{margin-top:10px !important;}
.mt-20{margin-top:20px !important;}
.mb-10{margin-bottom:10px !important;}
.mb-20{margin-bottom:20px !important;}

/* header */
header {margin: 0 auto; padding:15px 0; }
header img { float: left;}
header a {width: 32.47%;float: right;font-size: 16px;padding: 1% 0;background-color: #eeeeee;display: block;border-radius: 5px;text-align: center;color:#333333;}

/* request */
.request {text-align: center;padding: 50px 0;border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc;}
.request p:first-child{margin-bottom:10px;}

/* top */
#top {border-top:1px solid #ddd;padding: 0;}
#top h1 img{width:100%;}
#top_date{background-color:#000;text-align:center;padding:20px 0;}

/* about */
#about h2{font-size:1.5rem;padding:0;}
#about p{font-size:1rem;}

/* scroll */
.scroll {padding-top:120px;position: relative;text-align:center;}
.scroll::before {animation: scroll 3.5s infinite;display: inline-block;content: "";position: absolute;width:50px;height:50px;border-bottom: solid 10px #E61064;border-left: solid 10px #E61064;transform: rotate(-45deg);top: 0;right: 0;left: 0;margin: auto;}
@keyframes scroll {
	0% {transform: rotate(-45deg) translate(0, 0);opacity: 0;}
	40% {opacity: 1;}
	80% {transform: rotate(-45deg) translate(-30px, 30px);opacity: 0;}
	100% {opacity: 0;}
}
.scroll .text{font-size: 2rem;font-weight: bold;color: #E61064;}

/* onayami */
#onayami{background-image:url("images/onayami_bg.jpg");background-position:center;}
#onayami ul li{background-color:#fff;padding:5px 10px;border-radius:10px;}

/* merit */
#merit{background-image: linear-gradient(45deg, #018979 25%, transparent 25%, transparent 50%, #018979 50%, #018979 75%, transparent 75%, transparent);background-size: 20px 20px;background-color: #008c7b;}
#merit h2{color:#fff;}
.note {background-color: #f9f9f9; padding: 20px;border: 1px solid #ddd;border-radius: 5px;  background-image: linear-gradient(#eee 1px, transparent 1px); background-size: 100% 1em;line-height: 2em;}
.note ul li{font-weight:bold;}


/* contents */
#contents{background-color:#008c7b;color:#fff;}

/* gaiyo */
#gaiyo table{width:100%;}
#gaiyo table th {background-color:#4DB7C3;color:#ffffff;text-align:center;width:10%;padding:10px;margin:5px;vertical-align:middle;}
#gaiyo table td {width:90%;padding:10px 15px;border:1px solid #4DB7C3;vertical-align:middle;}
#gaiyo iframe { margin:20px 0 0 0;}

/* teacher */
#teacher .d-flex .w-70 img{width:60vw;position:relative;right:0px;}
.youtube {width: 100%;aspect-ratio: 16 / 9;}
.youtube iframe {width: 100%;height: 100%;}


/* twitter */
#twitter {text-align:center;}
#twitter > div {margin:0 auto;}

/* count */
#count {padding: 0;background-color: #4db7c3;text-align: center;}


/* photo */
@keyframes infinity-scroll-left {
  from {transform: translateX(0);}
  to {transform: translateX(-100%);}
}
_:-ms-lang(x)::-ms-backdrop,
.d-demo {display: -ms-grid;overflow: hidden;}
.d-demo__wrap { display: flex; overflow: hidden;}
.d-demo__list { display: flex; list-style: none;}
.d-demo__list--left{animation :infinity-scroll-left 5s infinite linear 0.5s both;}
.d-demo__item {width: calc(100vw / 6);margin:0 5px;}
.d-demo__item > img{ width: 100%;border-radius:10px;}



/* question */
#question {background-image: url(images/question_bg.png);padding: 0;margin-top:100px;}
#question img:nth-of-type(1) {float: left;margin-top: -60px;}
#question img:nth-of-type(2) {padding: 25px 0 25px 4%;}
#question p {padding-left: 32%;font-size: 90%;}


/* order */
#order {padding-top: 0;padding-bottom:0px;background-color:#f5f5f5;}
#order h2 {text-align: center;background-image:url('./images/order_background.png');background-repeat: repeat;padding:20px 0;  background-position:center;background-size: cover;}
#order > div {width:100%;padding:30px 0;}
form table tr {height:100px;}
form table th {width:15%;font-size:100%;vertical-align:middle;}
form table td {vertical-align:middle;}
input[type=radio],input[type=checkbox] {display: none;}
input[type=radio]:checked + label,input[type=checkbox]:checked + label {background: #333;color: #ffffff; /* マウス選択時のフォント色を指定する */font-weight:bold;}
label {
  display: inline-block; /* ブロックレベル要素化する */
  width: 130px; /* ボックスの横幅を指定する */
  color: #333333; /* フォントの色を指定 */
  text-align: center; /* テキストのセンタリングを指定する */
  line-height: 1; /* 行の高さを指定する */
  cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
  border-radius:10px; /* 角丸を指定する */
  background-color: #ffffff;
  font-size: 100%;
  margin-right: 10px;
  padding: 20px 10px;
  margin-top:10px;
  border:3px solid #FFFFFF;border:1px solid #ddd;
}
label:hover {opacity:0.8;}
input[type=text],input[type=email],input[type=tel] {width:90%;border-radius:10px;font-size:20px;padding:20px 0;border:0px;text-align:center;border:1px solid #ddd;}
input[type=submit] {width:90%;padding: 3% 0;border-radius: 30px; background-color: #65cf5b;font-size: 150%;border:0px;color: #ffffff;cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */margin:0 auto;display:block;}
button:hover {opacity:0.8;}
#order #privacy {font-size: 60%;text-align: center;padding: 20px;}
#order #privacy a {text-decoration:underline;}

/* footer */
footer {background-color: #008c7b;color: #ffffff;font-size: 50%;text-align: center;padding: 10px;}
footer a {color:#FFFFFF;text-decoration:underline;}

/* fixed_apply*/
#fixed_apply {position: fixed;bottom: 0px;width: 100%;background-color: #ffffff;text-align: center;padding: 10px 0;border-top: 1px solid #ccc;transition: opacity 0.3s ease, visibility 0.3s ease;opacity: 1;visibility: visible;}
#fixed_apply a {background-color: #D20B5A;color: #ffffff;width: 300px;margin: 0 auto;display: block;padding: 10px;font-weight: bold;font-size: 1.5rem;border-radius: 4px;}
#fixed_apply.is-hidden {
  opacity: 0;           /* 透明にする */
  visibility: hidden;   /* クリック判定もなくす */
  pointer-events: none; /* 念の為クリック無効化 */
}

@media screen and (max-width:1024px) {
  
	body { font-size:16px; }
	.container { width:95%; }
	section { padding:20px 0; }
	.pc { display: none; }
	.sp { display: block; width: 100%; }
	h2 img { width:300px;margin:0 auto; }
	article {width:100%;overflow:hidden;}
	.d-flex{display:block;}
	h2{font-size:1.5rem;}
	.w-30{width:100%;}
	.w-70{width:100%;}
    
	/* header */
	header img { width:70%;margin-left:10px; }
	header a { width:50px;margin-right:10px; }
	header span { display:none; }

	/* top */
	#top .container{width:100%;}
	#top_date{width:100%;}
	#top_date img{width:95%;}
    
	/* request */
	.request img { width:95%; margin:5px auto; }
	.request {padding: 20px 0;}
	
	/* onayami */
	#onayami h2{font-size:1.5rem;}
	
	/* merit */
	#merit .fs-5{font-size:4rem;}
	
	
	/* teacher */
	#teacher .d-flex .w-70 img{width:100%;}
    
	/* question */ 
	#question{margin-top:10px;}
	#question img:nth-of-type(2) {width: 80%;}  
	#question p {padding-left: 0;padding-bottom: 20px;width: 90%;margin: 0 auto;}
	
	/* photo */
	.d-demo__item {width: calc(100vw / 3);}
    
	/* order */
	#order table {text-align:center;}
	#order table th ,#order table td {display:block;width:100%;}
	#order table td {margin-bottom:20px;}
	label { margin-right: 2.2vw; margin-left: 2.2vw; }
  
	/* footer */
	footer {width:98%;padding:1%;}

}