@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-feature-settings: "palt";
font-size-adjust: 100%;
text-size-adjust: 100%;
text-align:left;
color:#333;
min-width:1000px;
}
@media screen and (max-width:767px){
html,body{ font-size:3.75vw; 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;}

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

.mincho{ font-family: 'Noto Serif JP', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}

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

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

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}



/*ヘッダー*/
body{ padding-top: 64px;}
header{ position: fixed; left: 0; right: 0; top: 0; z-index: 99; background: #fff; width: 100%; min-width: 1000px; margin: auto; display: flex; align-items: center; justify-content: space-between; box-shadow:rgba(0, 0, 0, 0.1) 0 0 5px 2px;}
header .logo{ padding: 0.5em 0 0.5em 0.75em; font-size: 1.2rem; font-weight: bold;}
header nav{ margin: 0 0 0 auto;}
header nav ul{ display: flex; align-items: center; justify-content: flex-end; font-size: 1rem; padding: 1em;}
header nav ul li{ font-size: 0.8rem; margin: 0 0 0 2em;}
header nav ul li a{ position: relative;}
header nav ul li a:after{ content: ""; width: 0; height: 1px; background: #000; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; transition: 0.3s;}
header nav ul li a:hover:after{ width: 100%;}
@media print, screen and (min-width:768px){
header nav{ display: block !important; opacity: 1.0 !important; height: auto !important;}
}
@media screen and (max-width:767px){
body{ padding-top: 10vw;}
header{ min-width: 100%;}
header .logo{ font-size: 1.2rem;}
header nav ul{ font-size: 1rem;}
header nav ul li{ font-size: 0.9rem; margin-left: 1.5em;}
}

/*フッター*/
footer{}
p.copyright{ text-align:center; margin:0; padding:1em; background:#326496; color:#fff; font-size:0.6rem;}
@media screen and (max-width:767px){
p.copyright{ font-size:0.7rem;}
}

/*fv*/
#fv{ background: #fff; text-align: center; padding: 60px 0;}
#fv p.tit{ font-size: 1.6rem; font-weight: bold; margin-bottom: 0;}
#fv p.tit strong{ display: inline-block; position: relative;}
#fv p.tit strong:before{ content: ""; width: 2px; height: 100%; background: #333; position: absolute; left: -1em; bottom: 0; transform: rotate(-22.5deg);}
#fv p.tit strong:after{ content: ""; width: 2px; height: 100%; background: #333; position: absolute; right: -1em; bottom: 0; transform: rotate(22.5deg);}
#fv h1{ text-align: center; font-size: 3.2rem; letter-spacing: 0; line-height: 1.5em; color: #c83232;}
#fv h1 strong{ display: inline-block; font-size: 200%; line-height: 1.5em; margin-bottom: 0.25em;}
#fv h1 strong{
background: linear-gradient(to bottom, rgba(250,240,120,0) 0%, rgba(250,240,120,0) 66%, rgba(250,240,120,1) 67%, rgba(250,240,120,1) 100%);}
#fv h1 span{ display: inline-block; background: #c83232; color: #fff; padding: 0.05em 0.25em 0.1em; margin-right: 0.25em;}
#fv h4{ margin: 40px auto 0; display: flex; align-items: center; justify-content: center;}
#fv h4 strong{ display: flex; align-items: center; justify-content: center; background: #000; color: #fff; width: 690px; padding: 0.5em 1.5em;}
#fv .txt{ display: flex; align-items: center; justify-content: center; width: 690px; margin: 0 auto 0;}
#fv .txt p{ border: 2px solid #333; padding: 1em 2em; font-size: 1.2rem; letter-spacing: 0.1em; font-weight: bold; width: 100%;}
#fv .txt p strong{ font-size: 125%; color: #c83232;}
@media screen and (max-width:767px){
#fv{ padding: 10% 0 10%;}
#fv p.tit{ font-size: 1.2rem;}
#fv h1{ font-size: 2.4rem;}
#fv h1 strong{ font-size: 175%;}
#fv h4{ margin: 5% auto 0;}
#fv h4 strong{ width: 92.5%;}
#fv .txt{ margin: 0 auto 0; width: 92.5%;}
#fv .txt p{ padding: 1em; font-size: 1rem; letter-spacing: 0;}
#fv .txt p strong{ font-size: 125%;}
}

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

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.1em;}
h2{ background: #326496; color: #fff; font-size: 2rem; text-align: center; padding: 0.75em 1em; margin-bottom: 40px; position: relative; font-family: 'Noto Serif JP', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
h2:before{ content: ""; width: 100%; height: 0.25em; background: #fff; position: absolute; left: 0; top: 0;}
h2:after{ content: ""; width: 100%; height: 0.25em; background: #fff; position: absolute; left: 0; bottom: 0;}
h2:before,
h2:after{ background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 51%,rgba(255,255,255,0) 100%);}
h3{ font-size: 1.6rem; text-align: center; color: #326496; border-bottom: 4px double #326496; padding-bottom: 0.25em; margin: 80px auto 40px; font-family: 'Noto Serif JP', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
@media screen and (max-width:767px){
h1,h2,h3,h4,h5,h6{ letter-spacing: 0.05em;}
h2{ font-size: 1.75rem; padding: 0.75em 0.5em; margin-bottom: 5%;}
h3{ font-size: 1.33rem; margin: 15% auto 5%;}
}

/*list*/
.list{ margin: 40px auto;}
.list ul{ border: 4px solid #326496; padding: 20px;}
.list ul li{ font-size: 1.2rem; font-weight: bold; letter-spacing: 0.1em; padding: 0.5em 0.5em 0.5em 2em; border-bottom: 2px dotted #326496; position: relative;}
.list ul li:first-child{ border-top: 2px dotted #326496;}
.list ul li span{ color: #326496; position: absolute; left: 0.5em; top: 0.5em;}
@media screen and (max-width:767px){
.list{ margin: 7.5% auto;}
.list ul{ padding: 5% 3.75%;}
.list ul li{ font-size: 1rem; letter-spacing: 0em; padding: 0.5em 0.5em 0.5em 1.75em;}
.list ul li span{ left: 0.25em; top: 0.5em;}
}

.list02{ margin: 40px auto;}
.list02 dl{ margin: 40px auto;}
.list02 dl dt{ border-left: 4px solid #c83232; padding-left: 0.5em; font-size: 1.4rem; line-height: 1em; font-weight: bold; margin-bottom: 10px;}
.list02 dl dd{ margin-left: 1em; border-left: 4px dotted #c83232; padding-left: 0.5em;}
@media screen and (max-width:767px){
.list02{ margin: 7.5% auto;}
.list02 dl{ margin: 7.5% auto;}
.list02 dl dt{ font-size: 1.2rem; margin-bottom: 2.5%;}
.list02 dl dd{ border-left: 2px dotted #c83232; font-size: 0.9rem;}
}

/*voice*/
.voice{ margin: 40px auto;}
.voice dl{ margin: 40px auto;}
.voice dl dt{ border-top: 8px double #fff; border-bottom: 8px double #fff; background: #326496; color: #fff; text-align: center; font-size: 1.4rem; letter-spacing: 0.1em; font-weight: bold; padding: 0.25em;}
.voice dl dd{ border: 4px solid #326496; border-top: none; padding: 1em; font-size: 1rem;}
@media screen and (max-width:767px){
.voice{ margin: 7.5% auto;}
.voice dl{ margin: 7.5% auto;}
.voice dl dt{ border-top: 1.25vw double #fff; border-bottom: 1.25vw double #fff; font-size: 1.2rem; letter-spacing: 0.05em;}
.voice dl dd{ padding: 0.75em 1em; font-size: 1rem;}
}

/*cv*/
.cv{ border: 10px solid #c83232; padding: 20px; margin-top: 80px; position: relative; z-index: 1;}
.cv h4{ width: calc(100% + 120px); margin-left: -60px; padding: 0.5em; background: #c83232; color: #fff; text-align: center; font-size: 2rem; border: 8px double #fff; margin-bottom: 20px;}
.cv figure.btn{ display: flex; align-items: center; justify-content: center; margin: 40px 0 20px;}
.cv figure.btn a{ display: block; background: #329632; color: #fff; padding: 0.5em 1em 0.5em 2.5em; font-size: 2rem; letter-spacing: 0.1em; line-height: 1.5em; font-weight: bold; transition: 0.3s; box-shadow:rgba(0, 50, 0, 0.5) 0 0 5px 2px; position: relative; z-index: 1; border-radius: 20px; overflow: hidden;}
.cv figure.btn a strong{ display: inline-block; background: #fff; color: #329632; padding: 0.125em 0.25em 0.25em; margin-right: 0.25em; font-size: 125%; line-height: 1em;}
.cv figure.btn a:after{ content: ""; width: 100%; height: 50%; background: rgba(0,0,0,0.1); position: absolute; left: 0; bottom: 0; z-index: -1;}
.cv figure.btn a:before{ content: "⇒"; display: flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; background: #fff; color: #329632; border-radius: 50%; position: absolute; left: 0.5em; top: 50%; transform: translateY(-50%);}
.cv figure.btn a:hover{ opacity: 0.7;}
@media screen and (max-width:767px){
.cv{ border: 1.875vw solid #c83232; padding: 3.75% 5%; margin-top: 15%;}
.cv h4{ width: calc(100% + 20vw); margin-left: -10vw; font-size: 1.75rem; border: 1.25vw double #fff; margin-bottom: 5%;}
.cv figure.btn{ margin: 5% 0 1.25%;}
.cv figure.btn a{ padding: 0.5em 1em 0.5em 2.5em; font-size: 1.5rem; letter-spacing: 0.05em; border-radius: 1.875vw;}
.cv figure.btn a strong{ font-size: 110%;}
.cv figure.btn a:before{ width: 1.5em; height: 1.5em;}
}

.cv figure.btn a{ animation: cv_btn ease-in-out 1.0s forwards infinite; animation-delay: 0s;}
@keyframes cv_btn{
0%{ transform: scale(1.0);}
50%{ transform: scale(1.05);}
100%{ transform: scale(1.0);}
}





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