@import url('./layout.css');

/*****************************************************************************
 INDEX
 *****************************************************************************/
.mainimage{position:relative;z-index:1;margin-top:-120px;}
.mainimage .bxslider li,
.mainimage .bxslider li img{width:100%;}
.mainimage .over{position:absolute;top:20%;}

#intro{margin:-60px auto 80px;z-index:10;}
#intro .col-12{background:#fff;}
#intro .col-07{text-align:right;}
.intro_inner{padding:60px 48px 0px;}
.intro_inner h3{font-size:38px;text-align:justify;text-justify:inter-ideograph;margin-bottom:30px;}
.intro_inner h5{font-size:30px;margin:-20px 0px 20px;}
.intro_inner p{letter-spacing:0.1em;margin-bottom:30px;line-height:2;padding-left:0.2em;font-size:16px;}
.intro_inner p span{font-size:22px;line-height:1.8;}
.intro_inner p span b{font-size:120%;text-indent:-0.2em;display:inline-block;margin-bottom:5px;background:linear-gradient(transparent 60%, rgba(255,99,131,0.3) 40%);}
#intro .hours dl dd:before{color:#000;}
#intro h4{padding-top:50px;font-size:16px;}
#intro .tocontact{margin-bottom:20px;}
#intro .tocontact li.phone{width:320px;background:#000;height:60px;}
#intro .tocontact li.phone a{font-size:28px;height:60px;padding:5px;}

#news{background:url("../img/common/wave1.png") repeat-x bottom #257792;color:#fff;padding:80px 0px 100px;}
#news .news_inner{width:830px;max-width:100%;margin:0px auto;height:240px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch !important;}
#news .news_inner iframe{width:100%;height:100%;border:0px;display:block;}
/*#news iframe{width:830px;max-width:100%;height:240px;border:0px;margin:0px auto;overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch !important;display:block;}*/
#news dl{border-bottom:dashed 1px #489aa3;display:flex;padding:10px 0px;}
#news dl dt{width:120px;}
#news dl dd{width:calc(100% - 120px);}

