@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;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-size:20px;
font-weight: 500;
text-align:left;
color:#000;
background: url("../images/bg.jpg") center top fixed;
background-size: auto 100vh;
}
@media print, screen and (min-width:769px){
html,body { font-size: calc((20/750)*480px);}
}
@media screen and (max-width:768px){
html,body { font-size: calc((20/750)*100vw);}
}

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

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:177.77% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}

/*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;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.white{ color:#fff;}
.black{ color:#333;}
.gy{ color:#aaa;}
.red{ color:#c83232;}
.blue{ color:#326496;}
.bg_y{
background: linear-gradient(to bottom, rgba(255,255,0,0) 0%, rgba(255,255,0,0) 50%, rgba(255,255,0,1) 51%, rgba(255,255,0,1) 100%);
}

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

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



/*ヘッダー*/
body{ padding-top: 60px;}
header{ position: fixed; left: 0; right: 0; top: 0; z-index: 99; background: #fff; width: 100%; min-width: 750px; margin: auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 15px;}
header h1 img{ height: 36px;}
#nav_btn{ display: flex; align-items: flex-end; justify-content: center; padding: 0; width: 40px; height: 22px; position: relative; cursor:pointer; z-index: 99;}
#nav_btn span{ display:block; height:2px; width:40px; background:#328CFF; position:absolute; left:0; right:0; top: 50%; transform: translateY(-50%); margin:auto; transition:0.3s;}
#nav_btn span:before{ content: ""; display:block; height:2px; width:100%; background:#328CFF; position:absolute; bottom:10px; transition:0.3s;}
#nav_btn span:after{ content: ""; display:block; height:2px; width:100%; background:#328CFF; position:absolute; top:10px; transition:0.3s;}
#nav_btn.active span{ background:rgba(255,255,255,0);}
#nav_btn.active span:before{ background: #fff; bottom:0; transform: rotate(22.5deg);}
#nav_btn.active span:after{ background: #fff; top:0; transform: rotate(-22.5deg);}
header nav{ position: fixed; left: 0; top: 0; width: 100%; background: url("../images/nav_bg.jpg") right top no-repeat #000; background-size: auto 100%; display: flex; align-items: center; justify-content: center; z-index: 9;}
header nav{ display: none;}
header nav ul{ width: 690px; margin: auto;}
header nav ul li{ font-size: 2.4rem; font-weight: bold; color: #fff; margin: 80px 0;}
header nav ul li a{ display: inline-block; position: relative; padding-left: 74px; transition: 0.3s;}
header nav ul li a:hover{ color: #ffcd00;}
header nav ul li a:before{ content: ""; width: 64px; height: 64px; background: url("../images/nav_ico.png") center center no-repeat; background-size: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
@media print, screen and (min-width:1081px){
body{ padding-top: 0 !important;}
header nav{ display: flex !important; opacity: 1.0 !important;}
#nav_btn{ display: none !important;}
header{ position: static; padding: 0; background: none;}
header h1{ position: fixed; left: 20px; top: 20px; padding: 10px; background: rgba(255,255,255,0.7);}
header nav{ position: fixed; left: auto; right: 0; top: 0; width: calc(50vw - 240px); height: 100vh; background: none; display: flex; align-items: center; justify-content: center; z-index: 9; transition: opacity 0.3s;}
header nav ul{ width: auto;}
header nav ul li{ font-size: 1.8rem; font-weight: bold; color: #fff; margin: 30px 0;}
header nav ul li a{ display: flex; align-items: center; justify-content: flex-start; width: 220px; height: 70px; padding-left: 60px; background: rgba(0,0,0,0.7); border-radius: 12px;}
header nav ul li a:before{ content: ""; width: 40px; height: 40px; background: url("../images/nav_ico.png") center center no-repeat; background-size: 100%; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);}
}
@media screen and (max-width:768px){
body{ padding-top: calc((60/375)*100vw);}
header{ min-width: 100%; padding: calc((12/375)*100vw) calc((15/375)*100vw);}
header h1 img{ height: calc((36/375)*100vw);}
#nav_btn{ width: calc((40/375)*100vw); height: calc((22/375)*100vw);}
#nav_btn span{ height: calc((2/375)*100vw); width: calc((40/375)*100vw);}
#nav_btn span:before{ height: calc((2/375)*100vw); bottom: calc((10/375)*100vw);}
#nav_btn span:after{ height: calc((2/375)*100vw); top: calc((10/375)*100vw);}
header nav{ min-height: 100dvh; padding-bottom: 12.5vw;}
header nav ul{ width: 77.5vw;}
header nav ul li{ margin: calc((120/750)*100vw) 0;}
header nav ul li a{ padding-left: calc((120/750)*100vw);}
header nav ul li a:before{ width: calc((100/750)*100vw); height: calc((100/750)*100vw);}
}

/*footer*/
footer{ background: #444; color: #fff; padding: 60px 30px;}
footer dl{ width: 690px; margin: auto;}
footer dl dt{ font-size: 1.8rem; font-weight: bold; position: relative; padding-left: 36px; margin-bottom: 30px;}
footer dl dt span{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 27px;}
footer dl dd{ font-size: 1.6rem;}
footer dl dd p{ line-height: 2em; margin-bottom: 0.5em;}
footer dl dd p:last-child{ margin-bottom: 0;}
footer dl dd p a{ text-decoration: underline;}
footer dl dd p a:hover{ text-decoration: none;}
footer dl dd table{ border-collapse: collapse; border-spacing: 0; margin-top: 2em; line-height: 2em;}
footer dl dd table th{ text-align: right; font-weight: 500;}
@media print, screen and (min-width:769px){
footer{ padding: calc((120/750)*480px) calc((60/750)*480px);}
footer dl{ width: 100%;}
footer dl dt{ font-size: 1.8rem; padding-left: calc((72/750)*480px); margin-bottom: calc((30/750)*480px);}
footer dl dt span{ width: calc((54/750)*480px);}
footer dl dd{ font-size: 1.6rem;}
}
@media screen and (max-width:768px){
footer{ padding: calc((120/750)*100vw) calc((50/750)*100vw);}
footer dl{ width: 100%;}
footer dl dt{ font-size: 1.8rem; padding-left: calc((72/750)*100vw); margin-bottom: calc((30/750)*100vw);}
footer dl dt span{ width: calc((54/750)*100vw);}
footer dl dd{ font-size: 1.6rem;}
}

/*fixed_btn*/
#fixed_btn{ position: fixed; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; padding: 10px; background: rgba(0,0,0,0.9); z-index: 10;}
#fixed_btn ul{ width: 750px; margin: auto; display: flex; align-items: center; justify-content: center;}
#fixed_btn ul li{ width: 340px; margin: 0 10px;}
#fixed_btn ul li a{ display: block; position: relative;}
#fixed_btn ul li a img{ transition: 0.3s;}
#fixed_btn ul li a:before{ content: ""; width: 74px; height: 74px; background: url("../images/fixed_btn01_ico.png"); background-size: 100%; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); z-index: 5; transition: 0.3s;}
#fixed_btn ul li a:after{ content: ""; width: 74px; height: 74px; background: url("../images/fixed_btn01_ico2.png"); background-size: 100%; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); z-index: 3; transition: 0.3s;}
#fixed_btn ul li a:hover:before{ left: 0px;}
#fixed_btn ul li.mail a:before{ background: url("../images/fixed_btn02_ico.png"); background-size: 100%;}
#fixed_btn ul li.mail a:after{ background: url("../images/fixed_btn02_ico2.png"); background-size: 100%;}
@media print, screen and (min-width:769px){
#fixed_btn{ padding: calc((10/750)*480px);}
#fixed_btn ul{ width: 100%;}
#fixed_btn ul li{ width: calc((340/750)*480px); margin: 0 calc((10/750)*480px);}
#fixed_btn ul li a:before{ width: calc((74/750)*480px); height: calc((74/750)*480px); left: calc((20/750)*480px);}
#fixed_btn ul li a:after{ width: calc((74/750)*480px); height: calc((74/750)*480px); left: calc((20/750)*480px);}
}
@media screen and (max-width:768px){
#fixed_btn{ padding: calc((10/750)*100vw);}
#fixed_btn ul{ width: 100%;}
#fixed_btn ul li{ width: calc((340/750)*100vw); margin: 0 calc((10/750)*100vw);}
#fixed_btn ul li a:before{ width: calc((74/750)*100vw); height: calc((74/750)*100vw); left: calc((20/750)*100vw);}
#fixed_btn ul li a:after{ width: calc((74/750)*100vw); height: calc((74/750)*100vw); left: calc((20/750)*100vw);}
}



/*メイン*/
#wrapper{ width: 750px; margin: auto;}
#content{ overflow:hidden;}
section{ width:100%; margin:0 auto;}
.maincontent{ padding:0; margin:0 auto; width: auto;}
@media print, screen and (min-width:769px){
#wrapper{ width: 480px; margin: auto;}
}
@media screen and (max-width:768px){
#wrapper{ width: 100%;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em;}



/*cv*/
#cv{ padding: 10px 40px 110px; background: url("../images/cv_bg.jpg") center top no-repeat; background-size: cover;}
#cv .maincontent{ width: 100%;}
#cv figure.ico{ text-align: left; width: 274px; margin: -40px 20px 60px;}
#cv h2{ text-align: center; margin-bottom: 60px;}
#cv h2 img{ height: 70px;}
#cv ul li{ margin-top: 40px;}
#cv ul li a{ transition: 0.3s;}
#cv ul li a:hover{ opacity: 0.7;}
@media screen and (max-width:768px){
#cv{ padding: calc((10/750)*100vw) calc((40/750)*100vw) calc((110/750)*100vw);}
#cv figure.ico{ width: calc((274/750)*100vw); margin: calc((-40/750)*100vw) calc((20/750)*100vw) calc((60/750)*100vw);}
#cv h2{ margin-bottom: calc((60/750)*100vw);}
#cv h2 img{ height: calc((70/750)*100vw);}
#cv ul li{ margin-top: calc((40/750)*100vw);}
}



/*form*/
#form{ background: #fff; padding: 20px 20px 60px;}
#form .form_notice{ background: #efefef; padding: 20px 30px; margin-bottom: 40px;}
#form .form_notice ul{ font-size: 1.8rem; line-height: 1.5em;}
#form .form_notice ul li{ padding-left: 1em; position: relative;}
#form .form_notice ul li:before{ content: "※"; position: absolute; left: 0; top: 0;}
@media screen and (max-width:768px){
#form{ padding: calc((20/750)*100vw) calc((20/750)*100vw) calc((60/750)*100vw);}
#form .form_notice{ padding: calc((20/750)*100vw) calc((30/750)*100vw); margin-bottom: calc((40/750)*100vw);}
}

#form ::placeholder{ color: #aaa; font-size: 1.2rem; font-weight: 400; line-height: 1.25em;}
#form ::-ms-input-placeholder{ color: #aaa; font-size: 1.2rem; font-weight: 400; line-height: 1.25em;}
#form select, #form input[type=submit], #form button{ -webkit-appearance: none; appearance: none;}
#form input, #form textarea, #form select, #form button{ width:100%; padding: 0.5em 1em; font-size: 1.2rem; line-height: 1.25em; font-weight: 400; box-sizing: border-box; outline: none; border: 1px solid #616161; background: #fff; color: #000; font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif; border-radius: 4px;}
#form textarea{ text-align: left; height: 18em;}
#form input[type=radio],
#form input[type=checkbox]{ width: auto; padding: 0;}
@media print, screen and (min-width:769px){
#form ::placeholder{ font-size: 1.8rem;}
#form ::-ms-input-placeholder{ font-size: 1.8rem;}
#form input, #form textarea, #form select, #form button{ font-size: 1.8rem;}
}
@media screen and (max-width:768px){
#form ::placeholder{ font-size: 1.8rem;}
#form ::-ms-input-placeholder{ font-size: 1.8rem;}
#form input, #form textarea, #form select, #form button{ font-size: 1.8rem;}
}

#form table{ width: calc(100% - 20px); margin: 0 auto; font-size: 1.2rem;}
#form table tr th{ display: flex; align-items: center; width: 100%; margin-bottom: 10px;}
#form table tr th span{ display: flex; align-items: center; justify-content: center; background: #e53935; color: #fff; font-size: 60%; padding: 0.25em 0.5em 0.33em; margin-left: 0.5em; border-radius: 4px;}
#form table tr td{ display: block; width: 100%; margin-bottom: 40px;}
#form table tr tr:last-child td{ margin-bottom: 0;}
#form table tr td p.att{ font-size: 0.8rem; line-height: 1.5em; margin-top: 0.5em;}
#form table tr td p.att strong{ color: #e53935;}

#form table tr td.birth ul{ display: flex;}
#form table tr td.birth ul li{ margin-left: 0.5em;}
#form table tr td.birth ul li:nth-child(1){ width: 33.33%; margin-left: 0;}
#form table tr td.birth ul li:nth-child(2){ width: 16.66%;}
#form table tr td.birth ul li:nth-child(3){ width: 16.66%;}
#form table tr td.birth ul li input,
#form table tr td.birth ul li select{ width: calc(100% - 2em); margin-right: 0.5em;}

#form table tr td.sex ul{ display: flex;}
#form table tr td.sex ul li{ margin-right: 1em;}
#form table tr td.sex ul li:last-child{ margin-right: 0;}
#form table tr td.sex ul li label{ display: block; border: 1px solid #616161; padding: 0.5em 1em; border-radius: 4px; cursor: pointer;}
#form table tr td.sex ul li label input{ margin-right: 0.5em;}
#form table tr td.sex ul li label input{
display: inline-block;
height: 22px;
width: 22px;
overflow: hidden;
margin-top: -4px;
vertical-align: middle;
-webkit-appearance: none;
-moz-appearance: none;
background-color: transparent;
background-repeat: no-repeat;
background-position: 50% 50%;
border: 1px solid #bdbdbd;
transition: .2s ease-in-out;
transition-property: all;
transition-property: background-color,border;
border-radius: 50%;
}
#form table tr td.sex ul li label input:checked {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
background-color: #1e88e5;
border-color: transparent;
}

#form table tr td.pv_check p{ background: #efefef; padding: 20px 0; font-size: 0.9rem; font-weight: bold; text-align: center;}
#form table tr td.pv_check p a{ color: #193185; text-decoration: underline;}
#form table tr td.pv_check p a:hover{ text-decoration: none;}
#form table tr td.pv_check label{ display: inline-block; border: 1px solid #616161; padding: 0.5em 1em; border-radius: 4px; cursor: pointer;}
#form table tr td.pv_check label input{ margin-right: 0.5em;}
#form table tr td.pv_check label input{
display: inline-block;
height: 22px;
width: 22px;
overflow: hidden;
margin-top: -4px;
vertical-align: middle;
-webkit-appearance: none;
-moz-appearance: none;
background-color: transparent;
background-repeat: no-repeat;
background-position: 50% 50%;
border: 1px solid #bdbdbd;
transition: .2s ease-in-out;
transition-property: all;
transition-property: background-color,border;
border-radius: 50%;
}
#form table tr td.pv_check label input:checked {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
background-color: #1e88e5;
border-color: transparent;
}

#form p.message{ text-align: center; margin: 40px auto; font-size: 0.9rem;}
#form .submit_btn button{ border: none; background: #1e88e5; color: #fff; padding: 1em; font-weight: 600; cursor: pointer; transition: 0.3s;}
#form .submit_btn button:hover{ opacity: 0.7;}
@media print, screen and (min-width:769px){
#form table{ width: calc(100% - ((20/750)*480px)); margin: 0 auto; font-size: 1.8rem;}
#form table tr th{ margin-bottom: calc((10/750)*480px);}
#form table tr td{ margin-bottom: calc((40/750)*480px);}
#form table tr td p.att{ font-size: 1.4rem;}

#form table tr td.birth ul{ display: flex;}
#form table tr td.birth ul li{ margin-left: 0.5em;}
#form table tr td.birth ul li:nth-child(1){ width: calc(40% - 1em); margin-left: 0;}
#form table tr td.birth ul li:nth-child(2){ width: 30%;}
#form table tr td.birth ul li:nth-child(3){ width: 30%;}

#form table tr td.sex ul li label input{
height: calc((44/750)*480px);
width: calc((44/750)*480px);
margin-top: calc((-8/750)*480px);
}

#form table tr td.pv_check p{ padding: calc((20/750)*480px) 0; font-size: 1.4rem;}
#form table tr td.pv_check label input{
height: calc((44/750)*480px);
width: calc((44/750)*480px);
margin-top: calc((-8/750)*480px);
}

#form p.message{ margin: calc((40/750)*480px) auto; font-size: 1.4rem;}
}
@media screen and (max-width:768px){
#form table{ width: calc(100% - ((20/750)*100vw)); margin: 0 auto; font-size: 1.8rem;}
#form table tr th{ margin-bottom: calc((10/750)*100vw);}
#form table tr td{ margin-bottom: calc((40/750)*100vw);}
#form table tr td p.att{ font-size: 1.4rem;}

#form table tr td.birth ul{ display: flex;}
#form table tr td.birth ul li{ margin-right: 0.5em;}
#form table tr td.birth ul li:nth-child(1){ width: 40%;}
#form table tr td.birth ul li:nth-child(2){ width: 30%;}
#form table tr td.birth ul li:nth-child(3){ width: 30%;}

#form table tr td.sex ul li label input{
height: calc((44/750)*100vw);
width: calc((44/750)*100vw);
margin-top: calc((-8/750)*100vw);
}

#form table tr td.pv_check p{ padding: calc((20/750)*100vw) 0; font-size: 1.4rem;}
#form table tr td.pv_check label input{
height: calc((44/750)*100vw);
width: calc((44/750)*100vw);
margin-top: calc((-8/750)*100vw);
}

