@charset "utf-8";
/* ====== size table =====================================================
 10px = 77%     11px = 85%     12px = 93%   13px = 100%    14px = 108%
 15px = 116%    16px = 123.1%  17px = 131%  18px = 138.5%  19px = 146.5%
 20px = 153.9%  21px = 161.6%  22px = 167%  23px = 174%    24px = 182%
======================================================================= */

/* --------------------------------------------------
	reset
-------------------------------------------------- */
* { margin: 0; padding: 0;}

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,
form, 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;
}

img{ vertical-align: bottom;}
ul{ list-style: none;}
ul li{ list-style-type: none;}



/*		font-style
-------------------------------------------------- */
body {
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
	font-size: 13px;
	*font-size:small;
	*font:x-small;
	line-height: 1.6;
}
input, textarea {font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}

/* for IE */
*:first-child+html body { font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}
* html body { font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}

a { color:#036958; text-decoration:none;}
a:link   {}
a:visited{}
a:hover  { text-decoration: underline;}
a:active { text-decoration: underline;}
em{ font-style: normal;}


/*		utility
-------------------------------------------------- */
.fL{float:left;}
.fR{float:right;}
.cf{ /zoom: 1; clear: both;}
.cf:after{ content: ''; display: block; clear: both;}

.pc{ display: block;}
.sp{ display: none;}
@media all and (max-width: 769px) {
	.pc{ display: none !important;}
	.sp{ display: block;}
}

.btn{ display: block; cursor: pointer;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; box-shadow: 0 1px 3px #333;
}
.btn img{ width: 100%;}
.btn:hover{ opacity: 0.7;}

.btn-hd {
  width: 100%; /* 画面幅いっぱいに広げる */
  display: flex;
  justify-content: center;
}

.btn-hd .scrl.btn {
	width: 500px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	overflow: hidden;
	box-sizing: border-box;
	-moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  box-shadow: 0 1px 3px #333;
}

.btn-hd .scrl.btn img {
	width: 100%;
	height: auto;
}

.btn-hd .scrl.btn:hover {
	opacity: 0.7;
}


/*		Header
-------------------------------------------------- */
#hd { overflow: hidden; width: 100%; position: relative; z-index: 100; padding: 5px 0; background: #fff; box-shadow: 0 0 5px #333;}
#hd.fixed{ position: fixed;
-webkit-animation: move 1s ease 0s 1 alternate;
	 -moz-animation: move 1s ease 0s 1 alternate;
	  -ms-animation: move 1s ease 0s 1 alternate;
		 -o-animation: move 1s ease 0s 1 alternate;
}
#hd .hd-shadow{ width: 100%; background: #fff; box-shadow: 0 0 5px 0 #333;}
#hd .inner-hd { width: 98%; max-width: 1000px; margin: auto; padding: 5px 0;}
#hd .inner-hd h2{ width: 400px; float: left;}
#hd .inner-hd .btn-hd { width: 450px; float: right; }
#hd .inner-hd .btn-hd img{ width: 100%; border-radius: 7px;}
@media all and (max-width: 960px) {
	#hd .inner-hd .btn-hd {max-width: 40%;  float: right; margin-right: 15px; margin-top: 5px;}
}
@media all and (max-width: 769px) {
	#hd .inner-hd .btn-hd { width: 80%; max-width: 376px; float: none; margin:0 auto;}
}
@media all and (max-width: 481px) {
	#hd .inner-hd { width: 95%;}
/*
	#hd .inner-hd h2{ width: 285px;}
	#hd .inner-hd h2 img{ width: 100%;}
*/
	.wrap{ padding-top: 0px;}
}
@-webkit-keyframes move {
	0% { top: -100px; opacity: 0;}
 100%{ top: 0px; opacity: 1;}
}
@-moz-keyframes move {
	0% { top: -100px; -moz-opacity: 0;}
 100%{ top: 0px;	-moz-opacity: 1;}
}
@-ms-keyframes move {
	0% { top: -100px; opacity: 0; -ms-filter: "alpha(opacity=0)"; filter: alpha(opacity=0);}
 100%{ top: 0px; opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); }
}
@keyframes move {
	0% { top: -100px; opacity: 0;}
 100%{ top: 0px; opacity: 1;}
}



/*		Footer
-------------------------------------------------- */
#ft{ position: relative; padding: 10px 0; background: #434343;}
#ft address{ color: #fff; font-size: 10px; font-style: normal; text-align: center;}

.seminar dt {
	position: relative;
	background-color: red;
	margin-bottom: 0px;
}

.page {
	position: relative;
	margin-bottom: 50px;
}

