@charset "utf-8";
/* CSS Document */
/*サブビジュアル
---------------------------------------------------------------------------*/
#sub {
	height: 400px;
    position: relative;
    top: 0;
    left: 0;
    z-index: -0;
    background: url("../images/kv1.jpg") no-repeat center top /cover;
}
#sub::before {
    content: "";
    position: absolute;
    inset: 0;
	z-index: 1;
    background: rgba(0, 0, 0, 0.5);
}
#sub h2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #FFF;
    font-size: 4.0rem;
    z-index: 10;
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
	background: #555;		/*背景色*/
	color: #fff;
	font-size: 2.4rem;
	background: rgb(163, 200, 246)!important;/*文字色*/
}

/*テーブルブロック設定*/
.ta2-parts {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;		/*テーブルの下に空けるスペース。２文字分。*/
	background: #fff;		/*テーブル全体の背景色*/
	color: #555;			/*テーブル全体の文字色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta2-parts th, .ta2-parts td {
	padding: 1rem;		/*ボックス内の余白*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border: 1px solid #999;	/*テーブルの枠線の幅、線種、色。*/
}

/*th（左側）のみの設定*/
.ta2-parts th {
	width: 20%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
}
/*料金のご案内
---------------------------------------------------------------------------*/
#plan {
    margin-top: 100px;
}
#plan .text-blk {
    padding-bottom: 30px;
}
#plan p {
	margin-bottom: 50px;
}
/*その他
---------------------------------------------------------------------------*/
/*list-normal3-parts
---------------------------------------------------------------------------*/
.list-normal3-parts .list-parts * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-normal3-parts .list-parts {
	position: relative;
	overflow: hidden;
	padding: 1.5rem;		/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	color: #555;			/*文字色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	margin-bottom: 2rem;	/*ボックス同士の余白*/
}

/*ボックス内のfigure画像*/
.list-normal3-parts .list-parts figure {
	margin-bottom: 0.5rem;	/*見出しの下に0.5文字分のスペースを空ける*/
}

/*ボックス内のh4見出し*/
.list-normal3-parts .list-parts h4 {
	font-size: 1.3rem;	/*文字サイズ130%*/
	margin-bottom: 0.5rem;	/*見出しの下に0.5文字分のスペースを空ける*/
}

/*ボックス内のp要素*/
.list-normal3-parts .list-parts p {
	font-size: 0.9rem;	/*文字サイズを90%*/
	line-height: 1.6;	/*行間を少し狭く*/
}

	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

	/*ボックス１個あたり*/
	.list-normal3-parts .list-parts {
		display: flex;	/*横並びにする*/
		gap: 1.5rem;	/*左の画像と右のテキストとの間のマージン的な余白*/
	}
	
	/*ボックス内のfigure画像*/
	.list-normal3-parts .list-parts figure {
		margin-bottom: 0;	/*見出しの下のマージンをリセット*/
		width: 30%;			/*画像の幅*/
	}

	/*テキストを囲むブロック*/
	.list-normal3-parts .list-parts .text-parts {
		flex: 1;
	}

	}/*追加指定ここまで*/

/*その他ブロックの背景
---------------------------------------------------------------------------*/
.background6-parts {
	position: relative;
	background: #F7C6D0;	/*背景色*/
	color: #555;		/*文字色*/
	padding-top: 5vw;		/*ボックス内の上に空ける余白。お好みで調整して下さい。*/
	padding-bottom: 5vw;	/*ボックス内の下に空ける余白。お好みで調整して下さい。*/
	margin-top: 10vw;		/*ボックス外の上に空ける余白。お好みで調整して下さい。*/
	margin-bottom: 10vw;	/*ボックス外の下に空ける余白。お好みで調整して下さい。*/
}
.background6-parts a {
	color: inherit;
}

