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

:root {
	--groundColor: #fff;
	--figureColor: #4A3F1F;
	--linkColor-hover: #fff;
	--headerHeight: 70px;
	--drawerBgColor: #fff;
	--ttf: 1s ease;
}

.windowFullWidth,
.windowFullWidth-p{
	margin-left: calc(-1 * var(--contentsPaddingSide))!important;
	margin-right: calc(-1 * var(--contentsPaddingSide))!important;
}
.windowFullWidth-p {
	padding-left: var(--contentsPaddingSide);
	padding-right: var(--contentsPaddingSide);
}

body {
	/* Web font */
	font-family: 'Noto Sans JP', sans-serif;
	background-color: var(--groundColor);
	color: var(--figureColor);
}
section {
	padding-top: 70px;
	padding-bottom: 70px;
}
a {
	transition: all 0s linear;
}
body.DCL a {
	transition: all .3s ease;
}
a:hover {
	color: var(--linkColor-hover);
	text-decoration: none;
}


#majorLayoutWrap {
	grid-template-rows: min-content auto;
}


/* バーガーアイコン 用ユーザー追加スタイル */
.drawer-hamburger {
  /* バーガーアイコン線の太さ */
  --hamburgerIconThin: 1px;
  /* バーガーアイコン線の間隔 */
  --hamburgerIconGap: 6px;
  /* バーガーアイコン線の色 */
	--hamburgerIconColor: #000;
  /* ボタンの幅 */
  --hamburgerWidth: 30px;
  /* ボタンのパディング左右 */
  --hamburgerPaddingH: 15px;
  /* ボタンの角丸 */
	--hamburgerRadius: 0px;
  /* ボタンの背景色 */
  --hamburgerBgColor: rgba(255,255,255,0.0);
  /* バーガーアイコンと文字の間隔 */
	--hamburgerItemGap: 7px;
	
  /* ボタンの文字色 */
  color: var(--hamburgerIconColor);
  /* ボタンの高さ（ 右側の値を変更する ） */
  height: var(--headerHeight, 60px);
  /* ボタンの角丸 */
  border-radius: var(--hamburgerRadius);
  /* バーガーアイコンと文字の間隔 */
  gap: var(--hamburgerItemGap);
	
	transition: all 0s linear;
}
body.DCL .drawer-hamburger {
	transition: all .6s cubic-bezier(.19,1,.22,1);
}

/* バーガーアイコン 動的背景対応
body.enterContent .drawer-hamburger {
	--hamburgerBgColor: rgb(44 44 44 / 50%);
}
body.enterContent.drawer-open .drawer-hamburger {
	--hamburgerBgColor: transparent;
}
 */

.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
	-webkit-transition: all 0s linear;
	transition: all 0s linear;
}
body.DCL .drawer-hamburger-icon,
body.DCL .drawer-hamburger-icon:after,
body.DCL .drawer-hamburger-icon:before {
	-webkit-transition: all .6s cubic-bezier(.19,1,.22,1);
	transition: all .6s cubic-bezier(.19,1,.22,1);
}