#form p.message{ margin: calc((40/750)*100vw) auto; font-size: 1.4rem;}
}





/*lead*/
#lead{ padding: 1px 0 20px; background: #fff; position: relative; z-index: 9;}
#lead .maincontent{ width: 710px; border: 12px solid #000; background: #fff; padding: 6px; margin-top: -220px;}
#lead p{ font-size: 1.8rem; font-weight: bold; margin: 20px;}
#lead p strong{ font-size: 2.2rem;}
@media print, screen and (min-width:769px){
#lead{ padding: 1px 0 calc((20/750)*480px);}
#lead .maincontent{ width: calc((710/750)*480px); border: calc((12/750)*480px) solid #000; padding: calc((6/750)*480px); margin-top: calc((-220/750)*480px);}
#lead p{ margin: calc((20/750)*480px);}
}
@media screen and (max-width:768px){
#lead{ padding: 1px 0 calc((20/750)*100vw);}
#lead .maincontent{ width: calc((710/750)*100vw); border: calc((12/750)*100vw) solid #000; padding: calc((6/750)*100vw); margin-top: calc((-220/750)*100vw);}
#lead p{ margin: calc((20/750)*100vw);}
}



/*countdown*/
#countdown{ background: #fff; padding-top: 60px; position: relative; z-index: 10;}
#countdown h2{ position: absolute; left: 0; right: 0; top: 6px; margin: auto; text-align: center;}
#countdown h2 img{ height: 145px;}
@media print, screen and (min-width:769px){
#countdown{ padding-top: calc((60/750)*480px);}
#countdown h2{ top: calc((6/750)*480px);}
#countdown h2 img{ height: calc((145/750)*480px);}
}
@media screen and (max-width:768px){
#countdown{ padding-top: calc((60/750)*100vw);}
#countdown h2{ top: calc((6/750)*100vw);}
#countdown h2 img{ height: calc((145/750)*100vw);}
}



