@charset "utf-8";

:root {
    --color-black: #000;
    --color-white: #FFF;
    --color-gray777: #777;
    --color-gray999: #999;
    --color-grayAAA: #AAA;
    --color-grayCCC: #CCC;
    --color-grayEEE: #EEE;
    --color-lightblue: #E6F3FF;
    --color-blue: #163386;
    --color-red: #EE0932;
}

/* default
=============================================== */

* {
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td {
	list-style: none;
	line-height: 1;
	border-collapse: collapse;
	border-spacing: 0;
}
html {
	min-height: 100%;
	font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
	position: relative;
}
body {
	font-family: 'Noto Serif JP', serif, 'Yu Gothic',YuGothic,'メイリオ',Meiryo,Arial,Helvetica,Verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','HiraKakuPro-W3','ＭＳ Ｐゴシック','MS PGothic',Sans-serif;
	font-weight: 400;
}
q:before,q:after {
	content:'';
}
object,embed {
	vertical-align: top;
}
img {
	max-width: 100%;
    height: auto;
	vertical-align: bottom;
    -webkit-backface-visibility: hidden;
}
img,abbr,acronym,fieldset {
	border: 0;
}




/* link
=============================================== */

a {
	color: var(--color-white);
	text-decoration: underline;
	transition: .1s ease;
}
a:visited {
	color: var(--color-white);
	text-decoration: none;
}
a:hover {
	color: var(--color-white);
	text-decoration: none;
}
a[id]:hover {
	color: var(--color-white);
}
a:active {
	color: var(--color-white);
}

@media (min-width: 641px) {
a[href^="tel:"] {
    pointer-events: none;
}
}


/* base
=============================================== */

html {
	background-color: var(--color-black);
}
body {
	margin: auto;
	max-width: 640px;
	background-color: var(--color-black);
	color: var(--color-white);
}
.pc {
	display: block;
}
br.pc {
	display: inline-block;
}
.sp, br.sp {
	display: none;
}
.text-left {
	text-align: left !important;
}
.text-center {
	text-align: center !important;
}
.text-right {
	text-align: right !important;
}
.text-underline {
    text-decoration: underline !important;
}

.circle-list, .decimal-list {
	margin: 1em 0 3em 1.8em;
}
.circle-list li, .decimal-list li {
	margin: .5em 0;
	font-size: 1.6rem;
	line-height: 1.6;
}
.circle-list li {
	list-style: circle;
}
.decimal-list li {
	list-style: decimal;
}
.ex {
	margin: 1em 0;
}
.ex li {
	margin: .5em 0;
	padding-left:  1em;
	text-indent: -1em;
	font-size: 1.8rem;
	line-height: 1.8;
}
.longurl {
	word-break: break-all;
}
.border-radius10 { border-radius: 10px; }
.border-radius-tl10 { border-top-left-radius: 10px; }
.border-radius-tr10 { border-top-right-radius: 10px; }
.border-radius-bl10 { border-bottom-left-radius: 10px; }
.border-radius-br10 { border-bottom-right-radius: 10px; }

.margin-top-50 { margin-top: 50px !important }

.margin-bottom-10 { margin-bottom: 10px !important }
.margin-bottom-15 { margin-bottom: 15px !important }
.margin-bottom-20 { margin-bottom: 20px !important }
.margin-bottom-25 { margin-bottom: 25px !important }
.margin-bottom-30 { margin-bottom: 30px !important }
.margin-bottom-35 { margin-bottom: 35px !important }
.margin-bottom-40 { margin-bottom: 40px !important }
.margin-bottom-45 { margin-bottom: 45px !important }
.margin-bottom-50 { margin-bottom: 50px !important }
.margin-bottom-55 { margin-bottom: 55px !important }

.margin-right-20 { margin-right: 20px !important }
.margin-left-20 { margin-left: 20px !important }

.margin-auto { margin: auto !important }

.padding-top-15 { padding-top: 15px !important }
.padding-bottom-0 { padding-bottom: 0px !important }
.padding-bottom-25 { padding-bottom: 25px !important }

.max-width-50p { max-width: 50%; }
.max-width-60p { max-width: 60%; }
.max-width-70p { max-width: 70%; }
.max-width-80p { max-width: 80%; }
.max-width-90p { max-width: 90%; }

.display-inlineblock {
    display: inline-block !important;
}
.line-height-15 { line-height: 1.5; }
.line-height-16 { line-height: 1.6; }
.line-height-17 { line-height: 1.7; }
.line-height-18 { line-height: 1.8; }

.font-size-90p { font-size: 90% !important; }

.marker-pink {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 70%,rgba(233,18,134,1) 70%);
}
.marker-blue {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 70%,rgba(123,153,240,1) 70%);
}
.marker-lightpink {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 70%,rgba(244,183,187,1) 70%);
}
.marker-khaki {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 70%,rgba(186,176,164,1) 70%);
}
.stripe-green {
    background-image: repeating-linear-gradient(45deg, transparent 0 3px, var(--color-pink) 3px 6px);
    background-repeat: no-repeat;
    background-size: 100% 10px;
    background-position: 0 90%;
}
.highlight-white, .highlight-green {
    display: inline-block;
    padding: 0.5rem 0.75rem 0.4rem;
}
.highlight-white {
    background:#FFF;
}
.sideline {
	display: flex;
	justify-content: center;
	align-items: center;
    margin-bottom: 15px;
	font-size: 1.8rem;
    font-weight: 500;
	text-align: center;
}
.sideline::before,
.sideline::after {
	content: '';
	width: 1px;
	height: 20px;
	background-color: #111;
}
.sideline::before {
	margin-right: 15px;
    transform: rotate(-30deg);
}
.sideline::after {
	margin-left: 15px;
    transform: rotate(30deg);
}

