/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

* {
margin:0;
padding:0;
vertical-align:top;
/*outline: 1px solid #500;*/
}
*,
::before,
::after {box-sizing:inherit;}

::before,
::after {
vertical-align:inherit; 
text-decoration:inherit;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
form,
fieldset,
input,
textarea,
blockquote,
th,
td {margin:0;padding:0;}

address,
caption,
cite,
code,
em,
th,
var {font-style:normal;}

ul {list-style:none;}
table {
border-collapse:collapse;
border-spacing:1;
width: 100%;
}

caption,
th {text-align:left;}

q::before,
q::after {content:'';}

object,
embed {vertical-align:top;}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {font-size:100%;}


/* ////////////// デバイス共通 ////////////// */
body {
font:16px/1.8 'Noto Serif JP', serif;
-webkit-text-size-adjust:100%;
overflow-x:hidden;
color:#000;
display: flex;
flex-direction: column;
min-height: 100vh;
letter-spacing: 0.02em;
text-align: justify;
}
footer {
margin-top: auto;
}
a{
color:#0066cc;
transition:all .1s;
text-decoration:none;
}
a:hover { opacity:0.6;}
a:active,
a:focus,
input:active,
input:focus {
outline:0;
}
img {
border-radius:10px;
max-width:50%;
}
section {
padding: 80px 0;
margin: 0 auto;
width: 81.6%;
max-width: 980px;
}
section ~ section {
padding-top: 0;
}
h2 {
margin:0;
padding:3.12%;
text-align:center;
font-size:28px;
background-color:#fff;
border-radius:10px;
font-weight:bold;
}
h2 span {
background:#fff;
padding:0 80px;
}
h3{
margin:6.24% auto;
color:#91c6c7;
font-weight:bold;
font-size:2.3em;
line-height:1.7;
}
h3 span{
padding:0;
font-size:1.5em;
vertical-align:middle;
}
ol.List_numb,
ul.List_dot { 
margin-left: 3em;
}
ol.List_numb li,
ul.List_dot li {
list-style-type: none;
counter-increment: cnt;
padding: 0.78%;
}
ol.List_numb li:before {
content: "(" counter(cnt) ")";
display: inline-block;
margin-left: -2.5em;
width: 2.5em;
}
ul.List_dot li:before {
content: "●";
transform: scale(0.7);
display: inline-block;
margin-left: -2.5em;
width: 2.5em;
}

.txt_alignR { text-align: right; margin-bottom: 1.56%;}
.txt_xxlarge { font-size: xx-large;}
.txt_xlarge { font-size: x-large;}

.note {
font-size:0.85em;
padding:1em;
text-indent:-1em;
}
.note::before {
content:"※";
}

/* PCのみで表示 */
.pc { display:inline!important; }
.sp { display:none!important; }

#headerWrap,
#footerWrap,
#InfoWrap,
.main_contents_box {
position:relative;
margin: 0 auto 1.5em;
width: 100%;
max-width: 1240px;
}
#InfoWrap {
margin: 1.5em auto 1.5em;
}
#footerWrap { z-index: 100;
}
.main_contents_box {
background: #fff;
}
.main_contents_box_bg {
background:#faf8f4;
}
#lower_wrap {
margin-top:0;
}
.h2_title_bg {
position: relative;
width: 100%;
height: 21.5vh;
background: #999;
}
#lower_wrap h2 {
position: absolute;
top: -5vh;
left: 4vw;
padding: 1.56% 4%;
}
#lower_wrap h3 {
color: #000;
font-size: 1.5em;
position: relative;
width: 100%;
margin: 0 0 4%;
padding-bottom: 1.56%;
border-bottom: 2px solid #999;
}
#lower_wrap h3:before {
content:"";
position: absolute;
left: 0;
bottom: -2px;
width: 80px;
height: inherit;
border-bottom: 2px solid #b0bf00;
}
#lower_wrap h4 {
font-size: 1.5em;
text-align: center;
margin-bottom:6.24%;
}
#lower_wrap * p {
margin-bottom: 12px;
}