/*escape*/
#escape{ padding: 40px 20px; background: #fff;}
#escape .maincontent{ border: 12px solid #000; background: #fff; padding: 40px 20px 20px;}
#escape h2{ text-align: center; margin-bottom: 40px;}
#escape h2 img{ width: 600px;}
#escape p{ text-align: center; font-size: 1.8rem; font-weight: bold; margin: 20px 20px 30px;}
@media print, screen and (min-width:769px){
#escape{ padding: calc((40/750)*480px) calc((20/750)*480px);}
#escape .maincontent{ border: calc((12/750)*480px) solid #000; padding: calc((40/750)*480px) calc((20/750)*480px) calc((20/750)*480px);}
#escape h2{ margin-bottom: calc((40/750)*480px);}
#escape h2 img{ width: calc((600/750)*480px);}
#escape p{ margin: calc((20/750)*480px) calc((20/750)*480px) calc((30/750)*480px);}
}
@media screen and (max-width:768px){
#escape{ padding: calc((40/750)*100vw) calc((20/750)*100vw);}
#escape .maincontent{ border: calc((12/750)*100vw) solid #000; padding: calc((40/750)*100vw) calc((20/750)*100vw) calc((20/750)*100vw);}
#escape h2{ margin-bottom: calc((40/750)*100vw);}
#escape h2 img{ width: calc((600/750)*100vw);}
#escape p{ margin: calc((20/750)*100vw) calc((20/750)*100vw) calc((30/750)*100vw);}
}