/*以下のheightの行が傾斜の角度です。vwという単位は画面幅に対してで、画面幅100%＝100vwになります。
つまり、画面幅に対して常に同じ傾斜具合になります。1pxの数字は時々隙間が発生するのでそれを防ぐ為の措置です。
傾斜（height）を変更したい場合は、下にある「.background6-parts::before」のtopと「.background6-parts::after」のbottomの数字も変更。*/
.background6-parts::before, .background6-parts::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: calc(5vw + 1px);
	background: #F7C6D0;	/*背景色。上の.background6-partsのbackgroundと揃える。*/
}

.background6-parts::before {
	top: -5vw;	/*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
	clip-path: polygon(0 100%, 100% 0, 100% 100%);	/*三角形の形を作っています*/
}

.background6-parts::after {
	bottom: -5vw;	/*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
	clip-path: polygon(0 0, 100% 0, 0 100%);	/*三角形の形を作っています*/
}
#others .list-normal3-parts {
	max-width: 70%;
	height: auto;
	margin: 0 auto;
}
#others h3 {
	color: #F7C6D0;
}
#others p {
	font-size: 1.6rem;
	line-height: 2;
}
#price-included .price-table {
	margin-bottom: 50px;
}
#price-included .blk {
	max-width: 80%;
	border: 1px solid #333;
}
#price-included .contents_blk {
	margin: 0!important;
	padding: 0!important;
	display: flex;
	justify-content: flex-start;
	gap:40px;
}
#price-included .contents_blk img {
	max-height: 500px;
	width: auto;
}
#price-included h3 {
	margin: 10px 0;
	font-size: 2.8rem;
	color: #F7C6D0;
}
#price-included p {
	font-size: 1.6rem;
}
/*アイコン
---------------------------------------------------------------------------*/
/*共通*/
.list-normal3-parts .icon-bg1-parts,
.list-normal3-parts .icon-bg2-parts {
	overflow: hidden;
	position: absolute;
	left: 0px;		/*左からの配置場所*/
	top: 0px;		/*上からの配置場所*/
	font-size: 0.7rem;	/*文字サイズ。70%*/
	width: 10rem;		/*幅。10文字分*/
	padding-top: 2rem;	/*テキストの上にとる余白。2文字分。*/
	text-align: center;	/*テキストをセンタリング*/
	transform: rotate(-45deg) translate(-2.4rem,-3rem);	/*反時計回りに45度回転、X軸に-2.4文字分、Y軸に-3文字分移動。*/
}

/*icon-bg1-parts（サンプルだと「NEW」）*/
.list-normal3-parts .icon-bg1-parts {
	background: #ff3535;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*icon-bg2-parts（サンプルだと「UP」）*/
.list-normal3-parts .icon-bg2-parts {
	background: #358bff;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*ボックス１個あたり*/
.list-grid2-parts .list-parts {
	grid-template-columns: 100px 1fr;	/*１つ目（この場合はfigure要素）を100pxに、２つ目（この場合はtextブロック））を残った幅で使う*/
	gap: 1rem;				/*ブロックの間に空けるマージン的な指定*/
	align-items: center;	/*画像とテキストブロックについて、天地の中央で揃えるようにする。この１行を削除すると、上に揃う。*/
	margin-bottom: 1rem;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (max-width:600px) {
		#sub {
	height: 250px;
}
	    /*listブロック全体を囲むブロック*/
	    .list-grid2-parts {
	        grid-template-columns: repeat(2, 1fr); /*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	        gap: 1rem; /*ブロックの間に空けるマージン的な指定*/
	    }
	    /*ボックス１個あたり*/
	    .list-grid2-parts .list-parts {
	        margin-bottom: 0;
	    }
		#plan {
			margin: 30px 0;
		}
	    .ta2-parts caption {
	        font-size: 2rem;
	    }
	    #others .list-normal3-parts {
	        max-width: 100%;
	    }
	    th, td {
	        font-size: 1.4rem;
			padding: 0px 5px 0!important;
	    }
	    #price-included .blk {
	        max-width: 100%;
	    }
	    #price-included .contents_blk {
	        display: block;
	        width: 100%;
	    }
	    #price-included .contents_blk img {
	        width: 100% !important;
	        height: 100% !important;
	    }
	    .text-blk h3 {
	        text-align: center;
	    }
	}/*追加指定ここまで*/