#pagetop{  
	position: absolute;
	display: block;
	width: 100px;
	height: 78px;
	right: 2%;
	bottom: 0;
	transform: translateY(50%);
}

@media all and (max-width: 769px) {
	
	.page {
		margin-bottom: 0px;
	}	
	#pagetop { display: none;}
}



/*		Contents
-------------------------------------------------- */
/*	Common parts	*/
.bg {
 background-size: 15px 15px;
}
.bg-gy{ background: #f0f0f0;}
}

.stl, .q{
 font-family: "A-OTF 新ゴ Pro",A-OTF Shin Go Pro,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.stl{
	font-size: 32px; font-weight: 900; text-align: center; vertical-align: middle;
}
.stl:before,
.stl:after { content: ''; display: inline-block; width: 36px; height: 87px; vertical-align: middle;
 border: solid 3px #353535;}
.stl:before{ border-right: none;}
.stl:after { border-left: none;}
.stl span.bloc { display: inline-block; vertical-align: middle; margin: 0 15px;}
.stl span.color{ color: #01a488;}
.tC{ text-align: center !important;}

.entryForm{ width: 100%; padding: 55px 0 65px; overflow: hidden; background-color: #f0f0f0;}
.entryForm .inner{ position: relative; box-sizing: border-box;
 width: 96%; max-width: 980px; margin: auto; padding: 20px; background: #f0f0f0;
}
.entryForm .inner:before,
.entryForm .inner:after { content: ""; position: absolute; bottom: -150px; display: block;}
.entryForm .inner:before{ width: 290px; height: 310px; background: url(../img/man.png) no-repeat 50% 100%;
 left: -100px;}
.entryForm .inner:after { width: 280px; height: 310px; background: url(../img/woman.png) no-repeat 50% 100%;
 right: -80px;
}
.entryForm h2{ margin-bottom: 20px; text-align: center;}
.entryForm p { margin-bottom: 10px; text-align: center;}
.entryForm input[type="text"]{ box-sizing: border-box; display: block;
 width: 75%; max-width: 508px; height: 50px; line-height: 50px; margin: 0 auto 15px; padding-left: 20px;
 -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: solid 1px #ddd;
 font-size: 16px;
}
.entryForm .btn { max-width: 508px; margin: auto;}:
.entryForm .btn input{ width: 100%; vertical-align: bottom;}
.entryForm .btn input{border-radius: 6px 6px 0 0;}
.entryForm .btn img{border-radius:6px;}

.check li{ position: relative; margin-bottom: 25px; padding-left: 60px; font-size: 26px; font-weight: 700;}
.check li:before{ content: ''; display: block; width: 39px; height: 37px;
	background: url(../img/icn-check.png) no-repeat 50% 50%; background-size: 100% 100%;
	position: absolute; top: -2px; left: 0;
}
.btn-line-cmt{
	margin: 20px 0 0;
    font-size: 25px;
    font-weight: 600;
    color: #1bb744;
}
@media all and (max-width: 960px) {
	.stl{ line-height: 1.2;}

	.entryForm{ padding: 25px 0;}
	.entryForm .inner:before{ display: none;}
	.entryForm .inner:after { width: 200px; height: 222px; background-size: 100% auto; bottom: -25px; right: -20px;}

	.entryForm h2 img{ width: 100%; max-width: 712px;}
	.entryForm p { margin-bottom: 30px;}
	.entryForm input[type="text"]{ margin: 0 0 15px;}
	.entryForm .btn { margin: 0; max-width: none; }

	.check { width: 90%; margin: auto;}
	.check li{ line-height: 1.25;}
}
@media all and (max-width: 960px) {
	.stl{ font-size: 30px;}
	.stl span.bloc { margin: 0 10px;}
	.entryForm .inner:after { width: 21%; bottom: -90px;}
	.entryForm h2 img,
	.entryForm p img { width: 100%;}
	.entryForm input[type="text"]{ max-width: 80%;}
	.entryForm .btn input{border-radius: 6px 6px 0 0;}
	.entryForm .btn img{border-radius:6px;}
}
@media all and (max-width: 768px) {
	.entryForm .btn {max-width: none; width: 100%;}
	.btn-line-cmt {font-size: 16px; text-align: left!important; margin: 10px 0 0;
}
}
@media all and (max-width: 481px) {
	.stl:before,
	.stl:after { width: 24px; height: 72px;}

	.entryForm{ padding: 18px 0;}
	.entryForm .inner { padding: 50px 10px;}
	.entryForm .inner:after { width: 120px; height: 133px; bottom: -66px; right:-30px;}
	.entryForm p { margin-bottom: 15px;}
	.entryForm input[type="text"]{width: 72%; height: 40px; line-height: 40px; padding-left: 8px; font-size: 14px;}
	.check li{ margin-bottom: 15px; padding-left: 30px; font-size: 19px; line-height: 1.4;}
	.check li:before{ width: 22px; height: 20px;}
}

/*	section	*/
.kv { width: 100%; border-bottom:}
.kv img{ width: 100%;}

.seminar{ width: 100%;}
.seminar dl{ width: 100%; position: relative;}
.seminar dl dt { width: 100%; }
.seminar dl dt img { width: 100%;}
.seminar dl dd { width: 100%; position: absolute; bottom: 0; padding: 10px 0; background: rgba(0,0,0,.8);
 color: #fff; font-size: 24px; font-weight: 700; text-align: center;
}
@media all and (max-width: 481px) {
	.seminar dl dd { padding: 8px 0; font-size: 16px;}
}

#point3 { padding: 80px 0 100px;}
#point3 .stl{ margin-bottom: 65px;}
#point3 .stl span.color { font-size: 40px;}
#point3 .stl span.color em{ font-size: 64px;}
#point3 ul { font-size: 0; text-align: center;}
#point3 ul li { position: relative; box-sizing: border-box; vertical-align: top;
 display: inline-block; width: 30%; max-width: 320px; margin: 0 5px; padding-top: 8px;
}
#point3 ul li img.tag{ position: absolute; left: 10px; top: 0px; z-index: 10;}
#point3 ul li dl{ position: relative; box-sizing: border-box; width: 100%; padding: 60px 0 20px; z-index: 1;
 box-shadow: 0 2px 2px 1px #999;
 background: #fff;
}
#point3 ul li dl dt { width: 80%; margin: auto; text-align: center;}
#point3 ul li dl dt img{ width: 100%;}
#point3 ul li dl dd { box-sizing: border-box; height: 4em; font-size: 18px; font-weight: 700; line-height: 1.4;}
#point3 ul li:first-child dl dd{ padding-top: 0px;}
@media all and (max-width: 960px) {
	#point3 { padding: 30px 0 50px;}
	#point3 .stl{ font-size:30px; margin-bottom: 40px;}
	#point3 .stl:before,
	#point3 .stl:after { vertical-align: bottom;}
	#point3 .stl span.color em{ font-size: 53px;}
	#point3 .stl span.color { font-size: 32px;}
	#point3 ul li dl dd { height: auto; font-size: 25px; line-height: 1.4; text-align: center;}
}
@media all and (max-width: 641px) {
	#point3 .stl span.color { font-size: 36px;}
	#point3 .stl span.color em{ font-size: 70px;}
	#point3 ul { width: 95%; margin: auto;}
	#point3 ul li { display: block; width: 100%; max-width: 100%; margin: 0 auto 15px;}
	#point3 ul li dl{ padding: 40px 0; padding-left: 45%;}
	#point3 ul li:first-child dl { padding: 65px 0; padding-left: 45%;}
	#point3 ul li dl dt{ position: absolute; left: 0; bottom: 10%; width: 42%; text-align: center;}
	#point3 ul li dl dt img{ width: 85%;}
	#point3 ul li dl dd { height: auto; font-size: 28px; line-height: 1.4; text-align: left;}
	#point3 ul li:first-child dl dd{ padding-top: 0;}
}
@media all and (max-width: 481px) {
	#point3 .stl span { font-size: 18px;}
	#point3 .stl span.color { font-size: 21px;}
	#point3 .stl span.color em{ font-size: 48px;}
	#point3 ul li img.tag{ width: 60px; top: 2px;}
	#point3 ul li:first-child dl { padding: 45px 0; padding-left: 45%;}
	#point3 ul li dl dd { font-size: 20px;}
}



#qa { padding: 65px 0;}
#qa h2{ position: relative; width: 98%; max-width: 980px; margin: 0 auto; padding-bottom: 55px;
 font-size: 45px; line-height: 1.2; text-align: center;
}
#qa h2 span{ color: #01a488;}
#qa h2:before{ content: ''; display: block; width: 120px; height: 172px; position: absolute; right: 10px; bottom: 0;
 background: url(../img/qa-human.png) no-repeat 50% 0; background-size: 100% auto;
}
#qa .inner{ box-sizing: border-box; width: 98%; max-width: 980px; margin: auto; padding: 15px;
 -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;
}
#qa .inner ul { box-sizing: border-box; width: 100%; padding: 15px 0px; overflow: hidden;
 background: #f1f1f1; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;
}
#qa .inner ul li{ width: 95%; margin: auto; padding: 18px 0; border-top: solid 1px #dadada;}
#qa .inner ul li:first-child,
#qa .inner ul li:last-child { border-top: none;}
#qa .inner ul li:last-child { padding: 40px 0 30px;}
#qa .inner ul li span.q{ display: inline-block; width: 70px; height: 70px; margin-right: 20px; background: #01a58a;
 -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
 color: #fff; font-size: 24px; font-weight: 700; text-align: center; line-height: 70px; vertical-align: middle;
}
#qa .inner ul li em{ display: inline-block; font-size: 40px; font-weight: 700; line-height: 70px; vertical-align: middle;}
#qa .inner ul li ul{ font-size: 0; margin-top: 25px; width: 100%; padding: 0; background: #fff;}
#qa .inner ul li ul li{ box-sizing: border-box; display: inline-block; width: 50%; border: none;
 font-size: 30px; font-weight: 700; line-height: 1.2; text-align: center; vertical-align: top;
}
#qa .inner ul li ul li:first-child{ padding: 0 0 20px; border-right: solid 1px #dadada;}
#qa .inner ul li ul li:last-child { padding: 0 0 20px;}
#qa .inner ul li ul li span{ display: block; padding: 2px 0; color: #fff; font-size: 23px;}
#qa .inner ul li ul li:first-child span{ background: #ea0f52;}
#qa .inner ul li ul li:last-child span { background: #0068b7;}
#qa .inner ul li ul li img{ display: block; width: 90%; max-width: 250px; margin: 15px auto;}
#qa .inner ul li .btn{ display: block; width: 100%; max-width: 800px; margin: auto;}
#qa .inner .btn img{ border-radius: 10px;}
@media all and (max-width: 960px) {
	#qa h2{ margin-left: -50px; font-size: 34px;}
}
@media all and (max-width: 768px) {
	#qa h2{ margin-left: -50px; font-size: 34px;}
	#qa { padding: 30px 0;}
	#qa h2{ padding-bottom: 20px;}
	#qa .inner ul li:last-child { padding: 20px 0;}
	#qa .inner ul li ul{ margin-top: 15px;}
	#qa .inner ul li .btn{ max-width: 560px;}
	#qa .inner ul li .btn img{ width: 100%;}
}
@media all and (max-width: 641px) {
	#qa h2{ margin-left: -50px; font-size: 36px;}
	#qa h2:before{ right: 0;}
	#qa .inner ul { padding: 10px 0;}
	#qa .inner ul li { padding: 8px 0 18px;}
	#qa .inner ul li ul li { font-size: 21px;}
	#qa .inner ul li ul li:first-child{ padding: 0 0 15px;}
	#qa .inner ul li ul li:last-child { padding: 0 0 15px;}
	#qa .inner ul li ul li span{ font-size: 20px;}
}
@media all and (max-width: 481px) {
	#qa h2{ margin-left: -35px; font-size: 24px;}
	#qa h2:before{ width: 80px; height: 115px; right: -10px;}
	#qa .inner ul li span.q{ width: 40px; height: 40px; font-size: 20px; line-height: 40px;}
	#qa .inner ul li em{ font-size: 24px; line-height: 40px;}
	#qa .inner ul li ul li { font-size: 13px;}
	#qa .inner ul li ul li span{ font-size: 16px;}
}