/*skill*/
#skill{ background: #fff; padding: 60px 20px;}
#skill .maincontent{ border: 12px solid #000; background: #fff; padding: 20px 20px 80px;}
#skill h2{ text-align: center; width: 590px; margin: 0 auto 30px;}
#skill ul li{ margin-top: 20px;}
@media print, screen and (min-width:769px){
#skill{ padding: calc((60/750)*480px) calc((20/750)*480px);}
#skill .maincontent{ border: calc((12/750)*480px) solid #000; padding: calc((20/750)*480px) calc((20/750)*480px) calc((80/750)*480px);}
#skill h2{ width: calc((590/750)*480px); margin: 0 auto calc((30/750)*480px);}
#skill ul li{ margin-top: calc((20/750)*480px);}
}
@media screen and (max-width:768px){
#skill{ padding: calc((60/750)*100vw) calc((20/750)*100vw);}
#skill .maincontent{ border: calc((12/750)*100vw) solid #000; padding: calc((20/750)*100vw) calc((20/750)*100vw) calc((80/750)*100vw);}
#skill h2{ width: calc((590/750)*100vw); margin: 0 auto calc((30/750)*100vw);}
#skill ul li{ margin-top: calc((20/750)*100vw);}
}

#skill #schedule{ padding: 180px 0 0; position: relative;}
#skill #schedule figure.bar{ width: 750px; position: absolute; left: -52px; top: 50px;}
#skill #schedule h3{ text-align: center; margin-bottom: 60px; position: relative;}
#skill #schedule h3 img{ width: 390px;}
#skill #schedule h3:after{ content: ""; width: 136px; height: 68px; background: url("../images/schedule_tit_ico.png") center center no-repeat; background-size: 100%; position: absolute; right: 0; top: -20px;}
#skill #schedule ul{ width: 610px; margin: auto;}
#skill #schedule ul li{ margin-top: 60px;}
@media print, screen and (min-width:769px){
#skill #schedule{ padding: calc((180/750)*480px) 0 0;}
#skill #schedule figure.bar{ width: 480px; left: calc((-52/750)*480px); top: calc((50/750)*480px);}
#skill #schedule h3{ margin-bottom: calc((60/750)*480px);}
#skill #schedule h3 img{ width: calc((390/750)*480px);}
#skill #schedule h3:after{ width: calc((136/750)*480px); height: calc((68/750)*480px); top: calc((-20/750)*480px);}
#skill #schedule ul{ width: calc((610/750)*480px);}
#skill #schedule ul li{ margin-top: calc((60/750)*480px);}
}
@media screen and (max-width:768px){
#skill #schedule{ padding: calc((180/750)*100vw) 0 0;}
#skill #schedule figure.bar{ width: 100vw; left: calc((-52/750)*100vw); top: calc((50/750)*100vw);}
#skill #schedule h3{ margin-bottom: calc((60/750)*100vw);}
#skill #schedule h3 img{ width: calc((390/750)*100vw);}
#skill #schedule h3:after{ width: calc((136/750)*100vw); height: calc((68/750)*100vw); top: calc((-20/750)*100vw);}
#skill #schedule ul{ width: calc((610/750)*100vw);}
#skill #schedule ul li{ margin-top: calc((60/750)*100vw);}
}