.inline-block {
    display: inline-block;
}
p:not([class]) {
    margin-bottom: 1.5em;
    font-size: 1.8rem;
    line-height: 1.8;
    letter-spacing: -0.025em;
}

.googlemap {
    position: relative;
    width: 100%;
    margin-bottom: 25px;
    padding-top: 150%;
    height: 0;
}
.googlemap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fs14 { font-size: 1.4rem; }
.fs15 { font-size: 1.5rem; }
.fs16 { font-size: 1.6rem; }
.fs17 { font-size: 1.7rem; }
.fs18 { font-size: 1.8rem; }
.fs19 { font-size: 1.9rem; }
.fs20 { font-size: 2.0rem; }
.fs22 { font-size: 2.2rem; }
.fs24 { font-size: 2.4rem; }
.fs28 { font-size: 2.8rem; }

@media (min-width: 641px) {
html, body {
    background-color: #000;
}
.max-width-1000px-pc { max-width: 1000px }
.max-width-1200px-pc { max-width: 1200px }

.googlemap {
    padding-top: 56.25%;
}
.circle-list, .decimal-list {
	margin: 1em 0 3em 2em;
}
.circle-list li, .decimal-list li {
	margin: .5em 0;
	font-size: 2.0rem;
	line-height: 1.6;
}

}



/* table scroll script
=============================================== */

.table-scroll {
	margin: 15px 0;
	padding-bottom: 15px;
	overflow: auto;
	white-space: nowrap;
}
.table-scroll table {
	margin: 0;
}
.table-scroll::-webkit-scrollbar {
	height: 5px;
}
.table-scroll::-webkit-scrollbar-track {
	background-color: #333;
}
.table-scroll::-webkit-scrollbar-thumb {
	background-color: #CCC;
}

/* button
=============================================== */

