@charset "utf-8";


/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("theme.css");
@import url("inview.css");


/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {right: -200px;}
	100% {right: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html {
	font-size: clamp(12px, 0.585vw + 9.80px, 18px);
	overflow-x: visible;
}
body {
	margin: 0;padding:0;
	font-family: var(--base-font);
	-webkit-text-size-adjust: none;
	background: var(--bg-color);
	color: var(--bg-inverse-color);
	line-height: 2;
	overflow-x: hidden;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}


/*section
---------------------------------------------------------------------------*/
section {
	padding: 0 var(--content-space-l);
	margin: var(--content-space-l) 0;
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;
}

a:hover {
	filter: brightness(1.1);
	text-decoration: none;
}


/*コンテナー
---------------------------------------------------------------------------*/
#container {
	animation: opa1 0.2s 0.2s both;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}


/*contents
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	min-height: 0;
}


/*main
---------------------------------------------------------------------------*/
main {
	container-type: inline-size;
}

main ul,main ol {
	margin-left: 2rem;
	margin-right: 2rem;
}


/*メニューオーバーレイ
---------------------------------------------------------------------------*/
#menubar-overlay {
	display: none;
	position: fixed;
	z-index: 99;
	top: 0;left: 0;
	width: 100%;height: 100%;
	background: rgba(180, 100, 40, 0.25);	/* オレンジ系の半透明オーバーレイ */
}

body.noscroll {
	overflow: hidden;
}


/*header
---------------------------------------------------------------------------*/
header {
    display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	height: 100px;
	padding: 0 calc(70px + 1rem) 0 var(--content-space-l);
	line-height: 1.2;
	position: relative;
}

header h1 {
	font-size: 0.6rem;
	font-weight: normal;
	position: absolute;
	left: var(--content-space-l);
	top: 0;
}

.logo {margin: 0;flex-shrink: 0;}
.logo img {
	display: block;
	width: 200px;
}

.logo a {text-decoration: none;}
.logo {
	width: auto;
	font-size: 1.4rem;
}

/*header右側のブロック
---------------------------------------------------------------------------*/
#header-box {
	font-size: 0.8rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

#header-box .tel {
	font-size: 1.3rem;
}

#header-box .tel strong i {
	color: var(--primary-color);
	margin-right: 0.2rem;
}

#header-box .tel .small {
	font-size: 0.7rem;
}

	@media (max-width:700px) {
	#header-box {
		display: none;
	}
	}

header .btn1 a {
	padding: 1rem;
}


/*開閉メニュー
---------------------------------------------------------------------------*/
.small-screen #menubar {
	animation: animation1 0.2s both;
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	width: 50%;
	height: 100%;
	padding: 100px var(--content-space-l) 50px;
	background: #fff9f4;	/* 温かみのあるオフホワイト */
}

.small-screen #menubar {display: none;}

	@media (max-width:700px) {
	.small-screen #menubar {
		width: 100%;
	}
	}

.small-screen #menubar ul a {
	display: block;text-decoration: none;
	color: inherit;
	border: 1px solid #e8c9a0;	/* ナチュラルなベージュ枠線 */
	margin-bottom: 1rem;
	padding: 1rem 2rem;
	border-radius: 5px;
}

.small-screen #menubar ul ul a {
	border: none;
	margin-left: 2rem;
	padding: 0.5rem 1.5rem;
}

a.ddmenu::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f078";
	margin-right: 1em;
	font-size: 0.7em;
	vertical-align: middle;
	display: inline-block;
	line-height: 1;
}

#menubar ul ul {display: none;}


/*menubar内のロゴ
---------------------------------------------------------------------------*/
.small-screen #menubar .logo {
	margin-bottom: 2rem;
}
.small-screen #menubar .logo img {
	margin-inline: auto;
}

/*menubar内のtel
---------------------------------------------------------------------------*/
.small-screen #menubar .tel {
	text-align: center;
	font-size: 1.4rem;
}


/*３本バーアイコン
---------------------------------------------------------------------------*/
#menubar_hdr {
	display: none;
	animation: opa1 0s 0.2s both;
	cursor: pointer;
	position: fixed;
	z-index: 101;
	right: 0px;
	top: 0px;
	width: 70px;
	height: 70px;
	border-bottom-left-radius: 10px;
	background: var(--primary-color);
}