/* ドロワーメニュー動作改造 */
.drawer--right.drawer-open .drawer-hamburger {
	right: 0;
	color: var(--figureColor);
}
.drawer--right .drawer-nav {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: var(--drawerBgColor);
	z-index: 6;
	top: 0;
	right: 0;
	display: flex;
	visibility: hidden;
	opacity: 0;
	transition: 0s all linear;
	transition-delay: 0s;
}
.drawer--right.DCL .drawer-nav {
	transition: 0.65s all cubic-bezier(.275,0,0,1);
	transition-delay: 0.4s;
}
body.drawer-open .drawer-nav {
	width: 100%;
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

/* テキスト下からスライド */
.drawer-nav li a {
	overflow: hidden;
}
.drawer-nav .drawer-menu a .txt {
	display: block;
	transition: transform 1s;
	transition-timing-function: cubic-bezier(.165,.84,.44,1);
	transform: translate3d(0,150%,0);
	transition-delay: 0.4s;
}
body.drawer-open .drawer-nav .drawer-menu a .txt {
	transform: translate3d(0,0,0);
}

/* ドロワーメニュー内部レイアウト変更 */
.drawer-nav {
	overflow: initial;
}
body.drawer .drawer-nav .drawerScroll {
	display: flex;
	justify-content: center;
	overflow: auto;
	max-height: 100%;
	width: 100%;
}
body.drawer .drawer-nav {
	justify-content: center;
	align-items: center;
}
#drawerContents {
	height: 100%;
	padding: var(--contentsPaddingSide);
}
#drawerContents .gnaviContents {
	--paragraphMarginBottom: 2em;
}
.drawer-nav .gnaviContents>li:last-child,
.drawer-nav .sub-menu, .drawer-nav li {
	border: none;
}
.drawer-nav a {
	text-align: center;
}
#drawerContents .gnaviContents .sub-menu {
	--paragraphMarginBottom: 0em;
}
.drawer-nav .sub-menu {
	--menuPL: 0px;
}
.drawer-nav .sub-menu a {
	padding-left: 1em;
}
.drawer-nav a:hover:before {
	background-color: var(--groundColor);
}
#drawerContents .snsBox {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	align-items: center;
}
#drawerContents .snsBox a {
	padding: 0;
	width: 40px;
}
#drawerContents .snsBox a:hover::before {
	content: none;
}

/* ドロワーメニューサブメニュー展開 */
.gnaviContents>li>.sub-menu {
	overflow: hidden;
	transition: all .7s ease;
}
.gnaviContents>li.open>.sub-menu {
	height: auto;
}

.gnaviContents>li>a .subMenuIcon:before {
	content: '＋';
	display: inline-block;
	margin-right: 0.2em;
}
.gnaviContents>li.open>a .subMenuIcon:before {
	content: '－';
}

.ft_nv_txt {
    color: #C5968B;
}

/* ヘッダー */
#HEADERSET {
	position: fixed;
	width: 100%;
	z-index: 2;
	background-color: #fff;
}
#HEAD {
	padding-top: calc(var(--contentsPaddingSide)/ 1.3);
}
#HDBTN, #HDLOGO {
	width: 100%;
	padding-bottom: calc(var(--contentsPaddingSide)/ 1.3);
}


/* サブページティザータイトル */
.pageClassSubpage #sub_TH_ImgTitle {
	display: grid;
	height: 57vw;
	max-height: 300px;
	align-items: center;
	text-align: center;
	background-color: #0a0a0a;
	padding: 2em 1em 1em;
	color: #fff;
	font-size: 1.6em;
	font-weight: bold;
	background-image: url("../images/top_slide_02.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
}
#sub_TH_ImgTitle :where(.title, h1, h2) {
	font-size: 1em;
	margin: auto;
}
#sub_TH_ImgTitle.showSameTitleTagContent:after {
	content: none;
}


/* コンテンツ */
#CONTENTS {
	padding-bottom: 0;
}


/* ふんわり表示＋上にスライド */
.fx_funwari_up {
	opacity: 0;
	transform: translateY(100px);
	transition: all var(--ttf);
}
.sd-enterd .fx_funwari_up {
	opacity: 1;
	transform: translateY(0px);
}


/* フッター */
#FOOTER {
	background-color: #F0F0F0;
	padding-bottom: 20px;
	padding-left: var(--contentsPaddingSide);
	padding-right: var(--contentsPaddingSide);
	padding-top: 15px;
}
#FOOTER .footRight {
	display: grid;
	grid-template-rows: repeat(2, auto);
	gap: 1em;
	text-align: center;
}
#FOOTER .privacy a {
	font-size: 0.8em;
}

.box {
    margin-bottom: 5em;
}

.footmap {
	width: 100%;
}