#root{ background: #fff; padding: 60px 0 20px; text-align: center; position: relative; z-index: 5;}
#root h2{ width: 460px; margin: 0 auto 60px;}
#root h3{ width: 290px; margin: 40px auto 0;}
#root:after{ content: ""; position: absolute; left: 0; right: 0; bottom: -79px; margin: auto; width: 0; height: 0; border-style: solid; border-color: #fff transparent transparent transparent; border-width: 80px 375px 0px 375px;}
@media print, screen and (min-width:769px){
#root{ padding: calc((60/750)*480px) 0 calc((20/750)*480px);}
#root h2{ width: calc((460/750)*480px); margin: 0 auto calc((60/750)*480px);}
#root h3{ width: calc((290/750)*480px); margin: calc((40/750)*480px) auto 0;}
#root:after{ bottom: calc((-79/750)*480px); border-width: calc((80/750)*480px) calc((375/750)*480px) 0 calc((375/750)*480px);}
}
@media screen and (max-width:768px){
#root{ padding: calc((60/750)*100vw) 0 calc((20/750)*100vw);}
#root h2{ width: calc((460/750)*100vw); margin: 0 auto calc((60/750)*100vw);}
#root h3{ width: calc((290/750)*100vw); margin: calc((40/750)*100vw) auto 0;}
#root:after{ bottom: calc((-79/750)*100vw); border-width: calc((80/750)*100vw) calc((375/750)*100vw) 0 calc((375/750)*100vw);}
}



#job{ background: url("../images/job_bg.jpg") center top no-repeat; background-size: cover; padding: 280px 0 80px; margin-top: -10px;}
#job h2{ text-align: center; width: 710px; margin: 0 auto -30px;}
#job ul li{ padding: 30px; margin: 10px 10px 0; overflow: hidden; position: relative; z-index: 1;}
#job ul li:last-child{ margin-bottom: 0;}
#job ul li:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; background: rgba(255,255,255,0.5); backdrop-filter: blur(30px); filter: brightness(115%);}
#job ul li figure{ margin-bottom: 20px;}
#job ul li h3{ font-size: 2.4rem; font-weight: 900; border-bottom: 1px solid #000; padding-bottom: 20px; margin-bottom: 20px;}
#job ul li p{ font-size: 1.75rem;}
@media print, screen and (min-width:769px){
#job{ padding: calc((280/750)*480px) 0 calc((80/750)*480px); margin-top: calc((-10/750)*480px);}
#job h2{ width: calc((710/750)*480px); margin: 0 auto calc((-30/750)*480px);}
#job ul li{ padding: calc((30/750)*480px); margin: calc((10/750)*480px) calc((10/750)*480px) 0;}
#job ul li figure{ margin-bottom: calc((20/750)*480px);}
#job ul li h3{ padding-bottom: calc((20/750)*480px); margin-bottom: calc((20/750)*480px);}
}
@media screen and (max-width:768px){
#job{ padding: calc((280/750)*100vw) 0 calc((80/750)*100vw); margin-top: calc((-10/750)*100vw);}
#job h2{ width: calc((710/750)*100vw); margin: 0 auto calc((-30/750)*100vw);}
#job ul li{ padding: calc((30/750)*100vw); margin: calc((10/750)*100vw) calc((10/750)*100vw) 0;}
#job ul li figure{ margin-bottom: calc((20/750)*100vw);}
#job ul li h3{ padding-bottom: calc((20/750)*100vw); margin-bottom: calc((20/750)*100vw);}
}



