@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-size:20px;
font-size-adjust: 100%;
text-align:left;
color:#191919;
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;}

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

.white{ color:#fff;}
.black{ color:#191919;}
.gy{ color:#aaa;}
.red{ color:#c80000;}
.yellow{ color: #FAFA64;}
.green{ color:#003200;}
.bg_y{
background: -moz-linear-gradient(top, rgba(250,250,100,0) 0%, rgba(250,250,100,0) 50%, rgba(250,250,100,1) 51%, rgba(250,250,100,1) 100%);
background: -webkit-linear-gradient(top, rgba(250,250,100,0) 0%, rgba(250,250,100,0) 50%, rgba(250,250,100,1) 51%, rgba(250,250,100,1) 100%);
background: linear-gradient(to bottom, rgba(250,250,100,0) 0%, rgba(250,250,100,0) 50%, rgba(250,250,100,1) 51%, rgba(250,250,100,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fafa64', endColorstr='#00fafa64',GradientType=0 );
}

.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;}



/*ヘッダー*/
header #h_txt{ background: #003200; color: #fff; text-align: center; font-size: 1.5rem; letter-spacing: 0.1em; line-height: 1em; font-weight: bold; padding: 0.125em;}
header #mv{ background: url("../images/mv_bg.jpg") center top no-repeat; background-size: cover;}
header #mv_in{ width: 1000px; margin: auto; padding: 40px 0;}
header #mv_in h1{ color: #003200; font-size: 4rem; line-height: 1.33em; letter-spacing: 0.05em; font-weight: 900; text-align: left; margin-bottom: 40px;}
header #mv_in #mv_txt{ width: 750px; margin: 40px auto 40px 0; text-align: center; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
header #mv_in #mv_txt dl dt{ background: #003200; color: #fafa64; font-size: 1.8rem; letter-spacing: 0.1em; font-weight: bold; padding: 0.125em;}
header #mv_in #mv_txt dl dd{ background: #fafa64; color: #003200; font-size: 1.8rem; letter-spacing: 0.1em; font-weight: bold; padding: 0.5em;}
header #mv_in #mv_txt dl dd p{ line-height: 1.25em;}
@media screen and (max-width:767px){
header #h_txt{ font-size: 1.1rem; padding: 0.25em 0 0.33em;}
header #h_txt p{ line-height: 1.25em;}
header #h_txt p strong{ display: block;}
header #mv{ background: url("../images/mv_bg_smp.jpg") center top no-repeat; background-size: cover;}
header #mv_in{ width: 92%; padding: 8% 0;}
header #mv_in h1{ font-size: 2rem; margin-bottom: 8%;}
header #mv_in #mv_txt{ width: 100%; margin: 8% auto;}
header #mv_in #mv_txt dl dt{ font-size: 1.2rem; padding: 0.25em 0;}
header #mv_in #mv_txt dl dd{ font-size: 1.1rem; letter-spacing: 0; padding: 0.5em 0;}
header #mv_in #mv_txt dl dd p{ line-height: 1.5em;}
}

/*フッター*/
footer{ background: #003200; color: #fff; padding: 20px 0 0; text-align: center;}
footer ul{ display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;}
footer ul li{ margin: 0; font-size: 0.8rem;}
footer ul li:first-child:after{ content: "|"; margin: 0 2em;}
footer ul li a:hover{ text-decoration: underline;}
p.copyright{ font-size: 0.8rem; letter-spacing: 0.1em; line-height: 1em; padding: 1em; background: rgba(255,255,255,0.1);}
@media screen and (max-width:767px){
footer{ padding: 5% 0 0;}
footer ul{ margin: 0 auto 5%;}
footer ul li{ margin: 0; font-size: 0.75rem;}
footer ul li:first-child:after{ content: "|"; margin: 0 1.5em;}
p.copyright{ font-size: 0.75rem;}
}

/*メイン*/
#content{ overflow:hidden;}
section { width:100%; background: url("https://www.transparenttextures.com/patterns/cardboard.png") rgba(0,50,0,1.0); margin:0 auto;}
.maincontent { margin:0 auto; width:1080px; padding: 40px; background: #fff;}
@media screen and (max-width:767px){
.maincontent { padding:5%; margin:0 auto; width:95%;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.1em;}
h2{ background: #003200; color: #fff; font-size: 3rem; font-weight: 900; padding: 0.33em 0 0.5em; text-align: center; position: relative; z-index: 1;}
h2:after{ content: ""; width: 100%; height: 50%; background: rgba(0,0,0,0.1); position: absolute; left: 0; top: 0; z-index: -1;}
@media screen and (max-width:767px){
h2{ font-size: 2rem;}
}

/*cv*/
.cv{ background: rgba(255,255,255,0.9); padding: 20px; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
.cv .cv_in{ display: flex; align-items: center;}
.cv .cv_in h4{ color: #c80000; text-align: center; width: calc(100% - 680px); margin-right: 20px;}
.cv .cv_in h4 strong{ display: block; font-size: 3rem; line-height: 1em; padding-bottom: 0.125em; margin-bottom: 0.125em; border-bottom: 2px solid #c80000;}
.cv .cv_in h4 span{ display: block; font-size: 2rem; line-height: 1em;}
.cv .cv_in .cv_btn a{ display: flex; align-items: center; justify-content: center; width: 660px; height: 100px; background: #003200; color: #fff; position: relative; z-index: 1; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
.cv .cv_in .cv_btn a:after{ content: ""; width: 100%; height: 50%; background: rgba(0,0,0,0.1); position: absolute; left: 0; top: 0; z-index: -1;}
.cv .cv_in .cv_btn a figure{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 80px;}
.cv .cv_in .cv_btn a i{ font-size: 3rem; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
.cv .cv_in .cv_btn a p{ text-align: center; margin: 0 0 0 20px; letter-spacing: 0.1em;}
.cv .cv_in .cv_btn a p strong{ display: block; font-size: 1.8rem;}
.cv .cv_in .cv_btn a p span{ display: block; font-size: 0.9rem; margin-top: 0.25em;}
.cv .cv_in .cv_btn p.att{ text-align: center; color: #003200; font-size: 0.9rem; margin-top: 0.25em;}
.cv .cv_att{ margin-top: 20px;}
.cv .cv_att dl{ display: flex; border: 2px solid #c80000;}
.cv .cv_att dl dt{ display: flex; align-items: center; justify-content: center; width: 200px; background: #c80000; color: #fff; padding: 0.5em; font-size: 1rem; font-weight: bold;}
.cv .cv_att dl dd{ display: flex; align-items: center; width: calc(100% - 200px); background: #fff; padding: 0.5em 1em; font-size: 0.9rem;}
.cv .cv_att dl dd p{ line-height: 1.5em;}
@media screen and (max-width:767px){
.cv{ padding: 2.5%;}
.cv .cv_in{ display:block;}
.cv .cv_in h4{ width: 100%; margin: 0 0 5%; text-align: center;}
.cv .cv_in h4 strong{ display: inline-block; font-size: 2rem; margin-bottom: 0;}
.cv .cv_in h4 span{ display: inline-block; font-size: 1.5rem; letter-spacing: 0; margin-left: 0.5em;}
.cv .cv_in .cv_btn a{ width: 100%; height: 15vw;}
.cv .cv_in .cv_btn a figure{ left: 2.5vw; width: auto;}
.cv .cv_in .cv_btn a figure img{ height: 10vw;}
.cv .cv_in .cv_btn a i{ font-size: 2rem; right: 1.25vw;}
.cv .cv_in .cv_btn a p{ margin: 0 0 1.25vw 3.75vw; letter-spacing: 0;}
.cv .cv_in .cv_btn a p strong{ font-size: 1.2rem;}
.cv .cv_in .cv_btn a p span{ font-size: 0.8rem; line-height: 1em;}
.cv .cv_in .cv_btn p.att{ font-size: 0.6rem; line-height: 1.5em; margin-top: 0.5em;}
.cv .cv_att{ margin-top: 3.75%;}
.cv .cv_att dl{ display: block;}
.cv .cv_att dl dt{ display: block; width: 100%; text-align: center; padding: 0.125em 0 0.25em; font-size: 0.7rem;}
.cv .cv_att dl dd{ display: block; width: 100%; padding: 0.5em; font-size: 0.6rem;}
}
/*アニメーション*/
.cv .cv_in .cv_btn a i{ animation: btn linear 1.0s infinite; transform-origin: right center;}
@keyframes btn{
0%{ transform: scale(0.95) translateY(-50%);}
50%{ transform: scale(1.05) translateY(-50%);}
100%{ transform: scale(0.95) translateY(-50%);}
}



/*recommend*/
#recommend ul li{ margin: 40px auto;}
#recommend ul li:first-child{ margin-top: 0;}
#recommend ul li:last-child{ margin-bottom: 0;}
#recommend ul li dl{ display: flex; align-items: center; justify-content: space-between; text-align: center; border: 4px solid #003200; padding: 10px;}
#recommend ul li:nth-child(2n) dl{ flex-direction: row-reverse;}
#recommend ul li dl dt{ width: calc(100% - 210px);}
#recommend ul li dl dd{ width: 200px;}
#recommend ul li dl dt h3{ background: #003200; color: #fff; font-size: 1.2rem; padding: 0.25em 0 0.33em; margin-bottom: 0.33em;}
#recommend ul li dl dt h4{ color: #c80000; font-size: 2.4rem;}
#recommend ul li dl dt h4 span{ font-size: 66.66%; line-height: 1.25em;}
#recommend ul li dl dt p{ font-size: 1rem; color: #003200; margin-top: 0.33em;}
#recommend ul li:nth-child(3) dl dt h4 span{ display: block; font-size: 50%; letter-spacing: 0.05em; margin-bottom: 0.25em;}
#recommend ul li:nth-child(4) dl dt h4{ font-size: 2rem;}
@media screen and (max-width:767px){
#recommend ul li{ margin: 5% auto;}
#recommend ul li dl{ display: block; padding: 2.5%;}
#recommend ul li dl dt{ width: 100%;}
#recommend ul li dl dd{ width: 100%; text-align: center; margin-top: 5%;}
#recommend ul li dl dd img{ width: 50%;}
#recommend ul li dl dt h3{ font-size: 1rem; padding: 0.25em 0.25em 0.33em; margin-bottom: 0.33em;}
#recommend ul li dl dt h4{ font-size: 1.5rem;}
#recommend ul li:nth-child(3) dl dt h4{ font-size: 1.33rem;}
#recommend ul li:nth-child(4) dl dt h4{ font-size: 1.4rem;}
}



/*benefit*/
.benefit{ background: url("../images/cv_bg.jpg") center bottom no-repeat; background-size: cover;}
.benefit .maincontent{ background: none;}
.benefit h2{ background: #c80000;}
.benefit .present{ margin-bottom: 40px;}
.benefit .present ul{ display: flex; width: calc(100% + 20px); margin-left: -10px;}
.benefit .present ul li{ width: calc(33.33% - 20px); margin: 0 10px; border: 4px solid #c80000; background: #fff; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
.benefit .present ul li dl dt{ background: #c80000; color: #fafa64; font-size: 2rem; font-weight: bold; text-align: center; padding-bottom: 0.125em; position: relative; z-index: 1;}
.benefit .present ul li dl dt:after{ content: ""; width: 100%; height: 50%; background: rgba(0,0,0,0.1); position: absolute; left: 0; top: 0; z-index: -1;}
.benefit .present ul li dl dd{ padding: 10px;}
.benefit .present ul li dl dd p.att{ padding-left: 1em; margin-top: 1em; font-size: 0.9rem; line-height: 1.5em; position: relative;}
.benefit .present ul li dl dd p.att:before{ content: "※"; position: absolute; left: 0; top: 0;}
.benefit .present ul li dl dd .present_wrap{ display: block;}
.benefit .present ul li dl dd .present01{ margin-bottom: 10px;}
.benefit .present ul li dl dd .present01 p{ text-align: center; font-size: 1.25rem; line-height: 1.5em; font-weight: bold;}
.benefit .present ul li dl dd .present01 p small{ display: block; font-size: 75%; line-height: 1.5em; font-weight: normal;}
.benefit .present ul li dl dd .present02 p{ font-size: 2.5rem; line-height: 1em; font-weight: bold; text-align: center;}
.benefit .present ul li dl dd .present02 p strong{ display: inline-block; padding: 0 0.25em;}
.benefit .present ul li dl dd .present02 p span{ display: block; background: #c80000; color: #fafa64; font-size: 1.25rem; line-height: 1em; padding: 0.25em 0.25em 0.33em; margin-bottom: 0.125em;}
.benefit .present ul li:nth-child(1) dl dd .present02 p{ font-size: 3.5rem; line-height: 1em;}
@media screen and (max-width:767px){
.benefit .maincontent{ width: 100%; padding: 10% 4%;}
.benefit h2 strong{ display: block;}
.benefit .present{ margin-bottom: 10%;}
.benefit .present ul{ display:block; width: 100%; margin: 0;}
.benefit .present ul li{ width: 100%; margin: 2.5% auto;}
.benefit .present ul li:first-child{ margin-top: 0;}
.benefit .present ul li dl dt{ font-size: 1.5rem;}
.benefit .present ul li dl dd{ padding: 2.5% 0; text-align: center;}
.benefit .present ul li dl dd p.att{ font-size: 0.55rem; display: inline-block;}
.benefit .present ul li dl dd .present_wrap{ display: flex; align-items: center; justify-content: center;}
.benefit .present ul li dl dd .present01{ margin: 0 5% 0 0;}
.benefit .present ul li dl dd .present01 p{ font-size: 1rem;}
.benefit .present ul li dl dd .present02 p span{ font-size: 1rem;}
.benefit .present ul li dl dd .present02 p{ font-size: 2rem;}
.benefit .present ul li:nth-child(1) dl dd .present02 p{ font-size: 3rem;}
}



/*reason*/
#reason ul li{ padding: 40px 0; border-bottom: 8px dotted #003200;}
#reason ul li:first-child{ padding-top: 0;}
#reason ul li:last-child{ padding-bottom: 0; border-bottom: none;}
#reason ul li dl{ display: flex; align-items: center; justify-content: space-between;}
#reason ul li:nth-child(2n) dl{ flex-direction: row-reverse;}
#reason ul li dl dt{ width: 560px; text-align: center;}
#reason ul li dl dd{ width: 400px;}
#reason ul li dl dt h3{ background: #003200; color: #fafa64; font-size: 1.5rem; line-height: 1em; padding: 0.25em 0 0.33em; margin-bottom: 0.5em;}
#reason ul li dl dt h4{ font-size: 2rem; letter-spacing: 0.05em; color: #003200; margin-bottom: 0.5em; overflow: hidden;}
#reason ul li dl dt h4 strong{ display: inline-block; position: relative;}
#reason ul li dl dt h4 strong:before{ content: ""; width: 100%; height: 4px; background: #003200; position: absolute; left: calc(-100% - 10px); top: 50%;}
#reason ul li dl dt h4 strong:after{ content: ""; width: 100%; height: 4px; background: #003200; position: absolute; right: calc(-100% - 10px); top: 50%;}
#reason ul li dl dt h4 span{ display: inline-block; font-size: 60%; line-height: 1.25em;}
#reason ul li:nth-child(3) dl dt h4 span{ display: block;}
#reason ul li dl dt h5{ font-size: 1rem; color: #003200; margin-top: 1em;}
@media screen and (max-width:767px){
#reason ul li{ padding: 5% 0; border-bottom: 1.25vw dotted #003200;}
#reason ul li dl{ display: block;}
#reason ul li dl dt{ width: 100%; margin-bottom: 5%;}
#reason ul li dl dd{ width: 100%;}
#reason ul li dl dt h3{ font-size: 1rem;}
#reason ul li dl dt h4{ font-size: 1.25rem; letter-spacing: 0.05em;}
#reason ul li dl dt h4 span{ display: inline-block; font-size: 60%; line-height: 1.25em;}
#reason ul li:nth-child(3) dl dt h4 span{ display: block; margin-top: 0.5em;}
#reason ul li dl dt h5{ font-size: 0.8rem; letter-spacing: 0;}
}



/*target*/
#target #target_list dl{ display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between;}
#target #target_list dl dt{ width: 640px;}
#target #target_list dl dd{ width: 320px;}
#target #target_list ul li{ padding: 0.25em 0 0.33em 1.25em; border-bottom: 2px dotted #003200; font-size: 1.5rem; line-height: 1.25em; letter-spacing: 0.1em; font-weight: bold; color: #003200; position: relative;}
#target #target_list ul li:first-child{ border-top: 2px dotted #003200;}
#target #target_list ul li i{ position: absolute; left: 0; top: 0.5em;}
@media screen and (max-width:767px){
#target #target_list dl{ display: block;}
#target #target_list dl dt{ width: 100%;}
#target #target_list dl dd{ width: 66.66%; margin: 5% auto 0;}
#target #target_list ul li{ font-size: 1rem; letter-spacing: 0;}
}

#target h3{ text-align: center; margin: 80px 0 40px; background: #003200; color: #fff; font-size: 2.5rem; padding: 0.125em 0 0.25em;}
#target #about dl{ display: flex; align-items: center; justify-content: space-between;}
#target #about dl dt{ width: 640px;}
#target #about dl dd{ width: 320px;}
#target #about ul li{ padding: 0.25em 0 0.33em 1.25em; border-bottom: 2px dotted #003200; font-size: 1.5rem; line-height: 1.25em; letter-spacing: 0.1em; font-weight: bold; color: #003200; position: relative;}
#target #about ul li:first-child{ border-top: 2px dotted #003200;}
#target #about ul li i{ position: absolute; left: 0; top: 0.5em;}
@media screen and (max-width:767px){
#target h3{ margin: 10% 0 5%; font-size: 1.25rem; padding: 0.25em 0 0.33em;}
#target #about dl{ display: block;}
#target #about dl dt{ width: 100%;}
#target #about dl dd{ width: 66.66%; margin: 5% auto 0;}
#target #about ul li{ font-size: 1rem; letter-spacing: 0;}
}

#target #price{ margin-top: 80px;}
#target #price dl{ display: flex; justify-content: space-between;}
#target #price dl dt{ width: 320px; display: flex; align-items: center; justify-content: center; background: #c80000; color: #fff; border: 8px double #fff; text-align: center; font-size: 2rem; font-weight: bold;}
#target #price dl dd{ width: 640px;}
#target #price ul{ margin-bottom: 20px;}
#target #price ul li{ padding: 0.25em 0 0.33em 1.25em; border-bottom: 2px dotted #c80000; font-size: 1.5rem; line-height: 1.25em; letter-spacing: 0.1em; font-weight: bold; color: #c80000; position: relative;}
#target #price ul li:first-child{ border-top: 2px dotted #c80000;}
#target #price ul li i{ position: absolute; left: 0; top: 0.5em;}
#target #price p.att{ margin: 0; padding-left: 1em; line-height: 1.5em; position: relative;}
#target #price p.att:before{ content: "※"; position: absolute; left: 0; top: 0;}
@media screen and (max-width:767px){
#target #price{ margin-top: 10%;}
#target #price dl{ display: block;}
#target #price dl dt{ width: 100%; border: 1.25vw double #fff; font-size: 1.2rem; padding: 0.125em 0 0.25em; margin-bottom: 2.5%;}
#target #price dl dd{ width: 100%;}
#target #price ul{ margin-bottom: 2.5%;}
#target #price ul li{ font-size: 1rem; letter-spacing: 0;}
#target #price p.att{ font-size: 0.7rem;}
}



/*access*/
#access #map dl{ display: flex; align-items: center; justify-content: space-between;}
#access #map dl dt{ width: 500px;}
#access #map dl dd{ width: 480px;}
#access #map dl dt p{ margin: 0;}
#access #map dl dt p a{ text-decoration: underline;}
#access #map dl dt p a:hover{ text-decoration: none;}
#access #map dl dt hr{ margin: 20px auto; background: none; border: none; border-bottom: 1px solid #191919;}
@media screen and (max-width:767px){
#access #map dl{ display: block;}
#access #map dl dt{ width: 100%; margin-bottom: 5%;}
#access #map dl dd{ width: 100%;}
#access #map dl dt p{ font-size: 0.9rem;}
#access #map dl dt hr{ margin: 5% auto;}
}

#access #access_flow{ margin-top: 40px;}
#access #access_flow ul{ width: calc(100% + 40px); margin: -20px 0 -20px -20px; display: flex; flex-wrap: wrap;}
#access #access_flow ul li{ width: calc(50% - 40px); margin: 20px; border: 4px solid #003200; padding: 20px; position: relative;}
#access #access_flow ul li span.num{ display: flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; background: #003200; color: #fff; font-size: 1.2rem; line-height: 1em; font-weight: bold; position: absolute; left: -0.75em; top: -0.75em;}
#access #access_flow ul li p{ margin-top: 10px; font-size: 1rem; line-height: 1.5em; text-align: center;}
#access #access_flow ul li:nth-child(3) p{ line-height: 3em;}
@media screen and (max-width:767px){
#access #access_flow{ margin-top: 10%;}
#access #access_flow ul{ width: 100%; margin: 0 auto; display: block;}
#access #access_flow ul li{ width: 100%; margin: 5% auto; padding: 5%;}
#access #access_flow ul li span.num{ font-size: 1rem;}
#access #access_flow ul li p{ margin-top: 2.5%; font-size: 0.859rem;}
#access #access_flow ul li:nth-child(3) p{ line-height: 1.5em;}
}



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