/*!
* Theme Name: 株式会社ゆうき 様
* Theme URI: 
* Author: 
* Author URI: 
* Description: 
* Version: 1.0
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Zen+Kaku+Gothic+New:wght@500;900&family=Material+Symbols+Outlined:wght@200&display=swap");
@import url(core.css);

html {font-family: "Poppins", "Zen Kaku Gothic New", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", verdana, Sans-Serif;}
html:lang(zh-CN), html:lang(zh-Hans) {font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",    "Source Han Sans SC",-apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

.wp-note p, .wp-note ul, .wp-note ol{line-height: 180%;}
.wp-note table td, .wp-note table th, .wp-note table p, .wp-note table ul, .wp-note table ol{line-height: 150%;}
@media only screen and (max-width: 48.8125em){
	.wp-note p, .wp-note ul, .wp-note ol{line-height: 180%;}
}

body{letter-spacing: 0.05em;}
@media only screen and (max-width: 48.8125em){
body{letter-spacing: 0.05em;}
}

.container-half{max-width: 55%!important;}
.mainbody{/*margin-top: 100px;*/}

/**
 * Header
 */
.tour-header{background-color: #faf5e3;}
.tour-header .container-full{display: flex; align-items: center; justify-content: space-between; height: 8em;}
.tour-header .logo{display: block; margin-left: 2.5em;}
.tour-header .logo img{height: 5em; width: auto;}
.tour-header .bogo-language-switcher{display: none;}
.tour-header .lang .wrapper{display: inline-flex; align-items: center;}
.tour-header .lang .wrapper::before{display: inline-block; content: "\e894"; font-family: "material symbols outlined"; font-size: 175%; font-weight: bold; color: #666;}
.tour-header .label-langswitch {display: inline-flex; align-items: center; position: relative; }
.tour-header .label-langswitch::after {position: absolute; right: 15px; width: 10px; height: 7px; background-color: #535353; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ''; pointer-events: none;}
.tour-header .label-langswitch select {appearance: none; min-width: 150px; height: 2.8em; padding: .4em calc(.8em + 30px) .4em .8em; border: none; border-bottom: 2px solid #d0d0d0; background-color: transparent; color: #333333; font-size: 1em; cursor: pointer;}
.tour-header .label-langswitch select:focus {outline: none;}

@media only screen and (max-width: 48.8125em){
.tour-header .container-full{height: 4.5em;}
.tour-header .logo{margin-left: 0;}
.tour-header .logo img{height: 3em;}
.tour-header .lang .wrapper::before{font-size: 125%;}
.tour-header .label-langswitch select {min-width: 100px; height: 2em;}
}

/**
 * Sidebar
 */

/**
 * Footer
 */
.modal_confirm{position: fixed; left: 0; bottom: -100%; display: inline-flex; background-color: rgba(0, 0, 0, 0.75); padding: 2.5em; margin: 0 0 2em 2em; z-index: 10000; max-width: 700px; line-height: 175%; align-items: center; gap: 2em; transition: bottom 2s ease;}
.modal_confirm.active{bottom: 0;}
.modal_confirm .txt{color: #fff;}
.modal_confirm a{text-decoration: underline; color: inherit;}
.modal_confirm a:hover{text-decoration: none;}
.modal_confirm .agree{display: inline-flex; line-height: 200%; font-size: 90%; font-weight: bold; background-color: #fff; color: #333; padding: 0 2em; border-radius: 5em; white-space: nowrap; cursor: pointer;}
.modal_confirm .close{position: absolute; top: .75em; right: .75em; display: inline-block;}
.modal_confirm .close::before{display: inline-block; content: "\e5c9"; font-family: "material symbols outlined"; font-weight: normal; font-size: 175%; color: #fff; cursor: pointer;}
@media only screen and (max-width: 48.8125em){
	.modal_confirm{display: block; padding: 2.5em .5em 1.5em .5em; margin: 0; max-width: initial; line-height: 150%;}
	.modal_confirm .txt{font-size: 100%;}
	.modal_confirm .close{top: .5em; right: .5em;}
	.modal_confirm .btn{text-align: right; margin-top: .5em;}
}

.footer{position: relative; background-color: #faf5e3;}
.footer .hill{position: relative; background-image: url("./assets/images/tour-footer-background.png"); height: 10em; mask-image: url("./assets/images/tour-footer-hill.svg"); mask-repeat: no-repeat; mask-size: 100% auto; mask-position: right 0 bottom -1px; z-index: 2}
.footer .tree{position: absolute; left: 2em; top: 0; z-index: 1; width: auto; height: 10em;}
.footer_wrapper{background-image: url("./assets/images/tour-footer-background.png");}
.footer_wrapper .container{display: flex; justify-content: space-between;}
.footer_wrapper .logo{display: inline-block; margin-bottom: 2em;}
.footer_wrapper .logo img{filter: brightness(0) invert(1); width: 15em;}
.footer_wrapper-l{color: #fff;}
.footer_wrapper-l .addr{margin-bottom: 0.5em;}
.footer_wrapper-l .tel span{font-size: 125%;}
.footer_wrapper-r{display: inline-flex; grid-gap: 1em;}
.footer_wrapper-r img{width: 2.5em; height: auto;}
.footer .copyright{text-align: center; font-size: 90%; color: #fff; margin-top: 5em;}

@media only screen and (max-width: 48.8125em){
	.footer .hill{height: 3.5em;}
	.footer .tree{height: 3.5em;}
	.footer_wrapper .container{display: block;}
	.footer_wrapper .logo img{width: 10em;}
	.footer_wrapper-l{text-align: center;}
	.footer_wrapper-r{display: flex; margin-top: 3em; justify-content: center;}
	.footer_wrapper-r img{width: 2em;}
}

/**
 * Content
 */
.page-viewport{background-color: #faf5e3;}
.page-viewport .wp-note h1{color: #005e3c; font-size: 275%; font-weight: bold; line-height: 120%; margin-bottom: 2.5rem;}
.page-viewport .wp-note h2{color: #4299af; font-size: 200%; font-weight: bold; line-height: 150%; margin-top: 2.5rem; margin-bottom: 1rem;}
.page-viewport .wp-note a{color: blue; text-decoration: underline;}
.page-viewport .wp-note a:hover{text-decoration: none;}

@media only screen and (max-width: 48.8125em){
	.page-viewport .wp-note h1{font-size: 175%;}
	.page-viewport .wp-note h2{font-size: 125%;}
}

.c7-tbox .label{display: block; margin-bottom: 0.5px; font-size: 90%; font-weight: bold;}
.c7-tbox input {width: 100%; padding: .5em .75em; border: 1px solid #969da3; border-radius: .25em; font-size: 1.1rem; line-height: 150%;}
.c7-tbox input::placeholder {color: #999;}
.c7-tarea .label{display: block; margin-bottom: 0.5px; font-size: 90%; font-weight: bold;}
.c7-tarea textarea {width: 100%; padding: .5em .75em; border: 1px solid #969da3; border-radius: .25em; font-size: 1.1rem; line-height: 150%;}
.c7-tarea textarea::placeholder {color: #999;}
.wpcf7-submit{-webkit-appearance: none; background-color: #126335; background-image: none; border: none; border-radius: .25em; color: #fff; cursor: pointer; display: inline-block; font-size: 1rem; margin: 0 0 1em; padding: 0.6em 2em; text-decoration: none; }
.wpcf7-submit:hover, .wpcf7-submit:focus {outline: none;}
.wpcf7-submit::-moz-foucus-inner {border: none;padding: 0;}
.wpcf7-form .wpcf7-not-valid {background-color: #ffe5e5;}
.wpcf7-curtain{position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,0.25); z-index: 100000;}
.wpcf7-curtain.active{display: block;}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {border: none; background-color: brown; color: #fff;}

/**
 * Tour Content
 */
.tour-maincatch{position: relative; background-color: #faf5e3; height: 48em; overflow: hidden;}
.tour-maincatch .container-wide{display: flex; align-items: flex-end; height: 100%;}
.tour-maincatch .container-wide .wrapper{position: relative; z-index: 5;}
.tour-maincatch .title{font-weight: bold; font-size: 400%; line-height: 100%; color: #005e3c; margin-bottom: .75em;}
.tour-maincatch .title span{display: inline-flex; background-color: rgba(240, 230, 0, 0.75); margin-bottom: 0.15em; padding: .5rem .5rem;}
.tour-maincatch .title .small{display: inline-flex; font-size: 60%; padding: 0 0.5rem!important;}
.tour-maincatch .txt{font-size: 125%; line-height: 200%; font-weight: bold;}

.tour-maincatch .swiper-container{position: absolute; top: 0; left: 0; height: 100%; width: 100%;}
.tour-maincatch .swiper-container .swiper-slide{width: 50em; height: 83%; padding: 1.25em;}
.tour-maincatch .swiper-container .swiper-slide img{border-radius: 2em; box-shadow: 0.5em 0.5em 0; color: #005e3c;}

.tour-info{position: relative; background-color: #faf5e3; padding-bottom: 0!important; overflow: hidden;}
.tour-info .container{position: relative; z-index: 3;}
.tour-info .tour-info_wrapper{position: relative; margin-bottom: 4.5em; height: 40em; z-index: 2;}
.tour-info .tour-info_feature{position: absolute; top: 50%; left: 50%; line-height: 175%; width: 700px; transform: translate(calc(-50% + 220px), -50%);}
.tour-info .tour-info_feature p{margin-bottom: 1.5em; font-size: 110%; line-height: 200%;}
.tour-info .tour-info_wrapper .catch{width: calc(50% - 250px); height: 100%; border-top-right-radius: 2.5em; border-bottom-right-radius: 2.5em;}
.tour-info mark{background: linear-gradient(transparent 50%, yellow 50%); text-decoration: none!important; font-style: inherit; font-weight: inherit; color: inherit;}
.tour-info .grid-features{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 2em; margin-bottom: -7em;}
.tour-info .grid-features .item{position: relative; padding: 2.5em; background-color: #fff; line-height: 175%; border-radius: 2em;}
.tour-info .grid-features .item .title{font-size: 125%; font-weight: bold; text-align: center; margin-bottom: 1em;}
.tour-info .grid-features .num{position: absolute; top: 0; left: 0; display: inline-flex; color: #005e3c; font-weight: bold; font-size: 300%; transform: translate(-25%, -50%); align-items: center; line-height: 0.35em;}
.tour-info .grid-features .num::before{display: inline-block; content: 'Appeal'; color: #b1a479; font-size: 20%; font-weight: normal; writing-mode: sideways-lr;}
.tour-info .hill{position: relative; background-image: url("./assets/images/background-wall-2.png"); mask-image: url("./assets/images/tour-sep-hill-2.svg"); mask-repeat: no-repeat; mask-size: 100% auto; mask-position: left bottom; width: 100%; height: 6.5vw; min-height: 110px; z-index: 2;}
.tour-info .tree{position: absolute; right: 0; bottom: 0; z-index: 1; width: 25em; height: auto; opacity: .5!important;}

.tour-experience{background-image: url("./assets/images/background-wall-2.png"); line-height: 200%;}
.tour-experience .gallary{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin-top: 3.5em; column-gap: 2em; grid-row-gap: 3em;}
.tour-experience .gallary .item{position: relative; display: block; width: 100%; height: 12em;}
.tour-experience .gallary .item img{border-radius: 1em; display: block; width: 100%; height: 100%; box-shadow: 0.5em 0.5em 0 #fff;}
.tour-experience .gallary .item figcaption{position: absolute; top: 0; left: 50%; display: flex; align-items: center; justify-content: center; color: #005e3c; background-color: #fff723; border-radius: 1.5em; font-size: 90%; line-height: 115%; transform: translate(-50%, -50%); padding: 0.5em 1em; font-weight: bold; width: calc(100% - 3em); text-align: center;}

.tour-sep{background-color: #faf5e3;}
.tour-sep .hill{background-image: url("./assets/images/background-wall-2.png"); mask-image: url("./assets/images/tour-sep-hill-1.svg"); mask-repeat: no-repeat; mask-size: 100% auto; mask-position: left 0 top 0; width: 100%; height: 6.5vw; min-height: 110px;}
.tour-sep .wrapper{display: flex; align-items: center; justify-content: space-between;}
.tour-sep .leaf{padding-left: 3em; padding-bottom: 3em;}
.tour-sep .cloud{margin-right: -2em;}

.tour-question{padding-bottom: 0!important; background-color: #faf5e3;}
.tour-question .question-list{position: relative; z-index: 5; display: block; width: 950px; margin: 0 auto;}
.tour-question .question-list .item{display: block; line-height: 175%; cursor: pointer;}
.tour-question .question-list .que{display: grid; grid-template-columns: 2em 1fr 2em; padding: 1.5em; justify-content: space-between; align-items: center; column-gap: .5em; background-color: rgba(250,245,227,0.75); transition: all .5s ease; font-weight: bold;}
.tour-question .question-list .que::before{display: inline-flex; content: "Q"; background-color: #4299af; color: #fff; font-weight: bold; font-size: 110%; width: 1.75em; height: 1.75em; justify-content: center; align-items: center; border-radius: 50%;}
.tour-question .question-list .que::after{display: inline-block; align-items: center; content: "\e145"; font-family: "material symbols outlined"; font-weight: bold; font-size: 200%; color: #4299af;}
.tour-question .question-list .que span{font-size: 110%;}
.tour-question .question-list .ans{display: grid; grid-template-columns: 2em 1fr; padding: 0 1.5em; column-gap: .5em; background-color: rgba(255,255,255,0.75); max-height: 0; overflow: hidden; opacity: 0; transition: opacity .25s linear, max-height .25s linear, padding .5s linear;}
.tour-question .question-list .ans::before{display: inline-flex; content: "A"; background-color: #eb6b0e; color: #ffffff; font-weight: bold; font-size: 110%; width: 1.75em; height: 1.75em; justify-content: center; align-items: center; border-radius: 50%;}
.tour-question .question-list .item:hover .que{background-color: rgba(250,247,35,0.25); color: #005e3c;}
.tour-question .question-list .item:hover .que::after{content: "\e15b";}
.tour-question .question-list .item.active .ans{max-height: 1024px; opacity: 1; padding: 1.5em;}

.tour-decoration{position: relative;}
.tour-decoration img{position: absolute; top: 0; left: 50%; transform: translate(50%, -55%); width: 25em; height: auto; z-index: 2;}

.tour-inquery{padding-bottom: 0!important; background-color: #faf5e3;}
.tour-inquery .container{display: flex; justify-content: space-around; align-items: center; column-gap: 2em; background-image: url("./assets/images/background-wall-1.png"); border-radius: 1.5em; padding: 3em; color: #fff;}
.tour-inquery .container > *{line-height: 200%;}

.tour-access{position: relative; background-color: #faf5e3; padding-bottom: 0!important; line-height: 175%;}
.tour-access .container{width: 590px; transform: translate(-295px, 0); padding-bottom: 10em;}
.tour-access table{border-top: 1px #dedbd0 solid; width: 100%;}
.tour-access table tr{border-bottom: 1px #dedbd0 solid;}
.tour-access table tr > *{padding: 1em 0.5em; text-align: left;}
.tour-access .googlemap{position: absolute; top: 0; left: 50%; width: calc(50% - 7em); height: calc(100% - 5em); border-top-left-radius: 3em; border-bottom-left-radius: 5em; overflow: hidden; margin-left: 7em; transform: translate(0, 5em);}
.tour-access .googlemap iframe{width: 100%; height: calc(100% + 400px); margin-top: -200px;}

.tour-title-1{color: #958655; font-weight: bold; font-size: 250%; margin-bottom: 2.5rem; line-height: 120%;}
.tour-title-1.white{color: #fff;}
.tour-title-1.blue{color: #4299af;}
.tour-title-1.green{color: #005e3c;}

.tour-title-2{color: #fff723; font-weight: bold; font-size: 300%; margin-bottom: 2.5rem; line-height: 120%; text-align: center;}

@media only screen and (max-width: 48.8125em){
	.tour-maincatch{height: initial;}
	.tour-maincatch .container-wide{display: block; margin-top: 1.5em;}
	.tour-maincatch .container-wide .wrapper{position: initial;}
	.tour-maincatch .title{position: absolute; top: 2em; left: 1em; font-size: 200%; margin-bottom: 0; z-index: 5;}
	.tour-maincatch .txt br{display: none;}
	.tour-maincatch .swiper-container{position: initial; top: initial; left: initial; height: 65vh; max-height: 45em;}
	.tour-maincatch .swiper-container .swiper-slide{width: 85vw; height: 100%; padding: .5em;}
	.tour-maincatch .swiper-container .swiper-slide img{border-radius: 1em; box-shadow: none;}
	
	
	.tour-info .tour-info_wrapper{margin-bottom: 2.5em; height: initial;}
	.tour-info .tour-info_feature{position: initial; top: initial; left: initial; width: calc(100% - 20px); margin: 0 auto; transform: initial;}
	.tour-info .tour-info_wrapper .catch{width: 90%; height: 60vw; border-top-right-radius: 1em; border-bottom-right-radius: 1em; margin-top: 1.5em;}
	.tour-info .grid-features{grid-template-columns: 1fr; grid-gap: 1.5em; margin-bottom: initial;}
	.tour-info .grid-features .item{padding: 1em; border-radius: 1em;}
	.tour-info .grid-features .item .title{font-size: 110%;}
	.tour-info .grid-features .num{font-size: 200%; transform: translate(25%, 0);}
	.tour-info .grid-features .num::before{content: initial;}
	.tour-info .tree{width: 7.5em;}
	
	.tour-experience .gallary{grid-template-columns: 1fr 1fr; margin-top: 2.5em; column-gap: 1em; grid-row-gap: 2em;}
	.tour-experience .gallary .item{height: 30vw;}
	.tour-experience .gallary .item img{box-shadow: 0.25em 0.25em 0 #fff;}
	.tour-experience .gallary .item figcaption{font-size: 85%; width: calc(100% - 1.5em);}
	
	.tour-sep .hill{height: 7vw; min-height: initial;}
	.tour-sep .leaf{height: 10vw; width: auto; padding-bottom: 2em;}
	.tour-sep .cloud{height: 8vw; width: auto; margin-right: -.5em;}
	
	.tour-question .question-list{width: 100%;}
	.tour-question .question-list .que{padding: 1em 0em;}
	.tour-question .question-list .ans{padding: .5em!important;} 
	
	.tour-inquery .container{display: block; column-gap: initial; border-radius: 1em; padding: 2em;}
	.tour-inquery .tour-inquery_wrapper-2{text-align: center; margin-top: 1.5em;}
	.tour-inquery .deco{transform: translate(30%, -35%); width: 15em;}
	.tour-decoration img{display: none;}
	
	.tour-access .container{width: calc(100% - 20px); transform: initial; padding-bottom: 2em;}
	.tour-access .googlemap{position: initial; top: initial; left: initial; width: calc(100% - 20px); height: 50vw; border-radius: 1em; transform: initial; margin: 0 auto 5em auto;}
	.tour-access .googlemap iframe{height: 100%; margin-top: initial;}
	
	.tour-title-1{font-size: 150%; margin-bottom: 1.5rem;}
	.tour-title-2{font-size: 150%; margin-bottom: 1.5rem;}
}

/**
 * Common
 */
.btn-circle{position: relative; display: inline-flex; align-items: center; color: #fff; font-weight: bold; background-color: #eb6b0e;  font-size: 120%; border-radius: 5em; line-height: 120%; padding: 1em 3em; transition: background-color .25s ease;}
.btn-circle.allow::after{position: absolute; top: 50%; right: .75em; display: inline-flex; justify-content: center; align-items: center; content: "\e315"; font-family: "material symbols outlined"; background-color: #fff; color: #eb6b0e; border-radius: 50%; transform: translate(0, -50%); overflow: hidden; width: 1.25em; height: 1.25em; text-indent:.15em;}
.btn-circle:hover{background-color: #e3af12;}
.btn-circle.allow:hover::after{animation:btn-icon-indent .5s ease;}

@keyframes btn-icon-indent{
0% {text-indent:.15;}
50% {text-indent:1.25em;}
50.01% {text-indent:-1.25em;}
100% {text-indent:.15;}
}