#instructor { padding: 50px 0 100px;}
#instructor .stl span.color{ font-size: 56px;}
#instructor .inner{ width: 95%; max-width: 980px; margin: auto; padding-top: 65px;}
#instructor .cf { margin-bottom: 50px;}
#instructor .cf dl { width: 55%; float: left; padding-top: 40px;}
#instructor .cf dl dt { position: relative; margin-bottom: 40px; padding-bottom: 15px;
 font-size: 36px; font-weight: 700; line-height: 1.4; text-align: center;
}
#instructor .cf dl dt:after{ content: ''; display: block; width: 130px; height: 3px; background: #000;
 position: absolute; bottom: 0; left: 50%; margin-left: -65px;
}
#instructor .cf dl dt span { display: block; color: #01a58a; font-size: 20px;}
#instructor .cf dl dd { text-align: center; }
#instructor .cf dl dd img{ width: 90%; max-width: 435px;}
#instructor .cf figure{ display: block; width: 44%; float: right; height: 450px; text-align: center; overflow: hidden;}
#instructor .cf figure img{ width: 100%;}
#instructor p { margin-bottom: 30px; font-size: 20px; letter-spacing: 0.075rem; text-align: justify;}
#instructor p.read { margin-bottom: 70px;}
#instructor .fig{ padding: 30px 0 100px; text-align: center;}
#instructor p.tC{ margin-bottom: 0;}
#instructor p.tC img { width: 100%;}
@media all and (max-width: 769px) {
	#instructor { padding: 20px 0 30px;}
	#instructor .cf { margin-bottom: 30px;}
	#instructor .cf figure{ height: auto;}
	#instructor p.read { margin-bottom: 50px;}
	#instructor .fig{ padding: 10px 0 30px; text-align: center;}
	#instructor .fig img{ width: 90%;}
}
@media all and (max-width: 641px) {
	#instructor .inner{ padding-top: 35px;}
	#instructor .cf dl { width: 100%; float: none; margin-bottom: 20px; padding-top: 0px; text-align: center;}
	#instructor .cf dl dt { position: relative; margin-bottom: 20px; padding-bottom: 15px; font-size: 36px;}
	#instructor .cf dl dt span { margin-bottom: 5px;}
	#instructor .cf figure{ width: 80%; float: none; height: 380px; margin: auto;}
}
@media all and (max-width: 481px) {
	#instructor .stl span.color{ font-size: 40px;}
	#instructor .cf dl dt { font-size: 30px;}
	#instructor .cf dl dt span { font-size: 18px;}
	#instructor .cf figure{ height: auto; margin: auto;}
	#instructor p { margin-bottom: 15px; font-size: 16px; letter-spacing: 0;}
	#instructor p.read { margin-bottom: 30px;}
}