/*private*/
#private{ padding: 40px 20px; position: relative; z-index: 5;}
#private:after{ content: ""; width: 100%; height: calc(100% - 200px); background: #fff; position: absolute; left: 0; right: 0; top: 0; z-index: -1;}
#private .maincontent{ border: 12px solid #000; background: #fff; padding: 40px 20px 20px;}
#private h2{ text-align: center; margin-bottom: 40px;}
#private h2 img{ width: 600px;}
#private p{ text-align: center; font-size: 1.8rem; font-weight: 400; margin: 20px 20px 30px;}
@media print, screen and (min-width:769px){
#private{ padding: calc((40/750)*480px) calc((20/750)*480px);}
#private:after{ height: calc(100% - ((200/750)*480px));}
#private .maincontent{ border: calc((12/750)*480px) solid #000; padding: calc((40/750)*480px) calc((20/750)*480px) calc((20/750)*480px);}
#private h2{ margin-bottom: calc((40/750)*480px);}
#private h2 img{ width: calc((600/750)*480px);}
#private p{ margin: calc((20/750)*480px) calc((20/750)*480px) calc((30/750)*480px);}
}
@media screen and (max-width:768px){
#private{ padding: calc((40/750)*100vw) calc((20/750)*100vw);}
#private:after{ height: calc(100% - ((200/750)*100vw));}
#private .maincontent{ border: calc((12/750)*100vw) solid #000; padding: calc((40/750)*100vw) calc((20/750)*100vw) calc((20/750)*100vw);}
#private h2{ margin-bottom: calc((40/750)*100vw);}
#private h2 img{ width: calc((600/750)*100vw);}
#private p{ margin: calc((20/750)*100vw) calc((20/750)*100vw) calc((30/750)*100vw);}
}



/*review*/
/*
#review{ background: url("../images/review_bg.jpg") center top no-repeat; background-size: cover; margin-top: -200px; padding-top: 260px; padding-bottom: 880px;}
*/
#review{ background: url("../images/review_bg.jpg") center top no-repeat; background-size: cover; margin-top: -200px; padding-top: 260px; padding-bottom: 560px;}
#review h2{ width: 600px; margin: 0 auto 80px;}
#review ul li{ margin: 40px 20px 0; background: rgba(255,255,255,0.45); border: 8px solid rgba(163,163,0,0.45); padding: 60px 30px; position: relative;}
#review ul li figure.ico{ width: 242px; position: absolute; right: 0; top: -40px; margin: 0;}
#review ul li:nth-child(2) figure.ico{ top: 30px;}
#review ul li:nth-child(3) figure.ico{ top: -30px;}
#review ul li h4{ display: flex; flex-direction: column; margin-bottom: 60px;}
#review ul li h4 span{ font-size: 1.8rem; line-height: 1em; margin-bottom: 0.5em;}
#review ul li h4 strong{ font-size: 2.4rem; line-height: 1em;}
#review ul li p{ font-size: 1.8rem;}
#review ul li figure.price{ margin-top: 60px;}
@media print, screen and (min-width:769px){
/*
#review{ margin-top: calc((-200/750)*480px); padding-top: calc((260/750)*480px); padding-bottom: calc((880/750)*480px);}
*/
#review{ margin-top: calc((-200/750)*480px); padding-top: calc((260/750)*480px); padding-bottom: calc((560/750)*480px);}
#review h2{ width: calc((600/750)*480px); margin: 0 auto calc((80/750)*480px);}
#review ul li{ margin: calc((40/750)*480px) calc((20/750)*480px) 0; border: calc((8/750)*480px) solid rgba(163,163,0,0.45); padding: calc((60/750)*480px) calc((30/750)*480px);}
#review ul li figure.ico{ width: calc((242/750)*480px); top: calc((-40/750)*480px);}
#review ul li:nth-child(2) figure.ico{ top: calc((30/750)*480px);}
#review ul li:nth-child(3) figure.ico{ top: calc((-30/750)*480px);}
#review ul li h4{ margin-bottom: calc((60/750)*480px);}
#review ul li figure.price{ margin-top: calc((60/750)*480px);}
}
@media screen and (max-width:768px){
/*
#review{ margin-top: calc((-200/750)*100vw); padding-top: calc((260/750)*100vw); padding-bottom: calc((880/750)*100vw);}
*/
#review{ margin-top: calc((-200/750)*100vw); padding-top: calc((260/750)*100vw); padding-bottom: calc((560/750)*100vw);}
#review h2{ width: calc((600/750)*100vw); margin: 0 auto calc((80/750)*100vw);}
#review ul li{ margin: calc((40/750)*100vw) calc((20/750)*100vw) 0; border: calc((8/750)*100vw) solid rgba(163,163,0,0.45); padding: calc((60/750)*100vw) calc((30/750)*100vw);}
#review ul li figure.ico{ width: calc((242/750)*100vw); top: calc((-40/750)*100vw);}
#review ul li:nth-child(2) figure.ico{ top: calc((30/750)*100vw);}
#review ul li:nth-child(3) figure.ico{ top: calc((-30/750)*100vw);}
#review ul li h4{ margin-bottom: calc((60/750)*100vw);}
#review ul li figure.price{ margin-top: calc((60/750)*100vw);}
}



