@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-feature-settings: "palt";
font-size:40px;
text-align:left;
background: url("../images/bg.jpg") fixed;
background-size: 1920px;
color:#403e3e;
min-width:1000px;
overflow-x: hidden;
}
@media screen and (max-width:1000px){
html,body{ font-size:4vw; min-width:240px; max-width:1000px; background: #fff;}
}

/*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:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important; vertical-align: bottom; border: none;}

/*txt*/
p{ line-height:1.5em; 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:#403e3e;}
.red{ color:#ef6e69;}
.blue{ color:#326496;}

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

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: all 0.3s ease;}
.opa:hover{ opacity: 0.7;}
.bright img{ transition: 0.3s;}
.bright:hover img{ filter: brightness(120%);}



/*ヘッダー*/
header{ background: url("../images/mv_bg.jpg") center top no-repeat; background-size: cover; height: 820px; padding-top: 200px;}
header dl{ display: flex; align-items: flex-end; justify-content: center; width: 1500px; margin: auto;}
header dl dt{ width: 750px; padding-bottom: 2%;}
header dl dd{ width: 750px;}
header dl dd .movie{ padding-left: 20%;}
header dl dd .movie figure{ box-shadow:rgba(0, 0, 0, 0.1) 0 0 2px 1px;}
header dl dd figure img{ width: 107.5%; max-width: 107.5%;}
@media screen and (max-width:1500px){
header{ width: 100vw; background-size: 130%; height: 53.25vw; padding-top: 13.75vw; padding-bottom: 5%;}
header dl{ width: 94%;}
header dl dt{ width: 50%; padding-bottom: 2%;}
header dl dd{ width: 50%;}
header dl dd .movie{ padding-left: 20%;}
header dl dd figure img{ width: 107.5%; max-width: 107.5%;}
}
@media screen and (max-width:1000px){
header{ background: url("../images/mv_bg_smp.jpg") center top no-repeat #fff; background-size: 100%; width: 100%; height: auto; padding-top: 72.5vw;}
header dl{ display: block; width: 100%;}
header dl dt{ width: 94%; padding: 0; margin: auto;}
header dl dd{ width: 100%; display: flex; flex-direction: column-reverse; margin-top: -3.75vw;}
header dl dd .movie{ padding: 0; margin: -1.25vw 10% 0;}
header dl dd figure img{ width: 100%; max-width: 100%;}
}
/*アニメーション*/
header dl dt figure.mv_btn{ position: relative; animation: pulse 2.0s infinite; z-index: 3;}
.cv figure.btn{ position: relative; animation: pulse 2.0s infinite; z-index: 3;}
@keyframes pulse{
0%{ transform:scaleX(1);}
50%{ transform:scale3d(1.05,1.05,1.05);}
to{ transform:scaleX(1);}
}

/*フッター*/
footer{ background: #1d8c96; color: #fff; padding: 40px 0; text-align: center; font-size: 18px;}
footer ul{ display: flex; align-items: center; justify-content: center; margin-bottom: 20px;}
footer ul li:not(:last-child):after{ content: "/"; margin: 0 1em;}
footer ul li a{ text-decoration: underline;}
footer ul li a:hover{ text-decoration: none;}
footer p{ text-align: center;}
@media screen and (max-width:1000px){
footer{ padding: 6% 0; font-size: 2.5vw;}
footer ul{ margin-bottom: 3%;}
}

/*固定バナー*/
#fixed_btn{ position: fixed; left: 0; right: 0; bottom: 0; margin: auto; text-align: center; display: flex; align-items: center; justify-content: center; transition: 0.3s; opacity: 0; pointer-events: none; z-index: 999;}
#fixed_btn.active{ opacity: 1.0; pointer-events: all;}
#fixed_btn.delete{ opacity: 0; pointer-events: none;}



/*メイン*/
#content{ overflow:hidden; background: url("../images/wrap.png") center center repeat-y;}
section{ max-width: 1000px; margin:60px auto 90px;}
.maincontent { padding:0; margin:0 auto; width:940px;}
@media screen and (max-width:1000px){
#content{ background: #fff;}
section{ margin: 6% auto 9%;}
.maincontent { padding:0; margin:0 auto; width:94%;}
}

/*cv*/
.cv{ margin: 60px auto;}
@media screen and (max-width:1000px){
.cv{ margin: 6% 3%;}
}

/*sec01*/
#sec01 ul{ margin: 0 0 0 60px;}
#sec01 ul li{ padding-left: 60px; line-height: 1.25em; margin-bottom: 0.75em; position: relative;}
#sec01 ul li:before{ content: ""; width: 44px; height: 44px; background: url("../images/check.png") center center no-repeat; background-size: 100%; position: absolute; left: 0; top: 8px;}
#sec01 ul li span{ color: #9c8760; text-decoration: underline;}
@media screen and (max-width:1000px){
#sec01 figure.tit{ width: 94%;}
#sec01 ul{ margin: 0 0 0 6vw;}
#sec01 ul li{ padding-left: 6vw;}
#sec01 ul li:before{ width: 4.4vw; height: 4.4vw; top: 0.8vw;}
}

/*sec02*/
#sec02 figure.tit{ margin-bottom: 30px;}
#sec02 .maincontent{ width: 980px; background: url("../images/sec02_box.png") center center repeat-y; background-size: 100%;}
#sec02 .maincontent p{ margin: 40px auto; padding: 0 60px;}
@media screen and (max-width:1000px){
#sec02 figure.tit{ margin-bottom: 3%;}
#sec02 .maincontent{ width: 98%;}
#sec02 .maincontent p{ margin: 4% auto; padding: 0 6%;}
}

/*sec03*/
#sec03 figure.tit{ margin-bottom: 30px;}
#sec03 .maincontent{ width: 1000px; background: url("../images/sec03_reason_box.png") center center repeat-y; background-size: 100%;}
#sec03 .maincontent p{ margin: 0 auto; padding: 0 120px;}
#sec03 .maincontent p.center{ font-size: 90%; margin-top: 1em;}
#sec03 .maincontent figure.img{ margin-top: 60px;}
@media screen and (max-width:1000px){
#sec03 figure.tit{ margin-bottom: 3%;}
#sec03 .maincontent{ width: 100%;}
#sec03 .maincontent p{ padding: 0 10%;}
#sec03 .maincontent figure.img{ margin-top: 6%;}
#sec03 .maincontent figure.img img{ max-width: 60%;}
}

/*sec04*/
#sec04 figure.tit{ margin-bottom: 30px;}
#sec04 .maincontent{ width: 1000px; background: url("../images/voice_box.png") center center repeat-y; background-size: 100%;}
#sec04 .maincontent p{ margin: 0 auto; padding: 0 120px;}
#sec04 .maincontent .voice_movie{ width: 600px; margin: 30px auto 40px;}
#sec04 .maincontent .voice_movie figure{ box-shadow:rgba(0, 0, 0, 0.1) 0 0 2px 1px;}
@media screen and (max-width:1000px){
#sec04 figure.tit{ margin-bottom: 3%;}
#sec04 .maincontent{ width: 100%;}
#sec04 .maincontent p{ padding: 0 10%;}
#sec04 .maincontent .voice_movie{ width: 60%; margin: 3% auto 4%;}
}

/*sec05*/
#sec05 figure.tit{ margin-bottom: 30px;}
#sec05 .maincontent{ width: 840px;}
#sec05 h3{ font-size: 50px; margin: 60px auto 30px;}
#sec05 table.media{ width: 100%; border-collapse: collapse; border-spacing: 0;}
#sec05 table.media th{ width: 3.75em; font-weight: normal;}
@media screen and (max-width:1000px){
#sec05 figure.tit{ margin-bottom: 3%;}
#sec05 .maincontent{ width: 88%;}
#sec05 h3{ font-size: 5vw; margin: 6% auto 3%;}
}

/*sec06*/
#sec06 figure.tit{ margin-bottom: 30px;}
@media screen and (max-width:1000px){
#sec06 figure.tit{ margin-bottom: 3%;}
}

#sec06 .method{}
@media screen and (max-width:1000px){
#sec06 .method{ width: calc(100% + 6vw); margin-left: -3vw;}
}

#sec06 .qa dl{ margin: 0 20px 0 100px;}
#sec06 .qa dl dt{ margin-bottom: 40px; font-size: 45px; position: relative;}
#sec06 .qa dl dt:before{ content: ""; width: 80px; height:80px; background: url("../images/qa_q.png") center center no-repeat; background-size: 100%; position: absolute; left: -100px; top: 0;}
#sec06 .qa dl dd{ margin-bottom: 80px; background: #f3f3f3; padding: 20px; position: relative;}
#sec06 .qa dl dd:before{ content: ""; width: 80px; height:80px; background: url("../images/qa_a.png") center center no-repeat; background-size: 100%; position: absolute; left: -100px; top: 0;}
@media screen and (max-width:1000px){
#sec06 .qa dl{ margin: 0 2% 0 10vw;}
#sec06 .qa dl dt{ margin-bottom: 4%; font-size: 4.5vw;}
#sec06 .qa dl dt:before{ width: 8vw; height:8vw; left: -10vw; top: 0;}
#sec06 .qa dl dd{ margin-bottom: 8%; padding: 2%; font-size: 3.75vw;}
#sec06 .qa dl dd:before{ width: 8vw; height:8vw; left: -10vw; top: 0;}
}



/*アニメーション*/
section{ opacity: 0;}
section.active{ animation: fade ease-in-out 1.0s forwards;}
@keyframes fade{
0%{ opacity: 0;}
100%{ opacity: 1.0;}
}



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