@charset "utf-8";

div#container {
	max-width: 100%;
	padding-inline: 0;
	padding-bottom: 0;
	padding: 0;
}
@media screen and (max-width:767px){
    .main_space .t_cap_l {
        left: auto;
        right: 3px;
        bottom: calc(429%/8.54);
    }
}

div#contents_wrap {
	clip-path: inset(0 0 0 0);
}



.fix_bg ul {
	width: 100%;
	height: 100%;
	display: flex;
}
.fix_bg ul li {
	width: 50%;
	height: 100%;
	position: relative;
}
.fix_bg ul li .copy {
	position: absolute;
	inset:0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fix_bg ul li .copy img {
	width: calc(300% / 8);
	max-width: 300px;
}

@media screen and (max-width:480px){
	.fix_bg ul {
		display: block;
	}
	.fix_bg ul li {
		width: 100%;
		height: 50%;
	}

}

#kuzu_wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

.sec02,
.sec03 {
    padding: 120px 0;
}
.sec03 {
    padding: 120px 0 20px;
}
@media screen and (max-width:767px){
   .sec02,
    .sec03 {
        padding: 80px 0;
    } 
    .sec03 {
        padding: 80px 0 10px;
    } 
}

@media screen and (max-width:480px){
	.sec02 {
		padding: 40px 0;
	}
	.sec03 {
		padding: 40px 0 15px;
	}
}
.sec01 {
	padding-top: 70px;
	padding-bottom: 80px;
    position: relative;
    background: rgba(255,255,255,0.7);
}

.sec01 .fix_bg {
	position: absolute;
	top:0;
    left: 0;
    right: 0;
    bottom: 0;
	width: 100%;
    
}
.fix_bg::after {
	content: "";
	position: absolute;
	inset:0;
	z-index: 2;
	background: #fff;
	opacity: 0.85;
	transition: all 0.5s linear;
}
.sec01 .inner {
    position: relative;
    z-index: 5;
}

@media screen and (max-width:480px){
    .sec01 {
        padding-top: 60px;
        padding-bottom: 40px;
    }
	.a_fig1 {
		margin-inline: -20px;
	}
	.swipe1 img {
		width: 540px;
		max-width: 540px;
	}
}


.t1 {
	font-size: clamp(14px, calc(23vw / 12), 23px);
	font-feature-settings: "palt";
	letter-spacing: 0.1em;
	font-weight: 600;
	line-height: 1.7;
	margin-bottom: 0.5em;
	color: #846a24;
}
@media screen and (max-width:480px){
	.t1 {
/*		font-size: calc(18vw / 3.9);*/
		font-size: calc(17vw / 3.9);
	}
}
.t2 {
/*	font-size: clamp(10px, calc(17vw / 12), 17px);*/
	font-size: clamp(10px, calc(18vw / 12), 18px);
	font-feature-settings: "palt";
	letter-spacing: 0.08em;
	font-weight: 600;
	line-height: 2.4;
}
@media screen and (max-width:480px){
	.t2 {
/*		font-size: calc(12vw / 3.9);*/
		font-size: calc(13vw / 3.9);
        letter-spacing: 0.04em;
	}
}


.sec02 {
	position: relative;
	z-index: 15;
	background: url("../img/access/sec2.bg.jpg") center center / cover;
/*	padding: 80px 0;*/
}
.sec02 .inner {
	max-width: 1200px;
}
.box02 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.box02 .txt {
	width: calc(500% / 12);
}
.box02 .img {
	width: calc(650% / 12);
}
@media screen and (max-width:480px){
	.box02 {
		display: block;
	}
	.box02 .txt {
		width: 100%;
		margin-bottom: 15px;
	}
	.box02 .img {
		width: 100%;
	}
    .box02 .txt .icon img {
        width: calc(175% / 5);
    }
    .box03 .txt .icon img {
        width: calc(146% / 5);
    }

}


.sec03 {
	position: relative;
	z-index: 15;
	background: url("../img/access/sec3.bg.jpg") center center / cover;
/*	padding: 80px 0;*/
}
.sec03 .inner {
	max-width: 1200px;
}
.box03 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse;
}
.box03.txt {
	width: calc(500% / 12);
}
.box03 .img {
	width: calc(650% / 12);
}
@media screen and (max-width:480px){
	.box03 {
		display: block;
	}
	.box03 .txt {
		width: 100%;
		margin-bottom: 15px;
	}
	.box03 .img {
		width: 100%;
	}

}





.cap_g {
	color: #969696;
}











/*ルート検索*/

#rosenSearch select {
    -moz-appearance: none;
    -webkit-appearance: none;
}
.rootSearchBox {
	max-width: 960px;
	/*border: 4px double #dcdcdc;*/
	margin: 0 auto;
	position: relative;
}
.rootSearchBox #rosenSearch {
	/*background: #f3f3f3;
	border: 1px solid #fff;*/
	background: url("../img/access/root_bg.jpg") center center;
	background-size: cover;
	text-align: center;
	padding: 1.5% 2.5% 2.5%;
	color: #fff;
}
.rootSearchBox #rosenSearch .title {
	color: #fff;