#training{ padding: 1px 0 60px; background: #fff; position: relative; z-index: 5;}
/*
#training .maincontent{ margin-top: -820px;}
*/
#training .maincontent{ margin-top: -480px;}
#training h2{ text-align: center; width: 620px; margin: 0 auto 60px;}
#training p.lead{ text-align: center; font-size: 2rem; line-height: 1.33em; font-weight: bold; margin: 40px auto;}
#training h3{ width: 690px; margin: 0 auto 20px;}
#training .training_list{ width: 690px; margin: auto;}
#training .training_list li{ margin-top: 20px; border: 8px solid #000; position: relative; padding: 30px 0; text-align: center;}
#training .training_list li:last-child{ margin-bottom: 0;}
#training .training_list li span{ position: absolute; left: 0; top: 0; width: 88px;}
#training .training_list li h4{ font-size: 2rem; margin-bottom: 10px;}
#training .training_list li p{ font-size: 1.8rem; line-height: 1.5em; margin-bottom: 20px;}
#training .training_list figure img{ width: 375px;}
@media print, screen and (min-width:769px){
#training{ padding: 1px 0 calc((60/750)*480px);}
/*
#training .maincontent{ margin-top: calc((-820/750)*480px);}
*/
#training .maincontent{ margin-top: calc((-480/750)*480px);}
#training h2{ width: calc((620/750)*480px); margin: 0 auto calc((60/750)*480px);}
#training p.lead{ margin: calc((40/750)*480px) auto;}
#training h3{ width: calc((690/750)*480px); margin: 0 auto calc((20/750)*480px);}
#training .training_list{ width: calc((690/750)*480px);}
#training .training_list li{ margin-top: calc((20/750)*480px); border: calc((8/750)*480px) solid #000; padding: calc((30/750)*480px) 0;}
#training .training_list li span{ width: calc((88/750)*480px);}
#training .training_list li h4{ margin-bottom: calc((10/750)*480px);}
#training .training_list li p{ margin-bottom: calc((20/750)*480px);}
#training .training_list figure img{ width: calc((375/750)*480px);}
}
@media screen and (max-width:768px){
#training{ padding: 1px 0 calc((60/750)*100vw);}
/*
#training .maincontent{ margin-top: calc((-820/750)*100vw);}
*/
#training .maincontent{ margin-top: calc((-480/750)*100vw);}
#training h2{ width: calc((620/750)*100vw); margin: 0 auto calc((60/750)*100vw);}
#training p.lead{ margin: calc((40/750)*100vw) auto;}
#training h3{ width: calc((690/750)*100vw); margin: 0 auto calc((20/750)*100vw);}
#training .training_list{ width: calc((690/750)*100vw);}
#training .training_list li{ margin-top: calc((20/750)*100vw); border: calc((8/750)*100vw) solid #000; padding: calc((30/750)*100vw) 0;}
#training .training_list li span{ width: calc((88/750)*100vw);}
#training .training_list li h4{ margin-bottom: calc((10/750)*100vw);}
#training .training_list li p{ margin-bottom: calc((20/750)*100vw);}
#training .training_list figure img{ width: calc((375/750)*100vw);}
}



/*area*/
#area{ background: url("../images/area_bg.jpg") center center no-repeat; background-size: cover; padding: 60px 30px 60px; text-align: center;}
#area h2{ font-size: 2.8rem; line-height: 1.66em; font-weight: 900; text-align: center; color: #fff; text-decoration: underline;}
#area .comment{ margin: 60px auto 30px; background: #fff; padding: 30px; position: relative;}
#area .comment:after{ content: "";width: 0; height: 0; border-style: solid; border-color: transparent transparent #ffffff transparent; border-width: 0px 30px 40px 30px; position: absolute; left: 0; right: 0; top: -30px; margin: auto;}
#area .comment p{ text-align: center; font-size: 1.8rem; line-height: 1.5em;}
#area ul{ display: flex; flex-wrap: wrap; width: calc(100% + 30px); margin: -15px 0 -15px -15px;}
#area ul li{ width: calc(50% - 30px); margin: 15px; display: flex; flex-direction: column; align-items: center; text-align: center; background: rgba(0,0,0,0.4); padding: 20px 0; color: #fff;}
#area ul li h4{ font-size: 1.8rem; margin-bottom: 0.25em;}
#area ul li p{ font-size: 1.8rem; line-height: 1.5em; font-weight: 400;}
@media print, screen and (min-width:769px){
#area{ padding: calc((60/750)*480px) calc((30/750)*480px) calc((60/750)*480px);}
#area .comment{ margin: calc((60/750)*480px) auto calc((30/750)*480px); padding: calc((30/750)*480px);}
#area .comment:after{ border-width: 0px calc((30/750)*480px) calc((40/750)*480px) calc((30/750)*480px); top: calc((-30/750)*480px);}
#area ul{ width: calc(100% + ((30/750)*480px)); margin: calc((-15/750)*480px) 0 calc((-15/750)*480px) calc((-15/750)*480px);}
#area ul li{ width: calc(50% - ((30/750)*480px)); margin: calc((15/750)*480px); padding: calc((20/750)*480px) 0;}
}
@media screen and (max-width:768px){
#area{ padding: calc((60/750)*100vw) calc((30/750)*100vw) calc((60/750)*100vw);}
#area .comment{ margin: calc((60/750)*100vw) auto calc((30/750)*100vw); padding: calc((30/750)*100vw);}
#area .comment:after{ border-width: 0px calc((30/750)*100vw) calc((40/750)*100vw) calc((30/750)*100vw); top: calc((-30/750)*100vw);}
#area ul{ width: calc(100% + ((30/750)*100vw)); margin: calc((-15/750)*100vw) 0 calc((-15/750)*100vw) calc((-15/750)*100vw);}
#area ul li{ width: calc(50% - ((30/750)*100vw)); margin: calc((15/750)*100vw); padding: calc((20/750)*100vw) 0;}
}



