@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";
text-align:left;
color:#191919;
min-width:1000px;
}
@media screen and (max-width:768px){
html,body{ font-size:4vw; min-width:240px; max-width:768px;}
}

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

/*txt*/
p{ font-size: 0.9rem; line-height:1.75em; margin:0 0 1em; padding:0; text-align: justify;}
@media screen and (max-width:767px){
p{ font-size: 0.8rem;}
}
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;}

.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: 1000px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #326496; padding: 12px;}
header figure{ margin: 0;}
header figure img{ height: 36px;}
header nav{ margin: 0 0 0 auto;}
header nav ul{ display: flex; align-items: center; justify-content: flex-end;}
header nav ul li{ margin: 0 0 0 1.5em; font-size: 0.8rem;}
header nav ul li a{ transition: 0.3s;}
header nav ul li a i{ margin-right: 0.25em;}
header nav ul li a:hover{ color: #326496;}
@media screen and (max-width:768px){
body{ padding-top: 10vw;}
header{ min-width: 100%; padding: 1.875vw; display: block;}
header nav{ margin: 1.875vw auto 0;}
header nav ul{ justify-content: center;}
header nav ul li{ font-size: 1rem; margin: 0 1em;}

header figure{ width: auto; margin: 0;}
header figure img{ width: auto; height: 6.25vw;}
}

/*fv*/
#fv{ background: url("../images/fv.jpg") center center no-repeat; background-size: cover; width: 100%; height: 360px; position: relative; overflow: hidden;}
#fv h1{ display: inline-block; background: rgba(0,50,100,0.9); color: #fff; position: absolute; left: -40px; bottom: 40px; padding: 0.25em 1.5em 0.25em 2em; font-size: 2.4rem; transform: skewX(22.5deg);}
#fv h1 strong{ display: inline-block; transform: skewX(-22.5deg);}
@media screen and (max-width:768px){
#fv{ height: 66.66vw;}
#fv h1{ left: -6.25vw; bottom: 5vw; font-size: 2rem; letter-spacing: 0.1em; padding: 0.25em 1em 0.25em 1.5em;}
}

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

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.5em; letter-spacing: 0.1em;}
@media screen and (max-width:768px){
h1,h2,h3,h4,h5,h6{ letter-spacing: 0.05em;}
}

/*メイン*/
#content{ display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: center; padding: 40px 20px 0; overflow:hidden;}
#content #main{ width: 700px;}
#content #sub{ width: 220px; margin-right: 40px; border-radius: 20px 20px 0 0; overflow: hidden;}
@media screen and (max-width:768px){
#content{ display: block; padding: 10% 0 0;}
#content #main{ width: 100%;}
#content #sub{ width: 100%; margin: 15% auto 0; border-radius: 0;}
}

#content section{ width:100%; margin:0 auto;}
#content .maincontent{ padding:0; margin:0 auto; width:720px;}
@media screen and (max-width:768px){
#content .maincontent{ padding:0; margin:0 auto; width:92.5%;}
}



/*sub*/
#content #sub dl dt{ background: #326496; color: #fff; padding: 0.5em 1em; text-align: center; font-size: 0.9rem; line-height: 1em; font-weight: bold;}
#content #sub dl dd{ background: #c8e1fa; padding: 20px; font-size: 0.8rem; line-height: 1em;}
#content #sub dl dd ul li{ border-bottom: 1px solid #326496; padding: 0.5em;}
#content #sub dl dd ul li:first-child{ border-top: 1px solid #326496;}
#content #sub dl dd ul li:before{ content: "・";}
#content #sub dl dd ul li a{ transition: 0.3s;}
#content #sub dl dd ul li a:hover{ color: #326496;}
@media screen and (max-width:768px){
#content #sub dl dt{ font-size: 0.9em;}
#content #sub dl dd{ padding: 3.75%; font-size: 0.8rem;}
#content #sub dl dd ul{ display: flex; flex-wrap: wrap; justify-content: center;}
#content #sub dl dd ul li{ width: 50%; border: none; padding: 0.625%; text-align: center;}
#content #sub dl dd ul li:first-child{ border: none; width: 100%;}
#content #sub dl dd ul li:before{ display: none;}
#content #sub dl dd ul li a{ background: rgba(255,255,255,0.5); display: block; padding: 0.33em 0.5em 0.5em;}
/*
#content #sub dl dd ul li:not(:first-child):before{ content: "|"; margin: 0 1em;}
*/
}



/*main*/
#main h2{ background: #326496; color: #fff; font-size: 1.2rem; padding: 0.5em 0.5em; border-top: 8px double #fff; border-bottom: 8px double #fff; margin-bottom: 40px; text-align: center;}
#main h3{ font-size: 1.2rem; color: #326496; margin: 1.5em auto 0.5em; overflow: hidden;}
#main h3 strong{ display: inline-block; position: relative;}
#main h3 strong:after{ content: ""; width: 750px; height: 2px; background: #326496; position: absolute; right: -750px; top: 50%;}
@media screen and (max-width:768px){
#main h2{ font-size: 1.2rem; border-width: 1.25vw; margin-bottom: 7.5%;}
#main h3{ font-size: 1.2rem;}
}