#header {
width:100%;
height:auto;
/*position:absolute;
top: 0;
z-index: 1000;*/
background-image: linear-gradient(90deg, #b0bf00 0%, #82b2b3 70%);
}
#header section {
padding:0;
}
#footer {
position: relative;
background-image: url("../img/footer_bg.png");
background-size: cover;
background-position: 50% 20%;
width: 100%;
height: auto;
}
#headerWrap h1,
#footerWrap h1 {
float: left;
margin: 0 0 1.5em;
width: 40%;
}
#headerWrap img,
#footerWrap img {
border-radius: 0;
}
.panel_pc {
width: 100%;
margin: 1.5em 0;
}
#mainnav ul,
#footerWrap ul {
width:100%;
}
#mainnav ul li,
#footerWrap ul li {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#mainnav ul li.btn,
#footerWrap ul li.btn {
width: auto;
float: left;
margin-left: 1.56%;
margin-right: 1.56%;
}
#mainnav ul li.btn:first-child,
#footerWrap ul li.btn:first-child {
margin-left: 0;
}
#mainnav ul li.btn:last-child,
#footerWrap ul li.btn:last-child {
margin-right: 0;
}
#mainnav li a,
#footerWrap li a {
color:#fff;
font-weight:bold;
}
#mainnav li span,
#footerWrap li span {
border-bottom:2px solid #fff;
}
.footer_sub_nav {
margin: 2em 0 0;
padding:0.5em 0 2em;
color: #fff;
}
.footer_add { clear: both; margin-top: 6.24%;}


/* KVエリア -----------------*/
#mainImg {
background-image:linear-gradient(0deg, #FFF 9.36%, #82b2b3 0%);
/*position: relative;
width: 100%;
padding:0;*/
}
.catchcopy {
position: absolute;
top: 11em;
left: 69%;
z-index: 499;
/*width: 25%;*/
}
/*.catchcopy img {
max-width: 55%;
}*/
#subImg {
background-image: url("../img/top_mv_sub.png");
background-repeat: repeat-x;
background-size:contain;
background-position: 50% 50%;
margin: 2em 0;
width: 100%;
height: 20vh;
}
article.margin_only {
margin: 3.12%;
}

/* お知らせ -----------------*/
/*section#Info {
margin-top:3.12%;
}*/
#Info dl{
display: flex;
margin-top:1.56%;
border-bottom:1px solid #eee;
}
.Info_news dt{ width: 10%;}
.Info_news dd {
padding:0 0 1.56% 3.12%;
}
.Info_news_more {
padding:1.56% 0;
text-align:right;
}
.Info_news_more:before {
content: url("../img/icon_arrow.png");
vertical-align: top;
padding-right: 5px;
display: inline-block;
transform: scale(0.6);
}

/* リンクバナー -----------------*/
#OtherLinks {}
#OtherLinks ul {
display: flex;
flex-wrap: wrap;
width:81.6%;
margin: 0 auto;
justify-content: center;
}
#OtherLinks li.item {
width: calc(33.333% - 30px);
text-align: center;
margin-right: 30px;
border: 1px solid #eee;
}
#OtherLinks li.item:last-child {
margin-right: 0;
}
#OtherLinks li.item img {
max-width:100%;
}
.flex_bnr-box {
margin-right:3.12%;
border-radius:10px;
}

/* ////////////// 幅 980px〜1280px ////////////// */
@media (min-width: 980px) and (max-width: 1280px) {
#headerWrap,
#footerWrap,
#InfoWrap,
.main_contents_box {
max-width: 950px;
}
.catchcopy {
width: 22%;
top: 8.5em;
}
#mainnav ul li.btn, #footerWrap ul li.btn {
font-size: smaller;
}
.footer_sub_nav {
margin: 2em 0;
}
section #Info {
margin-top:0;
}
}