.btn01, .btn02 {
    padding: 5px 0;
}
.btn01 a, .btn02 a {
    display: inline-block;
    width: 100%;
    padding: 20px 20px 22px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 2.0rem;
    text-align: center;
    text-decoration: none;
}
.btn01 a {
    background-color: var(--color-gray777);
    color: var(--color-white);
}
.btn02 a  {
    background-color: var(--color-black);
    color: var(--color-white);
}
.btn01 a:hover, .btn02 a:hover {
    transition: ease .1s;
    opacity: 0.7;
}
.btn01 a::after {
    content: '';
    display: inline-block;
    margin: 0 0 5px 15px;
    width: 20px;
    height: 20px;
    background: url(../img/common/arrow_right_white.svg) no-repeat;
    background-size: contain;
    vertical-align: middle;
    display: none;
}
.btn-tel {
    padding: 25px 0;
}
.btn-tel a {
    display: inline-block;
    width: 100%;
    padding: 20px;
    border-radius: 25rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 3.4rem;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    background-color: var(--color-gray);
    color: #FFF;
}
.btn-tel a::before {
    content: '';
    display: inline-block;
    margin-right: 15px;
    width: 28px;
    height: 28px;
    background: url(../img/common/icon_tel_white.svg) no-repeat;
    background-size: contain;
    vertical-align: bottom;
}

/* box
=============================================== */

.box01 {
	padding: 25px;
	background-color: #EEE;
	font-size: 2.0rem;
	font-weight: bold;
}

/* header
=============================================== */

#global-header {
	margin: 0;
	position: relative;
    background-color: var(--color-black);
}
#header-inner {
	display: flex;
    flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding: 25px 15px 15px;
}
#global-header #logo img {
	height: 60px;
}
#header-inner p#logo-text {
    margin: 15px 0 10px;
    text-align: center;
    line-height: 1.4;
    font-size: 3.0rem;
    font-weight: 600;
}
#header-inner p#logo-text span {
    display: block;
}
#header-inner #header-text {
    background: linear-gradient(to right, #BE6D00, #FDF07A, #BE6D00);
    border-radius: 10px;
    padding: 3px;
}
#header-inner #header-text div {
    border: 2px solid var(--color-black);
    border-radius: 10px;
}
#header-inner #header-text p {
    margin: 5px;
    padding: 5px 10px 6px;
    border: 1px solid linear-gradient(to right, #BE6D00, #FDF07A, #BE6D00);
    border-radius: 5px;
    font-size: 1.9rem;
    font-weight: 600;
    text-align: center;
    background: var(--color-black);
}



/* navigation
=============================================== */

