@charset "utf-8";
/* CSS Document */

/*リセット*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers 
*/
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
:root{
	--main-bg-color:#d4eacb;
	--sub-bg-color:#d4eacb;
};
/*style*/
* { 
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	box-sizing:border-box;
}
h2{
	border-bottom:none!important;
	font-weight:bold!important;
}
a{
	text-decoration:none;
	-moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 1s linear;
}
a,a:link,a:visited{
	color: #666;
	}
img{vertical-align: bottom;}
.flex-box{display:flex;}
.crumb{
	width: auto;
	margin-bottom:8px;
	padding:8px 0;
}
.cont-inner{
	width:1000px;
	margin:auto;
}

.lead-cont {
    background: url(/img/topics/go_to_arima/bg_g.png) no-repeat 150px -30px;
    padding: 30px 0;
}
.lead-inner{
	display:flex;
}
.lead-cont p {
    padding: 50px 30px;
    line-height: 2em;
    font-size: 1.1em;
}
.areamap{
	background:url(/img/topics/go_to_arima/map_awaji.png)no-repeat right;
	height:383px;
    flex: 0 0 485px;
    position:relative;
}
.map-icon li{
	position:absolute;
}
.shop_n{
	top: 7%;
    left: 72%;
}
.shop_s{
	top: -2%;
    left: 39%;
}
.shop_h {
    left: 12%;
    top: 14%;
}
.shop_no {
    left: 20%;
    top: 26%;
}