#banners{padding:100px 0px;}
#banners .serch{display:block;width:100%;height:100%;background:#98c2d0;padding:25px 30px;font-size:16px;}
#banners .bnr_guide{display:block;width:100%;height:100%;background:url("../img/index/banner1.jpg") top center / cover #000;color:#fff;padding:30px;transition:all 0.5s ease-out;}
#banners .bnr_gallery{display:block;width:100%;height:100%;background:url("../img/index/banner2.jpg") top center / cover #000;color:#fff;padding:30px;transition:all 0.5s ease-out;}
#banners .bnr_guide:hover,
#banners .bnr_gallery:hover{opacity:0.88;background-blend-mode:lighten;}
#banners h3{font-size:24px;margin-bottom:10px;}
#banners p{font-size:12px;}
.serch select{padding:0.4em;border:1px solid #999;}
.serch input[type="text"]{padding:0.4em;border:1px solid #999;}
.serch input[type="submit"]{background:#000;text-align:center;color:#fff;border:0px;padding:0.4em;font-size:17px;transition:all 0.3s ease-out;}
.serch input[type="submit"]:hover{background:#257792;}
#banners .serch select{width:100%;margin-bottom:5px;}
#banners .serch input[type="text"]{width:100%;margin-bottom:5px;}
#banners .serch input[type="submit"]{width:100%;}

#top_list{padding:30px 0px 80px;}
#top_list li{margin-bottom:30px;}
#top_list li a{position:relative;display:block;}
#top_list li a span{position:absolute;bottom:0px;left:0px;width:100%;text-align:center;color:#fff;font-size:18px;background:rgba(0,0,0,0.6);padding:1.2em 0px;transition:all 0.3s ease-out;}
#top_list li a:hover span{background:rgba(0,0,0,0.8);}

#ranking{padding:30px 0px 150px;}
#ranking img{margin-bottom:10px;}
#ranking h4{width:80px;text-align:center;color:#fff;background:#bdad8e;margin-bottom:5px;}
#ranking .item_price{line-height:1.2em;}
#ranking .item_price b{padding-right:5px;}
#ranking .item_price span{font-size:26px;letter-spacing:0em;font-weight:bold;}

#calendar{background:#f7f4f0;z-index:2;padding:100px 0px 200px;}
.calendar_inner{width:930px;max-width:100%;margin:0 auto;position:relative;}
.calendar_inner .time_bnr{width:900px;max-width:100%;margin:0 auto 50px;background:url("../img/index/time_bg.jpg") top center / cover #000;color:#fff;padding:20px 0px;}
.calendar_inner .time_bnr h3{font-size:34px;text-align:right;}
.calendar_inner .time_bnr p{font-size:13px;line-height:1.4;padding-top:1em;}
#calendar iframe{width:100%;height:280px;background:#f7f4f0;font-size:16px;}
#calendar .mark{color:#FBCDCF;font-size:120%;}

#banner{width:100%;overflow:hidden;z-index:10;margin-top:-200px;}

.map iframe{width:100%;height:500px;vertical-align:bottom;}


@media screen and (max-width: 1080px) {
	#banner img{width:140%;max-width:260%;margin:0px -20%;}

}

@media screen and (max-width: 768px) {
	.mainimage{margin-top:calc(-2.6875vw * 5);}
	.mainimage .bxslider li img{width:120%;max-width:200%!important;margin:0px -10%;}

	#intro{margin:-20px auto 80px;}
	#intro .col-12{width:98%;margin:0px 1%;}
	#intro .col-07{text-align:center;}
	.intro_inner{padding:30px 2% 0px;}
	.intro_inner h3{font-size:30px;}
	.intro_inner h5{font-size:26px;}

	.intro_inner p{margin-bottom:20px;padding-left:0px;font-size:14px;}
	.intro_inner p span{font-size:16px;}
	#intro h4{padding-top:20px;text-align:center;}

	#news dl{padding:10px;}

	#banners .inner{width:80%;margin:0px 10%;}
	#banners .col-04{margin-bottom:10px;}

	#top_list li.col-03{margin-bottom:10px;width:33.33%!important;}
	#top_list li a span{font-size:14px;padding:0.8em 0px;}

	#ranking{padding:30px 0px 100px;}
	#ranking li.col-03{margin-bottom:20px;width:50%!important;}

	.calendar_inner .time_bnr h3{font-size:32px;text-align:center;}
	.calendar_inner .time_bnr p{width:280px;margin:0px auto;padding:0px 0px 10px;}

	#banner img{width:180%;margin:0px -40%;}

	.map iframe{height:320px;}

}


@media screen and (max-width: 480px) {
	.mainimage .bxslider li img{width:140%;margin:0px -20%;}

	.intro_inner h3{font-size:22px;}
	.intro_inner h5{font-size:20px;}

	#intro h4{font-size:15px;}
	.intro_inner p{letter-spacing:0.05em;margin-bottom:15px;font-size:13px;}
	.intro_inner p span b{font-size:110%;}

	#news dl{display:block;}
	#news dl dt{width:100%;padding-bottom:5px;opacity:0.8;}
	#news dl dd{width:100%;}

	#banners .inner{width:100%;margin:0px auto;}

	#top_list li.col-03{width:50%!important;}
	#top_list li a span{font-size:13px;}

	#banner img{width:240%;margin:0px -70%;}

	.map iframe{height:240px;}

}



/*****************************************************************************
 GALLERY
 *****************************************************************************/
.gallery{padding:100px 0px;background:#E5F0F4;}
.gallery li{margin-bottom:30px;}
.gallery li img{box-shadow:0px 2px 4px rgba(0,0,0,0.2);border:4px solid #fff;}

@media screen and (max-width: 768px) {
	.gallery{padding:60px 0px;}
	.gallery li.col-024{width:33.33%!important;margin-bottom:10px;}
}


/*****************************************************************************
 GUIDE
 *****************************************************************************/
.guide{margin-bottom:80px;}
.guide h4{margin-bottom:10px;}
.guide h5{padding-left:10px;}
.guide p{margin-bottom:10px;padding-left:10px;}
.guide p.postage{background:#f57b94;text-align:center;padding:20px 0px;border-radius:20px;color:#fff;font-weight:bold;}

.guide-flow{background:#F0F6F8;padding:20px 30px 15px;margin-bottom:15px;position:relative;display:flex;box-shadow:-1px 3px 3px -1px rgba(0,0,0,0.08);}
.guide-flow:before{content:"";display:block;width:30px;height:30px;position:absolute;top:0px;right:0px;border-top:15px solid #fff;border-right:15px solid #fff;border-bottom:15px solid #F0F6F8;border-left:15px solid #F0F6F8;box-sizing: border-box;}
.guide-flow h4.h4{font-size:18px;width:38%;}
.guide-flow h4 span{font-size:120%;font-weight:bold;}
.guide-flow p{width:60%;padding-top:0.5em;}

table.postage{width:50%;float:left;margin-bottom:20px;}
table.postage:nth-of-type(2){margin-left:-1px;}
table.postage th{width:25%;padding:10px;text-align:center;border:1px solid #fff;vertical-align:top;}
table.postage .area th{font-weight:bold;}
table.postage:nth-of-type(1) th:nth-of-type(1){background:rgba(255,99,131,0.3);}
table.postage:nth-of-type(1) th:nth-of-type(2),
table.postage:nth-of-type(1) th:nth-of-type(3){background:rgba(255,99,131,0.1);}
table.postage:nth-of-type(1) th:nth-of-type(4){background:rgba(255,99,131,0.2);}
table.postage:nth-of-type(2) th:nth-of-type(1){background:rgba(255,99,131,0.2);}
table.postage:nth-of-type(2) th:nth-of-type(2),
table.postage:nth-of-type(2) th:nth-of-type(3),
table.postage:nth-of-type(2) th:nth-of-type(4){background:rgba(255,99,131,0.3);}
table.postage .prefecture th{line-height:1.4;font-size:90%;}
table.postage td{padding:20px 10px 5px;font-size:110%;text-align:right;border-bottom:3px solid rgba(255,99,131,0.1);}



@media screen and (max-width: 768px) {
	.guide p.postage{font-size:1.8rem;}

	.guide-flow{padding:15px 15px 10px;display:block;}
	.guide-flow h4.h4{width:100%;}
	.guide-flow p{width:100%;padding:0px;}

	table.postage{float:none;width:100%;}
	table.postage th{padding:10px 5px;}
	table.postage td{padding:10px 5px 5px;border-bottom:0px;}

}
@media screen and (max-width: 480px) {
	.guide p.postage{font-size:1.5rem;}

	.guide h5{padding-left:0px;}
	.guide p{padding-left:0px;}
}


/*****************************************************************************
 ABOUT
 *****************************************************************************/
.about{margin-bottom:80px;}
.about h4{margin:10px auto 5px;}
.about p{margin-bottom:10px;padding-left:10px;}
.about table{width:100%;}
.about table th,
.about table td{padding:5px 0px;}
#policy{padding-top:80px;}

@media screen and (max-width: 480px) {
	.about p{padding-left:0px;}

	.about table th,
	.about table td{display:block;width:100%;}
	.about table td{padding:0px 0px 10px 10px;}
}


/*****************************************************************************
 LIST
 *****************************************************************************/
#list{margin-bottom:80px;}
#list li{margin-bottom:30px;}
#list li a{position:relative;display:block;background:#000;}
#list li a span{position:absolute;bottom:0px;left:0px;width:100%;color:#fff;background:rgba(0,0,0,0.8);padding:1em 1.4em;transition:all 0.3s;tranform: scale(1, 1);}
#list li a span h3{font-size:20px;margin-bottom:5px;}
#list li a span p{font-size:13px;line-height:1.6;min-height:3.2em;}
#list li a{transition:all 0.3s all;}
#list li a:hover img{opacity:0.85;}
#list li a span::before, #list li a span::after{
	content:'';
	position:absolute;
	transition:all 0.3s;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
}
#list li a span::before{left:0px;opacity:0;background:rgba(255,255,255,0.1);transform:scale(0.1, 1);}
#list li a:hover span::before{opacity:1;transform:scale(1, 1);}
#list li a span::after{transition:all 0.3s;}
#list li a:hover span::after{transform:scale(1, .1);opacity:0;}

#size{padding-top:80px;margin-bottom:20px;}
#size li{transition:all 0.3s;tranform: scale(1, 1);}
#size li a{display:block;width:100%;position:relative;font-family:"Oswald";background:rgb(37,119,146);color:#fff;font-size:18px;padding:30px 20px 32px;line-height:1;letter-spacing:0.1em;}
#size li a:after{content:"\f0a9";font-family:FontAwesome;position:absolute;right:10px;top:35px;}
/*#size li::before, #size li::after{
	content:'';
	position:absolute;
	transition:all 0.3s;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
}
#size li::before{left:0px;opacity:0;background:rgba(255,255,255,0.1);transform:scale(0.1, 1);}
#size li:hover::before{opacity:1;transform:scale(1, 1);}
#size li::after{transition:all 0.3s;}
#size li:hover::after{transform:scale(1, .1);opacity:0;}*/
#size li a:hover{color:#000;}

#serch{padding-top:80px;margin-bottom:100px;}
#serch form{line-height:14px;justify-content:space-between;}
#serch.serch select,
#serch.serch input[type="text"],
#serch.serch input[type="submit"]{height:44px;width:32.5%;}



@media screen and (max-width: 768px) {
	#list li.col-04{width:50%!important;margin-bottom:10px;}
	#list li a span{padding:0.5em 1em;background:rgba(0,0,0,0.7);}
	#list li a span h3{font-size:18px;margin-bottom:0px;}
	#list li a span p{font-size:12px;min-height:4.8em;}

	#size li.col-03{width:50%!important;margin-bottom:10px;}
}
@media screen and (max-width: 480px) {
	.list p.right{text-align:left!important;}
	
	#list li.col-04{width:100%!important;}
	#list li a span p{min-height:1em;margin-bottom:5px;}

	#size li.col-03{width:100%!important;margin-bottom:2px;}

	#serch.serch select,
	#serch.serch input[type="text"],
	#serch.serch input[type="submit"]{width:100%;margin-bottom:5px;}
	#serch.serch input[type="submit"]{height:60px;}
}


/*****************************************************************************
 CONTACT
 *****************************************************************************/
.contact{margin-bottom:60px;}
.contact p a{text-decoration:underline;color:#257792;}
.contact p a:hover{text-decoration:none;}
.contact .red{padding:0px 0.2em;}
.contact table{width:100%;border-top:5px solid #EBF2F5;}
.contact table th{padding:1em 20px;background:#EBF2F5;font-size:16px;border-bottom:1px solid #fff;width:25%;}
.contact table td{padding:1em 20px;border-bottom:1px solid #E0EDF0;font-size:16px;}

input[type="text"]{font-size:16px;padding:0.5em;height:38px;width:500px;border:3px solid #EBE9E4;}
input::placeholder{color:#888;}
textarea{font-size:16px;padding:0.5em;width:500px;height:160px;border:3px solid #EBE9E4;font-family: 'メイリオ', Meiryo;}
#button{margin:50px auto;width:86%;max-width:100%;}
#button input[type="submit"],
#button input[type="reset"],
#button input[type="button"]{width:100%;height:50px;border:none;text-align:center;font-size:1.3em;color:white;letter-spacing:0.1em;padding:0.5em;margin-bottom:10px;line-height:1;}
.submit{background:#257792;}
.reset{background:#9a9a9a;}
#button input:hover{ cursor:pointer;opacity:0.9;}

@media screen and (max-width: 768px) {
	.contact table th{display:block;width:100%;background:#fff;padding:0.5em 5px 0px;font-size:14px;}
	.contact table td{display:block;width:100%;padding:0px 5px 1em;font-size:14px;}
	.form_tbl td{padding-left:15px!important;}
	input[type="text"],
	textarea{max-width:100%!important;}
	#button{margin:30px auto;}

}

@media screen and (max-width: 520px) {
	input[type="text"],
	textarea{width:100%;}
}