#menubar_hdr span {
	display: block;
	transition: 0.3s;
	position: absolute;
	left: 18px;
	width: 35px;
	height: 2px;
	background: var(--primary-inverse-color);
}

#menubar_hdr.ham {
	background: #fff9f4;	/* オフホワイト */
}
#menubar_hdr.ham span {
	background: #b05a20;	/* 深めのオレンジブラウン */
}

#menubar_hdr span:nth-of-type(1) { top: 24px; }
#menubar_hdr span:nth-of-type(2) { top: 34px; }
#menubar_hdr span:nth-of-type(3) { top: 44px; }
#menubar_hdr.ham span:nth-of-type(1) { transform: translateY(10px) rotate(-45deg); }
#menubar_hdr.ham span:nth-of-type(2) { opacity: 0; }
#menubar_hdr.ham span:nth-of-type(3) { transform: translateY(-10px) rotate(45deg); }

.small-screen #menubar_hdr {
	display: flex;
}


/*著作部分
---------------------------------------------------------------------------*/
.pr a {
	text-decoration: none;display: block;
	background: rgba(100, 50, 10, 0.45);	/* オレンジブラウン系半透明 */
	color: #f5e6d0;		/* クリーム色テキスト */
	text-align: right;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: 900;
	margin-right: 0.5em;
}


/*PAGE TOP
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 1s 0.4s both;
	position: fixed;
	right: 20px;
	bottom: 20px;
	color: #fff;
	font-size: 1.5rem;
	background: rgba(200, 100, 30, 0.35);	/* オレンジ半透明 */
	width: 60px;
	line-height: 60px;
	border-radius: 50%;
}


/*bg1-parts
---------------------------------------------------------------------------*/
.bg1-parts {
	background: var(--bg-inverse-color);
	color: var(--bg-color);
}

/*bg1-primary
---------------------------------------------------------------------------*/
.bg1-primary-parts {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}

/*bg1-light
---------------------------------------------------------------------------*/
.bg1-light-parts {
	background: var(--light-color);
	color: var(--light-inverse-color);
}

/*bg1-accent
---------------------------------------------------------------------------*/
.bg1-accent-parts {
	background: var(--accent-color);
	color: var(--accent-inverse-color);
}

/*bg-parts
---------------------------------------------------------------------------*/
.bg-parts {
	padding-top: var(--content-space-l);
	padding-bottom: var(--content-space-l);
}

.bg-parts + .bg-parts {
	margin-top: calc(-1 * var(--content-space-l)) !important;
}


/*section内で画面両サイドいっぱいまで広げる
---------------------------------------------------------------------------*/
.bleed-x-parts {
	--bleed-x: var(--content-space-l);
	width: calc(100% + (var(--bleed-x) * 2));
	margin-left: calc(var(--bleed-x) * -1);
	margin-right: calc(var(--bleed-x) * -1);
	max-width: none;
}

.bleed-left-parts {
	width: calc(100% + var(--content-space-l));
	margin-left: calc(-1 * var(--content-space-l));
}
.bleed-right-parts {
	width: calc(100% + var(--content-space-l));
	margin-right: calc(-1 * var(--content-space-l));
}


/*メイン画像
---------------------------------------------------------------------------*/
.mainimg * {margin: 0;padding: 0;}

.mainimg {
	width: calc(100% - (var(--content-space-l) * 2));
	margin-inline: auto;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	line-height: 1.8;
	box-shadow: 0px 0px 2rem rgba(160, 80, 20, 0.12);	/* オレンジブラウン影 */
}

.mainimg .slide {
	position: relative;
}

.mainimg .slide picture {
	position: absolute;
	inset: 0;
	z-index: 0;
}

	@media (max-width:700px) {
	.mainimg .slide picture {
		position: static;
	}
	}

.mainimg .slide picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/*メイン画像上のテキスト
---------------------------------------------------------------------------*/
.mainimg .slide .text {
	position: relative;z-index: 1;
	width: 50%;
	padding: 2rem;
	padding-bottom: 4rem;
	text-shadow: 0px 0px 4px #fff8f0;	/* 温かみのあるテキストシャドウ */
}

	@media (max-width:700px) {
	.mainimg .slide .text {
		width: 100%;
		margin-top: -4rem;
	}
	}

