@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 repeat-x #000; background-size: auto 100%; display: flex; align-items: center; justify-content: center; z-index: 9;}
header nav{ display: none; padding-bottom: 60px;}
header nav ul{ width: 690px; margin: auto;}
header nav ul li{ font-size: 2.4rem; font-weight: bold; color: #fff; margin: 40px 0;}
header nav ul li a{ display: inline-block; position: relative; padding: 0; transition: 0.3s;}
header nav ul li a span{ line-height: 0;}
header nav ul li:nth-child(1) a span{ display: inline-block; background: url("../images/nav01_2.png") center center no-repeat; background-size: 100%;}
header nav ul li:nth-child(2) a span{ display: inline-block; background: url("../images/nav02_2.png") center center no-repeat; background-size: 100%;}
header nav ul li:nth-child(3) a span{ display: inline-block; background: url("../images/nav03_2.png") center center no-repeat; background-size: 100%;}
header nav ul li:nth-child(4) a span{ display: inline-block; background: url("../images/nav04_2.png") center center no-repeat; background-size: 100%;}
header nav ul li a span img{ height: 70px; transition: 0.3s;}
header nav ul li a:hover span img{ opacity: 0;}
@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; padding-bottom: 0;}
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: 290px; height: 70px; padding: 10px; background: rgba(0,100,255,0.9); border-radius: 12px;}
header nav ul li a span img{ height: 35px; transition: 0.3s;}
}
@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((80/750)*100vw) 0;}
header nav ul li a:before{ width: calc((100/750)*100vw); height: calc((100/750)*100vw);}
header nav ul li a span img{ height: calc((70/750)*100vw); transition: 0.3s;}
}

/*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,100,255,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: 220px; margin: 0 5px;}
#fixed_btn ul li a{ display: block;}
#fixed_btn ul li a img{ transition: 0.3s;}
#fixed_btn ul li a:hover img{ opacity: 0;}
#fixed_btn ul li.tel a{ background: url("../images/fixed_btn01-2.png") center center no-repeat; background-size: cover;}
#fixed_btn ul li.mail a{ background: url("../images/fixed_btn02-2.png") center center no-repeat; background-size: cover;}
@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((330/750)*480px); margin: 0 calc((7.5/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((440/750)*100vw); margin: 0 calc((10/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: 80px 0 60px; background: #fff;}
#cv .maincontent{ padding: 1px 0 150px; width: 100%; background: url("../images/cv_bg.png") center top no-repeat; background-size: 100% 100%;}
#cv figure.ico{ text-align: left; width: 680px; margin: -60px 0 0;}
#cv h2{ text-align: center; margin: 40px auto;}
#cv h2 img{ width: 640px;}
#cv h3{ text-align: center; margin: 40px auto 60px;}
#cv h3 img{ width: 100%;}
#cv ul{ width: 690px; margin: auto;}
#cv ul li{ margin-top: 40px;}
#cv ul li a{ transition: 0.3s;}
#cv ul li a:hover{ opacity: 0.7;}
#cv .cv_notice{ background: #fff; width: 630px; padding: 20px 30px; margin: 60px auto 0;}
#cv .cv_notice ul{ font-size: 1.8rem; line-height: 1.5em;}
#cv .cv_notice ul li{ margin-top: 0; padding-left: 1em; position: relative;}
#cv .cv_notice ul li:before{ content: "※"; position: absolute; left: 0; top: 0;}
@media print, screen and (min-width:769px){
#cv{ padding: calc((60/750)*480px) 0;}
#cv .maincontent{ padding: 1px 0 calc((150/750)*480px);}
#cv figure.ico{ width: calc((680/750)*480px); margin: calc((-60/750)*480px) 0 0;}
#cv h2{ margin: calc((40/750)*480px) auto;}
#cv h2 img{ width: calc((640/750)*480px);}
#cv h3{ margin: calc((40/750)*480px) auto calc((60/750)*480px);}
#cv ul{ width: calc((690/750)*480px);}
#cv ul li{ margin-top: calc((40/750)*480px);}
#cv .cv_notice{ width: calc((630/750)*480px); padding: calc((20/750)*480px) calc((30/750)*480px); margin: calc((60/750)*480px) auto 0;}
}
@media screen and (max-width:768px){
#cv{ padding: calc((60/750)*100vw) 0;}
#cv .maincontent{ padding: 1px 0 calc((150/750)*100vw);}
#cv figure.ico{ width: calc((680/750)*100vw); margin: calc((-60/750)*100vw) 0 0;}
#cv h2{ margin: calc((40/750)*100vw) auto;}
#cv h2 img{ width: calc((640/750)*100vw);}
#cv h3{ margin: calc((40/750)*100vw) auto calc((60/750)*100vw);}
#cv ul{ width: calc((690/750)*100vw);}
#cv ul li{ margin-top: calc((40/750)*100vw);}
#cv .cv_notice{ width: calc((630/750)*100vw); padding: calc((20/750)*100vw) calc((30/750)*100vw); margin: calc((60/750)*100vw) auto 0;}
}



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



/*fv*/
#fv{ background: #fff; text-align: center;}
#fv h1{ text-align: center; padding: 20px 0 40px;}
@media print, screen and (min-width:769px){
#fv h1{ text-align: center; padding: calc((20/750)*480px) 0 calc((20/750)*480px);}
}
@media screen and (max-width:768px){
#fv h1{ text-align: center; padding: calc((20/750)*100vw) 0 calc((20/750)*100vw);}
}