.sp_center {
	text-align: center;
    margin-bottom: 2em;
}


/* コピーライト */
#COPYRIGHT {
    height: 50px;
    padding-top: 11px;
    text-align: center;
    color: #fff;
    background: #C5968B;
}



/* 背景固定 */
.fixedBG {
	clip-path: inset(0 0 0 0);
}
.fixedBG::before {
	content: "";
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: -1;
	background-position: center center;
}
/* Chrome バグ対策 */
.fixedBG {
	opacity: .999;
}
.fixedBG.fixedBG-enterd {
	opacity: 1;
	margin-bottom: -1px !important;
}


/* 通常タイトル */
section .titleStd {
	line-height: 1.5;
	margin-bottom: 2.5em;
}
section .titleStd .mainTxt {
	letter-spacing: 0.1em;
}
section .titleStd .subTxt {
	font-size: 0.7em;
}


/* 下層ページメインタイトル */
.mainTitle .sub {
	display: block;
	font-size: 0.6em;
}


/* 日付フォントスタイル */
.date {
	font-family: 'Cormorant Garamond', serif;
}


/* 淡いピンク */
.pale_pink {
	color: #C5968B;
	font-weight: bold;
	font-size: 1.1em;
}

/* SNSで情報を随時更新中！見出し */
.sns_midashi {
	color: #C5968B;
	font-weight: lighter;
	font-size: 1.4em;
}


/* トップページ */
.STORY,
.PHOTO_GALLERY,
.PLAN {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin-bottom: 0;
	background-color: #ffffff;
}
.STORY::before {
	background-image: url("../images/bg1.jpg");
	opacity: .5;
}

.PHOTO_GALLERY::before {
	background-image: url("../images/bg2.webp");
	opacity: .5;
}

.PLAN::before {
	background-image: url("../images/bg2.webp");
	opacity: .5;
}



.STORY .titleStd .mainTxt,
.PHOTO_GALLERY .titleStd .mainTxt,
.PLAN .titleStd .mainTxt {
	color: #ff7400;
}
.STORY .bnrBox,
.PHOTO_GALLERY .bnrBox,
.PLAN .bnrBox {
	width: 100%;
	--bnrPadding: 15px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 35px;
	margin-top: 50px;
}
.STORY .bnrItem,
.PHOTO_GALLERY .bnrItem {
	display: flex;
	flex-flow: column;
	background-color: var(--groundColor);
	color: var(--figureColor);
}

.PLAN .bnrItem {
    display: flex;
    flex-flow: column;
    background-color: var(--groundColor);
	background-image: url("../images/bg2.jpg");
    color: var(--figureColor);
    border-top: 10px solid #C5968B;
    border-bottom: 10px solid #C5968B;
}

.STORY .bnrImg,
.PHOTO_GALLERY .bnrImg,
.PLAN .bnrImg {
	position: relative;
}
.STORY .bnrImg img,
.PHOTO_GALLERY .bnrImg img,
.PLAN .bnrImg img {
	width: 100%;
}
.STORY .titleBox,
.PHOTO_GALLERY .titleBox {
	position: relative;
	margin-top: -2.5em;
	margin-left: calc(-1 * var(--bnrPadding));
	padding: 0.3em 0.3em 0em var(--bnrPadding);
	max-width: 90%;
	background-color: var(--groundColor);
}

.PLAN .titleBox {
	position: relative;
	text-align: center;
}


.STORY .bnrMainTitle,
.PHOTO_GALLERY .bnrMainTitle,
.PLAN .bnrMainTitle {
	font-size: 1.6em;
	color: #C5968B;
	margin: 0;
}

.STORY .bnrSubTitle,
.PHOTO_GALLERY .bnrSubTitle,
.PLAN .bnrSubTitle {
	margin: 0;
}

.STORY .bnrContent,
.PHOTO_GALLERY .bnrContent {
	display: flex;
	flex-flow: column;
	flex: 1 0 auto;
	padding: 0 var(--bnrPadding) var(--bnrPadding);
}