.mainimg .slide .text .btn1 {
	text-shadow: none;
}

.mainimg .slide .text h2 {
	line-height: 1.5;
	font-weight: 500;
	font-size: max(2.2rem, 4vw);
	letter-spacing: 0.1em;
	font-family: var(--serif-font), var(--base-font);
	margin-bottom: 1rem;
}

.mainimg .slide .text h2 span {
	color: var(--primary-color);
	font-size: max(2.2rem, 6vw);
}

.mainimg .slide .text p {
	font-size: 0.75rem;
}

.mainimg .slide .text p strong {
	color: var(--primary-color);
	font-size: 1.2rem;
}

.mainimg .btn1 a {
	background: #fffaf5;	/* 温かみのある白 */
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
}

.mainimg .btn1 i {
	margin-right: 0.6rem;
	font-size: 1.4rem;
}


/*ヘッダー直下メニュー
---------------------------------------------------------------------------*/
#menubar2 {
	width: calc(100% - (var(--content-space-l) * 2));
	margin: 2rem auto;
	font-weight: 500;
}
#menubar2 > nav > ul {
	display: flex;
}

	@media screen and (max-width:900px) {
	#menubar2 {
		display: none;
	}
	}

#menubar2 > nav > ul > li {
	flex: 1;
	text-align: center;
	position: relative;
	letter-spacing: 0.05em;
}
#menubar2 li a {
	display: flex;text-decoration: none;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	padding: 1rem 0.2rem;
}

#menubar2 > nav > ul > li:first-child a {
	border-radius: 10px 0px 0px 10px;
}
#menubar2 > nav > ul > li:last-child a {
	border-radius: 0px 10px 10px 0px;
}

#menubar2 ul a i {
	font-size: 1.5em;
	opacity: 0.6;
}

/*ドロップダウン
---------------------------------------------------------------------------*/
#menubar2 ul ul {
	position: absolute;z-index: 100;
	top: 100%;
	left: 0px;
	animation: opa1 0.5s 0.1s both;
	width: 100%;
	font-size: 0.9rem;
}

#menubar2 ul ul a {
	display: block;
}


/*ボタン（btn1）
---------------------------------------------------------------------------*/
.btn-container {
	display: flex;
	gap: 1rem;
}

	@media (max-width:1000px) {
	.btn-container {
		flex-direction: column;
	}
	}

.btn1 a {
	display: block;
	text-decoration: none;
	text-align: center;
	border-radius: 5px;
	padding: 0.5rem 2rem;
	background: var(--bg-inverse-color);
	color: var(--bg-color);
}

.btn1.fit {
	width: fit-content;
}

.btn1.fit.c {
	margin: 0 auto;
}

.btn1.primary a {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}

.btn1.light a {
	background: var(--light-color);
	color: var(--light-inverse-color);
}

.btn1.accent a {
	background: var(--accent-color);
	color: var(--accent-inverse-color);
}

/* LINEカラー（緑系を少し温かみのある緑に） */
.btn1.line-color a {
	background: #3aab6e;	/* 少しナチュラルな緑 */
	color: #fff;
}


/*news（お知らせ）
---------------------------------------------------------------------------*/
dl.news * {margin: 0;padding: 0;}

dl.news dt {
	display: flex;
}

dl.news dt span {
	display: inline-block;
	line-height: 1;
	width: 6rem;
	padding: 0.3rem 0;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	text-align: center;
	transform: scale(0.8);
	border-radius: 3px;
}

dl.news dt span.accent-color {
	background: var(--accent-color);
	color: var(--accent-inverse-color);
}

	@media (min-width: 900px){
	dl.news {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);
		align-items: start;
	}
	}


/*施術メニュー（list-cource）
---------------------------------------------------------------------------*/
.list-cource * {margin: 0;padding: 0;}

.list-cource {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 2rem;
	font-size: 0.9rem;
}

.list-cource .list {
	background: #fffaf5;	/* 温かみのあるオフホワイト */
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(160, 80, 20, 0.07);	/* オレンジブラウン影 */
	display: flex;
	flex-direction: column;
}

.list-cource .list .color-bar {
	height: 6px;
	background: var(--primary-color);
}

