画像+テキスト contents_box01

#box1

中見出し18文字テキストテキストテキ

本文約80文字テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト

ボタン

#box2

中見出し18文字テキストテキストテキ

本文約80文字テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト

ボタン

a[id*="box"]+section::before{
	display: block;
	content: "";
	width: 70%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: var(--i_sub2_color);
    pointer-events: none;
}
#box2+section::before{
    right: auto;
    left: 0;
}
#box2+section{
    margin-top: 60px;
}
a[id*="box"]+section .heading.block_header_2 .h{
	font-size: 3.2rem !important;
	letter-spacing: 0.2rem;
    font-style: italic;
    padding-left: 0;
    border-bottom: none;
    padding-bottom: 0;
    font-weight: 500;
}
a[id*="box"]+section .heading.block_header_2 .h:before,
a[id*="box"]+section .heading.block_header_2 .h:after{
	display: none;
}
a[id*="box"]+section .heading.block_header_2 p{
	font-size: 1.5rem;
	letter-spacing: 0rem;
    padding-left: 0;
    font-weight: 500;
}

@media screen and (min-width: 900px){
	a[id*="box"]+section .inner_item_txt{
		padding: 60px!important;
		z-index: 9;
		margin-left: -80px;
		min-width: 400px;
		background: var(--i_bg_color);
	}
	#box2+section .inner_item_txt{
		margin-right: -80px;
		margin-left: auto;
		padding-right: 50px !important;
	}
	a[id*="box"]+section .inner_item_img img{
		height: 520px;
		object-fit: cover;
		object-position: center;
	}

}
@media screen and (max-width: 900px){
	a[id*="box"]+section .inner_item_img{
		margin-bottom: 0!important;
	}
	a[id*="box"]+section .inner_item_txt{
		padding: 25px!important;
		background: var(--i_bg_color);
        width: 90%;
        margin: -20px auto;
        position: relative;
	}
    a[id*="box"]+section::before{
        width: 100%;
    }
    #box2+section{
        margin-top: 0px;
        padding-top: 0;
    }
}
@media screen and (max-width: 800px){
	a[id*="box"]+section .heading.block_header_2 .h{
		font-size: 3.0rem !important;
	}
	a[id*="box"]+section .heading.block_header_2 p{
		font-size: 1.5rem;
	}
}

タイトル

中見出し18文字テキストテキストテキ

#horizon1 本文約80文字テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト

ボタン

タイトル

中見出し18文字テキストテキストテキ

#horizon2 本文約80文字テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト

ボタン

@media screen and (min-width: 901px){
	a[id*="horizon"]+section .inner_item_txt .heading.block_header_2{
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		text-orientation: upright;
		display: inline;
		vertical-align: middle;
		text-align: left;
	}
}
a[id*="horizon"]+section .inner_item_txt .heading.block_header_2 .h,
a[id*="horizon"]+section .inner_item_txt .heading.block_header_2 p{
	padding-left: 0;
	text-align: left;
}
a[id*="horizon"]+section .inner_item_txt .heading.block_header_2 .h{
	border: none;
	font-size: 2.5rem!important;
	letter-spacing: 0.2rem!important;
}
a[id*="horizon"]+section .inner_item_txt .heading.block_header_2 .h:before,
a[id*="horizon"]+section .inner_item_txt .heading.block_header_2 .h:after{
	display: none;
}
@media screen and (max-width: 800px){
	a[id*="horizon"]+section .inner_item_txt .heading.block_header_2 .h{
		font-size: 2.0rem!important;
	}
	a[id*="horizon"]+section .inner_item_txt .heading.block_header_2 p{
		text-align: center;
	}
}
@media screen and (max-width: 900px){
	a[id*="horizon"]+section .inner_item_txt .heading.block_header_2 .h br{
		display: none;
	}
}

#bg1

中見出し18文字テキストテキストテキ

本文約80文字テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト

ボタン

#bg2

中見出し18文字テキストテキストテキ

本文約80文字テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト

ボタン

a[id*="bg"] + section .inner_item_txt .heading .h{
    font-size: 3.2rem!important;
    padding-left: 0;
    color: var(--i_txt_color);
    border-bottom:none;
    margin-bottom: 0;
}
a[id*="bg"] + section .inner_item_txt .heading .h:before,
a[id*="bg"] + section .inner_item_txt .heading .h:after{
  display: none;
}
a[id*="bg"] + section .inner_item_txt .heading p{
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--i_main_color);
}
a[id*="bg"] +section .inner_item_txt{
  padding: 0 100px 0 100px;
}
a[id*="bg"] + section.contents_box01:before{
	position: absolute;
	display: block;
	content: "";
	width: 60%;
	height: 75%;
	top: 0;
	left: 0;
	background: var(--i_sub2_color);
	pointer-events: none;
}
#bg2 + section.contents_box01:before{
	top: 0;
    left: auto;
	right: 0;
}
@media screen and (max-width: 800px){
    a[id*="bg"] + section .inner_item_txt .heading .h{
        font-size: 2.8rem!important;
    }
}

#oblique1

中見出し18文字テキストテキストテキ

本文約80文字テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト

ボタン

#oblique2

中見出し18文字テキストテキストテキ

本文約80文字テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト

ボタン

a[id^="oblique"]+section .heading.block_header_2 .h{
	padding-left: 0;
	font-weight: 600;
	font-size: 3.4rem !important;
	line-height: 1.4;
}
a[id^="oblique"]+section .heading.block_header_2 p{
	padding-left: 0;
	font-size: 1.7rem;
}
a[id^="oblique"]+section .heading.block_header_2 .h:before,
a[id^="oblique"]+section .heading.block_header_2 .h:after{
	display: none;
}
@media screen and (min-width: 901px){
	a[id^="oblique"]+section .inner_item_img img{
		height: 510px;
		object-fit: cover;
	}
	a[id^="oblique"]+.contents_box01 .inner_item_img{
		position: relative;
		overflow: hidden;
	}
	#oblique1+.contents_box01 .inner_item_img::before {
		position: absolute;
		display: block;
		content: "";
		width: 2%;
		top: 0;
		right: 0;
		border-bottom: 100vh solid var(--i_sub2_color);
		border-left: 250px solid transparent;
		pointer-events: none;
	}
	#oblique2+.contents_box01 .inner_item_img::before {
		position: absolute;
		display: block;
		content: "";
		width: 2%;
		top: 0;
		left: 0;
		border-bottom: 100vh solid var(--i_sub2_color);
		border-right: 250px solid transparent;
		pointer-events: none;
	}
}
@media screen and (max-width: 900px){
	a[id^="oblique"]+section{
		padding-bottom: 60px;
	}
    a[id^="oblique"]+section .heading.block_header_2 .h,
    a[id^="oblique"]+section .heading.block_header_2 p{
        text-align: center;
        display: block;
    }
    a[id^="oblique"]+section .content_wrapper{
        text-align: center;
    }
}
@media screen and (max-width: 800px){
	a[id^="oblique"]+section .heading.block_header_2 .h{
		font-size: 2.5rem !important;
	}
	a[id^="oblique"]+section .heading.block_header_2 p{
		font-size: 1.5rem;
	}
}