/* ////////////// 幅 980px以下〜 ////////////// */
@media only screen and (max-width:979px) { 
   .pc { display:none!important; }
   .sp { display:inline!important; }
   img { max-width: 100%; }
   #headerWrap {
   height:auto;
   }
   #footerWrap,
   #InfoWrap,
   #OtherLinks {
   width: 100%;
   margin: 0 auto;
   }
   #InfoWrap {
   margin: 2em auto 0;
   }
   .h2_title_bg,
   #lower_wrap .h2_title_bg {
   height: 32vh;
   }
   #lower_wrap h2 {
   position: inherit;
   top: 0;
   left: 0;
   padding: 2em 0 0;
   }
   #lower_wrap h3 {
   margin: 0 0 6.24%;
   }
   section {
   width: 90%;
   max-width: none;
   padding: 4em 0 5em;
   }
   ol.List_numb, ul.List_dot {
   margin-left: 2.5em;
   }
   ol.List_numb li, ul.List_dot li {
   padding: 3.12% 0;
   }
   p.note {
   padding: 0 1em;
   }
   .txt_xlarge {
   font-size: large;
   }

   /* ヘッダー  -----------------*/
   #header {
   position: absolute; /* スクロールで追従 absolute/fixed */
   width: 100%;
   z-index: 500;
   height: auto;
   }
   #headerWrap h1 {
   display: block;
   margin: 0 auto;
   padding: 1.2em 0 1.2em 1.5em;
   text-align: left;
   width:60%;
   }
   #headerWrap img,
   #footerWrap img {
   width: 100%;
   }

   /* ナビゲーション  -----------------*/
   #menuWrap {
   position: absolute;
   right: 0;
   top: 0;
   }
   a#menu{
   display:inline-block;
   position:relative;
   width: 40px;
   height: 40px;
   margin: 1.2em;
   z-index: 100;
   }
   #menuBtn{
   display:block;
   position:absolute;
   top:48%;
   right: 0;
   width:40px;
   height:2px;
   margin:0;
   background:#fff;
   transition:.1s;
   }  
   #menuBtn::before, #menuBtn::after{
   display:block;
   content:"";
   position:absolute;
   top:50%;
   right: 0;
   width:40px;
   height:2px;
   background:#FFF;
   transition:.1s;
   }
   #menuBtn::before{
   margin-top: -10px;
   }
   #menuBtn::after{
   margin-top: 10px;
   }
   a#menu .close{
   background:transparent;
   }
   a#menu .close::before,
   a#menu .close::after{
   margin-top:0;
   }
   a#menu .close::before{
   transform:rotate(-45deg);
   -webkit-transform:rotate(-45deg);
   background:#000;
   }
   a#menu .close::after{
   transform:rotate(-135deg);
   -webkit-transform:rotate(-135deg);
   background:#000;
   }
   .panel{
   width:100%;
   margin: 0;
   display:none;
   overflow:hidden;
   position:relative;
   left: 0;
   top: 0;
   z-index:0;
   transform: inherit;
   }
   .panel_heading {
   display: block;
   background-color: #fff;
   margin:0 auto;
   padding: 1.2em 0 1.2em 1.5em;
   text-align: left;
   }
   .panel_heading img.top_logo {
   max-width: 64.4%;
   margin:0 auto;
   }
   #mainnav{
   position:absolute;
   top:0;
   width:100%;
   text-align:right;
   z-index:500;
   }
   #mainnav ul{
   background: #f2eee4;
   text-align: center;
   margin-top:0;
   padding: 4em 0;
   height: 100vh;
   opacity: 0.92;
   }
   #mainnav ul li {
   margin-bottom: 3.12%;
   font-size: larger;
   }
   #mainnav li a{
   position:relative;
   display:block;
   padding:0 0 1em;
   color:#000;
   font-weight:bold;
   margin:0 auto;
   width:80%;
   }
   #mainnav li span {
   border-bottom:2px solid #000;
   }

   /* KVエリア -----------------*/
   #mainImg {}
   .catchcopy {
   position: absolute;
   bottom: 78%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 30%;
   }
   .catchcopy img {
   width: 115%;
   max-width: none;
   }
   .visual1, 
   .visual2,
   .visual3 {
   position: absolute;
   top: 50vh;
   left: -7vw;
   width: 100%;
   }
   #subImg {
   background-size: cover;
   height: 10vh;
   }

   /* フッター -----------------*/
   #footer{
   padding:6.24% 0;
   }
   #footer::after {
   height:50vh;
   }
   #footerWrap h1 {
   display: block;
   margin: 0 auto;
   padding: 1.5em;
   text-align: left;
   width: 50%;
   }
   #footerWrap ul {
   width: 100%;
   margin:0 0 3.12%;
   display: block;
   float: left;
   }
   #footerWrap ul li.btn {
   float: none;
   margin:0 0 3.12%;
   }
   #footerWrap ul li {
   display: block;
   }
   .footer_sub_nav {
   padding:0 1.5em 2em;
   clear: both;
   }

   /* お知らせ -----------------*/
   section#Info {
   margin-top: 135%;
   }
   #Info dl{
   display: block;
   margin-top:3.12%;
   border-bottom:1px solid #eee;
   }
   .Info_news dt{ width: auto;}
   .Info_news dd {
   padding:0 0 3.12% 0;
   }
   .Info_news_more {
   padding:3.12% 0;
   }

   /* リンクバナー -----------------*/
   #OtherLinks {
   }
   #OtherLinks ul {
   display: flex;
   }
   #OtherLinks li.item {
   width:100%;
   margin-right: 0;
   border:1px solid #eee;
   }
   .flex_bnr-box {
   margin-bottom:3.12%;
   border-radius:10px;
   }

   /* お問い合わせ */
   .contact_add-box {
   width:auto;
   padding:30px;
   }
}