#main .box{ margin: 40px auto;}
#main .box dl{ border: 6px solid #326496; padding: 20px;}
#main .box dl dt{ font-size: 1.2rem; padding-bottom: 0.25em; font-weight: bold; color: #326496; text-align: center; border-bottom: 2px solid #326496; margin-bottom: 0.5em;}
@media screen and (max-width:768px){
#main .box{ margin: 7.5% auto;}
#main .box dl{ border: 1.25vw solid #326496; padding: 3.75%;}
#main .box dl dt{ font-size: 1.1rem;}
}

#main .list{ border: 8px double #326496; padding: 20px; margin: 40px auto;}
#main .list ul li{ font-size: 1rem; line-height: 1.5em; font-weight: bold; color: #326496; padding: 0.5em 0.5em 0.5em 2em; border-bottom: 2px dotted #326496; position: relative;}
#main .list ul li:first-child{ border-top: 2px dotted #326496;}
#main .list ul li i{ position: absolute; left: 0.5em; top: 0.5em; line-height: 1.5em;}
@media screen and (max-width:768px){
#main .list{ border: 1.25vw double #326496; padding: 3.75%; margin: 7.5% auto;}
#main .list ul li{ font-size: 0.9rem;}
}

#main .list2{ margin-top: 1em;}
#main .list2 ul li{ font-size: 1rem; line-height: 1.5em; font-weight: bold; color: #326496; padding: 0.5em 0.5em 0.5em 2em; border-bottom: 2px dotted #326496; position: relative;}
#main .list2 ul li:first-child{ border-top: 2px dotted #326496;}
#main .list2 ul li i{ position: absolute; left: 0.5em; top: 0.5em; line-height: 1.5em;}
@media screen and (max-width:768px){
#main .list2 ul li{ font-size: 0.9rem;}
}

#main .detail{ margin: 40px auto;}
#main .detail h4{ border-left: 8px solid #326496; border-bottom: 2px solid #326496; color: #326496; padding: 0.125em 0.25em 0.25em 0.5em; margin: 1.5em 0 0.5em;}
#main .detail ul{ margin-left: 1em; font-size: 0.8rem;}
#main .detail ul li{ padding-left: 1em; position: relative;}
#main .detail ul li:before{ content: "・"; position: absolute; left: 0; top: 0;}
@media screen and (max-width:768px){
#main .detail{ margin: 7.5% auto;}
#main .detail h4{ border-left: 1.25vw solid #326496;}
#main .detail ul{ font-size: 0.9rem;}
}

#main .detail .recom{ font-size: 1.2rem;}
#main .detail .recom ul{ font-size: 1rem; font-weight: bold;}
#main .detail .recom ul li{ padding-left: 1.25em; margin-bottom: 0.25em;}
#main .detail .recom ul li:before{ display: none;}
#main .detail .recom ul li i{ position: absolute; left: 0; top: 0; line-height: 1.5em;}
@media screen and (max-width:768px){
#main .detail .recom{ font-size: 1.2rem;}
#main .detail .recom ul{ font-size: 0.9rem;}
}

#main .message{ margin: 80px auto 0;}
#main .message p{ text-align: center; font-size: 1.1rem; color: #326496; font-weight: bold;}
@media screen and (max-width:768px){
#main .message{ margin: 15% auto 0;}
#main .message p{ font-size: 1.05rem;}
}



/*mission*/
#mission figure.img{ margin-top: 80px;}
@media screen and (max-width:768px){
#mission figure.img{ margin-top: 15%;}
}


/*ts*/
#ts table{ width: calc(100% + 2em); border-collapse: separate; border-spacing: 1em; margin: -1em 0 -1em -1em; font-size: 0.9rem;}
#ts table th{ width: 200px; background: #326496; color: #fff; padding: 0.5em 1em; vertical-align: middle; text-align: center;}
#ts table td{ background: #fff; padding: 0.5em 0; vertical-align: middle;}
@media screen and (max-width:768px){
#ts table{ width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0 auto; font-size: 0.9rem;}
#ts table th{ display: block; width: 100%; padding: 0.5em;}
#ts table td{ display: block; width: 100%; padding: 0.5em 0.5em 1.5em;}
}



/*pv*/
#pv dl{ margin: 40px auto 0;}
#pv dl dt{ font-size: 1rem; border-bottom: 1px solid #326496; color: #326496; font-weight: bold;}
#pv dl dd{ padding: 1em; font-size: 0.8rem;}
#pv dl dd p{ text-align: justify;}
@media screen and (max-width:768px){
#pv dl{ margin: 5% auto 0;}
#pv dl dd{ padding: 0.5em;}
}





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