@charset "UTF-8";

@media screen and (min-width: 769px) {
article{margin-top: 0;}
header{opacity: 0;pointer-events: none;transition: 0.3s all;background: rgba(255,255,255,0.8);}
header h1 a{pointer-events: none;display: inline-block;}
header .hb_menu{pointer-events: none;}
header.on{opacity: 1;pointer-events: all;}
header.on h1 a::before{content: "";width: 100%;height: 100%;display: block;position: absolute;left: 0;top: 0;background: url("../common/img/logo.svg") no-repeat center center/contain;}
header.on h1 a img{opacity: 0;}
header.on h1 a{pointer-events: all;}
header.on .hb_menu{pointer-events: all;}
}

article{overflow: hidden;color: #333;}

/* メイン */
main{overflow: hidden;height: calc(56.25vw - 10px);}
main img{width: 100%;}
main .main_plot{width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;}
main .main_tit{width: 100%;position: absolute;left: 0;top: clamp(100px, 10%, 9999px);opacity: 0;text-align: center;}
main .main_tit p{font-size: 1.67vw;letter-spacing: 0.05em;margin-bottom: 0.3em;text-align: center;padding-left: 0.3em;}
main .main_tit .logo_name_img{width: 41.25%;margin: 1vw auto 0;}
main .main_tit .main_tit_img{width: 25.5%;margin: 1vw auto 0;}

@media screen and (max-width: 768px) {
main{height: 104.16vw;}
main .main_tit{width: 100vw;top: 7vw;}
main .main_tit p{font-size: 4.3vw;}
main .main_tit .logo_name_img{width: 89vw;margin: 2vw auto 0;}
main .main_tit .main_tit_img{width: 55vw;margin: 2vw auto 0;}
}

/* 行動提起 */
#koudou{}
.koudou_tit_wrap{background: linear-gradient(to bottom,#8bcecc 10%,#0093a2);color: #fff;padding: 1.5em 0;}
.koudou_tit{font-size: 2em;text-align: center;line-height: 1.2;}
.koudou_tit small{font-size: 0.7em;text-align: center;display: block;line-height: 1.5;}
.koudou_tit span{font-size: 0.6em;}
.koudou_tit i{font-size: 0.7em;}
.koudou_wrap{background: #eae9e5;}
.koudou_item{padding: 1.2em 0;display: flex;justify-content: center;}
.koudou_item > *{border-right: 1px solid #333;letter-spacing: 0.07em;line-height: 1.3;text-align: center;overflow: hidden;}
.koudou_item > *:last-of-type{border-right: none;}
.koudou_item > * div{animation-name: fadeInUp;}
.koudou_item > dt{padding: 0 1em;}
.koudou_item > dt div{display: flex;align-items: center;}
.koudou_item small{font-size: 0.7em;text-align: center;margin-right: 0.7em;line-height: 1.3;}
.koudou_item small.frame{padding: 0.4em 0.5em;border: 1px solid #333;}
.koudou_item big{font-size: 1.4em;}
.koudou_item strong{font-size: 2.3em;font-family: "EB Garamond", serif;margin-top: -0.25em;}
.koudou_item + .koudou_item{border-top: 1px solid #333;}
.koudou_item > dd{padding: 0 1.8em;}
.koudou_item > dd small{margin-right: 0;}
.koudou_item > dd small.bl{display: block;}

@media screen and (min-width: 769px) {
.koudou_item > *:nth-of-type(2) div{animation-delay: 0.3s;}
.koudou_item > *:nth-of-type(3) div{animation-delay: 0.6s;}
.koudou_request_btn:hover{background: #fff;}
.koudou_request_btn:hover span{color: var(--main_color);}
.koudou_request_btn:hover span::after{transform: translateX(0.2em);background: url("../common/img/arrow_r.svg") no-repeat center center/contain;}
}

@media screen and (max-width: 768px) {
.koudou_tit_wrap{font-size: 3.2vw;}
.koudou_wrap{padding: 0.5em 0;}
.koudou_item{padding: 0;flex-wrap: wrap;white-space: nowrap;}
.koudou_item > *{border-right: none;border-bottom: 1px solid #777;font-size: 3.8vw;width: 100%;}
.koudou_item > *:last-of-type{border-bottom: none;}
.koudou_item > dt{padding: 0.5em 0;}
.koudou_item > dt div{justify-content: center;}
.koudou_item + .koudou_item{border-top: 1px solid #777;}
.koudou_item > dd{padding: 0.5em 0;font-size: 4vw;}
}

.link_panel{margin-top: 4em;}
.link_panel > i{display: block;position: absolute;right: 0;top: 0;bottom: 0;margin: auto 0;animation-name: fadeInRight;}
.link_panel_wrap{max-width: 76em;padding: 0 1em;display: flex;justify-content: center;align-items: center;margin: 0 auto;}
.link_panel_wrap > dt{width: 50em;}
.link_panel_wrap > dt figure{animation-name: width100;overflow: hidden;}
.link_panel_wrap > dt img{object-fit: cover;max-width: none;width: 50em;}
.link_panel_wrap > dd{width: 25em;text-align: center;animation-name: fadeInRight;}
.link_panel_tit{color: #605046;font-size: 1.4em;letter-spacing: 0.2em;font-family: "EB Garamond", serif;padding-left: 0.2em;}
.link_panel_tit + p{font-size: 0.9em;margin-top: 1.5em;letter-spacing: 0.1em;}
.link_panel_wrap .readmore_btn{font-size: 0.7em;letter-spacing: 0.05em;color: #333;margin-top: 3em;display: inline-block;}
.link_panel_wrap .readmore_btn::after{content: "";width: 1.93em;height: 1.93em;background: url("../img/readmore_i.svg") no-repeat center center/contain;display: inline-block;vertical-align: -0.6em;margin-left: 0.6em;transition: 0.5s all;}
.link_panel_wrap .comingsoon_btn{font-size: 0.7em;letter-spacing: 0.05em;color: #aaa;margin-top: 3em;display: inline-block;pointer-events: none;}

section:nth-of-type(odd) > i{right: auto;left: 0;animation-name: fadeInLeft;}
section:nth-of-type(odd) .link_panel_wrap > dt{display: flex;justify-content: flex-end;}
section:nth-of-type(odd) .link_panel_wrap > dt figure{width: 100%;height: 30em;}
section:nth-of-type(odd) .link_panel_wrap > dt figure img{position: absolute;right: 0;top: 0;}

#position{margin-top: 10em;}
#position > i{background: url("../img/position_bk.png") no-repeat center center/contain;width: 34em;height: 23.5em;}
#position .link_panel_wrap > dt{display: flex;justify-content: space-between;align-items: flex-start;}
#position .link_panel_wrap > dt div:nth-of-type(1){width: 20em;left: 0;}
#position .link_panel_wrap > dt div:nth-of-type(1) img{width: 20em;}
#position .link_panel_wrap > dt div:nth-of-type(2){width: 17em;right: 5.5em;}
#position .link_panel_wrap > dt div:nth-of-type(2) img{width: 17em;animation-delay: 0.3s;}
#position .link_panel_wrap > dt div:nth-of-type(3){position: absolute;bottom: 0;right: 0;}
#position .link_panel_wrap > dt div:nth-of-type(3) img{width: 27em;}
#location > i{background: url("../img/location_bk.png") no-repeat center center/contain;width: 29em;height: 36.3em;}
#access > i{background: url("../img/access_bk.png") no-repeat center center/contain;width: 34em;height: 23.5em;}
#town_planning > i{background: url("../img/town_planning_bk.png") no-repeat center center/contain;width: 29.05em;height: 20.2em;}
#plan > i{background: url("../img/plan_bk.png") no-repeat center center/contain;width: 29em;height: 36.3em;}
#quality > i{background: url("../img/quality_bk.png") no-repeat center center/contain;width: 34em;height: 23.5em;}

@media screen and (min-width: 769px) {
section:nth-of-type(odd) .link_panel_wrap > dt{order: 2;}
section:nth-of-type(odd) .link_panel_wrap > dd{order: 1;animation-name: fadeInLeft;}

.link_panel_wrap .readmore_btn:hover::after{transform: rotate(360deg);}
}

@media screen and (min-width: 769px) and (max-width: 1560px) {
.link_panel{font-size: 1.25vw;}
}

@media screen and (min-width: 1921px) {
.link_panel{font-size: 1.01vw;}
}

@media screen and (max-width: 768px) {
.link_panel{margin-top: 4em;}
.link_panel > i{font-size: 2.5vw;top: auto;}
.link_panel_wrap{flex-wrap: wrap;}
.link_panel_wrap > dt{font-size: 1.84vw;}
.link_panel_wrap > dd{width: 100%;margin-top: 1.8em;animation-name: fadeInUp;padding-bottom: 0.5em;}

#position{margin-top: 4em;}
#position .link_panel_wrap > dt div:nth-of-type(1){left: 1em;}
#position .link_panel_wrap > dt div:nth-of-type(2){right: 4.5em;}
#position .link_panel_wrap > dt div:nth-of-type(3){right: -0.5em;}


#quality{padding-bottom: 2em;}
}