#voice { padding: 75px 0 100px;}
#voice .stl{ margin-bottom: 85px; line-height: 1.15;}
#voice .stl .bloc span{ font-size: 52px;}
#voice .stl .bloc span.color{ font-size: 60px;}
#voice .parts{ width: 95%; max-width: 980px; margin: 0 auto 40px;}
#voice .parts dl { width: 18%; max-width: 185px; float: right; padding-top: 85px;}
#voice .parts dl dt{ margin-bottom: 10px;}
#voice .parts dl dt img{ width: 100%;}
#voice .parts dl dd{ color: #036958; font-size: 19px; font-weight: 700; line-height: 1.4;}
#voice .parts .comment { position: relative; box-sizing: border-box; width: 80%; float: left; padding-right: 30px;}
#voice .parts .comment .box { position: relative; box-shadow: 0 2px 2px #999;}
#voice .parts .comment .box:after{ content: ''; display: block; width: 50px; height: 50px; z-index: 1;
 background: #fff; box-shadow: 1px 1px 2px #999; z-index: 1;
 position: absolute; right: -20px; top: 150px;
 -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
#voice .parts .comment .box div { position: relative; background: #fff; z-index: 2;}
#voice .parts .comment h3{ padding: 25px; background: #01a58a; color:  #fff; font-size: 30px;}
#voice .parts .comment p { padding: 25px; font-size: 20px; line-height: 1.4; letter-spacing: 0.12rem; text-align: justify;}
#voice .more.btn{ width: 80%; max-width: 490px; margin: auto;}
#voice .moreBloc{ width: 100%; display: none; opacity: 0;}
#voice .moreBloc.open{ opacity: 1; display: block;
-webkit-animation: open 1s ease 0s 1 alternate;
	 -moz-animation: open 1s ease 0s 1 alternate;
	  -ms-animation: open 1s ease 0s 1 alternate;
		 -o-animation: open 1s ease 0s 1 alternate;
}
@media all and (max-width: 960px) {
#voice .stl .bloc span{font-size: 30px;}
#voice .stl .bloc span.color{ font-size: 50px;}
}
@media all and (max-width: 769px) {
	#voice { padding: 30px 0;}
	#voice .stl{ margin-bottom: 50px;}

	#voice .parts dl { box-sizing: border-box; display: table;
	 width: 70%; max-width: 70%; float: none; margin: 0 auto 20px; padding-top: 0px;
	}
	#voice .parts dl dt{ width: 35%; max-width: 200px; display: table-cell; vertical-align: middle;}
	#voice .parts dl dt img{ width: 100%;}
	#voice .parts dl dd{ display: table-cell; vertical-align: middle; padding-left: 30px;}
	#voice .parts .comment { position: relative; box-sizing: border-box; width: 100%; float: none; padding-right: 0px;}
	#voice .parts .comment .box { position: relative; box-shadow: 0 2px 2px #999;}
	#voice .parts .comment .box:after{ display: none;}
	#voice .parts .comment h3{ line-height: 1.2;}
}
@media all and (max-width: 641px) {
	#voice .stl{ margin-bottom: 30px;}
	#voice .stl .bloc { margin: 0 20px;}
	#voice .stl .bloc span{ font-size: 30px;}
	
	#voice .parts .comment h3{ padding: 15px 20px;}
	#voice .parts .comment p { padding: 15px 20px;}
}
@media all and (max-width: 481px) {
	#voice .stl .bloc,
	#voice .stl .bloc span{ font-size: 24px;}
	#voice .stl .bloc span.color{ font-size: 48px;}
	#voice .parts dl { width: 90%; max-width: 90%;}
	#voice .parts dl dd{ padding-left: 20px;}
	#voice .parts .comment h3{ padding: 10px 15px; font-size: 20px; font-weight: normal;}
	#voice .parts .comment p { padding: 15px 15px; font-size: 16px; letter-spacing: 0;}
}
@-webkit-keyframes open {
	0% { opacity: 0;}
 100%{ opacity: 1;}
}
@-moz-keyframes open {
	0% { opacity: 0;}
 100%{ opacity: 1;}
}
@-ms-keyframes open {
	0% { opacity: 0; -ms-filter: "alpha(opacity=0)"; filter: alpha(opacity=0);}
 100%{ opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); }
}
@keyframes open {
	0% { opacity: 0;}
 100%{ opacity: 1;}
}