.PLAN .bnrContent {
    display: flex;
    flex-flow: column;
    flex: 1 0 auto;
    padding: 40px var(--bnrPadding);
}

.STORY .bnrContent > * + *,
.STORY .bnrContent .bottomBox > * + *{
	margin-top: var(--bnrPadding);
}
.PHOTO_GALLERY .bnrContent > * + *,
.PHOTO_GALLERY .bnrContent .bottomBox > * + *{
	margin-top: var(--bnrPadding);
}
.PLAN .bnrContent > * + *,
.PLAN .bnrContent .bottomBox > * + *{
	margin-top: var(--bnrPadding);
	margin-left: auto;
    margin-right: auto;
}

.STORY .btnBox a,
.PHOTO_GALLERY .btnBox a {
	display: block;
	max-width: 70%;
	margin: auto;
	border: 1px solid #888;
	padding: .3em;
	text-align: center;
	color: darkorange;
}

.PLAN .btnBox a {
	display: block;
	max-width: 100%;
	margin: auto;
	border: 1px solid #888;
	background: #ffffff;
	padding: .3em 1.5em;
	text-align: center;
	color: #000000;
    font-weight: bold;
}


.kome_midashi {
    color: #C5968B;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    padding: 60px 0 30px;
    margin: 20px 0;
    background-image: url(../images/100kome_midashi_frame.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}



.wing_midashi {
    width: 100%;
    height: 100%;
    padding-bottom: 15px;
    color: #C5968B;
    font-size: 6vw;
    text-align: center;
    background-image: url(../images/midashi_bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



#GALLERY_SLIDE {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	margin-bottom: 0;
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: var(--groundColor);
}
#GALLERY_SLIDE .content {
	width: 100%;
}
#GALLERY_SLIDE .swiper-slide {
	--borderWidth: 1px;
	display: grid;
	grid-template-rows: 40vh auto;
	height: 50vh;
	padding: 10px;
	border: var(--borderWidth) solid #b2b2b2;
	background-color: #fff;
	color: currentColor;
}
#GALLERY_SLIDE .swiper-slide img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
}
#GALLERY_SLIDE .swiper-slide .expl {
	/* color: var(--groundColor); */
	padding: calc(var(--borderWidth) + 0.5em + 5px) 0.5em 0.5em;
	display: flex;
	justify-content: space-between;
	gap: 1em;
}
#GALLERY_SLIDE .swiper-slide .expl .numbr {
	color: #ff7400;
}
#GALLERY_SLIDE .swiper-slide .expl .icon {
	line-height: 1.5;
}
#GALLERY_SLIDE .swiper-slide .expl .icon_arrow {
	width: auto;
	height: 10px;
}


#WHATS_NEW {
	background: #ffffff;
	margin-bottom: 0;
}


.sns_box {
	display: flex;
	justify-content: space-evenly;
}

.sns_box img {
    max-width: 60px;
}


#TOPNEWS {
	display: flex;
	align-items: center;
	justify-content: center;
	/*min-height: 100vh;*/
	margin-bottom: 0;
	background-color: var(--figureColor);
}
#TOPNEWS .content {
	width: 100%;
}
#TOPNEWS .title {
color: var(--groundColor);
}
#TOPNEWS .newsItem {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 5px;
	border-top: 1px solid rgba(255,255,255,0.5);
	margin-bottom: 50px;
	padding-top: 10px;
	transition: all 0.5s ease;
	color: var(--groundColor);
}
#TOPNEWS .newsItem:hover {
	border-color: var(--groundColor);
	text-decoration: none;
}
#TOPNEWS .newsItem .top {
	display: flex;
	justify-content: space-between;
	font-size: 0.8em;
}
#TOPNEWS .newsItem .date {
	font-size: 1.3em;
	line-height: 1.1;
}
#TOPNEWS .newsItem .bottom {
	display: flex;
	align-items: flex-start;
}