#sp-nav {
	display: block;
	z-index: 100;
	width: 100%;
	background-color: var(--color-black);
	transition: .5s;
}
#sp-nav.hide {
    transform: translateY(-100%);
	transition: .5s;
}
#overlay_menu {
	z-index: 19;
	position: fixed;
	top: 0;
	right: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	transition: 0.3s;
	padding-top: 70px;
	visibility: hidden;
	background-color: var(--color-black);
}
.open #overlay_menu {
	opacity: 1;
	transition: 0.3s;
	visibility: visible;
}
#overlay_btn, #overlay_btn span {
	z-index: 20;
	top: 10px;
	right: 10px;
	position: fixed;
	transition: 0.3s;
}
#overlay_btn {
	width: 60px;
	height: 60px;
    border-radius: 10px;
	cursor: pointer;
	background-color: var(--color-gray);
}
#overlay_btn span {
	position: absolute;
	left: 10px;
	width: 40px;
	height: 2px;
	background-color: #FFF;
	transition: 0.3s;
}
.open #overlay_btn span {
	background-color: #FFF;
} 
#overlay_btn span:nth-of-type(1) { top: 20px;}
#overlay_btn span:nth-of-type(2) { top: 30px;}
#overlay_btn span:nth-of-type(3) { top: 40px;}
.open #overlay_btn span:nth-of-type(1) {
	top: 30px;
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.open #overlay_btn span:nth-of-type(2) {
	opacity: 0;
}
.open #overlay_btn span:nth-of-type(3) {
	top: 30px;
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#overlay_menu #sp-nav-wrap {
	margin-bottom: 20px;
}
#overlay_menu #sp-nav-wrap ul {
	width: 100%;
	margin: 0;
}
#overlay_menu #sp-nav-wrap ul li {
	padding: 13px 0;
	text-align: center;
}
#overlay_menu #sp-nav-wrap ul li#netshop {
	padding-top: 0;
}
#overlay_menu #sp-nav-wrap ul li a {
	display: inline-block;
	font-size: 2.4rem;
    font-weight: 500;
	text-decoration: none;
	color: var(--color-darkgray);
}
#overlay_menu #sp-nav-wrap ul li a:hover,
#overlay_menu #sp-nav-wrap ul li.current a {
	color: #999;
}
#overlay_menu #sp-nav-contact {
	margin: 30px 30px 35px;
}
#overlay_menu #sp-nav-contact ul {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 0;
}
#overlay_menu #sp-nav-contact ul li {
	width: calc(50% - 25px);
	padding: 0;
	text-align: center;
}
#overlay_menu #sp-nav-contact ul li a {
	display: block;
	padding: 25px 15px;
	font-size: 2.0rem;
	font-weight: bold;
	text-decoration: none;
	background-color: #111;
	color: #FFF;
}
#overlay_menu #sp-nav-contact ul li a:hover {
	opacity: .7;
}
#overlay_menu #nav-info {
	margin: 30px 30px 0;
	padding-top: 30px;
	border-top: 1px solid #CCC;
	background-color: #FFF;
}
#overlay_menu #nav-info dl dt {
	margin-bottom: 15px;
	font-size: 1.8rem;
}
#overlay_menu #nav-info dl dt img {
    width: 50%;
}
#overlay_menu #nav-info dl dd {
	font-size: 1.8rem;
	line-height: 1.8;
}
#overlay_menu #nav-info .btn-tel {
    padding-bottom: 0px;
}
#overlay_menu #nav-info #official-link {
    margin-top: 25px;
    font-size: 1.8rem;
    text-align: center;
}
#overlay_menu #nav-info #official-link a {
    text-decoration: none;
}

@media (min-width: 641px) {

#overlay_menu,
#overlay_btn, #overlay_btn span,
#overlay_menu {
	right: calc(50% - 320px);
}
#overlay_btn {
    	right: calc(50% - 310px);
}
#overlay_menu {
	max-width: 640px;
}

}


/* footer
=============================================== */

footer {
	padding: 15px 0;
	background-color: var(--color-gray);
}
footer #site-operator {
    margin-bottom: 10px;
    text-align: center;
    color: #FFF;
}
footer #site-operator a {
    font-size: 1.6rem;
    color: #FFF;
}
#copyright {
    margin: 0;
	font-size: 1.6rem;
	text-align: center;
	color: #FFF;
}

@media (min-width: 641px) {
footer #site-operator a {
    font-size: 1.8rem;
}

}


/* whitening-page
=============================================== */

.wtxt-ttl18 {
    margin-bottom: .5em;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6;
}
.wtxt-ttl20 {
    margin-bottom: .5em;
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1.6;
}
.wtxt-ttl24 {
    margin-bottom: .5em;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.6;
}
.wtxt-ttl-gold {
    margin: 0 -20px 15px;
    padding: 12px 0 13px;
    font-size: 2.0rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-red);
    background: linear-gradient(to right, #E1AC3C, #F8E171, #E1AC3C);
}
.wtxt-normal16 {
    margin-bottom: 1em;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
}
.wtxt-normal18 {
    margin-bottom: 1em;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
}
.wtxt-radius {
    margin-bottom: 15px;
    padding: 6px 0;
    border-radius: 10px;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
}
.wtxt-box {
    margin-bottom: 15px;
    padding: 6px 10px;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
}