#online { padding: 75px 0 50px;}
#online .stl,
#online .stl span{ font-size: 45px; line-height: 1.1;}
#online ol { width: 95%; max-width: 980px; margin: 0 auto 70px; padding-top: 60px;}
#online ol li { list-style: none; margin-bottom: 25px; padding: 25px 0;}
#online ol li:nth-child(1){ background: url(../img/trouble1-fig.png) no-repeat 90% 50%; background-size: auto 100%;}
#online ol li:nth-child(2){ background: url(../img/trouble2-fig.png) no-repeat 90% 50%; background-size: auto 100%;}
#online ol li:nth-child(3){ background: url(../img/trouble3-fig.png) no-repeat 90% 50%; background-size: auto 100%;}
#online ol li:nth-child(4){ background: url(../img/trouble4-fig.png) no-repeat 90% 50%; background-size: auto 100%;}
#online ol li:nth-child(5){ background: url(../img/trouble5-fig.png) no-repeat 90% 50%; background-size: auto 100%;}
#online ol li:nth-child(6){ background: url(../img/trouble6-fig.png) no-repeat 90% 50%; background-size: auto 100%;}
#online ol li:nth-child(7){ background: url(../img/trouble7-fig.png) no-repeat 90% 50%; background-size: auto 100%;}
#online ol li:nth-child(8){ background: url(../img/trouble8-fig.png) no-repeat 90% 50%; background-size: auto 100%;}
#online ol li:last-child { margin-bottom: 0;}
#online ol li span { display: inline-block; vertical-align: middle;}
#online ol li span.icn{ width: 85px; margin-right: 45px;}
#online ol li span.icn img{ width: 100%;}
#online ol li span.txt { font-size: 35px; font-weight: 700; line-height: 1.2;}
#online div{ width: 100%; max-width: 970px; margin: 0 auto;}
#online div img{ width: 100%;}
@media all and (max-width: 769px) {
	#online { padding: 40px 0;}
	#online ol li span.icn{ margin-right: 15px;}
	#online ol li:nth-child(1),
	#online ol li:nth-child(2),
	#online ol li:nth-child(3),
	#online ol li:nth-child(4),
	#online ol li:nth-child(5),
	#online ol li:nth-child(6),
	#online ol li:nth-child(7),
	#online ol li:nth-child(8){ background-position: 100% 50%;}
	#online ol li span.txt { font-size: 30px;}
	#online div img{ width: 100%;}
}
@media all and (max-width: 641px) {
	#online .stl,
	#online .stl span{ font-size: 36px;}
	#online ol li:nth-child(1),
	#online ol li:nth-child(2),
	#online ol li:nth-child(3),
	#online ol li:nth-child(4),
	#online ol li:nth-child(5),
	#online ol li:nth-child(6),
	#online ol li:nth-child(7),
	#online ol li:nth-child(8){ background-position: 90% 5%; background-size: 45% auto;}

	#online ol li span{ display: block;}
	#online ol li span.icn { margin: 0 auto 30px 30px;}
	#online ol li span.txt { width: 90%; margin: auto;}
}
@media all and (max-width: 481px) {
	#online .stl,
	#online .stl span{ font-size: 24px; line-height: 1.4;}
	#online ol li:nth-child(1),
	#online ol li:nth-child(2),
	#online ol li:nth-child(3),
	#online ol li:nth-child(4),
	#online ol li:nth-child(5),
	#online ol li:nth-child(6),
	#online ol li:nth-child(7),
	#online ol li:nth-child(8){ background-position: 90% 5%; background-size: 55% auto;}
	#online ol li span.icn { margin: 0 auto 40px 30px;}
	#online ol li span.txt { font-size: 24px;}
}