/* GALLERYページ */
#GALLERY_TILE {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin-bottom: 0;
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: var(--groundColor);
}
#GALLERY_TILE .content {
	width: 100%;
}


/* GALLERYページ */
.gallery-lists {
	display: grid;
	grid-template-columns: 1fr 1fr; /* 2列 */
	gap: 5px;
	margin: 0 auto;
}

.gallery-list {
	  width: auto;
}

.gallery-list img {
	width: 100%;
	height: 25vh;
    object-fit: cover;
}



/* NEWSページ */
#NEWS .newsListBox {
	display: grid;
	gap: 15px;
}
#NEWS .newsItem {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 15px;
	/*background-color: #161515;*/
	color: var(--figureColor);
	/*border-radius: 5px;*/
}
#NEWS .newsItem:hover {
	background-color: #f3f3f3;
}
#NEWS .newsItem .imgBox {
	padding: 1px;
	padding-right: 0;
	width: 100%;
	height: 100px;
}
#NEWS .imgBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/*border-radius: 3px 0 0 3px;*/
}
#NEWS .newsItem .txtBox {
	display: flex;
	flex-flow: column;
	justify-content: center;
	gap: 5px;
	padding: 5px 5px 5px 0;
	font-size: 0.9em;
}
#NEWS .newsItem .date {
	font-size: 1.1em;
	line-height: 1;
}
#NEWS .newsItem .title {
	line-height: 1.2;
	padding-bottom: 0.5em;
}



/* NEWS詳細ページ */
#NEWSDETAIL .newsContent {
	display: grid;
	gap: 15px;
	border: 1px solid #d6d6d6;
	padding: 15px;
	color: var(--figureColor);
	/*border-radius: 5px;*/
}
#NEWSDETAIL .title {
	font-size: 1.2em;
}
#NEWSDETAIL .date {
	font-size: 0.9em;
	color: #888;
}
#NEWSDETAIL .imgBox img {
	/*border-radius: 4px;*/
}



/* PRIVACY ページ */
#PRIVACY .privacyItem {
	margin-bottom: 5em;
}



/* 売買物件情報 ページ */
.propertyInfoBox {
	margin-left: auto;
	margin-right: auto;
	display: grid;
	gap: 50px 15px;
	grid-template-columns: 1fr;
}
.propertyInfoItem {
	border: 1px solid #d6d6d6;
	padding: 2em 1em;
	display: flex;
	flex-flow: column;
	gap: 15px;
}
.propertyInfoItem > .title {
	line-height: 1.3;
	margin: 0;
}
.propertyInfoItem .contentBox {
	display: flex;
	flex-flow: column;
	height: 100%;
}
.propertyInfoItem .txtBox {
	flex: 1 0 auto;
}
.propertyInfoItem .btnItem {
	display: block;
	background-color: #333;
	text-align: center;
	padding: .5em;
	font-size: .8em;
	color: #fff;
}



/* 会社概要 ページ */
.companyInfoBox {
	display: flex;
	flex-flow: column;
	gap: 50px;
}
.companyInfoBox .infoTableBox :is(th, td) {
	padding: 1em 0.5em;
	line-height: 1.4;
	border-bottom: 1px dotted #acacac;
}
.companyInfoBox .infoTableBox .infoTableItem {
	width: 100%;
}
.companyInfoBox .infoTableBox th {
	padding-left: 0;
	min-width: 3.5em;
	text-align: left;
}
.companyInfoBox .infoTableBox td {
	padding-right: 0;
}
.gmapBox {
	height: 50vh;
	flex: 1 0 auto;
}
.gmapBox iframe {
	height: 100%;
	width: 100%;
}



