@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;
text-align:left;
color:#191919;
background: url("../images/stripes-light.png");
background-size: 960px;
min-width:1080px;
}
@media screen and (max-width:767px){
html,body{ font-size:4vw; min-width:240px; max-width:767px; background-size: 100%;}
}

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

/*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:#191919;}
.gy{ color:#aaa;}

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



/*ヘッダー*/
header{ border-top: 10px solid #8A10A0; background: url("../images/bg.png") center top; position: relative; z-index: 1; overflow: hidden;}
header dl{ display: flex; align-items: center; justify-content: center; width: 1080px; margin: auto; padding: 60px 0;}
header dl dt{ width: 690px;}
header dl dd{ width: calc(100% - 690px); padding-left: 40px;}
header dl dt h1{ background: #8A10A0; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2.9rem; line-height: 1.25em; padding: 0.25em 0 0.33em; font-feature-settings: "palt";}
header dl dt h2{ text-align: center; padding: 20px; border-bottom: 2px solid #8A10A0;}
header dl dd figure{ width: 480px; transform: rotate(0deg); position: relative; z-index: 1;}
header dl dd figure:before{ content: ""; width: 50%; height: 50%; border-left: 4px solid #8A10A0; border-top: 4px solid #8A10A0; position: absolute; left: -12px; top: -12px; z-index: -1;}
header dl dd figure:after{ content: ""; width: 100%; height: 100%; border-right: 4px solid #FF8D02; border-bottom: 4px solid #FF8D02; position: absolute; left: 10px; top: 10px; z-index: -1;}
header #fv_txt{ background: #8A10A0; padding: 40px 0; text-align: center; font-size: 2.2rem; font-weight: bold; color: #fff; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
header #fv_txt strong.bg_wh{ background: #fff; color: #8A10A0; padding: 0 0.25em; margin: 0 0.25em;}
header #fv_txt strong.big{ font-size: 150%; line-height: 1.5em;}
@media screen and (max-width:767px){
header{ background: url("../images/bg2.png") center top no-repeat; background-size: 100%;}
header dl{ display: block; width: 100%; padding: 10% 3.75%;}
header dl dt{ width: 100%;}
header dl dd{ width: 100%; padding: 0; margin-top: 7.5%;}
header dl dt h1{ font-size: 2rem; letter-spacing: 0;}
header dl dt h2{ padding: 2.5%; line-height: 0;}
header dl dd figure{ width: 75%;}
header dl dd figure:before{ left: -1.875vw; top: -1.875vw;}
header dl dd figure:after{ left: 1.25vw; top: 1.25vw;}
header #fv_txt{ padding: 2.5% 2.5% 5%; font-size: 1.5rem;}
header #fv_txt strong.big{ font-size: 125%;}
}

/*フッター*/
p.copyright{ text-align:center; margin:0; padding:1em; background:#8A10A0; color:#fff; font-size:0.75rem; letter-spacing:0.1em;}
@media screen and (max-width:767px){
p.copyright{ font-size: 0.75rem; letter-spacing: 0;}
}

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

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.1em;}

/*btn*/
figure.btn{ display: flex; align-items: center; justify-content: center; margin-top: 40px;}
figure.btn a{ display: flex; align-items: center; justify-content: center; background: #FF8D02; color: #fff; font-size: 1.4rem; line-height: 1.5em; letter-spacing: 0.1em; font-weight: bold; padding: 0.5em 1.5em 0.66em; border: 8px double #fff; position: relative; z-index: 1; transition: 0.3s; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
figure.btn a:after{ content: ""; width: 100%; height: 50%; background: rgba(255,255,255,0.15); position: absolute; left: 0; top: 0;}
figure.btn a:hover{ opacity: 0.7;}
figure.btn a span strong{ font-size: 125%; margin: 0 0.25em;}
figure.btn a i{ font-size: 2.8rem; line-height: 1.5em; margin-right: 0.5em;}
@media screen and (max-width:767px){
figure.btn{ margin-top: 5%;}
figure.btn a{ width: 100%; padding: 0.5em 0 0.66em; font-size: 1.2rem; border-width: 1.25vw;}
figure.btn a span strong{ font-size: 120%;}
figure.btn a i{ font-size: 2.4rem; margin-right: 0.25em;}
}

/*lead*/
#lead{ padding: 80px 0;}
#lead .maincontent{ background: rgba(255,255,255,0.9); padding: 40px;}
#lead .txt{ border: 10px double #191919; padding: 20px; margin-bottom: 40px;}
#lead .txt ul li{ font-size: 1.2rem; font-weight: bold; line-height: 1.5em; padding: 0.5em 0.5em 0.5em 2em; border-bottom: 2px dotted #191919; position: relative;}
#lead .txt ul li:first-child{ border-top: 2px dotted #191919;}
#lead .txt ul li i{ position: absolute; left: 0.5em; top: 0.66em; line-height: 1.5em;}
#lead .img ul{ display: flex; width: calc(100% + 20px); margin: 0 0 0 -10px;}
#lead .img ul li{ width: calc(33.33% - 20px); margin: 0 10px;}
#lead .img ul li img{ padding:4px; background:#fff; box-shadow:rgba(0, 0, 0, 0.1) 0 0 2px 1px;}
@media screen and (max-width:767px){
#lead{ padding: 10% 0;}
#lead .maincontent{ padding: 5% 3.75%; border-radius: 2.5vw;}
#lead .txt{ border: 1.875vw double #191919; padding: 3.75%; margin-bottom: 5%;}
#lead .txt ul li{ font-size: 1rem;}
#lead .img ul{ flex-wrap: wrap; justify-content: center; width: calc(100% + 2.5vw); margin: -1.25vw 0 -1.25vw -1.25vw;}
#lead .img ul li{ width: calc(50% - 2.5vw); margin: 1.25vw;}
#lead .img ul li:first-child{ margin: 1.25vw 2.5vw;}
#lead .img ul li img{ padding: 0.75vw;}
}



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