#point { padding: 60px 0 100px;}
#point .inner { box-sizing: border-box; width: 95%; max-width: 980px;
 margin: auto; padding: 60px 50px; background: #fff;
}
#point .stl { margin-bottom: 50px;}
#point .stl span{ font-size: 38px; line-height: 1.2;}
#point ul { width: 100%; text-align: center; margin-bottom: 60px;}
#point ul li { display: inline-block; width: 45%; max-width: 400px; margin: 0 20px;}
#point ul li img{ width: 100%;}
#point p { font-size: 20px;}
#point p span{ display: block; color: #01a58a; font-size: 30px; font-weight: 700;}
#point p.tC { margin-top: 40px; font-size: 32px; font-weight: 700;}
#point p.tC span{ font-size: 42px; font-weight: 700;}
@media all and (max-width: 960px) {
	#point .stl span{ font-size: 30px;}
	#point p span{ line-height: 1.4;}
}
@media all and (max-width: 769px) {
	#point .inner { padding: 40px 15px;}
	#point ul li { display: block; width: 100%; max-width: 560px; margin: 0 auto 20px;}
	#point p.tC { line-height: 1.25;}
	#point p.tC span { margin: 10px 0;}
}
/* @media all and (max-width: 641px) {
	#point .stl span{ font-size: 30px;}
	
} */
@media all and (max-width: 481px) {
	#point { padding: 40px 0;}
	#point .stl { margin-bottom: 40px;}
	#point .stl span{ font-size: 18px; line-height: 1.4;}

	#point p { font-size: 16px;}
	#point p span{ font-size: 20px;}
	#point p.tC { font-size: 22px;}
	#point p.tC span{ font-size: 28px;}

}