/* BUSINESS ページ */
#BUSINESS .businessListBox > * + * {
	margin-top: 100px;
}
#BUSINESS .businessItem .layoutBox {
	display: grid;
	gap: 20px;
}
#BUSINESS .titleBox .title {
	font-size: 1.3em;
	margin-bottom: .8em;
}
#BUSINESS .txtBox > * + * {
	margin-top: 1.5em;
	margin-bottom: 0;
}
#BUSINESS .txtBox > * {
	margin-bottom: 0;
}



/* Plan ページ */
#Plan .planListBox > * + * {
	margin-top: 100px;
}
#Plan .planItem {
	border: 1px solid #ccc;
	padding: 20px;
}
#Plan .planItem .layoutBox {
	display: grid;
	gap: 20px;
}
#Plan .titleBox .title {
	font-size: 1.1em;
	margin-bottom: .8em;
}
#Plan .titleBox .title .numbr {
	color: #ff7400;
}
#Plan .planItem .txtBox > .title {
	font-size: 1.2em;
}
#Plan .txtBox > * + * {
	margin-top: 1.5em;
	margin-bottom: 0;
}
#Plan .txtBox > * {
	margin-bottom: 0;
}

#BASIC_PHOTO_PLAN,
#ADVANCE_PHOTO_PLAN,
#PREMIUM_PHOTO_PLAN {
	height: 40px;
}


/* 見出し */
.point-midashi {
    margin: 10px 0 30px;
    padding-left: 50px;
    padding-top: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #C8B55B;
    font-size: 1.2em;
    font-weight: bold;
    background-image: url(../images/midashi_icon.png);
    background-repeat: no-repeat;
}


/* ボタン */
.button-rink, .button-rink:visited {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    background: #7A6936;
    display: inline-block;
    padding: 10px;
    color: #ffffff;
    border: none;
    position: relative;
    cursor: pointer;
    text-align: center;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
    text-decoration: none;
}
a.button-rink {
    color:#ffffff;
    text-decoration: none;
}
.button-rink a:link{
    color:#ffffff;
    text-decoration: none;
}
.button-rink:hover{
    background: #544825;
    text-decoration: none;
    color:#ffffff;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
}


/* LINEにてお問い合わせボタン */
.button-rink_line, .button-rink_line:visited {
    width: 80%;
    font-size: 16px;
    font-weight: bold;
    background: #00B900;
    display: inline-block;
    padding: 10px;
	border-radius: 10px;
    color: #ffffff;
    border: none;
    position: relative;
    cursor: pointer;
    text-align: center;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
    text-decoration: none;
}
a.button-rink_line {
    color:#ffffff;
    text-decoration: none;
}
.button-rink_line a:link{
    color:#ffffff;
    text-decoration: none;
}
.button-rink_line:hover{
    background: #00DF00;
    text-decoration: none;
    color:#ffffff;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
}



.btn_box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}


/* Q&A */
.faq_l {
    width: 40px;
    font-size: 1.4em;
    vertical-align: middle;
}

.faq_r {
    vertical-align: middle;
	padding-right: 40px;
	font-size: 13px;
}


/* Shop */
.t_l {
	width: 30%;
	padding: 12px 0;
	border-bottom: 1px dotted #cccccc;
	font-weight: bold;

}

.t_r {
	width: 70%;
	padding: 12px 0;
	border-bottom: 1px dotted #cccccc;
}


/* Campaign */
.caption_box {
    position: relative;
    margin-top: 1em;
    padding: 2em 1.5em;
    border: 5px solid #cccccc;
}

.caption_box .caption {
    position: absolute;
    top: 0;
	left: 50%;
    font-size: 1.4em;
	font-weight: bold;
    color: #ffffff;
    padding: 0 10%;
    margin: 0;
    background-color: #43CBAC;
    border-radius: 10px;
    transform: translateY(-50%) translateX(-50%);
}

.tokuten {
    background: #D2EAE7;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.tokuten_box {
    width: 100%;
    display: grid;
	justify-content: center;
    gap: 20px;
}