/*step*/
#step{ background: #fff; padding: 30px 30px 60px;}
#step h2{ margin-bottom: 70px;}
#step ul li{ margin-top: 70px; background: #FFCD00; padding: 80px 0; position: relative;}
#step ul li:before{ content: ""; width: 690px; height: 16px; background: url("../images/step_bar.png") center center; background-size: cover; position: absolute; left: 0; top: 0;}
#step ul li:after{ content: ""; width: 690px; height: 16px; background: url("../images/step_bar.png") center center; background-size: cover; position: absolute; left: 0; bottom: 0;}
#step ul li span.num{ width: 100px; position: absolute; left: 0; right: 0; top: -50px; margin: auto;}
#step ul li h4{ text-align: center; font-size: 2rem; margin-bottom: 0.5em;}
#step ul li p{ text-align: center; font-size: 1.8rem;}
@media print, screen and (min-width:769px){
#step{ padding: calc((30/750)*480px) calc((30/750)*480px) calc((60/750)*480px);}
#step h2{ margin-bottom: calc((70/750)*480px);}
#step ul li{ margin-top: calc((70/750)*480px); padding: calc((80/750)*480px) 0;}
#step ul li:before{ width: 100%; height: calc((16/750)*480px);}
#step ul li:after{ width: 100%; height: calc((16/750)*480px);}
#step ul li span.num{ width: calc((100/750)*480px); top: calc((-50/750)*480px);}
}
@media screen and (max-width:768px){
#step{ padding: calc((30/750)*100vw) calc((30/750)*100vw) calc((60/750)*100vw);}
#step h2{ margin-bottom: calc((70/750)*100vw);}
#step ul li{ margin-top: calc((70/750)*100vw); padding: calc((80/750)*100vw) 0;}
#step ul li:before{ width: 100%; height: calc((16/750)*100vw);}
#step ul li:after{ width: 100%; height: calc((16/750)*100vw);}
#step ul li span.num{ width: calc((100/750)*100vw); top: calc((-50/750)*100vw);}
}



/*thanks*/
#thanks{ background: url("../images/thanks/bg.jpg") center center; background-size: 100%; padding: 60px 20px 120px;}
#thanks h2{ text-align: center; margin-bottom: 60px;}
#thanks h2 img{ height: 68px;}
#thanks .maincontent{ background: rgba(255,255,255,0.64); padding: 60px 20px;}
#thanks h3{ text-align: center; font-size: 2.1rem; margin-bottom: 40px;}
#thanks h3 strong{ font-size: 2.3rem; color: #FF0000;}
#thanks figure.arrow{ margin: 40px auto;}
#thanks figure.arrow img{ height: 60px;}
#thanks p{ font-size: 1.6rem; font-weight: 500; text-align: center; margin-bottom: 80px;}
#thanks .att{ margin: 80px auto; text-align: center;}
#thanks .att ul{ display: inline-block; text-align: left; font-size: 1.5rem; line-height: 1.5em; font-weight: 400;}
#thanks .att ul li{ padding-left: 1em; margin-bottom: 1em; position: relative;}
#thanks .att ul li:before{ content: "※"; position: absolute; left: 0; top: 0;}
#thanks .contact_box{ background: rgba(255,255,255,0.55); color: #0064FF; padding: 20px; text-align: center;}
#thanks .contact_box h4{ font-size: 1.8rem; margin-bottom: 0.25em;}
#thanks .contact_box p{ font-size: 1.8rem; margin: 0;}
#thanks .contact_box p span{ font-size: 1.6rem;}
@media print, screen and (min-width:769px){
#thanks{ padding: calc((60/750)*480px) calc((20/750)*480px) calc((120/750)*480px);}
#thanks h2{ margin-bottom: calc((60/750)*480px);}
#thanks h2 img{ height: calc((68/750)*480px);}
#thanks .maincontent{ padding: calc((60/750)*480px) calc((20/750)*480px);}
#thanks h3{ margin-bottom: calc((40/750)*480px);}
#thanks figure.arrow{ margin: calc((40/750)*480px) auto;}
#thanks figure.arrow img{ height: calc((60/750)*480px);}
#thanks p{ margin-bottom: calc((80/750)*480px);}
#thanks .att{ margin: calc((80/750)*480px) auto;}
#thanks .contact_box{ padding: calc((20/750)*480px);}
}
@media screen and (max-width:768px){
#thanks{ padding: calc((60/750)*100vw) calc((20/750)*100vw) calc((120/750)*100vw);}
#thanks h2{ margin-bottom: calc((60/750)*100vw);}
#thanks h2 img{ height: calc((68/750)*100vw);}
#thanks .maincontent{ padding: calc((60/750)*100vw) calc((20/750)*100vw);}
#thanks h3{ margin-bottom: calc((40/750)*100vw);}
#thanks figure.arrow{ margin: calc((40/750)*100vw) auto;}
#thanks figure.arrow img{ height: calc((60/750)*100vw);}
#thanks p{ margin-bottom: calc((80/750)*100vw);}
#thanks .att{ margin: calc((80/750)*100vw) auto;}
#thanks .contact_box{ padding: calc((20/750)*100vw);}
}





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