#ex { padding: 80px 0 90px;}
#ex .stl { margin-bottom: 40px; font-size: 40px; line-height: 1.1;}
#ex .stl span.bloc span { font-size: 52px;}
#ex .stl span.bloc span.color { font-size: 60px;}
#ex ul{ width: 90%; max-width: 800px; margin: auto;}
#ex p.note{ box-sizing: border-box; width: 95%; max-width: 800px; margin: auto; font-size: 17px; text-indent: 60px;}
@media all and (max-width: 960px) {
	#ex { padding: 40px 0;}
	#ex .stl,
	#ex .stl span.bloc span { font-size: 32px;}
	#ex .stl span.bloc span.color { font-size: 60px;}
	#ex p.note{ font-size: 16px; text-indent: 20px;}
}
@media all and (max-width: 769px) {
	#ex .stl,
	#ex .stl span.bloc span { font-size: 40px; line-height: 1.25;}
	#ex .stl span.bloc span.color { font-size: 64px;}
}
/* @media all and (max-width: 641px) {
	#ex { padding: 40px 0;}
	#ex .stl,
	#ex .stl span.bloc span { font-size: 32px;}
	#ex .stl span.bloc span.color { font-size: 60px;}
	#ex p.note{ font-size: 16px; text-indent: 20px;}
} */
@media all and (max-width: 481px) {
	#ex .stl,
	#ex .stl span.bloc span { font-size: 20px;}
	#ex .stl span.bloc span.color { font-size: 40px;}
	#ex p.note{ font-size: 14px; text-indent: -15px; padding-left: 20px;}
}


