@charset "UTF-8";

article{margin-top: 140px;overflow: hidden;}

/* @media screen and (min-width: 769px) {
.header_menu{display: none;}
} */
/* メイン */
.intro{width: 100vw;height: 100vh;z-index: 100000;position: fixed;top: 0;left: 0;display: none;}

.white{width: 100vw;height: 100vh;z-index: 100001;position: fixed;top: 0;left: 0;background: #fff;}

main{/* height: 100vh;overflow: hidden; */max-width:1920px;margin:0 auto;}

.main_img01{position: absolute;left: 0;top: 0; height: 100%;width: 100%;z-index: 10;}
.main img{width: 100%;}
@media screen and (min-width: 769px) {
.main_img02 .cap_w{left: 15px;}
}

.main_logo{width: 100%;height: 100%; position: absolute;top: 0;left: 0;z-index: 10;background: linear-gradient(to right, #d29cab, #e29fab);background-size: 400% 400%;display: block;/* background: linear-gradient(120deg,#3abacc 0%,#e29fab 25%,#e29fab 65%,#5d80ab 80%,#8b3a91 100%); */}
.main_logo::before{content: "";width: calc(100% - 12px);top: 5px;left: 5px;height: calc(100% - 12px);border: 1px solid #fff;position: absolute;}
.main_logo_bk{width: 100%;}
.main_logo_wrap{width: 401px;height: 400px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;z-index: 1;}
.main_logo_wrap img{max-width: none;}

.main_logo01{bottom:0;position: absolute;overflow: hidden;width: 401px;}
.main_logo01 span{animation-name: main_logo01;animation-duration: 1s;display: block;overflow: hidden;width: 401px;animation-fill-mode: forwards;animation-delay: 0.2s;}
.main_logo01 img{position: absolute;bottom: 0;}

.main_logo02{right:0;position: absolute;overflow: hidden;height: 400px;}
.main_logo02 span{animation-name: main_logo02;animation-duration: 1s;display: block;overflow: hidden;animation-delay: 1.2s;height: 400px;animation-fill-mode: forwards;}
.main_logo02 img{position: absolute;right: 0;}

.main_logo03{top:0;position: absolute;overflow: hidden;width: 401px;}
.main_logo03 span{animation-name: main_logo03;animation-duration: 1s;display: block;overflow: hidden;animation-delay: 2.2s;width: 401px;animation-fill-mode: forwards;}
.main_logo03 img{position: absolute;top: 0;}

.main_logo_img{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;z-index: 1;width: 332px;height: 523px;}

.main_mark{width: 250px;position: absolute;top: 16%;right: 20%;}
.main_helishot{position: absolute;height: 100%;width: 100%;}
.main_helishot img{position: absolute;width: auto;height: auto;bottom: 0; left: 50%;min-width: 100%;min-height: 100%;transform: translateX(-50%);}
.main_helishot::after{display: block;padding-top: 75%;content: '';}
@media (max-aspect-ratio: 16/9) {
.main_helishot img{max-width:none;height: 100%;}
}

@keyframes main_logo01 {
0%{height: 0;transform-origin:bottom;}
100%{height: 400px;transform-origin:bottom;}
}
@keyframes main_logo02 {
0%{width: 0;transform-origin:right;}
100%{width: 401px;transform-origin:right;}
}
@keyframes main_logo03 {
0%{height: 0;transform-origin:top;}
100%{height: 400px;transform-origin:top;}
}

@media screen and (max-width: 768px) {
article{margin-top: 0;}

header.header_menu{padding: 0;height: auto;background: none !important;box-shadow: none;}
.scroll_down header.header_menu{padding: 0;height: auto;background: rgba(255,255,255,0.8) !important;box-shadow:0px 0px 5px 1px #d3d3d3;}

main{height: auto;}
.main_logo{/* background: linear-gradient(120deg,#3abacc 0%,#e29fab 25%,#e29fab 65%,#5d80ab 80%,#8b3a91 100%); */animation: gradient 3s ease infinite;}
.main_logo_wrap{width: 160px;height: 160px;}
.main_logo_wrap img{max-width: none;width: 160px;height: 160px;}

.main_logo01{width: 160px;}
.main_logo01 span{animation-name: main_logo01_sp;width: 160px;}

.main_logo02{height: 160px;}
.main_logo02 span{animation-name: main_logo02_sp;height: 160px;}

.main_logo03{width: 160px;}
.main_logo03 span{animation-name: main_logo03_sp;width: 160px;}
.main_logo_img{width: 150px;height: 236px;}

.main_mark{width: 320px;position: absolute;top: 22%;right: 0;left: 0;margin: 0 auto;}
}

@keyframes main_logo01_sp {
0%{height: 0;transform-origin:bottom;}
100%{height: 160px;transform-origin:bottom;}
}
@keyframes main_logo02_sp {
0%{width: 0;transform-origin:right;}
100%{width: 160px;transform-origin:right;}
}
@keyframes main_logo03_sp {
0%{height: 0;transform-origin:top;}
100%{height: 160px;transform-origin:top;}
}



/* 行動提起 */
.koudou_tit_wrap{width: 1920px;left: 50%;transform: translateX(-50%);z-index: 30;}
.koudou_tit{padding: 50px 30px;animation-name:fadeInUp;max-width: 1084px;margin: 0 auto;}
.gaikan_img{position: absolute;bottom: 0;right: 0;}
.gaikan_img img{max-width: none;}
.request_start{ background: linear-gradient(120deg,#3abacc 0%,#e29fab 25%,#e29fab 65%,#5d80ab 80%,#8b3a91 100%); /*background: url("../img/top/request_start_bk.jpg") center center/cover; */text-align: center;padding: 30px 0;display: block;transition: all 0.3s;animation-name:fadeIn;}
.request_start:hover{opacity: 0.6;}
ul[class^="koudou_area01"]{display: flex;padding: 0 30px;}
ul[class^="koudou_area01"] li{border-right: 1px solid #333;flex-grow: 1;display: flex;align-items: center;justify-content: center;padding: 0 5px;animation-name: fadeInUp;}
ul[class^="koudou_area01"] li:last-of-type{border-right: none;}
ul[class^="koudou_area02"]{display: flex;}
ul[class^="koudou_area02"] li{flex-grow: 1;display: flex;align-items: center;justify-content: center;padding: 0 5px;animation-name: fadeInUp;}
ul[class^="koudou_area02"] li:last-of-type{border-right: none;}
.koudou_area01{max-width: 1200px;margin: 50px auto 0;}
.koudou_area02{max-width: 1100px;margin: 30px auto 50px;}

@media screen and (max-width: 768px) {
.request_start{padding: 5px 0;}
ul[class^="koudou_area01"]{flex-wrap: wrap; padding: 0 10px;}
ul[class^="koudou_area01"] li{border-right: none;padding: 15px 0 0;margin-top: 15px;}
ul[class^="koudou_area01"] li::after{content: "";position: absolute;display: block;bottom: -16px;left: 0px;width: calc(100% - 0px);height: 1px;background: #000;/*background:  linear-gradient(120deg,#3abacc 0%,#e29fab 25%,#e29fab 65%,#5d80ab 80%,#8b3a91 100%);*/}
ul[class^="koudou_area01"] li:last-of-type{border-right: none;}
ul[class^="koudou_area02"]{flex-wrap: wrap; padding: 0 10px;}
ul[class^="koudou_area02"] li{border-right: none;padding: 15px 0 0;margin-top: 15px;}
ul[class^="koudou_area02"] li::after{content: "";position: absolute;display: block;bottom: -16px;}
ul[class^="koudou_area02"] li:last-of-type{border-right: none;margin: -5px auto;}
.koudou_area01{margin: 0;}
.koudou_area01 li:first-of-type{margin-top: 10px;}
.koudou_area02{margin: 0 0 25px;}
.koudou_area02 li:last-of-type::after{display: none;}
}

/* バナー */
#bnrArge{max-width:820px;margin:0 auto;text-align: center;}
#bnrArge a.shining:hover img {opacity: 1}
#bnrArge .shining{display : inline-block;position: relative;overflow: hidden;background-image: -webkit-linear-gradient(#936A00 0, #BF9427 95%, #936A00 100%);background-image: linear-gradient(#936A00 0, #BF9427 95%, #936A00 100%);}
#bnrArge .shining:before{content: "";background-image: -webkit-linear-gradient(130deg,rgba(255,255,255,0) 20%, rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 80%);background-image: linear-gradient(130deg,rgba(255,255,255,0) 20%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 80%);width: 200%;height: 200%;position: absolute;top: -100%; left: -200%;-webkit-transition: all 0.5s;transition: all 0.5s;    z-index: 10000;}
#bnrArge .shining:hover:before {top: 0%;left: 100%;}

@media screen and (max-width: 768px) {
#bnrArge{max-width:90%;}
}



/* インフォメーション */
#information{background: #ebebe8;padding: 15px 30px;margin-top: 50px;}
#information .information_item{display: flex;max-width: 960px;margin: 40px auto;padding: 0 50px;}
#information .information_item h3{width: 13em;color: #6b5526;font-size: 16px;border-right: 1px solid #888;}
#information .information_item dl{display: flex;justify-content: space-between;width: calc(100% - 6em);height: 10em;overflow-y: scroll;flex-wrap: wrap;padding-left: 4%;flex-direction: row;font-size: 14px;}
#information .information_item dt{width: 7em;margin-bottom: 5px;}
#information .information_item dd{width: calc(100% - 2em);}
#information .information_item dd a,#information .information_item dd a:hover{text-decoration: underline;color:#000;}
#information .information_item dt:nth-of-type(n+2){margin-top: 10px;}
#information .information_item dd:nth-of-type(n+2){margin-top: 2px;}

#information .red{color:#ff0000;font-weight:bold;}
#information small{font-size:60%;}


@media screen and (max-width: 768px) {
#information{padding: 10px;margin-top: 30px;}
#information .information_item{flex-wrap: wrap;margin: 20px auto;padding: 0 25px;}
#information .information_item h3{width: 100%;color: #6b5526;font-size: 16px;border-bottom: 1px solid #888;border-right: none;padding-bottom: 3px;}
#information .information_item dl{width: 100%;/* height: 7.5em;overflow-y: scroll; */flex-wrap: wrap;padding-left: 0;margin-top: 10px;font-size: 12px;}
#information .information_item dt{width: 7em;}
}


/* リンクパネル */
#link_panel{margin: 50px 0;}
#link_panel a{margin: 0 15px;overflow: hidden;outline: none;}
#link_panel a img{transition: all 0.5s;}
#link_panel a h4{text-align: center;background: linear-gradient(to right,#7fccd6,#dfedd4);color: #000;font-size: 18px;padding: 11px 0 9px;letter-spacing: 0.1em;width: 65%;margin: 0 auto; position: absolute;top: 15%;left: 0;right: 0;z-index: 1;}
#link_panel a h4 span{display: inline-block;padding: 0 0.7em;margin-left: 40px;}
#link_panel a h4 span::before{content: "";background: url("../common/img/tit_mark.png") no-repeat;width: 31px;height: 31px;background-size: contain;display: inline-block;position: absolute;right: 100%;top: -1px;}
#link_panel a h4 + p{text-align: center;width: 100%;position: absolute;top: 50%;transform: translateY(-50%);font-size: 21px;color: #fff;text-shadow: 0 0 8px #000,0 0 8px #000,0 0 8px #000,0 0 8px #000,0 0 8px #000,0 0 8px #000;z-index: 1;}
#link_panel a > span{display: inline-block;background-color: rgba(0,0,0,0.8);color: #fff;padding: 8px 0;width: 165px; position: absolute;text-align: center;margin: 0 auto;bottom: 15%;left: 0;right: 0; z-index: 1;letter-spacing: 0.1em;transition: 0.5s all;}
#link_panel a > span::before{content: "";display: block; width: calc(100% - 8px);height: calc(100% - 8px);border: 1px solid #bbb;position: absolute;top:0;bottom:0;left:0;right: 0;margin: auto;}
#link_panel a .note{position: absolute;bottom: 10px;right: 10px;font-size: 13px;color: #fff;text-shadow: 0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000;z-index: 1;}
#link_panel div[class^="arrow_"]{position: absolute;bottom: -50px;z-index: 1;width: 120px; height: 30px;cursor: pointer;letter-spacing: 0.1em;padding: 0 8px;}
#link_panel div[class^="arrow_"]::before{content: "";width: 118px;height: 17px;position: absolute;bottom: 0;transition: 0.3s all;}
#link_panel .arrow_prev{left: 20%;text-align: right;}
#link_panel .arrow_prev::before{background: url("../img/top/prev_arrow.png") no-repeat;right: 0;}
#link_panel .arrow_next{right: 20%;}
#link_panel .arrow_next::before{background: url("../img/top/next_arrow.png") no-repeat;left: 0;}

@media screen and (min-width: 769px) {
#link_panel a:hover .link_panel_img{transform: scale(1.1);}
#link_panel a:hover > span{background-color: rgba(223,152,168,0.8);}
#link_panel a:hover > span::before{;border: 1px solid #fff;}
#link_panel .arrow_prev:hover::before{transform: translateX(-8px);}
#link_panel .arrow_next:hover::before{transform: translateX(8px);}
}


@media screen and (max-width: 768px) {
#link_panel{margin: 30px 0 50px;}

#link_panel .arrow_prev{left: 10%;}
#link_panel .arrow_next{right: 10%;}
}

@media screen and (max-width: 480px) {
#link_panel a{margin: 0 10px;}
#link_panel a h4{font-size: 3.5vw;padding: 2vw 0 1.8vw;width: 65%;top: 15%;}
#link_panel a h4 span{display: inline-block;padding: 0 0.7em;margin-left: 7.5vw;}
#link_panel a h4 span::before{width: 6vw;height: 6vw;}
#link_panel a h4 + p{font-size: 4.5vw;}
#link_panel a > span{padding: 2vw 0;width: 35vw;font-size: 3vw}
#link_panel a .note{bottom: 2vw;right: 2vw;font-size: 2.5vw;}
#link_panel div[class^="arrow_"]{bottom: -40px;z-index: 1;width: 90px; height: 25px;cursor: pointer;letter-spacing: 0.1em;padding: 0 8px;}
#link_panel div[class^="arrow_"]::before{content: "";width: 90px;height: 13px;}
#link_panel .arrow_prev::before{background-position: left bottom;}
#link_panel .arrow_next::before{background-position: right bottom;}

}

/* FUTURE GATE */
#future_gate{background: url("../img/top/future_gate_bk.jpg");background-position: right top;background-size: cover;}
.future_gate_wrap{max-width: 860px;padding: 50px 30px;margin: 0 auto;}
.future_gate_wrap > div{animation-name: fadeInUp;}
.future_gate_wrap h2{text-align: center;}
.future_gate_wrap h2 + h3{text-align: center;margin-top: 40px;font-size: 24px;}
.future_gate_wrap h3 + p{text-align: center;margin-top: 30px;}
.future_gate_img{display: flex;justify-content: space-between;margin-top: 50px;}
.future_gate_img li{width: 32.125%;}
#future_gate .note{text-align: right;margin-top: 5px;}
.future_gate_map{margin-top: 40px;animation-name: fadeIn;}

@media screen and (max-width: 768px) {
.future_gate_wrap{padding: 30px 0 0;}
.future_gate_wrap h2 img{width: 230px;}
.future_gate_wrap h2 + h3{margin-top: 25px;font-size: 18px;}
.future_gate_wrap h3 + p{margin-top: 20px;padding: 0 20px;}
.future_gate_img{margin-top: 20px;padding: 0 20px;}
.future_gate_img li{width: 32.5%;}
#future_gate .note{margin-top: 3px;padding-right: 20px;}
.future_gate_map{margin-top: 25px;}
}


/* DEVELOPMENT */
#development{background: linear-gradient(-60deg,#cde7d4,#7fccd7)}
.development_wrap{max-width: 1340px;padding: 50px 30px;margin: 0 auto;}
.development_wrap h2{font-size: 24px;padding: 10px 10px 8px 10px;margin-bottom: 10px;background: linear-gradient(120deg,#e29fab 15%,#5d80ab 80%,#8b3a91 100%);color: #fff;}
.development_wrap h2 span{display: inline-block;padding: 5px 15px 3px;margin-right: 1.5em;font-size: 15px;background: #fff; vertical-align: 0.2em;color: #333;}
.development_wrap > div{animation-name: fadeInUp;}
.development_wrap > div:nth-of-type(2){margin-top: 45px;}
.development_item{display: flex;justify-content: space-between;margin-top: 30px;}
.development_item li{width: 48.5%;}
.development_item li .note{margin-top: 5px;text-align: left;}
.development_wrap p span{font-size:12px;}
.development_2cl{display: flex;justify-content: space-between;}
.development_2cl > *{width: 48.5%;}

@media screen and (max-width: 768px) {
#development{background: linear-gradient(30deg,#cde7d4,#7fccd7)}
.development_wrap{padding: 25px 20px;}
.development_wrap h2{font-size: 16px;margin-bottom: 15px;}
.development_wrap h2 span{padding: 2px 10px 1px;font-size: 11px;margin-bottom: 7px;}
.development_wrap > div:nth-of-type(2){margin-top: 30px;}
.development_item{flex-wrap: wrap; margin-top: 13px;}
.development_item li{width: 100%;text-align: center;}
.development_item li:nth-of-type(2){margin-top: 15px;}
.development_wrap p span{font-size:10px;}
.development_2cl{flex-wrap: wrap;}
.development_2cl > *{width: 100%;}
.development_2cl > figure{margin-top: 13px;}
}

@keyframes gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}