.wtxt-radius.gray, .wtxt-box.gray {
    background-color: var(--color-grayCCC);
    color: var(--color-black);
}
.wtxt-radius.white, .wtxt-box.white {
    background-color: var(--color-white);
    color: var(--color-black);
}
.section-text {
    padding: 25px 20px 0;
    background-color: var(--color-black);
}
.section-stone {
    padding: 25px 20px 0;
    background: url(../img/whitening/bg_stone01.jpg);
}
.section-photo {
    padding: 25px 0;
    background-color: var(--color-white);
}
.whitening-image {
    margin-bottom: 25px;
    position: relative;
}
:root {
    --whitening-image-width: 70vw;
}
.sub-vis {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.whitening-image::before {
    content: '';
    display: block;
    position: absolute;
    top: calc( (var(--whitening-image-width)/2 * -1) + 20%);
    left: calc( (var(--whitening-image-width)/2 * -1) + 5%);
    width: var(--whitening-image-width);
    height:  var(--whitening-image-width);
    background: url(../img/whitening/flare_white01.png) no-repeat;
    background-size: contain;
}
.tm-logo figure {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.tm-logo figure img {
    object-fit: contain;
    width: 30%;
}
.tm-logo figure figcaption {
    flex: 1;
    padding-left: 20px;
}
.tm-logo figure figcaption p {
    margin: 0;
}
.tm-logo figure figcaption p:nth-of-type(1) {
    margin-bottom: 10px;
    font-size: 2.0rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: underline;
}
.tm-logo figure figcaption p:nth-of-type(2) {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
}
.tm-doctors {
    margin-bottom: 25px;
    display: flex;
}
.tm-doctors div:nth-of-type(1) {
    width: calc(80% - 15px);
    padding-right: 15px;
}
.tm-doctors div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}


/* 2025.12.16. 一時変更用　*/

.tm-doctors {
    margin-bottom: 0px;
    display: block;
}
.tm-doctors div:nth-of-type(1) {
    display: none;
}
.tm-doctors div:nth-of-type(2) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 15px;
}


/* 一時変更用ここまで（削除予定）　*/