.lead_img{
	box-shadow: -10px -10px 0 0 var(--main-bg-color);
}
.lead_text {
    padding: 0 30px;
}
.lead_text h3 {
    font-size: 1.2rem;
}
.lead-cont .lead_text p {
    padding: 8px 0;
}
/*navi*/
.nav-contents {
    margin: 50px 0 80px;
}
.nav-contents .cont-inner{
	position: relative;
    background: #eee;
    padding: 2em;
    text-align: center;
    margin: 50px auto;
}
.nav-contents h2 {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: -15px;
}
.nav-contents ul{
	display:flex;
	justify-content: center;
    flex-wrap: wrap;
}
.nav-contents li{
	border-bottom: 2px solid #666;
    padding: 5px 20px 8px 8px;
    margin: 8px 15px;
    position:relative;
}
.nav-contents li::before{
	content: '';
    position: absolute;
    right: 3px;
    top: 30%;
    width: 6px;
    height: 6px;
    margin: auto;
    border-top: 1px solid #666;
    border-right: 1px solid #666;
    transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.style_h2{
	text-align: center;
	font-size:30px;
	margin:30px 0 60px;
	background:url(/img/topics/go_to_arima/ttl_point.png) no-repeat bottom;
	padding-bottom:30px;
	font-family: YuGothic, 游ゴシック, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, verdana, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.style_h2.ttl_g{
	background:url(/img/topics/go_to_arima/ttl_point_g.png) no-repeat bottom;
}
.plan-info .style_h2 span,.plan-list .style_h2 span{
	font-size:0.8em;
	display: block;
}

/*setplan*/
.cont-setplan{
	display:flex;
	text-align: center;
	align-items: center;
}
.cont-setplan dl{
	flex: 0 0 38%;
    margin: 0 50px;
    padding:60px 25px 25px 25px;
    border-radius: 20px;
    box-sizing: border-box;
}
.cont-setplan.set-3 dl {
    flex: 0 0 28%;
    margin: 0 20px;
    padding: 60px 10px 10px 10px;
}
.cont-setplan dt{
	font-weight:bold;
	font-size:1.2em;
}
.cont-setplan dd {
    margin-top: 15px;
}
.setplan-text{
	text-align: left;
}
.cont-car{
	background:#fff url(../../img/topics/go_to_arima/awaji_shop/icon_car.png) no-repeat center 15px;
}
.cont-lunch{
	background:#fff url(../../img/topics/go_to_arima/awaji_shop/icon_lunch.png) no-repeat center 15px;
}
.cont-ticket{
	background:#fff url(../../img/topics/go_to_arima/awaji_shop/icon_ticket.png) no-repeat center 15px;
}
.sales-text{
	background:url(../../img/topics/go_to_arima/awaji_shop/bg_sales.png) no-repeat center top;
	margin:20px 0 0;
	font-weight: bold;
	font-size: 1.1em;
}
.sales-text-inner {
    padding: 50px 240px;
}

.sales-title {
    font-size: 1.2em;
    margin-top: 15px;
}
.sales-title span {
    color: #c00;
    font-weight: bold;
    font-size: 1.1em;
}
.shop-list,.plan-list,.plan-info{
	background: var(--main-bg-color) url(/img/topics/go_to_arima/bg_w.png) no-repeat right -30px;
    transform: skew(0deg,3deg);
    padding: 50px 0 80px;
    margin: 50px 0;
}
.plan-info{
	background:#eacbcd url(/img/topics/go_to_arima/bg_w_l.png) no-repeat 150px -30px;
	margin: 0;
}
.plan-list{
	margin:0 0 50px;
}
.shop-list .cont-inner,.plan-list .cont-inner,.plan-info .cont-inner{
    transform: skew(0deg,-3deg);
}
.shop-cont{
	display:flex;
	margin-bottom:80px;
}
.shop-img{
	z-index: 1;
	flex:0 0 45%;
}
.shop-img img{
	width:100%;
}
.shop-text{
	background: #fff;
    flex: 0 0 55%;
    margin-top: 3%;
    margin-left: -3%;
    padding: 1.5em 4% 2em 6%;
    z-index: 0;
    font-size:1.1em;
}
.shop-text h3{
	font-family: YuGothic, 游ゴシック, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, verdana, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:22px;
	background:linear-gradient(transparent 70%, var(--main-bg-color) 70%);
	display: inline-block;
	margin-bottom:10px;
}
.tour-info{
	background:#eee;
	border-top:2px solid #999;
	border-bottom:2px solid #999;
	padding:8px;
	margin:15px 0;
}
.tour-info h4{
	text-align: center;
	margin-bottom:8px;
}
.tour-info a {
    text-decoration: underline;
}
.tour-info span {
    color: red;
    font-weight: bold;
}
.btn-next{
	clear:both;
	width:50%;
	margin:15px auto 0;
}
.btn-next a{
	display: block;
	background:#c00;
	color:#fff;
	padding:10px 0;
	border-radius: 50px;
	text-align: center;
	font-weight: bold;
    font-size: 1.1em;
}
.tour-price{
	display: flex;
	text-align: center;
	align-items: center;
    float: right;
    margin: 15px 0;
}
.regular-price {
    margin-right: 15px;
    position:relative;
    padding-right:20px;
}
.regular-price::after {
    content: '⇒';
    position: absolute;
    right: 0;
    top: 35%;
}
.sales-price{
	border:1px solid #666;
}
.price-name{
	background:#666;
	padding: 3px 8px;
    color: #fff;
    font-size: 0.9em;
}
.sales-price-inner {
    color: #c00;
    padding: 3px;
}
.sales-price-inner span{
	font-weight:bold;
	font-size:1.2em;
}
/*facility*/
.facility {
    margin: 100px 0;
}
.facility li {
    flex: 0 0 36%;
    padding: 15px 30px;
    box-sizing: border-box;
}
.facility h3 {
    margin: 8px 0;
    text-align: center;
    font-size: 1.1em;
}
.facility img{
	width: 100%;
}
/*rentacar*/
.rentacar-img {
    margin-right: 30px;
}
.rentacar-text h3 {
    font-size: 1.1em;
    margin-bottom: 8px;
}
.rentacar-list {
    margin: 15px auto;
    padding: 30px;
    background: #eee;
    width: 90%;
}
.rentacar-list dt {
    background: #fff;
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid #666;
    margin: 15px 0 8px;
}
.rentacar-list h3 {
    text-align: center;
}
@media only screen and (max-width: 767px){
	.cont-inner{
		width:auto;
		margin:auto;
	}
	.lead-inner:not(.shop_info) {
	    display: block;
	}
	.lead-cont{
		background: url(/img/topics/go_to_arima/bg_g.png) no-repeat 0px -30px;
	    padding: 8px;
	    background-size: 50%;
	}
	.lead-cont p{
		font-size:1em;
		line-height: 1.6em;
		padding:8px;
	}
	.areamap{
		height: 340px;
	}
	.shop_n {
	    top: 9%;
	    left: 67%;
	}
	.shop_s {
	    top: -5%;
    	left: 29%;
	}
	.shop_h {
	    left: 0%;
	    top: 11%;
	}
	.shop_no {
	    left: 12%;
	    top: 20%;
	}
	.shop-cont{
		display: block;
		margin: 0 10px 50px;
	}
	.shop-text{
		margin:0;
	}
	.style_h2{
		font-size: 20px;
		margin: 0 0 30px;
		background-size: 70%;
		padding-bottom: 20px;
	}
	.style_h2.ttl_g {
	    background-size: 70%;
	}
	.shop-list{
		background-size: 50%;
	}
	.shop-text{
		padding:15px;
	}
	.goList{
		width:80%;
	}
	.lead_img{
		margin:8px;
		flex: 0 0 35%;
    	align-self: flex-start;
	}
	.lead_img img{
		width:100%;
	}
	.lead_text {
	    padding: 0;
	    font-size: 1em;
	}
	.lead-cont .lead_text p {
	    padding: 0;
	    font-size: 0.9em;
	}
	.nav-contents {
	    margin: 30px 0 50px;
	}
	.nav-contents .cont-inner{
		margin:0;
		padding: 2em 8px 8px;
	}
	.nav-contents ul{
		display:block;
	}
	.cont-setplan{
		display: block;
	}
	.cont-setplan dl {
	    margin: 0 8px;
	    padding: 60px 15px 15px 15px;
	    border-radius: 20px;
	}
	.sales-text{
		background-size:100%;
		font-size:1em;
	}
	.sales-text-inner{
		padding: 20px 10px 10px 50px;
	}
	.sales-title{
		margin-top:0;
		font-size:1em;
	}
	.shop-list, .plan-list, .plan-info{
		padding: 50px 0;
	}
	.shop-text h3{
		font-size:18px;
	}
	.plan-info {
    	background: #eacbcd url(/img/topics/go_to_arima/bg_w_l.png) no-repeat -50px -50px;
	    background-size: 40%;
	}
	.plan-list{
		background-size: 40%;
	}
	.cont-setplan dd {
	    margin-top: 8px;
	}
	.cont-times {
	    margin: 8px 0;
	}
	.facility {
	    margin: 50px 0;
	}
	.facility li {
	    padding: 15px;
	    display: flex;
	}
	.facility-img{
		flex: 0 0 30%;
	}
	.facility-text {
	    margin-left: 15px;
	}
	.facility h3 {
	    font-size: 1.1em;
	    text-align: left;
	    margin: 0;
	}
	.rentacar-img {
	    margin: 8px auto;
	    width: 50%;
	}
	.rentacar-text {
	    padding: 8px;
	}
	.rentacar-list {
	    padding: 8px;
	    width: 100%;
	    box-sizing: border-box;
	}

}