#present { padding: 80px 0;}
#present .stl{ margin-bottom: 60px; color:  #00000;}
#present .stl:before,
#present .stl:after{ border-color:  #00000;}
#present .stl span.bloc { font-size: 34px;}
#present .stl span.bloc span{ font-size: 40px;}
#present .stl span.bloc span em { color: #01a488; font-size: 60px;}
#present ul { width: 95%; max-width: 980px; margin: 0 auto;}
#present ul li { position: relative; margin-bottom: 25px; background: #fff;}
#present ul li:last-child{ margin-bottom: 0;}
#present ul li:nth-child(1) dl{ background: url(../img/amanity1.jpg) no-repeat 98% 55%; background-size: 240px auto;}
#present ul li:nth-child(2) dl{ background: url(../img/amanity2.jpg) no-repeat 98% 90%; background-size: 240px auto;}
#present ul li:nth-child(3) dl{ background: url(../img/amanity3.jpg) no-repeat 98% 80%; background-size: 240px auto;}
.stl span.color{ color: #01a488;}

#present ul li img.tag{ position: absolute; top: -8px; left: 30px;}
#present ul li dl { box-sizing: border-box; width: 100%; padding: 15px 25px 25px 35px; box-shadow: 0 2px 3px #333;}
#present ul li dl dt{ margin-left: 90px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: solid 2px #0068b7; color: #0068b7; font-size: 40px; font-weight: 700; line-height: 1.2;}
#present ul li dl dt span{ color: #3c3c3c; font-size: 16px; line-height: 1;}
#present ul li dl dt span.note{ display: block; padding-top: 8px;}
#present ul li dl dd { padding-right: 250px; font-size: 20px; letter-spacing: 0.075rem;}
@media all and (max-width: 960px) {
	#present .stl span.bloc { font-size: 28px;}
	#present .stl span.bloc span{ font-size: 32px;}
	#present .stl span.bloc span em { font-size: 50px;}
}
@media all and (max-width: 769px) {
	#present { padding: 30px 0;}
	#present .stl{ margin-bottom: 25px;}
	#present ul li img.tag{ left: 15px;}
	#present ul li dl { padding: 15px 20px 30px;}
	#present ul li dl dt{ margin-left: 80px; font-size: 36px; text-align:center;}
	#present ul li dl dt span,
	#present ul li dl dt span.note{ display: block; padding-top: 8px;}

	#present ul li dl dd { padding-right: 235px;}
}
@media all and (max-width: 641px) {
	#present .stl span.bloc { font-size: 28px;}
	#present .stl span.bloc span{ font-size: 32px;}
	#present .stl span.bloc span em { font-size: 70px;}

	#present ul li dl	{ padding-top: 220px;}
	#present ul li:nth-child(1) dl{ background-position: 50% 3%; background-size: 60% auto;}
	#present ul li:nth-child(2) dl{ background-position: 50% 8%; background-size: 60% auto;}
	#present ul li:nth-child(3) dl{ background-position: 50% 8%; background-size: 60% auto;}
	#present ul li dl dt{ margin-left: 0px;}
	#present ul li dl dd { padding-right: 0; font-size: 18px; text-align: justify;}
}
@media all and (max-width: 481px) {
	#present .stl span.bloc { font-size: 18px;}
	#present .stl span.bloc span{ font-size: 21px;}
	#present .stl span.bloc span em { font-size: 42px;}

	#present ul li dl	{ padding-top: 150px;}
	#present ul li dl dt{ font-size: 20px;}
	#present ul li dl dd { font-size: 16px; letter-spacing: 0rem;}
}

#prof { padding: 30px 0 90px;}
#prof .stl,
#prof .stl span { font-size: 64px;}
#prof .stl { margin-bottom: 80px;}
#prof dl { width: 95%; max-width: 980px; margin: 0 auto 60px;}
#prof dl dt { width: 45%; float: right;}
#prof dl dt img { width: 100%;}
#prof dl dd { width: 52%;}
#prof dl dd.name { margin-bottom: 50px; font-size: 24px; font-weight: 700; line-height: 1.2;}
#prof dl dd.name span{ display: block; font-size: 40px;}
#prof dl dd.txt { font-size: 20px; line-height: 1.5; text-align: justify;}
#prof figure{ width: 95%; max-width: 770px; margin: auto; text-align: center;}
#prof figure img{ width: 100%;}

@media all and (max-width: 769px) {
	#prof { padding: 30px 0;}
	#prof dl dt { width: 50%;}
	#prof dl dd { width: 48%; padding-top: 15%;}

	#prof dl dd.txt { clear: both; width: 100%; padding-top: 30px;}
}
@media all and (max-width: 641px) {
	#prof .stl { margin-bottom: 0px;}
	#prof .stl,
	#prof .stl span { font-size: 48px;}
	#prof dl dd.name span{ margin: 15px 0;}
}
@media all and (max-width: 481px) {
	#prof .stl { margin-bottom: 40px;}
	#prof .stl,
	#prof .stl span { font-size: 30px;}
	#prof dl dd.name { margin-bottom: 0; font-size: 20px;}
	#prof dl dd.name span{ font-size: 30px;}
	#prof dl dd.txt { padding-top: 20px; font-size: 16px;}
}

.h1 {

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.wrap {
max-width: 900px;
margin: 0 auto;
}

.btn-add {
	margin: 40px 0;
}

.white h2 {
	width: 100%;
}

.white h2 img {
	display: block;
	margin: 0 auto;
}