/*	padding: 0 0 2% 0;*/
	border-bottom: 1px solid #fff;
	font-size: 20px;
	padding-bottom: 5px;
	margin-bottom: 15px;
}
.rootSearchBox #rosenSearch .text {
/*  padding: 3.5% 0 1.5% 0;*/
	font-size: 16px;
	margin-bottom: 25px;
}
.rootSearchBox #rosenSearch #start {
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
	text-align: center;
}
.rootSearchBox #rosenSearch #start select,
.rootSearchBox #rosenSearch #start input {
	background: rgba(0,0,0,0.4);
	color: #fff;
	border: 1px solid #999;
	margin: 0 15px 0 15px;
	padding: 0 10px;
	font-weight: normal;
	width: 90px;
	width: 167px;
	height: 40px;
	font-size: 16px;
	text-align: center;
}
.rootSearchBox #rosenSearch #start input,
.rootSearchBox #rosenSearch #goal input {  
	text-align: center;
}

/*.rootSearchBox #rosenSearch #start select {
    background: #fff;
    border: 1px solid #999;
    margin: 0 10px;
    padding: 0 10px;
    font-weight: normal;
}
*/
.rootSearchBox #rosenSearch ::placeholder {
	color: #fff;
}
.rootSearchBox #rosenSearch ::-ms-input-placeholder {
	color: #fff;
}
.rootSearchBox #rosenSearch :-ms-input-placeholder {
	color: #fff;
}



.rootSearchBox #rosenSearch #start::after {
	display: inline-block;
	vertical-align: middle;
	content: ">>>";
	color: #fff;
	font-size: 26px;
	line-height: 36px;
	margin: 0 11px 0 16px;
	transform: scale(0.5, 1);
}
.rootSearchBox #rosenSearch #goal {
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
}
.rootSearchBox #rosenSearch #goal input {
	/*background: #fff;*/
	background: rgba(0,0,0,0.4);
	border: 1px solid #999;
	margin: 0 10px;
	padding: 2px 10px;
	font-weight: normal;
	font-size: 16px;
	width: 167px;
	height: 40px;
	color: #fff;
}

.rootSearchBox #rosenSearch #goal input:focus {
	background: rgba(0,0,0,0.4);
	border: 1px solid #999;
	color: #fff;
}
.rootSearchBox #rosenSearch .btn {
	display: block;
	position: relative;
	padding: 3.5% 0 0 0;
}
.rootSearchBox #rosenSearch .btn::before {
	display: block;
	position: absolute;
	bottom: 12px;
	z-index: 1;
	content: "（Google Mapに遷移します）";
	color: #fff;
	font-size: 10px;
	width: 100%;
	pointer-events: none;
}
.rootSearchBox #rosenSearch .btn input {
	display: inline-block;
	outline: none;
	background: #88752f;
	color: #fff;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.15em;
	font-weight: bold;
	width: 270px;
	padding: 15px 15px 25px 15px;
	cursor: pointer;
}
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
   
}
 input[type="button"]::-webkit-search-decoration {
      display: none;
    }
     input[type="button"]::focus {
      outline-offset: -2px;
    }

@media screen and (max-width: 640px) {
	/*.rootSearchBox #rosenSearch .btn input {
		width: 100%;
		padding: 10px 10px 20px 10px;
	}*/
	/*.rootSearchBox #rosenSearch .btn::before {
		bottom: 5px;
	}*/
	
.rootSearchBox #rosenSearch {
	background: url("../img/access/root_bg_sp.jpg") center center;
	background-size: cover;
}
	
	.rootSearchBox #rosenSearch #start {
        max-width: 264px;
        margin: 0 auto;
        font-size: 13px;
        display: block;
/*        margin-bottom: 12px;*/
        margin-bottom: 16px;
        text-align: left;
        padding: 0 15px;
        position: relative;
	}
	.rootSearchBox #rosenSearch #goal {
        max-width: 264px;
        margin: 0 auto;
		font-size: 13px;
		display: block;
		text-align: left;
        padding: 0 15px;
	}
	.rootSearchBox #rosenSearch #start input {
		font-size: 13px;
   /* width: 70px;*/
/*		width: 100px;*/
        width: 167px;
        margin: 0 15px 0 20px;
		height: 32px;
	    padding: 2px 10px;
	}
	.rootSearchBox #rosenSearch #goal input {
		font-size: 13px;
		margin: 0 15px 0 20px;
		height: 32px;
	}
	.rootSearchBox #rosenSearch #start::after {
        transform: rotate(90deg) scale(0.5, 1);
        font-size: 18px;
        line-height: 26px;
        position: absolute;
        right: -26px;
        top: 0;
        bottom: 0;
        margin: auto;
	}
	.rootSearchBox #rosenSearch .btn {
		padding: 0;
		margin-top: 15px;
	}
	.rootSearchBox #rosenSearch {
		padding: 10px 10px 20px;
	}
	.rootSearchBox #rosenSearch .title {
		font-size: 16px;
		padding-bottom: 3px;
		margin-bottom: 10px;
	}
	.rootSearchBox #rosenSearch .btn input {
		font-size: 13px;
		line-height: 20px;
		width: 210px;
		padding: 7px 15px 17px 15px;
	}
	.rootSearchBox #rosenSearch .btn::before {
		bottom: 7px;
	}
	.rootSearchBox #rosenSearch .text {
		font-size: 12px;
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 480px) {
    .rootSearchBox #rosenSearch #start::after {
        right: -12px;
        display: none;
	}
}