.list-cource .list figure {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.list-cource .list figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.list-cource .list .text {
	padding: 1.2rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
}

.list-cource .list .age {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: bold;
	color: var(--primary-color);
	background: var(--light-color);
	padding: 0.2rem 0.8rem;
	border-radius: 20px;
	width: fit-content;
}

.list-cource .list h4 {
	font-size: 1.1rem;
	line-height: 1.5;
}

.list-cource .list p {
	font-size: 0.85rem;
	line-height: 1.8;
	opacity: 0.8;
}

	@media (max-width:600px) {
	.list-cource {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	}


/*フッター
---------------------------------------------------------------------------*/
footer ul {list-style: none;}
footer h3, footer p {margin: 0;}

footer {
	font-size: 0.8rem;
    padding: var(--content-space-s);
    background: var(--primary-color);
    color: var(--primary-inverse-color);
}

footer .logo {
	max-width: 400px;
}

footer > div {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

	@media (min-width: 900px){
	footer {
		display: flex;
		justify-content: space-between;
		gap: 2rem;
	}
	footer > div {
		flex: 1;
	}
	}

footer small {
	display: block;
	text-align: right;
	margin-top: auto;
}


/*SNSアイコン
---------------------------------------------------------------------------*/
.sns {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.sns i {
	font-size: 30px;
}


/*Google Map
---------------------------------------------------------------------------*/
.iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
	overflow: hidden;
}
.iframe iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}


/*テーブル（ta-week）
---------------------------------------------------------------------------*/
.ta-week {
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
	border: 1px solid var(--bg-border-color);
	background: var(--bg-color);
	color: var(--bg-inverse-color);
}

.ta-week th:first-child,
.ta-week td:first-child {
	width: 25%;
}

.ta-week th:not(:first-child),
.ta-week td:not(:first-child) {
	width: calc(75% / 7);
}

.ta-week th,
.ta-week td {
	padding: 0.5rem 0;
	text-align: center;
	border-bottom: 1px solid var(--bg-border-color);
	border-right: 1px solid var(--bg-border-color);
}

.ta-week th:last-child,
.ta-week td:last-child {
	border-right: none;
}

.ta-week tr:last-child td {
	border-bottom: none;
}

.ta-week th {
	background: var(--light-color);
	color: var(--light-inverse-color);
}

.ta-week td {
	border-bottom: 1px solid var(--bg-border-color);
}


/*list-yoko（カラムブロック）
---------------------------------------------------------------------------*/
.list-yoko * {margin: 0;padding: 0;}

.list-yoko {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.list-yoko .list {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.list-yoko .list.reverse {
	flex-direction: row-reverse;
}

.list-yoko .list figure {
	width: 40%;
}

.list-yoko .list .text {
	flex: 1;
}

.list-yoko .list .text p {
	font-size: 0.9rem;
	line-height: 1.5;
}
.list-yoko .list .text p + p {
	margin-top: 0.5rem;
}


/*others-step2（ステップボックス）
---------------------------------------------------------------------------*/
ul.others-step2 {margin: 0;list-style: none;}

ul.others-step2 li {
	padding: 1rem;
	box-shadow: 0px 0px 20px rgba(160, 80, 20, 0.08);	/* オレンジブラウン影 */
	margin-bottom: 2rem;
	position: relative;
	border-radius: 10px;
	font-size: 0.9rem;
}

ul.others-step2 li::after {
	content: "▼";
	transform: scaleX(2);
	position: absolute;
	left: 50%;
	bottom: -1.8rem;
	color: var(--bg-inverse-color);
	opacity: 0.2;
}

ul.others-step2 li:last-child::after {
	content: "";
	margin-bottom: 0;
}


/*スタッフ紹介
---------------------------------------------------------------------------*/
.list-staff * {margin: 0;padding: 0;}

.list-staff {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
	font-size: 0.9rem;
}

.list-staff .list {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.8rem;
}

.list-staff .list figure {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--light-color);
	box-shadow: 0 4px 15px rgba(160, 80, 20, 0.08);	/* オレンジブラウン影 */
}
.list-staff .list figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.list-staff .list .role {
	font-size: 0.75rem;
	color: var(--primary-color);
	letter-spacing: 0.1em;
}

.list-staff .list h4 {
	font-size: 1.1rem;
	line-height: 1.4;
}

.list-staff .list h4 .en {
	display: block;
	font-family: var(--accent-font), var(--base-font);
	font-size: 0.75rem;
	font-weight: normal;
	opacity: 0.5;
	margin-top: 0.2rem;
}

.list-staff .list .comment {
	font-size: 0.85rem;
	line-height: 1.8;
	max-width: 280px;
}

	@media (max-width:600px) {
	.list-staff .list figure {
		width: 120px;
		height: 120px;
	}
	}


/*list-kadomaru
---------------------------------------------------------------------------*/
.list-kadomaru * {margin: 0;padding: 0;}

.list-kadomaru {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 3rem;
	font-size: 0.9rem;
}

.list-kadomaru .list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.list-kadomaru .list figure {
	border-radius: 20px;
	overflow: hidden;
}

.list-kadomaru .list .text {
	flex: 1;
}

.list-kadomaru h4 {
	text-align: center;
}

.list-kadomaru .list p {
	font-size: 0.9em;
	line-height: 1.5;
}


/*free
---------------------------------------------------------------------------*/
.free h4{
	margin: 0;
	font-size: 1.1rem;
}

.shadow {
	box-shadow: 4vw 4vw rgba(160, 80, 20, 0.05);	/* オレンジブラウン影 */
}

.free .list {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 5vw;
	margin-bottom: 5vw;
	grid-auto-flow: dense;
}
.free .list:last-child {
  margin-bottom: 0;
}

.free .image,
.free .text {
	align-self: center;
	position: relative;
}

.free img {
	max-width: 100%;
	width: 100%;
	height: auto;
	display: block;
}

.free .image { grid-column: 1 / -1; }
.free .text { grid-column: 1 / -1; }
.free .image-wide { grid-column: 1 / -1; }
.free .image-01 { grid-column: 8 / -1; }
.free .text-01 { grid-column: 1 / 8; }
.free .list.reverse .image-01 { grid-column: 1 / 6; }
.free .list.reverse .text-01 { grid-column: 6 / -1; }
.free .image-02 { grid-column: 1 / 10; }
.free .text-02 { grid-column: 1 / 10; }
.free .list.reverse .image-02 { grid-column: 4 / -1; }
.free .list.reverse .text-02 { grid-column: 4 / -1; }

	@media screen and (max-width:500px) {
	.free .list {
		display: block;
		margin-bottom: 3rem;
	}
	}


/*タイムライン（沿革）
---------------------------------------------------------------------------*/
ul.timeline {
	list-style: none;
	position: relative;
	padding-left: 28px;
}

ul.timeline::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--bg-border-color);
}

ul.timeline li {
	position: relative;
	padding-bottom: 2rem;
	line-height: 1.8;
}
ul.timeline li:last-child {
	padding-bottom: 0;
}

ul.timeline li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: -28px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--primary-color);
	border: 2px solid var(--bg-color);
	box-shadow: 0 0 0 2px var(--primary-color);
}

