@charset "utf-8";
/* CSS Document */

/*CSSリセット*/
html, body, 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; -webkit-text-size-adjust: 100%;}

/*共通レイアウト*/
body {font-family: -apple-system, BlinkMacSystemFont, Roboto, "メイリオ", YuGothic, "Meiryo", sans-serif; margin:0;}
p,div,ul,ol,li,h1,h2,h3,h4,h5,h6,section,nav {margin:0; padding:0; list-style:none; display:block; line-height:1.4em;}

/*ページトップ*/
.pagetop{display:block; position:fixed; z-index:10; bottom:30px; right:30px; width:60px; height:60px; border-radius:30px; background:#015845; border:2px solid #FFF;}
.pagetop a{display:block; color:#FFF; text-align:center; padding-top:8px;}

/*回りこみ回避*/
.clearfix:after {content:" ";display:block;clear:both;}

/*スクロールバー*/
::-webkit-scrollbar{width: 10px;}
::-webkit-scrollbar-track{background: #fff;border: none;border-radius: 10px;box-shadow: inset 0 0 2px #777;}
::-webkit-scrollbar-thumb{background: #444;border-radius: 10px;box-shadow: none;}
#wrapper {width:100%; position:relative; min-height: 100vh;}
html {scroll-behavior: smooth;}

/*パネル操作*/
.panel {display:none; text-align: center;}
.panel.active {display: block; }


/*ページ入場時初期動作*/
#start {animation: fadeIn 1s ease 0s 1 normal;-webkit-animation: fadeIn 1s ease 0s 1 normal;}
@keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}
@-webkit-keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}


/*アニメーション遅延*/
.delay01{animation-delay: 0.1s;} .delay02{animation-delay: 0.2s;} .delay03{animation-delay: 0.3s;} .delay04{animation-delay: 0.4s;} .delay05{animation-delay: 0.5s;} .delay06{animation-delay: 0.6s;} .delay07{animation-delay: 0.7s;} .delay08{animation-delay: 0.8s;} .delay09{animation-delay: 0.9s;} .delay10{animation-delay: 1.0s;}
.delay11{animation-delay: 1.1s;} .delay12{animation-delay: 1.2s;} .delay13{animation-delay: 1.3s;} .delay14{animation-delay: 1.4s;} .delay15{animation-delay: 1.5s;} .delay16{animation-delay: 1.6s;} .delay17{animation-delay: 1.7s;} .delay18{animation-delay: 1.8s;} .delay19{animation-delay: 1.9s;} .delay20{animation-delay: 2.0s;}
.delay21{animation-delay: 2.1s;} .delay22{animation-delay: 2.2s;} .delay23{animation-delay: 2.3s;} .delay24{animation-delay: 2.4s;} .delay25{animation-delay: 2.5s;} .delay26{animation-delay: 2.6s;} .delay27{animation-delay: 2.7s;} .delay28{animation-delay: 2.8s;} .delay29{animation-delay: 2.9s;} .delay30{animation-delay: 3.0s;}
/*-------------------------------------------------*/

/*開閉式メニュー（タブレット以下）*/

header nav.responsive .outer-menu .menu a,header nav.responsive .outer-menu .menu a:visited,header nav.responsive .outer-menu .menu a:hover,header nav.responsive .outer-menu .menu a:active {color: inherit; text-decoration: none;}
header nav.responsive .outer-menu {position: fixed; top:0; right:60px; z-index: 101;}
header nav.responsive .outer-menu .checkbox-toggle {position: absolute; top: 0; left: 0; z-index: 103; cursor: pointer; width: 60px; height: 60px; opacity: 0;}
header nav.responsive .outer-menu .checkbox-toggle:checked + .hamburger span {transform: rotate(135deg);}
header nav.responsive .outer-menu .checkbox-toggle:checked + .hamburger span:before,.outer-menu .checkbox-toggle:checked + .hamburger span:after {top: 0; transform: rotate(90deg);}
header nav.responsive .outer-menu .checkbox-toggle:checked + .hamburger span:after {opacity: 0;}
header nav.responsive .outer-menu .checkbox-toggle:checked ~ .menu {pointer-events: auto; visibility: visible;}
header nav.responsive .outer-menu .checkbox-toggle:checked ~ .menu div {transform: scale(1); transition-duration: 0.75s;}
header nav.responsive .outer-menu .checkbox-toggle:checked ~ .menu div div {opacity: 1; transition: opacity 0.4s ease 0.4s;}
header nav.responsive .outer-menu .checkbox-toggle:hover + .hamburger {box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);}
header nav.responsive .outer-menu .checkbox-toggle:checked:hover + .hamburger span {transform: rotate(225deg);}

/*トグルボタンデザイン*/
header nav.responsive .outer-menu .hamburger {position: absolute; top: 0; left: 0; z-index: 102; width: 60px; height: 60px; background: #015845; border-radius: 0 0.12em 0.12em 0; cursor: pointer; transition: box-shadow 0.4s ease;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; align-items: center; justify-content: center;}
header nav.responsive .outer-menu .hamburger span {position: relative; flex: none; width: 25px; height: 2px; background: #FEFEFE; transition: all 0.4s ease; display: flex; align-items: center; justify-content: center;}
header nav.responsive .outer-menu .hamburger span:before,.outer-menu .hamburger span:after {content: ''; position: absolute; z-index: 102; top: -10px; left: 0; width: 100%; height: 2px; background: inherit; transition: all 0.4s ease;}
header nav.responsive .outer-menu .hamburger span:after {top: 10px;}
header nav.responsive .outer-menu .menu {position: fixed; top: 0; left: 0; z-index: 101; width: 100%; height: 100%; pointer-events: none; visibility: hidden; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;}
header nav.responsive .outer-menu .menu  div {width: 200vw; height: 200vw; color: #FEFEFE; background: rgba(5,130,88,0.7); transition: all 0.4s ease; flex: none; transform: scale(0); -webkit-backface-visibility: hidden;
	backface-visibility: hidden; overflow: hidden; display: flex; align-items: center; justify-content: center;}
header nav.responsive .outer-menu .menu div div {text-align: center; max-width: 100vw; max-height: 100vh; opacity: 0; transition: opacity 0.4s ease; overflow-y: auto; flex: none; display: flex; align-items: center; justify-content: center;}
header nav.responsive .outer-menu .menu div div ul {list-style: none; padding: 0 1em; margin: 0; display: block; max-height: 100vh;}
header nav.responsive .outer-menu .menu div div ul li {padding: 0; margin: 1.5em; font-size: 160%; display: block;}

/*リンククリックしたらイベント終了したい*/
header nav.responsive .outer-menu .menu div div ul li a {position: relative; display: inline; cursor: pointer; transition: color 0.4s ease;}
header nav.responsive .outer-menu .menu div div ul li a:hover {color: #e5e5e5;}
header nav.responsive .outer-menu .menu div div ul li a:hover:after {width: 100%;}
header nav.responsive .outer-menu .menu div div ul li a:after {content: ''; position: absolute; z-index: 1; bottom: -0.15em; left: 0; width: 0; height: 2px; background: #e5e5e5; transition: width 0.4s ease;}

/*-------------------------------------------------*/

header nav.formhead p{background:url(../images/logo.png) no-repeat; background-size:150px auto; text-indent:-9987em; width:150px; height:44px; margin:4px auto;}


/*以下骨組　MFI順*/



/*-------------------------------------------------*/


/*スマホ版レイアウト*/
body#top {position:relative;}
body#top::before {content:""; display:block; position:fixed; top:0px; left:0px; z-index:-1; width:100%; height:100vh; background:url(../images/top-image01-sp.jpg) no-repeat; background-size: cover;}

header{width:100%; height:48px; background:#015845; padding:6px 0; position:fixed; z-index:100; top:0;}
header nav.menu{display:none;}
header nav.responsive p{color:#FFF; font-family: 'Secular One', sans-serif; font-size:24px; width:240px; height:44px; margin:8px auto;}
header nav.responsive p a{display: block; width:240px; height:44px; color:#FFF; font-weight:bold; text-decoration:none; text-align:center;}


/*共通フッター*/

footer {width:100%; background:#015845; position:relative; z-index:10; bottom:0; color:#FFF; margin-top:-20px;}
footer p {text-align: center; padding: 20px 0; font-size: 80%;}
footer #footbox{width:100%; margin:0 auto; padding:0 0 20px 0; color:#FFF; border-top:1px solid #FFF}
footer #footbox .sns{width:200px; color:#FFF; padding:10px 0; margin:15px auto 0 auto;}
footer #footbox .sns h1{width:240px; font-family: 'Secular One', sans-serif; font-size:25px;}
footer #footbox .sns h1 a{width:240px; height:32px; color:#FFF; text-decoration:none;}
footer #footbox strong a{display:block; margin:0 0 5px 0; color:#FFF; text-decoration: underline;}
footer #footbox li a{color:#FFF; font-size: 90%; text-decoration: underline; line-height:2.5em;}
footer #footbox a:hover{text-decoration:none;}
footer nav{width:calc(50% - 40px); padding:0 20px 10px 20px; float:left; margin:0 auto; line-height:2.5em; font-size: 80%;}


/*モーダル用コンテンツ*/
.container01,.container02,.container03,.container04,.container05,.container06,.container07,.container08,.container09,.container10,.container11,.container12{
display:none; position:fixed; z-index:200; width:100%; height:100%; top:0; left:0; overflow:auto;
}
.overlay01,.overlay02,.overlay03,.overlay04,.overlay05,.overlay06,.overlay07,.overlay08,.overlay09,.overlay10,.overlay11,.overlay12{
position: fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.7);
}

.body{display:table; width:100%; height:100%;}
.main{display:table-cell; text-align:center; vertical-align:middle; padding:25px;}
.content{position:relative; display:inline-block; width:88vw; background:#FFF; padding:35px 55px; box-sizing:border-box; border-radius:10px;}
.content h2{font-size:160%; padding:15px 0 25px 0; color:rgba(1,128,67,1.00);}
.content button{color:#FFF; font-size:120%; font-weight:bold; background: linear-gradient(0deg, rgba(1,88,69,1) 26%, rgba(5,130,88,1) 67%, rgba(7,153,99,1) 100%); width:240px; line-height:2.5em; border:0; border-radius:5px; margin-top:25px; cursor: pointer;}

.content .articlespace{width:100%; height:450px; margin:0 5% 20px 5%; overflow-Y:scroll; text-align:left;}
.content .articlespace p{font-size:100%; margin:20px 20px 20px 0; line-height:1.6em;}
.content .articlespace h3{font-size:130%; margin:40px 0 10px 0;}
.content .articlespace ul{margin-bottom:30px;}
.content .articlespace ul li{display:inline-block; font-size:100%; margin:0 15px 15px 0; padding:10px 30px; background-color:#FFFF66; border-radius:10px;}
.content .articlespace a.contactbt{display:inline-block; color:#FFF; text-decoration:none; font-size:100%; font-weight:bold; background: linear-gradient(0deg, rgba(1,88,69,1) 26%, rgba(5,130,88,1) 67%, rgba(7,153,99,1) 100%); border-radius:5px; padding:10px 20px; margin-bottom:30px;}


/*-------------------------------------------------*/


/*TB版たてレイアウト*/

@media screen and (min-width:481px) and ( max-width:768px){

body {background:#DAE9E6;}
body#top {background:url(../images/top-image01-tb.jpg) no-repeat; background-size:100% auto; background-attachment: fixed;}
body#top::before {content:none;}

header{width:100%; height:48px; background:#015845; padding:6px 0; position:fixed; z-index:100; top:0;}
header nav.menu{display:none;}
header nav.responsive p{color:#FFF; font-family: 'Secular One', sans-serif; font-size:28px; width:240px; height:44px; margin:8px auto;}
header nav.responsive p a{display: block; width:240px; height:44px; color:#FFF; font-weight:bold; text-decoration:none;}


/*共通フッター*/
footer {width:100%; background:#015845; position:relative; z-index:10; bottom:0; color:#FFF; margin-top:-20px;}
footer p {text-align: center; padding: 20px 0; font-size: 80%;}
footer #footbox{width:100%; margin:0 auto; padding:0 0 20px 0; color:#FFF; border-top:1px solid #FFF}
footer #footbox .sns{width:200px; color:#FFF; padding:15px 0; margin:15px auto 0 auto;}
footer #footbox .sns h1{width:240px; font-family: 'Secular One', sans-serif; font-size:25px;}
footer #footbox .sns h1 a{width:240px; height:32px; color:#FFF; text-decoration:none;}
footer #footbox strong a{display:block; margin:0 0 10px 0; color:#FFF; text-decoration: underline;}
footer #footbox li a{color:#FFF; font-size: 80%; text-decoration: underline;}
footer #footbox a:hover{text-decoration:none;}
footer nav{width:calc(50% - 80px); padding:0 40px 20px 40px; float:left; margin:0 auto; line-height:2.5em; font-size:100%;}


/*モーダル用コンテンツ*/
.container01,.container02,.container03,.container04,.container05,.container06,.container07,.container08,.container09,.container10,.container11,.container12{
display:none; position:fixed; z-index:200; width:100%; height:100%; top:0; left:0; overflow:auto;
}
.overlay01,.overlay02,.overlay03,.overlay04,.overlay05,.overlay06,.overlay07,.overlay08,.overlay09,.overlay10,.overlay11,.overlay12{
position: fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.7);
}


.body{display:table; width:100%; height:100%;}
.main{display:table-cell; text-align:center; vertical-align:middle; padding:25px;}
.content{position:relative; display:inline-block; width:88vw; background:#FFF; padding:35px 55px; box-sizing:border-box; border-radius:10px;}
.content h2{font-size:160%; padding:15px 0 25px 0; color:rgba(1,128,67,1.00);}
.content button{color:#FFF; font-size:120%; font-weight:bold; background: linear-gradient(0deg, rgba(1,88,69,1) 26%, rgba(5,130,88,1) 67%, rgba(7,153,99,1) 100%); width:240px; line-height:2.5em; border:0; border-radius:5px; margin-top:25px; cursor: pointer;}

.content .articlespace{width:90%; height:450px; margin:0 5% 20px 5%; overflow-Y:scroll; text-align:left;}
.content .articlespace p{font-size:100%; margin:20px 20px 20px 0; line-height:1.6em;}
.content .articlespace h3{font-size:145%; margin:40px 0 10px 0;}
.content .articlespace ul{margin-bottom:30px;}
.content .articlespace ul li{display:inline-block; font-size:115%; margin:0 15px 15px 0; padding:10px 30px; background-color:#FFFF66; border-radius:10px;}
.content .articlespace a.contactbt{display:inline-block; color:#FFF; text-decoration:none; font-size:110%; font-weight:bold; background: linear-gradient(0deg, rgba(1,88,69,1) 26%, rgba(5,130,88,1) 67%, rgba(7,153,99,1) 100%); border-radius:5px; padding:10px 20px; margin-bottom:30px;}
}


/*-------------------------------------------------*/


/*TB版よこレイアウト*/


@media screen and (min-width:769px) and ( max-width:1024px){

body {background:#DAE9E6;}
body#top {background:url(../images/top-image01.jpg) no-repeat; background-size:100% auto; background-attachment: fixed;}
body#top::before {content:none;}

header{width:100%; height:48px; background:#015845; padding:6px 0; position:fixed; z-index:100; top:0;}
header nav.menu{display:none;}
header nav.responsive p{color:#FFF; font-family: 'Secular One', sans-serif; font-size:28px; width:240px; height:44px; margin:8px auto;}
header nav.responsive p a{display: block; width:240px; height:44px; color:#FFF; font-weight:bold; text-decoration:none;}


/*共通フッター*/

footer {width:100%; background:#015845; position:relative; z-index:10; bottom:0; color:#FFF; margin-top:-20px;}
footer p {text-align: center; padding: 20px 0; font-size: 80%;}
footer #footbox{width:100%; margin:0 auto; padding:0 0 20px 0; color:#FFF; border-top:1px solid #FFF}
footer #footbox .sns{float:left; width:calc(33% - 35px); color:#FFF; padding:5px 0 0 35px;}
footer #footbox .sns h1{width:240px; font-family: 'Secular One', sans-serif; font-size:25px;}
footer #footbox .sns h1 a{width:240px; height:32px; color:#FFF; text-decoration:none;}
footer #footbox strong a{display:block; margin:0 0 10px 0; color:#FFF; text-decoration: underline;}
footer #footbox li a{color:#FFF; font-size: 80%; text-decoration: underline;}
footer #footbox a:hover{text-decoration:none;}
footer nav{width:calc(33% - 40px); padding:15px 20px; float:left; border-left:1px solid #FFF; font-size:100%;}


/*モーダル用コンテンツ*/
.container01,.container02,.container03,.container04,.container05,.container06,.container07,.container08,.container09,.container10,.container11,.container12{
display:none; position:fixed; z-index:200; width:100%; height:100%; top:0; left:0; overflow:auto;
}
.overlay01,.overlay02,.overlay03,.overlay04,.overlay05,.overlay06,.overlay07,.overlay08,.overlay09,.overlay10,.overlay11,.overlay12{
position: fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.7);
}

.body{display:table; width:100%; height:100%;}
.main{display:table-cell; text-align:center; vertical-align:middle; padding:25px;}
.content{position:relative; display:inline-block; width:88vw; background:#FFF; padding:35px 55px; box-sizing:border-box; border-radius:10px;}
.content h2{font-size:160%; padding:15px 0 25px 0; color:rgba(1,128,67,1.00);}
.content button{color:#FFF; font-size:120%; font-weight:bold; background: linear-gradient(0deg, rgba(1,88,69,1) 26%, rgba(5,130,88,1) 67%, rgba(7,153,99,1) 100%); width:240px; line-height:2.5em; border:0; border-radius:5px; margin-top:25px; cursor: pointer;}

.content .articlespace{width:90%; height:450px; margin:0 5% 20px 5%; overflow-Y:scroll; text-align:left;}
.content .articlespace p{font-size:100%; margin:20px 20px 20px 0; line-height:1.6em;}
.content .articlespace h3{font-size:145%; margin:40px 0 10px 0;}
.content .articlespace ul{margin-bottom:30px;}
.content .articlespace ul li{display:inline-block; font-size:115%; margin:0 15px 15px 0; padding:10px 30px; background-color:#FFFF66; border-radius:10px;}
.content .articlespace a.contactbt{display:inline-block; color:#FFF; text-decoration:none; font-size:110%; font-weight:bold; background: linear-gradient(0deg, rgba(1,88,69,1) 26%, rgba(5,130,88,1) 67%, rgba(7,153,99,1) 100%); border-radius:5px; padding:10px 20px; margin-bottom:30px;}
}


/*-------------------------------------------------*/


/*PC版レイアウト*/


@media screen and (min-width:1025px){

body {background:#DAE9E6;}
body#top {background:url(../images/top-image01.jpg) no-repeat; background-size:100% auto; background-attachment: fixed;}
body#top::before {content:none;}

/*共通ヘッダー*/

header{width:100%; height:75px; background:#FFF; position:fixed; z-index:100; top:0;}
header nav.menu{width:1080px; margin:0 auto; display:block;}
header nav.responsive{display:none;}
header nav ul{margin:0;}
header nav ul li:first-child{display:block; width:280px; margin-right:90px; border-left:none; float:left;}
header nav ul li:first-child a{color:#015845; padding:29px 15px 26px 0; font-family: 'Secular One', sans-serif; font-size:30px;}
header nav ul li:first-child a:hover{opacity: 0.5; text-decoration:none;}
header nav ul li.arrows{display:block; text-align:center; font-size:80%; float:left; position:relative; margin-left:25px;}
header nav ul li.arrows:before{content:''; display:inline-block; position:absolute; left:3px; top:34px; width:5px; height:5px; border-bottom:1px solid #888; border-right:1px solid #888; transform:rotateZ(-45deg);}
header nav ul li a{font-weight:bold; display:block; padding:29px 15px; text-align:center; color:#111; text-decoration:none;}
header nav ul li a:hover{font-weight:bold; cursor:pointer; color:rgba(1,88,69,1); text-decoration:underline;}


/*共通フッター*/

footer {width:100%; background:#015845; position:relative; z-index:10; bottom:0; color:#FFF; margin-top:-20px;}
footer p {text-align: center; padding: 20px 0; font-size: 80%;}
footer #footbox{width:1080px; margin:0 auto; padding:0 0 20px 0; color:#FFF; border-top:1px solid #FFF}
footer #footbox .sns{float:left; width:calc(33% - 25px); color:#FFF; padding:0 0 0 25px;}
footer #footbox .sns h1{width:260px; font-family: 'Secular One', sans-serif; font-size:30px;}
footer #footbox .sns h1 a{width:260px; color:#FFF; text-decoration:none;}
footer #footbox strong a{display:block; margin:0 0 10px 0; color:#FFF; text-decoration: underline;}
footer #footbox li a{color:#FFF; font-size: 80%; text-decoration: underline;}
footer #footbox a:hover{text-decoration:none;}
footer nav{width:calc(33% - 40px); padding:15px 20px; float:left; border-left:1px solid #FFF; font-size:100%;}


/*モーダル用コンテンツ*/
.container01,.container02,.container03,.container04,.container05,.container06,.container07,.container08,.container09,.container10,.container11,.container12{
display:none; position:fixed; z-index:200; width:100%; height:100%; top:0; left:0; overflow:auto;
}
.overlay01,.overlay02,.overlay03,.overlay04,.overlay05,.overlay06,.overlay07,.overlay08,.overlay09,.overlay10,.overlay11,.overlay12{
position: fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.7);
}

.body{display:table; width:100%; height:100%;}
.main{display:table-cell; text-align:center; vertical-align:middle; padding:25px;}
.content{position:relative; display:inline-block; width:88vw; background:#FFF; padding:35px 55px; box-sizing:border-box; border-radius:10px;}
.content h2{font-size:180%; padding:15px 0 25px 0; color:rgba(1,128,67,1.00);}
.content button{color:#FFF; font-size:120%; font-weight:bold; background: linear-gradient(0deg, rgba(1,88,69,1) 26%, rgba(5,130,88,1) 67%, rgba(7,153,99,1) 100%); width:240px; line-height:2.5em; border:0; border-radius:5px; margin-top:25px; cursor: pointer;}

.content .articlespace{width:90%; height:450px; margin:0 5% 20px 5%; overflow-Y:scroll; text-align:left;}
.content .articlespace p{font-size:100%; margin:20px 20px 20px 0; line-height:1.6em;}
.content .articlespace h3{font-size:145%; margin:40px 0 10px 0;}
.content .articlespace ul{margin-bottom:30px;}
.content .articlespace ul li{display:inline-block; font-size:115%; margin:0 15px 15px 0; padding:10px 30px; background-color:#FFFF66; border-radius:10px;}
.content .articlespace a.contactbt{display:inline-block; color:#FFF; text-decoration:none; font-size:110%; font-weight:bold; background: linear-gradient(0deg, rgba(1,88,69,1) 26%, rgba(5,130,88,1) 67%, rgba(7,153,99,1) 100%); border-radius:5px; padding:10px 20px; margin-bottom:30px;}
}