﻿
/*===========================================*/

/*基本設定 670px になるように設定しています。
（左右に空白を開けるため）
空白を開けたくない場合は.sub00_100を使用。（スライド等）*/

/*===========================================*/
#top01,
#top02,
#top03,
#top04,
#top05,
#top06,
#top07,
#top08,
#top09,
#top10,
#top11,
#top12,
#top13,
#top14,
#top15{
	width:100%;/*720 670*/
	max-width: 560px;
	margin:0 auto;
}

.text_area{
	width:85%;
	margin:0 auto;
}

.top01bg {
	width: 100%;
	margin: -2px 0 0 0;
	padding: 30px 0 100px;
	position: relative;
	z-index:2;
	border-bottom:2px solid #FFFFFF;
}


.top01bg::before {
	content: '';
	position: absolute;
	top: 80px;
	bottom: 0;
	left: 0;
	right: 0;
	background:url("../img/top/top_bg.png") repeat;
	transform: skewY(-20deg);
	z-index: 1;
}

.top_fee_block>dl{
	padding:0.5em 0;
	display: flex;
	flex-wrap:wrap;
	width:100%;
}

.top_fee_block>dl>dt{
	width:80%;
	position: relative;
	z-index: 4;
}


.top_fee_block>dl>dd{
	width:20%;
	text-align: right;
}

.top_fee_title{
	display: inline-block;
	background:#FFFFFF;
	padding:0 1em 0 0;
	position: relative;
	z-index: 5;
}

.top_fee_block>dl>dt::after{
	content: '';
	background: url("../img/top/fee_line.png") repeat-x;
	background-size: contain;
	position: absolute;
	top:13px;
	left:0;
	width:100%;
	height:4px;
	z-index: 3;
}


.top02bg {
	width: 100%;
	margin: -2px 0 0 0;
	padding: 30px 0;
	position: relative;
	z-index:2;
}

.top02bg::before {
	content: '';
	position: absolute;
	top: 20px;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	clip-path: polygon(0 0, 100% calc(0% + 20vw), 100% calc(100% - 20vw), 0 100%);
	background:url("../img/top/top_bg.png") repeat;
}


/* マップ表示 */
.map_block {
    display: block;
    position:relative;
    padding-bottom: 100%; /* 330/547*100　*/
    height: 0;
    overflow: hidden;
}
.map_block iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/** 動画  **/

.youtube {
  position: relative;
  width:100%;
  padding-top: 66.8%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/*=================================================================================*/
/** 768px以上　タブレット縦　サイズ画面  **/
@media (min-width : 560px) {

.map_block {
    padding-bottom: 60.329%; /* 330/547*100　*/
}
	
.text_area{
	width:82%;
	margin:0 auto;
}
	
.top02bg {
	padding: 30px 0 100px;
}

.top02bg::before {
	content: '';
	position: absolute;
	top: 80px;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	clip-path: polygon(0 0, 100% calc(0% + 5vw), 100% calc(100% - 9vw), 0 100%);
	background:url("../img/top/top_bg.png") repeat;
}

	

}