ul.timeline li .year {
	display: block;
	font-family: var(--accent-font), var(--base-font);
	font-size: 1.3rem;
	font-weight: bold;
	color: var(--primary-color);
	line-height: 1.4;
}


/*その他
---------------------------------------------------------------------------*/
.color-check, .color-check a {color: #d44000 !important;}	/* オレンジレッド（元の赤より温かみのある色に） */
.bg1-accent-parts .color-check, .color-check a {color: #ffe0b0 !important;}	/* アクセント背景上では明るいオレンジ */
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 100%;display: block;}
.wl {width: 100%;display: block;}
.padding-x {padding: 0 var(--content-space-l);}
.mt0 {margin-top: 0px !important;}
.mt1rem {margin-top: 1rem !important;}
.mt3rem {margin-top: 3rem !important;}
.mb0 {margin-bottom: 0px !important;}
.mb1rem {margin-bottom: 1rem !important;}
.mb3rem {margin-bottom: 3rem !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #fdf0e0;border: 1px solid #e8c9a0; color: #8a6040; border-radius: 3px;margin: 5px 0; word-break: break-all;}	/* ナチュラルなベージュ系 */
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}
.is-clip {overflow: hidden;}

.large-screen .ws {width: 50%;}
.large-screen .sh {display: none;}
.large-screen .pc {display: block;}