/*lead*/
#lead{ background: #fff; padding: 30px 0;}
@media print, screen and (min-width:769px){
#lead{ padding: calc((20/750)*480px) 0;}
}
@media screen and (max-width:768px){
#lead{ padding: calc((30/750)*100vw) 0;}
}



/*skill*/
#skill{ background: #fff; padding: 40px 0 50px;}
#skill figure.skill_tree{ margin-bottom: 40px;}
#skill figure.skill_comment{ margin-bottom: 30px;}
#skill figure.skill_status{ margin-bottom: 50px;}
@media print, screen and (min-width:769px){
#skill{ padding: calc((40/750)*480px) 0 calc((50/750)*480px);}
#skill figure.skill_tree{ margin-bottom: calc((40/750)*480px);}
#skill figure.skill_comment{ margin-bottom: calc((30/750)*480px);}
#skill figure.skill_status{ margin-bottom: calc((50/750)*480px);}
}
@media screen and (max-width:768px){
#skill{ padding: calc((40/750)*100vw) 0 calc((50/750)*100vw);}
#skill figure.skill_tree{ margin-bottom: calc((40/750)*100vw);}
#skill figure.skill_comment{ margin-bottom: calc((30/750)*100vw);}
#skill figure.skill_status{ margin-bottom: calc((50/750)*100vw);}
}



/*level_up*/
#level_up{ background: #FFFFE3; padding: 60px 0 40px;}
#level_up h2{ width: 590px; margin: 0 auto 40px;}
#level_up figure.level_up_img{ margin: 20px 10px;}
#level_up ul li{ margin: 10px auto 0; display: flex; align-items: center; width: 710px; height: 164px; background: url("../images/level_up_list_bg.png") center center; background-size: 100% 100%; padding: 0 30px;}
#level_up ul li span{ width: 82px;}
#level_up ul li strong{ font-size: 1.8rem; margin-left: 20px;}
@media print, screen and (min-width:769px){
#level_up{ padding: calc((60/750)*480px) 0 calc((40/750)*480px);}
#level_up h2{ width: calc((590/750)*480px); margin: 0 auto calc((40/750)*480px);}
#level_up figure.level_up_img{ margin: calc((20/750)*480px) calc((10/750)*480px);}
#level_up ul li{ margin: calc((10/750)*480px) auto 0; width: calc((710/750)*480px); height: calc((164/750)*480px); padding: 0 calc((30/750)*480px);}
#level_up ul li span{ width: calc((82/750)*480px);}
#level_up ul li strong{ margin-left: calc((20/750)*480px);}
}
@media screen and (max-width:768px){
#level_up{ padding: calc((60/750)*100vw) 0 calc((40/750)*100vw);}
#level_up h2{ width: calc((590/750)*100vw); margin: 0 auto calc((40/750)*100vw);}
#level_up figure.level_up_img{ margin: calc((20/750)*100vw) calc((10/750)*100vw);}
#level_up ul li{ margin: calc((10/750)*100vw) auto 0; width: calc((710/750)*100vw); height: calc((164/750)*100vw); padding: 0 calc((30/750)*100vw);}
#level_up ul li span{ width: calc((82/750)*100vw);}
#level_up ul li strong{ margin-left: calc((20/750)*100vw);}
}



