@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;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 Serif JP', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;
font-size:20px;
font-weight: 500;
text-align:left;
color:#333;
background-size: cover;
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;}


/*txt*/
p{ text-align: justify; 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:#333;}
.gy{ color:#aaa;}
.red{ color:#f078b4;}
.yellow{ color: #faf078;}
.bg_y{ background: linear-gradient(to bottom, rgba(250,240,120,0) 0%, rgba(250,240,120,0) 50%, rgba(250,240,120,0.5) 51%, rgba(250,240,120,0.5) 100%);}

.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{ position: relative; z-index: 5; overflow: hidden; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
header h1{ width: 1920px; position: relative; left: 50%; transform: translateX(-50%);}
header figure.btn{ width: 1080px; display: flex; justify-content: flex-start; position: absolute; left: 0; right: 0; bottom: 60px; margin: auto;}
header figure.btn a{ display: flex;}
@media screen and (max-width:767px){
header h1{ width: 100%; position: static; transform: none;}
header figure.btn{ width: 92.5%; bottom: 6.25vw;}
}

/*フッター*/
footer p{ background: #000; color: #fff; text-align: center; font-size: 0.75rem; padding: 0.75em;}
@media screen and (max-width:767px){
}

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

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

/*txt*/
p.txt{ font-size: 1.2rem;}
p.txt strong{ font-size: 120%;}
@media screen and (max-width:767px){
p.txt{ font-size: 1rem;}
p.txt strong{ font-size: 110%;}
}

/*btn*/
figure.btn{ display: flex; align-items: center; justify-content: center;}
figure.btn a{ display: flex; align-items: center; justify-content: center; transition: 0.3s;}
figure.btn a:hover{ opacity: 0.7;}
figure.btn a{ position: relative; animation: btn linear 1.0s alternate infinite;}
@keyframes btn{
0%{ transform: translateY(-0.75vw);}
100%{ transform: translateY(0.75vw);}
}



/*sec01*/
#sec01{ background: url("../images/bg01.jpg"); background-size: cover;}
#sec01 h2{ text-align: center; font-size: 2rem; margin-bottom: 40px; position: relative; z-index: 1;}
#sec01 h2:before{ content: ""; width: 300px; height: 100px; background: url("../images/tit_ico.png") center center no-repeat; background-size: 100%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}

#sec01 .lead{ margin-bottom: 80px; position: relative;}
#sec01 .lead figure.ico{ width: 200px; position: absolute; right: 0; top: 0;}
#sec01 .lead p.txt{ font-size: 1.2rem;}

#sec01 .style ul{ display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin: 0 0 0 -10px;}
#sec01 .style ul li{ width: calc(25% - 20px); margin: 0 10px; border: 4px solid #333; background: rgba(255,255,255,0.75);}
#sec01 .style ul li figure{ margin: 20px;}
#sec01 .style ul li h4{ background: #333; color: #fff; text-align: center; font-size: 1.2rem;}
@media screen and (max-width:767px){
#sec01 h2{ font-size: 1.5rem; letter-spacing: 0; margin-bottom: 5%;}
#sec01 h2:before{ width: 45vw; height: 15vw;}

#sec01 .lead{ margin-bottom: 15%;}
#sec01 .lead figure.ico{ width: 33.33%; position: static;}
#sec01 .lead p.txt{ font-size: 1rem;}

#sec01 .style ul{ width: calc(100% + 2.5vw); margin: -1.25vw 0 -1.25vw -1.25vw;}
#sec01 .style ul li{ width: calc(50% - 2.5vw); margin: 1.25vw;}
#sec01 .style ul li figure{ margin: 5vw 10vw;}
#sec01 .style ul li h4{ font-size: 1rem;}
}



/*sec02*/
#sec02{ padding: 60px 0 80px; background: url("https://www.transparenttextures.com/patterns/az-subtle.png") #f078b4; color: #fff;}
#sec02 h2{ background: #fff; color: #f078b4; font-size: 3rem; line-height: 1em; padding: 0.25em 0 0.33em; text-align: center;}
#sec02 ul li{ margin-top: 60px;}
#sec02 ul li h3{ font-size: 1.8rem; padding-left: 1.25em; margin-bottom: 10px; position: relative;}
#sec02 ul li h3 span{ position: absolute; left: 0; top: 0;}
#sec02 ul li h3 strong{ text-decoration: underline;}
#sec02 p.txt{ font-size: 1rem;}
@media screen and (max-width:767px){
#sec02{ padding: 7.5% 0 15%;}
#sec02 h2{ font-size: 2rem;}
#sec02 ul li{ margin-top: 10%;}
#sec02 ul li h3{ font-size: 1.25rem; letter-spacing: 0; margin-bottom: 2.5%;}
#sec02 p.txt{ font-size: 0.9rem;}
}



/*sec03*/
#sec03{ background: url("../images/bg02.jpg"); background-size: cover;}
#sec03 p{ background: rgba(255,255,255,0.5); border: 10px double #333; padding: 40px; text-align: center; font-size: 2rem; font-weight: bold;}
@media screen and (max-width:767px){
#sec03 p{ text-align: justify; border: 1.875vw double #333; padding: 3.75%; font-size: 1.1rem;}
}



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