@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-family: Lucida Grande,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:20px;
text-align:left;
color:#333;
background: #fafafa;
min-width:1080px;
}
@media screen and (max-width:767px){
html,body{ font-size:4vw; min-width:240px; max-width:767px;}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}
figure.img img{ padding:8px; background:#fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
@media screen and (max-width:767px){
figure.img img{ padding: 1.25vw;}
}

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important; vertical-align: bottom; border: 8px solid #fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
@media screen and (max-width:767px){
.youtube iframe{ border-width: 1.25vw;}
}


/*txt*/
p{ line-height:1.75em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.big{ font-size: 125%;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.gothic{ font-family: Lucida Grande,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;}
.mincho{ font-family: 'Noto Serif JP', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
.italic{ font-family: 'Times New Roman',serif; font-style: italic; letter-spacing:0.05em;}
.white{ color:#fff;}
.black{ color:#333;}
.gy{ color:#aaa;}
.red{ color:#c83232;}
.blue{ color:#326496;}
.bg_y{
background: -moz-linear-gradient(top, rgba(250,240,120,0) 0%, rgba(250,240,120,0) 50%, rgba(250,240,120,1) 51%, rgba(250,240,120,1) 100%);
background: -webkit-linear-gradient(top, rgba(250,240,120,0) 0%, rgba(250,240,120,0) 50%, rgba(250,240,120,1) 51%, rgba(250,240,120,1) 100%);
background: linear-gradient(to bottom, rgba(250,240,120,0) 0%, rgba(250,240,120,0) 50%, rgba(250,240,120,1) 51%, rgba(250,240,120,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00faf078', endColorstr='#00faf078',GradientType=0 );
}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a.txt_link{ color: #326496; text-decoration: underline;}
a:hover{ text-decoration: none;}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}



#wrapper{ background: #fff; max-width: 1080px; margin: auto; box-shadow:rgba(0, 0, 0, 0.2) 0 0 10px 5px;}
/*ヘッダー*/
header{ margin: 0 auto;}
header h1{ margin-bottom: 40px;}
header p{ max-width: 1000px; margin: auto;}
@media screen and (max-width:767px){
header h1{ margin-bottom: 10%;}
}

/*フッター*/
footer ul{ display: flex; align-items: center; justify-content: center;}
footer ul li:after{ content: "｜"; margin: 0 1em;}
footer ul li:last-child:after{ display: none;}
footer ul li a{ color: #326496; text-decoration: underline; font-size: 0.9rem;}
footer p.copyright{ text-align: center; font-size: 0.9rem; padding: 1em; border-top: 1px solid #333; margin-top: 2em;}
@media screen and (max-width:767px){
footer ul{ display: block; margin: 0 5%;}
footer ul li:after{ display: none;}
footer ul li{ margin-top: 1.25vw;}
footer ul li a{ display: block; padding: 0.5em 1em; background: #efefef; font-size: 1rem; text-align: center;}
footer p.copyright{ font-size: 1rem; margin-top: 5%;}
}

/*メイン*/
#content{ overflow:hidden;}
section{ width:100%; margin:80px auto 120px;}
.maincontent{ padding:0; margin:0 auto; width:1000px;}
@media screen and (max-width:767px){
section{ margin: 10% auto 20%;}
.maincontent{ padding:0; margin:0 auto; width:90%;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.1em;}
h2.tit_h2{ text-align: center; font-size: 2rem; margin-bottom: 40px; overflow: hidden;}
h2.tit_h2 strong{ background: #fff; display: inline-block; padding: 0.25em; position: relative;}
h2.tit_h2 strong:before{ content: ""; width: 50vw; height: 0; border-top: 10px double #333; position: absolute; left: calc(-50vw - 20px); top: 50%; transform: translateY(-50%);}
h2.tit_h2 strong:after{ content: ""; width: 50vw; height: 0; border-top: 10px double #333; position: absolute; right: calc(-50vw - 20px); top: 50%; transform: translateY(-50%);}
@media screen and (max-width:767px){
h2.tit_h2{ font-size: 1.6rem; margin-bottom: 5%;}
h2.tit_h2 strong:before{ border-top: 2.5vw double #333; position: absolute; left: -52.5vw;}
h2.tit_h2 strong:after{ border-top: 2.5vw double #333; right: -52.5vw;}
}


/*btn*/
figure.btn{ margin-top: 40px;}
figure.btn a{ display: flex; align-items: center; justify-content: center; margin: auto; width: 500px; height: 80px; border: 2px solid #333; font-size: 1.25rem; letter-spacing: 0.1em; font-weight: bold; padding-right: 20px; position: relative; transition: 0.3s;}
figure.btn a i{ position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
figure.btn a:hover{ background: #333; color: #fff;}
@media screen and (max-width:767px){
figure.btn{ margin-top: 5%;}
figure.btn a{ line-height: 1.25em; width: 100%; height: 17.5vw; padding-right: 2.5vw;}
figure.btn a i{ right: 2.5vw;}
}


/*cv*/
.cv{ border: 10px double #009ae0; background: #ebf0fa; padding: 40px; text-align: center; margin-top: 40px; box-shadow:rgba(0, 50, 100, 0.2) 0 0 5px 2px;}
.cv p{ font-size: 1.5rem; line-height: 1.5em; font-weight: bold; color: #009ae0;}
.cv figure.btn a{ border-color: #009ae0; background: #009ae0; color: #fff; position: relative; z-index: 1;}
.cv figure.btn a:after{ content: ""; width: 100%; height: 50%; background: rgba(255,255,255,0.1); position: absolute; left: 0; top: 0; z-index: -1;}
.cv figure.btn a:hover{ opacity: 0.7;}
@media screen and (max-width:767px){
.cv{ border: 1.25vw double #009ae0; padding: 2.5%; margin-top: 10%;}
.cv p{ font-size: 1.2rem;}
}


/*arrow*/
figure.arrow{ margin: 40px auto;}
figure.arrow i{ font-size: 4rem;}
@media screen and (max-width:767px){
figure.arrow{ margin: 7.5% auto;}
}


/*movie*/
.movie{ margin: 40px auto;}
@media screen and (max-width:767px){
.movie{ margin: 7.5% auto;}
}


/*about*/
#about{ margin: 40px auto;}
#about dl dt{ background: #333; color: #fff; text-align: center; font-size: 1.5rem; letter-spacing: 0.1em; font-weight: bold; padding: 0.5em;}
#about dl dd{ border: 4px solid #333; border-top: none; padding: 20px;}
#about dl dd ul li{ padding: 0.5em 0.5em 0.5em 1.75em; border-bottom: 2px dotted #333; font-size: 1.25rem; line-height: 1.5em; font-weight: bold; position: relative;}
#about dl dd ul li:first-child{ border-top: 2px dotted #333;}
#about dl dd ul li i{ position: absolute; left: 0.5em; top: 0.5em; line-height: 1.5em;}
@media screen and (max-width:767px){
#about{ margin: 7.5% auto;}
#about dl dt{ font-size: 1.25rem;}
#about dl dd{ padding: 2.5%;}
#about dl dd ul li{ font-size: 1rem; letter-spacing: -0.0125em;}
#about dl dd ul li i{ position: absolute; left: 0.5em; top: 0.5em; line-height: 1.5em;}
}


/*zu*/
.zu{ margin: 80px auto;}
.zu h3{ color: #06ad7f; font-size: 1.4rem; border-top: 4px solid #06ad7f; border-bottom: 4px solid #06ad7f; padding: 0.5em 0; margin-bottom: 40px; text-align: center;}
.zu figure{ margin: 40px auto;}
.zu figure img{ max-width: 800px;}
@media screen and (max-width:767px){
.zu{ margin: 15% auto;}
.zu h3{ font-size: 1.25rem; margin-bottom: 5%;}
.zu figure{ margin: 5% auto;}
.zu figure img{ max-width: 100%;}
}


/*voice*/
.voice{ margin: 40px auto;}
.voice ul li{ border: 4px solid #333; padding: 20px 40px 40px; margin: 40px auto;}
.voice ul li p{ background: #fafafa; padding: 20px;}
@media screen and (max-width:767px){
.voice{ margin: 7.5% auto;}
.voice ul li{ padding: 0 2.5% 2.5%; margin: 7.5% auto;}
.voice ul li p{ padding: 2.5%; font-size: 0.9rem;}
}


/*project*/
.project{ margin: 60px auto;}
.project h3{ background: #fae164; border: 10px double #333; text-align: center; font-size: 1.6rem; padding: 0.5em; margin-bottom: 20px;}
.project figure.img{ margin: 20px auto;}
.project figure.img img{ max-width: 800px;}
@media screen and (max-width:767px){
.project{ margin: 10% auto;}
.project h3{ border: 1.25vw double #333; font-size: 1.25rem; margin-bottom: 5%;}
.project figure.img{ margin: 5% auto;}
.project figure.img img{ max-width: 100%;}
}
.project .project_img{ background: #fafafa; padding: 40px; margin: 40px auto;}
.project .project_img h4{ background: #009ae0; color: #fff; text-align: center; font-size: 1.6rem; padding: 0.5em; margin-bottom: 40px; position: relative; z-index: 1;}
.project .project_img h4:after{ content: ""; width: 100%; height: 50%; background: rgba(255,255,255,0.1); position: absolute; left: 0; top: 0; z-index: -1;}
.project .project_img h4 small{ font-size: 75%;}
.project .project_img p.att{ text-align: right; font-size: 0.8rem; margin-top: 1em;}
@media screen and (max-width:767px){
.project .project_img{ padding: 2.5%; margin: 7.5% auto;}
.project .project_img h4{ font-size: 1.25rem; margin-bottom: 5%;}
.project .project_img p.att{ text-align: right; font-size: 0.8rem; margin-top: 1em;}
}


/*step*/
#step{ background: url("../images/step_bg.png"); padding: 40px; margin: 40px auto;}
#step h3{ text-align: center; margin-bottom: 80px;}
#step ul li{ margin: 0 auto 160px; text-align: center; position: relative;}
#step ul li:after{ content: ""; width: 0; height: 120px; border-left: 8px dotted #1fc5ac; position: absolute; left: calc(50% + 4px); bottom: -140px; transform: translateX(-50%);}
#step ul li:last-child{ margin-bottom: 0;}
#step ul li:last-child:after{ display: none;}
@media screen and (max-width:767px){
#step{ padding: 5%; margin: 10% auto; background-size: 3.75vw}
#step h3{ width: calc(100% + 10vw); margin: 0 0 7.5% -5vw;}
#step ul li{ margin: 0 auto 20vw;}
#step ul li:after{ height: 15vw; border-left: 2.5vw dotted #1fc5ac; left: calc(50% + 0.625vw); bottom: -17.5vw;}
}

/*step_cont*/
.step_cont h4{ font-size: 1.5rem; border-left: 10px solid #333; padding-left: 20px; margin: 80px auto 20px;}
.step_cont_box{ margin: 40px auto;}
.step_cont_box dl dt{ padding: 40px;}
.step_cont_box dl dt h3{ text-align: center; margin-bottom: 40px;}
.step_cont_box dl dt figure img{ max-width: 800px;}
.step_cont_box dl dd{ padding: 40px;}
@media screen and (max-width:767px){
.step_cont h4{ font-size: 1.25rem; border-left: 2.5vw solid #333; padding-left: 2.5vw; margin: 15% auto 5%;}
.step_cont_box{ margin: 10% auto;}
.step_cont_box dl dt{ padding: 5%;}
.step_cont_box dl dt h3{ width: calc(100% + 5vw); margin: 0 0 5% -2.5vw;}
.step_cont_box dl dt figure img{ max-width: 90%;}
.step_cont_box dl dd{ padding: 5% 2.5%;}
}
.step_cont_box#step01 dl dt{ background: url("../images/step01_bg.png");}
.step_cont_box#step01 dl dd{ border: 8px solid #eb4345; background: #ffe3e0;}
.step_cont_box#step01 dl dd ul li{ margin-bottom: 40px;}
.step_cont_box#step01 dl dd ul li:last-child{ margin-bottom: 0;}
@media screen and (max-width:767px){
.step_cont_box#step01 dl dt{ background-size: 3.75vw;}
.step_cont_box#step01 dl dd{ border-width: 1.25vw;}
.step_cont_box#step01 dl dd ul li{ margin-bottom: 5%;}
}
.step_cont_box#step02 dl dt{ background: url("../images/step02_bg.png");}
.step_cont_box#step02 dl dd{ border: 8px solid #2966e3; background: #eef1fa;}
.step_cont_box#step02 dl dd h5{ display: inline-block; background: #fff; color: #2966e3; font-size: 1.5rem; border-left: 10px solid #2966e3; padding: 0.25em 20px; margin-bottom: 40px;}
@media screen and (max-width:767px){
.step_cont_box#step02 dl dt{ background-size: 3.75vw;}
.step_cont_box#step02 dl dd{ border-width: 1.25vw;}
.step_cont_box#step02 dl dd h5{ font-size: 1rem; border-width: 1.25vw; padding: 0.25em 2.5vw; margin-bottom: 5%;}
}
.step_cont_box#step03 dl dt{ background: url("../images/step03_bg.png");}
.step_cont_box#step03 dl dd{ border: 8px solid #f4743b; background: #f7e9e4;}
.step_cont_box#step03 dl dd ul li{ margin-bottom: 40px;}
.step_cont_box#step03 dl dd ul li:last-child{ margin-bottom: 0;}
.step_cont_box#step03 dl dd h5{ display: inline-block; background: #fff; color: #f4743b; font-size: 1.5rem; border-left: 10px solid #f4743b; padding: 0.25em 20px; margin-bottom: 40px;}
@media screen and (max-width:767px){
.step_cont_box#step03 dl dt{ background-size: 3.75vw;}
.step_cont_box#step03 dl dd{ border-width: 1.25vw;}
.step_cont_box#step03 dl dd h5{ font-size: 1rem; border-width: 1.25vw; padding: 0.25em 2.5vw; margin-bottom: 5%;}
.step_cont_box#step03 dl dd ul li{ margin-bottom: 5%;}
}
.step_cont_box#step04 dl dt{ background: url("../images/step04_bg.png");}
.step_cont_box#step04 dl dd{ border: 8px solid #06a67a; background: #c3ebe0;}
.step_cont_box#step04 dl dd h5{ display: inline-block; background: #fff; color: #06a67a; font-size: 1.5rem; border-left: 10px solid #06a67a; padding: 0.25em 20px; margin-bottom: 40px;}
@media screen and (max-width:767px){
.step_cont_box#step04 dl dt{ background-size: 3.75vw;}
.step_cont_box#step04 dl dd{ border-width: 1.25vw;}
.step_cont_box#step04 dl dd h5{ font-size: 1rem; border-width: 1.25vw; padding: 0.25em 2.5vw; margin-bottom: 5%;}
}
.step_cont_box#step05 dl dt{ background: url("../images/step05_bg.png");}
.step_cont_box#step05 dl dd{ border: 8px solid #f26479; background: #fae1e6;}
@media screen and (max-width:767px){
.step_cont_box#step05 dl dt{ background-size: 3.75vw;}
.step_cont_box#step05 dl dd{ border-width: 1.25vw;}
}
.step_cont figure.yoruaka{ margin: 40px auto;}
@media screen and (max-width:767px){
.step_cont figure.yoruaka{ margin: 5% auto;}
}


.matome{ background: #fff2cc; padding: 40px; margin: 40px auto;}
.matome h4{ text-align: center; font-size: 1.5rem; margin-bottom: 20px;}
.matome ul li{ padding: 0.5em 0.5em 0.5em 1.75em; font-weight: bold; font-size: 1.2rem; line-height: 1.5em; border-bottom: 2px dotted #333; position: relative;}
.matome ul li:first-child{ border-top: 2px dotted #333;}
.matome ul li i{ position: absolute; left: 0.5em; top: 0.5em; line-height: 1.5em;}
.matome p{ font-size: 1rem; line-height: 1.5em; margin-top: 1em; padding-left: 1.25em; position: relative;}
.matome p:before{ content: "※"; position: absolute; left: 0; top: 0;}
@media screen and (max-width:767px){
.matome{ padding: 2.5%; margin: 7.5% auto;}
.matome h4{ font-size: 1.1rem; letter-spacing: 0; margin-bottom: 5%;}
.matome ul li{ font-size: 0.9rem; letter-spacing: -0.025em;}
.matome ul li span{ font-size: 60%;}
.matome p{ font-size: 0.66rem;}
}


/*menta*/
#menta{ background: url("../images/menta_bg.png"); padding: 40px; margin: 40px auto;}
#menta h3{ text-align: center; margin-bottom: 40px;}
#menta ul li{ text-align: center;}
#menta ul li.arrow{ margin: 40px auto;}
@media screen and (max-width:767px){
#menta{ background-size: 3.75vw; padding: 5%; margin: 7.5% auto;}
#menta h3{ margin-bottom: 7.5%;}
#menta ul li.arrow{ margin: 5% auto;}
#menta ul li.arrow img{ height: 15vw;}
}


/*price*/
#price{ border: 4px solid #70ad47; background: #e2f0d9; padding: 40px; margin: 40px auto; border-radius: 40px; text-align: center;}
#price p{ font-size: 2rem; letter-spacing: 0.1em; line-height: 1em; font-weight: bold;}
#price p strong{ display: inline-block; font-size: 200%; line-height: 1.25em;}
@media screen and (max-width:767px){
#price{ padding: 5%; margin: 7.5% auto; border-radius: 5vw;}
#price p{ font-size: 1.5rem; letter-spacing: 0;}
#price p strong{ font-size: 175%;}
}


/*return*/
.return h4{ margin: 40px auto 10px; border-left: 10px solid #333; border-bottom: 2px solid #333; padding: 0.25em 10px;}
.return figure{ margin: 20px auto;}
@media screen and (max-width:767px){
.return h4{ letter-spacing: 0; margin: 7.5% auto 2.5%; border-left: 1.25vw solid #333; padding: 0.25em 2.5vw;}
.return figure{ margin: 5% auto;}
}


/*form*/
#form .form_list{ margin-bottom: 40px;}
#form .form_list ul{ display: flex; width: calc(100% + 20px); margin-left: -10px;}
#form .form_list ul li{ width: calc(33.33% - 20px); margin: 0 10px;}
#form .form_list ul li p{ text-align: center; font-size: 0.9rem; line-height: 1.5em; margin-top: 0.5em;}
#form .att ul li{ font-size: 0.8rem; padding-left: 1.25em; margin: 0.5em auto; position: relative;}
#form .att ul li:before{ content: "※"; position: absolute; left: 0; top: 0;}
@media screen and (max-width:767px){
#form .form_list{ margin-bottom: 7.5%;}
#form .form_list ul{ display: block; width: 100%; margin-left: 0;}
#form .form_list ul li{ width: 100%; margin: 10% auto;}
#form .form_list ul li p{ font-size: 1.1rem;}
#form .att ul li{ font-size: 0.9rem;}
}





@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}


/*----------------- socueus 追加CSS -----------------*/
/* .flex */
.flex {
	display: flex;
	flex-wrap: wrap;
}
.center {
	text-align: center;
}

/* .book（著書） */
.book {
	margin: 10px auto;
	padding: 0;
}
.voice .book .flex {
	width: 100%;
	margin: 20px auto 0 auto;
	padding: 0;
}
.voice .book .flex li {
	width: 25%;
	flex-basis: 25%;
	margin: 0;
	padding: 0 10px;
	border: 0;
}

/* .sponsorship（協賛） */
.sponsorship {
	margin: 30px auto;
	padding: 30px 0 0 0;
	font-size: 80%;
	border-top: 1px solid #333;
}
.sponsorship .flex {
	width: 80%;
	flex-wrap: nowrap;
	margin: 0 auto;
	padding: 0;
}
.sponsorship li {
	width: 25%;
	flex-basis: 25%;
	margin: 0;
	padding: 0 15px;
	border: 0;
}
footer .sponsorship ul li:after {
	content: none;
}

/* SP */
@media screen and (max-width:767px){

	/* .book（著書） */
	.voice .book .flex li {
		width: 50%;
		flex-basis: 50%;
	}
	.voice .book .flex li:nth-child(n+3) {
		padding-top: 15px;
	}
	/* .sponsorship（協賛） */
	footer .sponsorship li a {
		margin: 0;
		padding: 0;
		background: none;
		text-decoration: none;
	}
	.sponsorship li {
		padding: 0 5px;
	}

}