/*schedule*/
#schedule{ background: #FFFFE3; padding: 10px;}
#schedule .maincontent{ padding: 140px 75px 180px; background: url("../images/schedule_bg.png") center center no-repeat; background-size: 100% 100%;}
#schedule h2{ width: 430px; margin: 0 auto 100px;}
#schedule ul li{ padding: 40px 0; border-bottom: 5px solid #E4A164;}
#schedule ul li:first-child{ padding-top: 0;}
#schedule ul li:last-child{ padding-bottom: 0; border-bottom: none;}
@media print, screen and (min-width:769px){
#schedule{ padding: calc((10/750)*480px);}
#schedule .maincontent{ padding: calc((140/750)*480px) calc((75/750)*480px) calc((180/750)*480px);}
#schedule h2{ width: calc((430/750)*480px); margin: 0 auto calc((100/750)*480px);}
#schedule ul li{ padding: calc((40/750)*480px);}
}
@media screen and (max-width:768px){
#schedule{ padding: calc((10/750)*100vw);}
#schedule .maincontent{ padding: calc((140/750)*100vw) calc((75/750)*100vw) calc((180/750)*100vw);}
#schedule h2{ width: calc((430/750)*100vw); margin: 0 auto calc((100/750)*100vw);}
#schedule ul li{ padding: calc((40/750)*100vw);}
}



/*job*/
#job{ background: #fff; padding: 60px 0;}
#job h2{ width: 670px; margin: 0 auto 40px;}
#job ul li{ margin-top: 20px;}
@media print, screen and (min-width:769px){
#job{ padding: calc((60/750)*480px) 0;}
#job h2{ width: calc((670/750)*480px); margin: 0 auto calc((40/750)*480px);}
#job ul li{ margin-top: calc((20/750)*480px);}
}
@media screen and (max-width:768px){
#job{ padding: calc((60/750)*100vw) 0;}
#job h2{ width: calc((670/750)*100vw); margin: 0 auto calc((40/750)*100vw);}
#job ul li{ margin-top: calc((20/750)*100vw);}
}



/*senpai*/
#senpai{ background: url("../images/senpai_bg.png") center center #fff; background-size: 100% 100%; padding: 120px 0 160px; position: relative;}
#senpai figure.ico{ width: 680px; margin: 0; position: absolute; right: 0; top: 20px;}
#senpai h2{ width: 640px; margin: 0 auto 40px;}
#senpai h3{ width: 100%; margin: 0 auto 30px;}
#senpai ul{ width: 630px; margin: auto;}
#senpai ul li{ background: #FFDCB1; margin-bottom: 40px; padding-bottom: 30px;}
#senpai ul li:last-child{ margin-bottom: 0;}
#senpai ul li h4{ width: 100%;}
#senpai ul li p{ font-size: 1.8rem; margin: 30px;}
#senpai ul li figure.price{ margin: 0 30px;}
@media print, screen and (min-width:769px){
#senpai{ padding: calc((120/750)*480px) 0 calc((160/750)*480px);}
#senpai figure.ico{ width: calc((680/750)*480px); top: calc((20/750)*480px);}
#senpai h2{ width: calc((640/750)*480px); margin: 0 auto calc((40/750)*480px);}
#senpai h3{ margin: 0 auto calc((30/750)*480px);}
#senpai ul{ width: calc((630/750)*480px);}
#senpai ul li{ margin-bottom: calc((40/750)*480px); padding-bottom: calc((30/750)*480px);}
#senpai ul li p{ margin: calc((30/750)*480px);}
#senpai ul li figure.price{ margin: 0 calc((30/750)*480px);}
}
@media screen and (max-width:768px){
#senpai{ padding: calc((120/750)*100vw) 0 calc((160/750)*100vw);}
#senpai figure.ico{ width: calc((680/750)*100vw); top: calc((20/750)*100vw);}
#senpai h2{ width: calc((640/750)*100vw); margin: 0 auto calc((40/750)*100vw);}
#senpai h3{ margin: 0 auto calc((30/750)*100vw);}
#senpai ul{ width: calc((630/750)*100vw);}
#senpai ul li{ margin-bottom: calc((40/750)*100vw); padding-bottom: calc((30/750)*100vw);}
#senpai ul li p{ margin: calc((30/750)*100vw);}
#senpai ul li figure.price{ margin: 0 calc((30/750)*100vw);}
}