.rakuna-logo {
    margin-bottom: 25px;
    text-align: center;
}
.rakuna-logo figure img {
	height: 60px;
}
.rakuna-logo figure figcaption p {
    margin: 15px 0 10px;
    text-align: center;
    line-height: 1.4;
    font-size: 3.0rem;
    font-weight: 600;
}
.rakuna-logo figure figcaption p span {
    display: block;
}
.section-photo .rakuna-logo {
    color: var(--color-black);
}
.concept {
    margin-bottom: 25px;
    padding: 30px 20px 20px;
    background-color: #FFF;
}
.concept ul li {
    margin-bottom: 8px;
    text-indent: -1em;
    padding-left: 1em;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
    color: #000;
}
.concept ul li span {
    color: var(--color-blue);
    text-decoration: underline;
}
.whitening-materials figure {
    margin: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.whitening-materials figure img {
    width: 25%;
}
.whitening-materials figure figcaption {
    flex: 1;
    padding-left: 15px;
}
.whitening-materials figure figcaption p {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
}
.whitening-materials figure figcaption p:nth-of-type(2) {
    font-size: 1.4rem;
}
.gel-types {
    margin-bottom: 25px;
}
.gel-types {
    margin-left: 5px;
}
.gel-types li {
    margin-bottom: 8px;
    text-indent: -1em;
    padding-left: 1em;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
}
.extend-arrow {
    position: relative;
}
.extend-arrow::before {
    content: "";
    position: absolute;
    aspect-ratio: 70 / 100;
    left: -10px;
    top: -15px;
    height: 40px;
    background-image: url(../img/whitening/angle_arrow_top.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
.price-box {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.price-box.gray .price-item {
    color: var(--color-black);
    background-color: var(--color-grayCCC);
}
.price-box.white .price-item {
    color: var(--color-black);
    background-color: var(--color-white);
}
p.dot-line {
    margin-bottom: 60px;
    position: relative;
}
.dot-line::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -20px;
    width: 100vw;
    height: 1px;
    border-bottom: 5px dashed var(--color-white);
}
.price-item {
    padding: 10px 1px;
    width: calc(100% / 3 - 5px);
    text-align: center;
}
.type2 .price-item {
    padding: 10px 1px;
    width: calc(100% / 2 - 5px);
    text-align: center;
}
.price-item p {
    margin: 0;
}
.price-item p:nth-of-type(1) {
    margin-bottom: 5px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
}
.price-item p:nth-of-type(2) {
    margin-bottom: 5px;
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1.6;
}
.price-item p:nth-of-type(3) {
    margin-bottom: 5px;
    font-size: 1.6em;
    font-weight: 500;
    line-height: 1.6;
}
.price-item p:nth-of-type(4) {
    margin-bottom: 5px;
    font-size: 1.8em;
    font-weight: 600;
    line-height: 1.6;
    color: var(--color-red);
}
.whitening-compare-table {
    width: 100%;
    background-color: var(--color-white);
}
.whitening-compare-table th, .whitening-compare-table td {
	white-space: nowrap;
    border: 1px solid #CCC;
    padding: 15px 5px;
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;
    color: #000
}
.whitening-compare-table thead th {
    background-color: var(--color-grayEEE);
}
.whitening-compare-table thead th:nth-of-type(4),
.whitening-compare-table tbody td:nth-of-type(3) {
    background-color: var(--color-lightblue);
}
.whitening-compare-table tbody td:nth-of-type(3) {
    font-weight: 600;
}

.rakuna-advantages {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
}
.rakuna-advantages ol {
	margin-left: 1.8em;
}
.rakuna-advantages ol li {
	margin: .5em 0;
	font-size: 1.8rem;
	line-height: 1.8;
	list-style: decimal;
    text-decoration: underline;
}
#whitening-before-after {
    margin: 20px -20px 20px;
}
.rakuna-whitening-online-system {
    margin-top: 35px;
}
.flow-item {
    position: relative;
    margin-bottom: 50px;
}
.flow-item:nth-of-type(2) {
    margin-bottom: 60px;
}
.flow-item::after {
    content: "";
    position: absolute;
    left: calc(10% - 10px);
    bottom: -50px;
    aspect-ratio: 47/106;
    width: 20px;
    background-image: url(../img/whitening/arrow_down_blue.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
.flow-item:last-child::after {
    display: none;
}
.flow-item figure {
    margin: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flow-item figure img {
    width: 20%;
}
.flow-item figure figcaption {
    flex: 1;
    padding-left: 20px;
}
.flow-item figure figcaption p {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6;
}
.flow-item figure figcaption p:nth-of-type(1) {
    margin-bottom: 5px;
    font-size: 1.6rem;
}
#reserve-vis {
    margin-bottom: 20px;
}
.section-photo-box {
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.section-photo-box p {
    margin: 2px 0;
}
.section-photo-box p img {
    object-fit: cover;
    width: 100%;
    height: 45vw;
}
.section-photo-box p:nth-of-type(1),
.section-photo-box p:nth-of-type(2) {
    width: calc(100% / 2 - 2px);
}
.section-photo-box p:nth-of-type(3),
.section-photo-box p:nth-of-type(4),
.section-photo-box p:nth-of-type(5) {
    width: calc(100% / 3 - 2px);
}
.section-photo {
    position: relative;
    padding-bottom: 50px;
}
.section-photo::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    background-image: url(../img/whitening/icon_page_flip.png);
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;

}
.shop-information-wrap {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.shop-information {
    margin: 0 0 35px;
    flex: 1;
}
.shop-information tr:first-child {
    border: none;
}
.shop-information th, .shop-information td {
    display: block;
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: left;
}
.shop-information th {
    padding: 0.5em 0 0;
}
.shop-information td {
    padding: 0 0 0.5em;
}
.side-link {
    width: 30%;
    padding-left: 25px;
}
.side-link ul li {
    margin-bottom: 25px;
}
.accessmap {
    margin: 25px 0 0;
}
.accessmap img {
    margin-top: 5px;
}
.partner {
    margin: 25px 0 0;
    padding: 0 20px;
}
.partner dl {
    text-align: center;
}
.partner dl dt {
    margin-bottom: 15px;
    font-size: 2.0rem;
}
.partner dl dd p {
    font-size: 1.6rem;
    line-height: 1.4;
}
.partner dl dd a {
    font-size: 1.4rem;
}


@media (min-width: 641px) {

.btn01 a, .btn02 a {
    padding: 20px 20px 22px;
    font-size: 2.6rem;
    font-weight: 600;
}


#header-inner {
	padding: 35px 0 25px;
}
#global-header #logo img {
	height: 100px;
}
#header-inner p#logo-text {
    margin: 20px 0 20px;
    line-height: 1.4;
    font-size: 4.0rem;
    font-weight: 600;
}
#header-inner #header-text p {
    font-size: 2.8rem;
    font-weight: 600;
}


.wtxt-ttl18 {
    margin-bottom: .5em;
    font-size: 1.8rem;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.6;
}
.wtxt-ttl20 {
    margin-bottom: .5em;
    font-size: 2.0rem;
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.6;
}
.wtxt-ttl24 {
    margin-bottom: .5em;
    font-size: 2.4rem;
    font-size: 3.0rem;
    font-weight: 600;
    line-height: 1.6;
}
.wtxt-ttl-gold {
    margin: 0 0 25px;
    padding: 15px 0 17px;
    font-size: 2.0rem;
    font-size: 3.0rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-red);
    background: linear-gradient(to right, #E1AC3C, #F8E171, #E1AC3C);
}
.wtxt-normal16 {
    margin-bottom: 1em;
    font-size: 1.6rem;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.6;
}
.wtxt-normal18 {
    margin-bottom: 1em;
    font-size: 1.8rem;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.6;
}
.wtxt-radius {
    margin-bottom: 15px;
    padding: 6px 0;
    border-radius: 10px;
    font-size: 1.8rem;
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
}
.wtxt-box {
    margin-bottom: 15px;
    padding: 6px 10px;
    font-size: 1.6rem;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
}
.section-text, .section-photo {
    padding: 35px 0 0;
}
.section-stone {
    padding: 35px 20px 0;
}

.whitening-image {
    margin-bottom: 25px;
    position: relative;
}
:root {
    --whitening-image-width: 30vw;
}
.whitening-image::before {
    content: '';
    display: block;
    position: absolute;
    top: calc( (var(--whitening-image-width)/2 * -1) + 20%);
    left: calc( (var(--whitening-image-width)/2 * -1) + 5%);
    width: var(--whitening-image-width);
    height:  var(--whitening-image-width);
    background: url(../img/whitening/flare_white01.png) no-repeat;
    background-size: contain;
}
.tm-logo figure {
    margin-bottom: 25px;
}
.tm-logo figure figcaption {
    flex: 1;
    padding-left: 25px;
}
.tm-logo figure figcaption p:nth-of-type(1) {
    margin-bottom: 15px;
    font-size: 2.6rem;
    line-height: 1.6;
}
.tm-logo figure figcaption p:nth-of-type(2) {
    font-size: 2.4rem;
}

.rakuna-logo figure img {
	height: 100px;
}
.rakuna-logo figure figcaption p {
    margin: 20px 0 20px;
    font-size: 4.0rem;
    font-weight: 600;
}
.concept {
    margin-top: 35px;
    margin-bottom: 25px;
    padding: 30px;
}
.concept ul li {
    margin-bottom: 8px;
    text-indent: -1em;
    padding-left: 1em;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.6;
    color: #000;
}
.concept ul li span {
    color: var(--color-blue);
    text-decoration: underline;
}
.whitening-materials figure {
    margin: 35px 0;
}
.whitening-materials figure figcaption {
    flex: 1;
    padding-left: 20px;
}
.whitening-materials figure figcaption p {
    font-size: 2.2rem;
}
.whitening-materials figure figcaption p:nth-of-type(2) {
    font-size: 2.0rem;
}
.gel-types {
    margin-bottom: 35px;
}
.gel-types {
    margin-left: 1em;
}
.gel-types li {
    margin-bottom: 8px;
    font-size: 2.2rem;
}
.extend-arrow::before {
    content: "";
    position: absolute;
    aspect-ratio: 70 / 100;
    left: 50px;
    top: -25px;
    height: 60px;
    background-image: url(../img/whitening/angle_arrow_top.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
.price-box {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
p.dot-line {
    margin-bottom: 100px;
    position: relative;
}
.dot-line::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 5px dashed var(--color-white);
}
.price-item {
    padding: 15px 1px;
    width: calc(100% / 3 - 5px);
    text-align: center;
}
.price-item p:nth-of-type(1) {
    margin-bottom: 5px;
    font-size: 2.4rem;
}
.price-item p:nth-of-type(2) {
    margin-bottom: 5px;
    font-size: 3.6em;
}
.price-item p:nth-of-type(3) {
    margin-bottom: 5px;
    font-size: 2.4em;
}
.price-item p:nth-of-type(4) {
    margin-bottom: 5px;
    font-size: 3.0em;
}
.rakuna-advantages ol,
.rakuna-advantages ol li {
	font-size: 2.4rem;
}
#whitening-before-after {
    margin: 20px 0 40px;
}
.flow-item {
    position: relative;
    margin-bottom: 80px;
}
.flow-item:nth-of-type(2) {
    margin-bottom: 80px;
}
.flow-item::after {
    content: "";
    position: absolute;
    left: calc(10% - 10px);
    bottom: -60px;
    aspect-ratio: 47/106;
    width: 20px;
    background-image: url(../img/whitening/arrow_down_blue.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
.flow-item figure figcaption {
    flex: 1;
    padding-left: 35px;
}
.flow-item figure figcaption p {
    margin: 0;
    font-size: 2.0rem;
    font-weight: 500;
    line-height: 1.6;
}
.flow-item figure figcaption p:nth-of-type(1) {
    margin-bottom: 5px;
    font-size: 2.4rem;
}
.section-photo-box {
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.section-photo-box p {
    margin: 2px 0;
}
.section-photo-box p img {
    object-fit: cover;
    min-height: auto;
}
.section-photo-box p:nth-of-type(1),
.section-photo-box p:nth-of-type(2) {
    width: calc(100% / 2 - 2px);
}
.section-photo-box p:nth-of-type(1) img,
.section-photo-box p:nth-of-type(2) img {
    height: calc(640px / 2.5);
}
.section-photo-box p:nth-of-type(3),
.section-photo-box p:nth-of-type(4),
.section-photo-box p:nth-of-type(5) {
    width: calc(100% / 3 - 2px);
}
.section-photo-box p:nth-of-type(3) img,
.section-photo-box p:nth-of-type(4) img,
.section-photo-box p:nth-of-type(5) img {
    height: calc(640px / 2);
}
.section-photo {
    position: relative;
    padding-bottom: 75px;
}
.section-photo::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    background-image: url(../img/whitening/icon_page_flip.png);
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.shop-information-wrap {
    margin-top: 35px;
}
.shop-information {
    margin: 0 0 35px;
}
.shop-information tr:first-child {
    border: none;
}
.shop-information th, .shop-information td {
    display: block;
    font-size: 2.2rem;
    line-height: 1.6;
    text-align: left;
}
.shop-information th {
    padding: 0.5em 0 0;
}
.shop-information td {
    padding: 0 0 0.5em;
}
.side-link {
    width: 25%;
    padding-left: 35px;
}
.side-link ul li {
    margin-bottom: 35px;
}
.accessmap {
    margin: 25px 0 35px;
}
.accessmap img {
    margin-top: 5px;
}
.partner {
    margin: 25px 0 25px;
    padding: 0;
}
.partner dl {
    text-align: center;
}
.partner dl dt {
    margin-bottom: 15px;
    font-size: 2.4rem;
}
.partner dl dd p {
    font-size: 2.0rem;
    line-height: 1.4;
}
.partner dl dd a {
    font-size: 1.6rem;
}
.partner dl dd + dt {
    margin-top: 30px;
}


}