@charset "UTF-8";
/*//////////////////////////////////////////////////
*
*	トップページスタイル
*
//////////////////////////////////////////////////*/

html {
	font-family: var(--font-noto-serif);
	font-weight: 500;
	font-size: var(--font-size-sp);
	color: #fff;
	background: #121212;
}

body {
	font-size: 1.2em;
	line-height: 2.0;
	letter-spacing: .1em;
}

img {
	max-width: 100%;
	height: auto;
}

.s-inner {
	width: min(1200px, 92%);
	margin: 0 auto;
}

.inner {
	width: min(1200px, 94%);
	margin: 0 auto;
}

.background {
	position: fixed;
	z-index: -1;
	top: 100%;
	left: 0;
	width: 100vw;
	width: 100dvw;
	height: 100vh;
	height: 100dvh;
}

.background img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.btn__box {
	display: flex;
	flex-flow: row wrap;
	row-gap: 2.4rem;
	justify-content: center;
	align-items: center;
	column-gap: 2.0rem;
}

.btn__box .btn {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 100%;
	height: 10.0rem;
	line-height: 1;
	text-align: center;
	font-size: 2.4rem;
	background-image: linear-gradient(110deg, #96770F 0%, #96770F 50%, #dfc25f 75%, #96770F 90%);
	background-size: 400%;
	background-position-x: -30%;
}

.btn__box .reserve{
	background-image: linear-gradient(110deg, #811B0D 0%, #811B0D 50%,  #894137 75%,#811B0D 90%);
}

.btn__box .btn small{
	display: block;
	margin-bottom: .65em;
	font-size: .6em;
}

.sp {
	display: revert;
}

.pc {
	display: none;
}

.sp_view{
	display: inline-block;
}

.pc_view{
	display: contents;
}

@media screen and (min-width: 768px) {
	html {
		font-size: var(--font-size-pc);
	}

	.btn__box {
		column-gap: 3.6rem;
	}

	.btn__box .btn {
		flex: 0 0 42.0rem;
		width: 42.0rem;
		height: 16.0rem;
		font-size: 3.0rem;
	}

	.sp {
		display: none;
	}

	.pc {
		display: revert;
	}

	.sp_view{
		display: contents;
	}
	
	.pc_view{
		display: inline-block;
	}

	.btn__box .btn {
        flex: 0 0 50.0rem;
        width: 50.0rem;
	}
	.btn__box .btn:hover {
		animation: background-shiny 4s 0s ease-in-out forwards;
	}
}

@keyframes background-shiny {
	0%   { background-position-x: -30%; }
	20%  { background-position-x: -100%; animation-timing-function: step-end; }
	21%  { background-position-x: 0%; }
	100% { background-position-x: 0%; }
}

.text-mask{
	overflow: hidden;
}

.text-mask-inner{
	display: inline-block;
	clip-path: inset(100% 0 0 0);
}

/* --------------------------------------------------
  ヘッダー設定
-------------------------------------------------- */
header{
	display: none;
}
header.is-active{
	display: revert;
	opacity: 1;
}

.header {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	flex-flow: row wrap;
	column-gap: 1.6rem;
	align-items: center;
	width: 100%;
	padding: 2.4rem 2.0rem;
}

.logo_geogarden img {
	width: 10.2rem;
	aspect-ratio: 102 / 47;
}

.logo_premium {
	transform: translateY(.3rem);
}

.logo_premium img {
	width: 11.4rem;
	aspect-ratio: 113 / 23;
}

@media screen and (min-width: 768px) {
	.header {
		column-gap: 2.0rem;
		padding: 3.0rem;
	}

	.logo_geogarden img {
		width: 13.2rem;
	}

	.logo_premium img {
		width: 14.8rem;
	}
}


/* --------------------------------------------------
  お問い合わせ
-------------------------------------------------- */
.contact{
	margin-bottom: 8.0rem;
	text-align: center;
	line-height: 1;
}

.contact .inner{
	display: flex;
	flex-flow: column wrap;
	gap: 1.0rem;
}

.contact .contact-head{
	font-size: 1.6rem;
}

.contact .contact-tel{
	font-size: 5.2rem;
}

.contact .contact-info{
	margin-top: .5em;
	font-size: 1.2rem;
}

@media screen and (min-width: 768px) {
	.contact{
		margin-bottom: 12.0rem;
	}

	.contact .inner{
		gap: 1.6rem;
	}

	.contact .contact-head{
		font-size: 2.0rem;
	}

	.contact .contact-tel{
		pointer-events: none;
		font-size: 6.2rem;
	}

	.contact .contact-info{
		font-size: 1.4rem;
	}
}

/* --------------------------------------------------
  フッター設定
-------------------------------------------------- */
.footer{
	position: relative;
	z-index: 2;
}

.footer .hhplogo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.6rem 0;
	background: #fff;
}

.footer .hhplogo a {
	width: 24.0rem;
}

.footer .hhplogo ._s {
	font-size: .8em;
	color: #161824;
}

.footer .links {
	padding: 1.2rem 0;
	background: #121212;
}

.footer .links .links__items {
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	text-align: center;
	font-size: 1.1rem;
	line-height: 4.6rem;
}

.footer .links .links__items .item:nth-child(2) {
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
}

.footer .copyright {
	line-height: 3.6;
	text-align: center;
	font-size: 1.0rem;
	background: #080808;
}

@media screen and (min-width: 768px) {

	.footer .hhplogo {
		padding: 2.6rem 0;
	}

	.footer .links {
		padding: 3.6rem 0 2.4rem;
	}

	.footer .links .links__items {
		grid-template-columns: repeat(3, auto);
		gap: 6.8rem;
		font-size: 1.2rem;
		line-height: 1;
	}

	.footer .links .links__items .item:nth-child(2) {
		border: none;
	}

	.footer .copyright {
		text-align: center;
		font-size: 1.1rem;
	}
}

.p-outer,
.bg-outer{
	background: #121212;
}
.bg-outer{
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------
  フロートボタン
-------------------------------------------------- */
.float_navi{
	visibility: hidden;
	opacity: 0;
	position: fixed;
	z-index: 10;
	bottom: 0;
	right: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	width: 100vw;
	text-align: center;
	font-size: 1rem;
	background: #fff;
	transition: visible 0s, opacity .3s;
}

.float_navi.is-active{
	visibility: visible;
	opacity: 1;
}

.float_navi .float_navi__btn{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr auto;
	gap: .25em;
	padding: 1em 0 .25em;
}

.float_navi .float_navi__btn .icon{
	display: flex;
	align-items: center;
	justify-content: center;
}

.float_navi .request{
	background-image: linear-gradient(135deg, #dfc25f 0%, #96770F 90%);
}

.float_navi .reserve{
	background-image: linear-gradient(135deg, #894137 0%,#811B0D 90%);
}

.float_navi .tel{
	background-image: linear-gradient(135deg, #2a2a3a 0%,#0f0f26 90%);
}

@media screen and (min-width: 768px) {
	.float_navi{
		right: -.4em;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, 1fr);
		gap: 0;
		width: 4.0em;
		font-size: 1.6rem;
	}
	.float_navi .float_navi__btn{
		grid-template-rows: none;
		gap: .25em;
		align-content: center;
		padding: 1.5em .4em 1.5em 0;
		line-height: 1.25;
		filter: brightness(1);
		transition: transform .3s, filter .3s;
	}
	.float_navi .float_navi__btn:hover{
		transform: translateX(-.4em);
		filter: brightness(.85);
	}
	.float_navi .tel{
		display: none;
	}
}

/* アニメーションの設定 */

/* --------------------------------------------------
  オープニング
-------------------------------------------------- */
.inactive{
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

.mv{
	position: relative;
	z-index: 1;
	top: 0;
	left: 0;
}

.opening {
	position: relative;
	z-index: 1;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-end;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	text-align: center;
	background: linear-gradient(15deg, #121212 35%, #242424 65%, #343434 80%, #626262 100%);
	background-position: 0 0;
}

.opening .phase_01,
.opening .phase_02,
.opening .phase_03{
	opacity: 0;
}

.op-outer{
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-100%);
}

.opening .phase_01 .op-logo_geogarden img{
	width: 24.0rem;
	transform-origin: top center;
}

.opening .phase_03{
	flex: 0 0 100%;
	margin-bottom: 2.5rem;
}

.opening .phase_03::after{
	content: '';
	display: block;
	width: 1px;
	height: 4.0rem;
	margin: 1.0rem auto;
	background: linear-gradient(0deg, #fff 0%, var(--color-gold) 48%, #fff 52%, #fff 100%);
	background-size: auto 200%;
	background-position: 0 0;
	animation: 	op-line-anim 1.0s linear 0.5s normal forwards infinite;
}

/* アニメーション稼働後（activeクラス付与） */
.mv.active .mv-background{
	background-position: 100% 0;
	transition: background 1.5s ease-out;
}

.opening .phase_02.active,
.opening .phase_03.active{
	opacity: 1;
	transition: all 1.5s ease-out;
}

.opening .phase_01.active{
	opacity: 1;
	transition: all 2.5s ease-in-out;
}

.opening .phase_01 .op-logo_geogarden.active img{
	transform: scale(1) translateY(0);
	transition: all 1.0s ease-out;
}

.opening .phase_02 .op-premium-en.active{
	background-position: 0 0;
	transition: all 2.0s ease-out;
}

.wappen{
	position: absolute;
	z-index: 1;
	top: 2em;
	right: 1em;
	width: 18rem;
}


@keyframes op-line-anim {
	0% {
		background-position: 0 100%;
	}

	100% {
		background-position: 0 0;
	}
}

@media screen and (min-width: 768px) {
	.opening .phase_01 .op-logo_geogarden img{
		width: 28.4rem;
	}

	.wappen{
		width: min(320px, 32.0rem);
	}
	
}

/* --------------------------------------------------
  
-------------------------------------------------- */
.read .dummy{
	height: 100vh;
}

.read .read_wapper{
	position: sticky;
	z-index: 1;
	top: 0;
	left: 0;
	height: 100vh;
	height: 100dvh;
}

.read .read_background{
	height: 100%;
}

.read .read_background img{
	width: 100%;
	max-height: 100%;
}

.read .inner{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	text-align: center;
}

.read .read__intro {
	margin-bottom: 2em;
	font-size: 1.5rem;
}

.read .read__message {
	flex: 0 0 100%;
	line-height: 3;
	font-size: 1.5rem;
}

.linear{
	color: transparent;
	background-clip: text;
	background-image: linear-gradient(135deg, #fff 0%, #fff 46%, rgba(255,255,255, .2) 54%, rgba(255,255,255, .2) 100%);
	background-size: 400%;
	background-position-x: 100%;
}

.cp-banner{
	width: min(1080px, 100%);
	margin: 4em auto 0;
}

@media screen and (min-width: 768px) {
	.read .dummy{
		height: 50vh;
	}

	.read .read_background{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.read .read__intro,
	.read .read__message {
		font-size: 2.0rem;
	}

	.cp-banner{
		margin: 8em auto 0;
	}
}

/* --------------------------------------------------
  ギャラリー
-------------------------------------------------- */
.gallery{
	display: grid;
	grid-template-columns: 1fr;
	gap: 5.0rem;
	margin-bottom: 10.0rem;
}

.gallery .gallery_item{
	position: relative;
	z-index: 1;
}
.gallery .gallery_item .gallery_item-photo{
	position: relative;
	z-index: 1;
}

.gallery .gallery_item .gallery_item-name{
	position: absolute;
	z-index: 1;
	bottom: 1em;
	width: fit-content;
	line-height: 1.5;
	font-size: 1.6rem;
	padding-bottom: .5em;
	border-bottom: 1px solid #fff;
	text-shadow: 0 0 .6rem rgba(0, 0, 0, 1.0);
}

.gallery .gallery_item .gallery_item-name small{
	font-size: .8em;
}

/* ---------- ---------- */

.gallery .item-01 .gallery_item-photo{
	width: 25.0rem;
}

.gallery .item-01 .gallery_item-photo::after{
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #8B7A43;
	transform: translate(-4vw, 10.0rem);
}

.gallery .item-01 .gallery_item-name{
	right: 0;
	padding-left: 5em;
	text-align: right;
}

/* ---------- ---------- */

.gallery .item-02 .gallery_item-photo{
	width: 22.4rem;
	margin-left: auto;
}

.gallery .item-02 .gallery_item-name{
	left: 0;
	padding-right: 5em;
}

/* ---------- ---------- */

.gallery .item-03 .gallery_item-photo{
	width: 24.6rem;
}

.gallery .item-03 .gallery_item-photo:not(.gallery_item-photo-sub)::after{
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	width: 56%;
	height: 56%;
	background: #8B7A43;
	transform: translate(6.5rem, -3.6rem);
}
.gallery .item-03 .gallery_item-photo-sub{
	width: 12.8rem;
	margin-top: -5.4rem;
	margin-left: auto;
}

.gallery .item-03 .gallery_item-name{
	left: 0;
	padding-right: 5em;
}


@media screen and (min-width: 768px) {
	.gallery{
		margin-bottom: 20.0rem;
		gap: 8.0rem;
	}

	.gallery .gallery_item .gallery_item-name{
		width: 50%;
		line-height: 1.0;
		font-size: 3.2rem;
	}

	.gallery .gallery_item .gallery_item-name small{
		font-size: .5em;
	}

	/* ---------- ---------- */

	.gallery .item-01 .gallery_item-photo{
		width: 79.0rem;
	}

	.gallery .item-01 .gallery_item-photo::after{
		content: '';
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #8B7A43;
		transform: translate(-10.0rem, 21.0rem);
	}

	.gallery .item-01 .gallery_item-name{
		padding-left: 0;
	}

	/* ---------- ---------- */

	.gallery .item-02 .gallery_item-photo{
		width: 63.0rem;
	}

	.gallery .item-02 .gallery_item-name{
		left: 16.0rem;
		padding-right: 0;
	}

	/* ---------- ---------- */

	.gallery .item-03 .gallery_item-photo{
		width: 58%;
	}

	.gallery .item-03 .gallery_item-photo:not(.gallery_item-photo-sub)::after{
		content: none;
	}

	.gallery .item-03 .gallery_item-photo-sub{
		width: 32%;
		margin-top: -30.0rem;
		margin-right: 6.8rem;
	}

	.gallery .item-03 .gallery_item-photo-sub::after{
		content: '';
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		width: 25.8rem;
		height: 18.0rem;
		background: #8B7A43;
		transform: translate(6.8rem, -9.0rem);
	}

	.gallery .item-03 .gallery_item-name{
		left: 17.2rem;
		padding-right: 0;
	}

}

/* --------------------------------------------------
  メインコンテンツ
-------------------------------------------------- */
.contents{
	padding-bottom: 6.0rem;
}


/* --------------------------------------------------
  紹介
-------------------------------------------------- */
.property{
	margin-bottom: 10.0rem;
}

.property .property__head{
	margin-bottom: 4.2rem;
	text-align: center;
}

.property .property__intro{
	margin-bottom: 2.0em;
	line-height: 1;
	font-size: 1.6rem;
}

.property .property__ttl{
	margin-bottom: 1.2em;
	line-height: 1;
	font-size: 2.6rem;
}

.property .property__note{
	font-size: 1.5rem;
}

.property .property__image{
	position: relative;
	z-index: 1;
}

.property .property__image .property__image-cap{
	position: absolute;
	left: 0;
	bottom: 0;
	width: fit-content;
	padding: .5em 1em;
	line-height: 1.45;
	font-size: 1.4rem;
	color: #fff;
	background: linear-gradient(90deg, rgba(139, 122, 67, 1) 0%, rgba(139, 122, 67, 0));
}

.property .property__image .property__image-en{
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 4.0rem;
	font-weight: 400;
	font-family: var(--font-en);
	letter-spacing: .1em;
	transform: translateY(50%);
}

.property .property__image-img01{
	margin-bottom: 8.4rem;
}

.property .property__image-img02{
	padding-right: 9.0rem;
	margin-bottom: 3.2rem;
}

.property .property__image-img02 .property__image-sub{
	position: absolute;
	z-index: 1;
	right: -4vw;
	bottom: -1.6rem;
	width: 13.6rem;
}

.property .property__image-img02 .property__image-sub .property__image-sub-cap{
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0 .5em;
	text-align: right;
	font-size: 1.0rem;
	color: #121212;
}

.property .property__body-textnote{
	font-size: 1.3rem;
}


@media screen and (min-width: 768px) {
	.property{
		margin-bottom: 24.0rem;
	}

	.property .property__head{
		margin-bottom: 11.0rem;
	}

	.property .property__intro{
		margin-bottom: 2em;
		font-size: 2.0rem;
	}

	.property .property__ttl{
		margin-bottom: 1.0em;
		font-size: 4.6rem;
	}

	.property .property__note{
		font-size: 1.4rem;
		line-height: 2.8;
	}

	.property .property__image .property__image-cap{
		font-size: 2.4rem;
	}

	.property .property__image .property__image-en{
		font-size: 10.0rem;
		transform: translate(-.2em, 50%);
	}

	.property .property__image-img01{
		margin-bottom: 18.4rem;
	}

	.property__body-text{
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: 62% 1fr;
		gap: 6.0rem;
	}

	.property .property__image-img02{
		position: revert;
		padding-right: 0;
		margin-bottom: 0;
	}

	.property .property__image-img02 .property__image-sub{
		position: absolute;
		z-index: 1;
		right: 0;
		bottom: -5.6rem;
		width: 42%;
	}

	.property .property__image-img02 .property__image-sub .property__image-sub-cap{
		font-size: 1.3rem;
	}

	.property .property__body-textnote{
		line-height: 2.8;
		font-size: 1.4rem;
	}
}


/* --------------------------------------------------
  メリットボックス
-------------------------------------------------- */
.merritt{
	margin-bottom: 10.0rem;
	padding: 1.0rem 0;
	background: url('../../images/home/merritt-bg-sp.png') center / cover no-repeat;
}

.merritt .merritt__container{
	display: grid;
	grid-template-columns: 1fr;
}

.merritt .merritt__item{
	padding: 1.8rem;
	line-height: 1.5;
	font-size: 1.6rem;
	text-align: center;
}

.merritt .merritt__item + .merritt__item{
	border-top: 1px solid #fff;
}

.merritt .merritt__item ._ss{
	font-size: .875em;
}

.merritt .merritt__item ._l{
	font-size: 1.56em;
}

.merritt .merritt__item .num{
	font-family: var(--font-en);
	line-height: 0;
	font-size: 3em;
}

/* --------------------------------------------------
  現地案内図
-------------------------------------------------- */
.map{
	margin-bottom: 6.4rem;
	text-align: center;
}

.map .map__ttl{
	margin-bottom: .5em;
	font-size: 1.8rem;
}

.map .map__attent{
	margin-bottom: 1.0em;
	font-size: 1.2rem;
}


@media screen and (min-width: 768px) {
	.map{
		margin-bottom: 16.0rem;
	}

	.map .map__ttl{
		margin-bottom: 1.0em;
		font-size: 3.6rem;
	}

	.map .map__img{
		width: 86.0rem;
		margin: auto;
	}

	.map .map__img a{
		pointer-events: none;
	}
	
}

/* --------------------------------------------------
  メリットボックス
-------------------------------------------------- */
.merritt{
	margin-bottom: 10.0rem;
	padding: 1.0rem 0;
	background: url('../../images/home/merritt-bg-sp.png') center / cover no-repeat;
}

.merritt .merritt__container{
	display: grid;
	grid-template-columns: 1fr;
}

.merritt .merritt__item{
	padding: 1.8rem;
	line-height: 1.5;
	font-size: 1.6rem;
	text-align: center;
}

.merritt .merritt__item + .merritt__item{
	border-top: 1px solid #fff;
}

.merritt .merritt__item ._ss{
	font-size: .875em;
}

.merritt .merritt__item ._l{
	font-size: 1.56em;
}

.merritt .merritt__item .num{
	font-family: var(--font-en);
	line-height: 0;
	font-size: 3em;
}

.merritt .merritt__item .pc-box{
	display: contents;
}

@media screen and (min-width: 768px) {
	.merritt{
		margin-bottom: 16.0rem;
		padding: 6.0rem 0;
		background: url('../../images/home/merritt-bg-pc.png') center / cover no-repeat;
	}

	.merritt .merritt__container{
		grid-template-columns: repeat(3, 1fr);
	}

	.merritt .merritt__item{
		padding: 0;
		font-size: 2.2rem;
	}

	.merritt .merritt__item + .merritt__item{
		border-top: none;
		border-left: 1px solid #fff;
	}

	.merritt .merritt__item .pc-box{
		display: inline-block;
		text-align: left;
		text-indent: 1em;
	}
}

/* --------------------------------------------------
  コンバージョン
-------------------------------------------------- */
.conversion .conversion__ttl {
	margin-bottom: 8.6rem;
	text-align: center;
}
.conversion .conversion__ttl img{
	width: 24.0rem;
}
.conversion .conversion__button{
	padding: 4.0rem 1.6rem;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.conversion .conversion__button .conversion__button-read{
	margin: 0 -1em 3.0rem;
	text-align: center;
	font-size: 1.5rem;
}

.attention{
	padding-bottom: 4.0rem;
	font-size: 1.1rem;
}

.conversion_outline{
	padding-top: 6.0rem;
	text-align: center;
	font-size: 1.8rem;
	text-decoration: underline;
}

@media screen and (min-width: 768px) {
	.contents{
		padding-bottom: 8.0rem;
	}

	.series .series__ttl {
		margin-bottom: 16.0rem;
	}
	.series .series__ttl img{
		width: 28.0rem;
	}
	.conversion .conversion__button{
		padding: 10.0rem 0;
	}

	.conversion .conversion__button .conversion__button-read{
		margin: 0 0 7.2rem;
		font-size: 2.0rem;
	}

	.attention{
		padding-bottom: 8.0rem;
		font-size: 1.2rem;
	}
}


/* --------------------------------------------------
  物件概要
-------------------------------------------------- */
.l-container{
	padding: 8.0rem 0;
}
.l-title{
	margin-bottom: 4.0rem;
	text-align: center;
	font-size: 2.8rem;
}

@media screen and (min-width: 768px) {
	.l-container{
		padding: 12.0rem 0;
	}
	.l-title{
		font-size: 4.0rem;
	}
}

#outline header{
	display: revert;
}

#outline .header{
    visibility: visible;
    opacity: 1;
}

#outline .l-container{
	padding-bottom: 0;
}

#outline .info-area{
	width: fit-content;
	max-width: 780px;
	margin: auto;
}

#outline .info-area .buken_list{
	margin-bottom: 2em;
}

#outline .info-area th{
    width: fit-content;
    white-space: nowrap;
    padding-right: 2rem;
}
#outline .info-area th,
#outline .info-area td{
	padding-top: .8em;
}

#outline .info-area .info_terms td{
    padding-top: 4.0em;
    font-size: 1.4em;
    font-weight: 700;
}

#outline .buken_comment{
	display: flex;
	flex-flow: row wrap;
	font-size: 0;
}

#outline .buken_comment label{
	flex: 0 0 12.0em;
	font-size: 1.2rem;
}
#outline .buken_comment span{
	flex: 0 0 calc(100% - 14.0em);
	font-size: 1.2rem;
}

#outline .buken_comment br{
	display: none;
}

#outline .attention{
	display: none;
}

@media screen and (min-width: 768px) {

	.l-title{
		margin-bottom: 8.0rem;
	}

	#outline .buken_comment{
		display: revert;
		font-size: 1.0em;
	}

	#outline .buken_comment label,
	#outline .buken_comment span{
		font-size: 1.0em;
	}

	#outline .buken_comment br{
		display: revert;
	}
}