/*quest*/
#quest{ background: #fff; padding: 60px 0;}
#quest h2{ width: 540px; margin: 0 auto 40px;}
#quest .youtube_wrap{ margin: 30px;}
#quest figure.img{ margin: 30px;}
#quest #training{ margin-top: 40px;}
#quest #training p.lead{ text-align: center; font-size: 2rem; line-height: 1.33em; color: #2D60C3; font-weight: bold; margin-bottom: 20px;}
#quest #training h3{ width: 690px; margin: 0 auto 40px;}
#quest #training ul li{ margin-top: 20px;}
@media print, screen and (min-width:769px){
#quest{ padding: calc((60/750)*480px) 0;}
#quest h2{ width: calc((540/750)*480px); margin: 0 auto calc((40/750)*480px);}
#quest .youtube_wrap{ margin: calc((30/750)*480px);}
#quest figure.img{ margin: calc((30/750)*480px);}
#quest #training{ margin-top: calc((40/750)*480px);}
#quest #training p.lead{ margin-bottom: calc((20/750)*480px);}
#quest #training h3{ width: calc((690/750)*480px); margin: 0 auto calc((40/750)*480px);}
#quest #training ul li{ margin-top: calc((20/750)*480px);}
}
@media screen and (max-width:768px){
#quest{ padding: calc((60/750)*100vw) 0;}
#quest h2{ width: calc((540/750)*100vw); margin: 0 auto calc((40/750)*100vw);}
#quest .youtube_wrap{ margin: calc((30/750)*100vw);}
#quest figure.img{ margin: calc((30/750)*100vw);}
#quest #training{ margin-top: calc((40/750)*100vw);}
#quest #training p.lead{ margin-bottom: calc((20/750)*100vw);}
#quest #training h3{ width: calc((690/750)*100vw); margin: 0 auto calc((40/750)*100vw);}
#quest #training ul li{ margin-top: calc((20/750)*100vw);}
}



/*area*/
#area{ background: #fff; padding: 60px 0;}
@media print, screen and (min-width:769px){
#area{ padding: calc((60/750)*480px) 0;}
}
@media screen and (max-width:768px){
#area{ padding: calc((60/750)*100vw) 0;}
}



/*support*/
#support{ background: url("../images/support_bg.jpg") center top no-repeat; background-size: cover; padding: 100px 0;}
#support h2{ text-align: center; width: 690px; margin: 0 auto 60px;}
#support ul{ width: 690px; margin: auto;}
#support ul li{ margin-top: 40px;}
@media print, screen and (min-width:769px){
#support{ padding: calc((100/750)*480px) 0;}
#support h2{ width: calc((690/750)*480px); margin: 0 auto calc((60/750)*480px);}
#support ul{ width: calc((690/750)*480px);}
#support ul li{ margin-top: calc((40/750)*480px);}
}
@media screen and (max-width:768px){
#support{ padding: calc((100/750)*100vw) 0;}
#support h2{ width: calc((690/750)*100vw); margin: 0 auto calc((60/750)*100vw);}
#support ul{ width: calc((690/750)*100vw);}
#support ul li{ margin-top: calc((40/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;}
}