@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&family=Zen+Old+Mincho:wght@500&display=swap');

/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}
mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
	vertical-align:middle;
}
img{
	line-height:1;
	vertical-align:bottom;
}

/************** layout base ********************/
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

img{ max-width:100%;}

a,
a:hover,
a:active,
a:visited{
	text-decoration:none;
	color: var(--black);
}

/* ボタンrollover */
a:hover img{
   opacity:0.8;
}

sup {
	line-height: 100%;
	font-size:10px;
	vertical-align: 0.4em;
}
sub{
	line-height: 100%;
	font-size:10px;
	vertical-align: -0.1em;
}

.txtLeft{text-align:left;}
.txtRight{text-align:right;}
.txtCenter{text-align:center;}

.fw{font-weight:bold !important;}
.f10{ font-size:10px !important;}
.f11{ font-size:11px !important;}
.f12{ font-size:12px !important;}
.f13{ font-size:13px !important;}
.f14{ font-size:14px !important;}
.f15{ font-size:15px !important;}
.f16{ font-size:16px !important;}
.f17{ font-size:17px !important;}
.f18{ font-size:18px !important;}
.f20{ font-size:20px !important;}
.f22{ font-size:22px !important;}
.f24{ font-size:24px !important;}

.txtRed{ color:#D80000;}

.fLeft{ float:left;}
.fRight{ float:right;}

.mTop0{ margin-top:0 !important;}
.mTop5{ margin-top:5px !important;}
.mTop10{ margin-top:10px !important;}
.mTop15{ margin-top:15px !important;}
.mTop20{ margin-top:20px !important;}
.mTop25{ margin-top:25px !important;}
.mTop30{ margin-top:30px !important;}
.mTop35{ margin-top:35px !important;}
.mTop40{ margin-top:40px !important;}
.mTop45{ margin-top:45px !important;}
.mTop50{ margin-top:50px !important;}
.mTop55{ margin-top:55px !important;}
.mTop60{ margin-top:60px !important;}

.mBtm0{ margin-bottom:0 !important;}
.mBtm5{ margin-bottom:5px !important;}
.mBtm10{ margin-bottom:10px !important;}
.mBtm15{ margin-bottom:15px !important;}
.mBtm20{ margin-bottom:20px !important;}
.mBtm25{ margin-bottom:25px !important;}
.mBtm30{ margin-bottom:30px !important;}
.mBtm35{ margin-bottom:35px !important;}
.mBtm40{ margin-bottom:40px !important;}
.mBtm45{ margin-bottom:45px !important;}
.mBtm50{ margin-bottom:50px !important;}
.mBtm55{ margin-bottom:55px !important;}
.mBtm60{ margin-bottom:60px !important;}
.mBtm70{ margin-bottom:70px !important;}
.mBtm80{ margin-bottom:80px !important;}
.mBtm90{ margin-bottom:90px !important;}
.mBtm100{ margin-bottom:100px !important;}

.pTop0{ padding-top:0 !important;}
.pTop5{ padding-top:5px !important;}
.pTop10{ padding-top:10px !important;}
.pTop15{ padding-top:15px !important;}
.pTop20{ padding-top:20px !important;}
.pTop25{ padding-top:25px !important;}
.pTop30{ padding-top:30px !important;}
.pTop35{ padding-top:35px !important;}
.pTop40{ padding-top:40px !important;}
.pTop45{ padding-top:45px !important;}
.pTop50{ padding-top:50px !important;}

.pBtm0{ padding-bottom:0 !important;}
.pBtm5{ padding-bottom:5px !important;}
.pBtm10{ padding-bottom:10px !important;}
.pBtm15{ padding-bottom:15px !important;}
.pBtm20{ padding-bottom:20px !important;}
.pBtm25{ padding-bottom:25px !important;}
.pBtm30{ padding-bottom:30px !important;}
.pBtm35{ padding-bottom:35px !important;}
.pBtm40{ padding-bottom:40px !important;}
.pBtm45{ padding-bottom:45px !important;}
.pBtm50{ padding-bottom:50px !important;}
.pBtm55{ padding-bottom:55px !important;}
.pBtm60{ padding-bottom:60px !important;}

/************** layout base ********************/
body{
	background: #ffffff;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	text-align: left;
	line-height: normal;
	color: var(--black);
}

ol,ul {
	list-style:none;
}

p,dt,dd,li,td,th{
	font-size: var(--minF20);
}

h1,h2,h3,h4,h5,h6{
	font-weight: normal;
}
b{
	font-weight: 600;
}

/* common
---------------------------------------------------------------------------- */
body{
}
#wrapper{
	position: relative;
	width: var(--widthWrap);
	margin: 0 auto;
	background-color: #ffffff;
}
.pc{ display: none;}

.inner{
	width: var(--widthInner);
	margin: 0 auto;
}
main .inner section:first-child{
 padding-top: 60px;
}
main .inner section p{
 line-height: 1.8;
}


/*		utility
-----------------------------*/
.flex{
	display: flex;
}


/*		var
-----------------------------*/
:root{
	--black: #252525;
	--Pgreen: #D6ECDF;
	--Lgreen: #DCECEB;
	--green: #D7E7AF;
	--orange: #FFEBD4;
	--skyblue: #D1ECEB;
	--beige: #F3F2E0;
	--pink: #FEEBE1;
	--yellow: #FFF696 ;

	--widthWrap: 100%;/* min(100%, 430px)*/
	--widthInner: 85.12%;/*min(85.12%, 366px)*/

	--minF14: min(3.26vw,14px);
	--minF16: min(3.72vw,16px);
	--minF18: min(4.18vw,18px);
	--minF20: min(4.65vw,20px);
	--minF24: min(5.58vw,24px);
	--minF28: min(6.51vw,28px);
	--minF32: min(7.4vw,32px);
	--minF40: min(9.3vw,40px);
}

/*		bg
-----------------------------*/
.bgW{
 background: #fff;
}
.bgPink{
 background: var(--pink);
}
.bgLyellow{
 background:#FFFBC6;
}
.bgLorange{
 background: #FFF5E0;
}
.bgPgreen{
 background: var(--Pgreen);
}

/*		font
-----------------------------*/
.mincho{	
  font-family: "Zen Old Mincho", serif;
}
.en{
  font-family: "Oswald", sans-serif;
  font-weight: 300;
}
.gothic{
	font-family: "Noto Sans JP", sans-serif;}


/*		title
-----------------------------*/
.slash{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 10px
}
.slash::before,
.slash::after{
	content: "";
	display: block;
	width: 1px;
	height: 1em;
	background-color: var(--black);
}
.slash::before{
	transform: rotate(-30deg);
}
.slash::after{
	transform: rotate(30deg);
}


.mainTitle{
 margin-bottom: 16px;
 font-size: var(--minF40);
 font-family: "Zen Old Mincho", serif;
 line-height: 1.4;
}
.mainTitle .en{
 display: block;
 margin-bottom: 16px;
 font-size: var(--minF32);
 line-height: 1.46;
}
.mainTitle .gothic{
 display: block;
 font-size: var(--minF20);
 font-weight: 600;
 line-height: 1.8;
}


/*		btn
-----------------------------*/
.btn{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	border: 1px solid var(--black);
	border-radius: 10px;
	padding: 24px var(--minF24);
	font-size: var(--minF20);
	font-weight: 600;
	line-height: 1.2em;
	color: var(--black);
}
.btn.black{
	background-color: var(--black);
	color: #ffffff;
}
.btn > span{
	flex: 1;
}
.btn:not(.window):after{
	content: "";
	display: inline-block;
  width: 8px; 
  height: 8px;
  border-top: 2px solid var(--black);
  border-right: 2px solid var(--black);
  transform: rotate(45deg);
  vertical-align: middle;
}
.btn.black:not(.window):after{
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}
.btn.window::after{
	content: "";
	display: inline-block;
  width: 11px; 
  height: 11px;
	background: url(images/ic_window.svg) no-repeat center center / 100%;
}
.btn.black.window::after{
	background: url(images/ic_window_white.svg) no-repeat center center / 100%;
}

.line-coupon{
	margin-bottom: 16px;
	font-size: var(--minF16);
	text-align: center;
}

/** text **/
.box{
 margin: 40px auto;
 padding: 40px 24px;
}

.leadTxt{
 font-size: var(--minF20);
 font-weight: 600;
}
.note,.note{
 margin-top: 16px;
}
.note,.note li{
 font-size: var(--minF14);
 line-height: 1.4;
}

.discList{
	padding:0 0 0 1em;
}
.discList li{
	list-style:disc outside;
 line-height: 1.7;
}

/*otherArticle*/
.otherArticle{
 margin-top: 40px;
 padding-bottom: 56px;
}
.otherArticle h2{
 margin-bottom: 12px;
 font-size: min(4.18vw,18px);
 text-align: center;
}
.btn.next{
 align-items: center;
}
.btn.next figure{
 width: 100px;
}
.btn.next p{
 width: calc(100% - 100px - 32px - 12px);
 font-size: min(4.18vw,18px);
 line-height: 1.4;
}
.btn.next p .en{
 display: block;
}
.btn.toTop{
 margin-top: 24px;
 padding: 15px 24px;
 font-size: min(4.18vw,18px);
 line-height: 1.4;
}
.btn.toTop::after{
 display: none;
}




/*-----------------------------
	header
-----------------------------*/
header{ 
	position: sticky;
	top: 0;
	left: 0;
	z-index: 90;
	width: var(--widthWrap);
	margin: 0 auto;
	background-color: #ffffff;
	transition: all 0.3s ease;
	border-bottom: #CECECE solid 1px;
	padding: 8px 0;
}
#headerInner{
	height: 64px;
	display: grid;
	align-items: center;
}
#headerInner.inner:has(.logoText){
	width: 92.6%;
}
#logo{
	position: relative;
	z-index: 100;
}
#logo p{
	font-size: 12px;
	line-height: 20px;
}
#logo a{
	display: inline-block;
}
#logo figure{
	display: inline-flex;
	align-items: flex-end;
	gap: 8px;
}
#logo figure img{
	width: 116px;
	aspect-ratio: 116/28;
}
#logo figure.logoText img{
	width: 140px;
	aspect-ratio: 140/44.21;
}
#logo figure figcaption{
	font-size: var(--minF16);
	line-height: 1em;
}


/*		menu
-----------------------------*/
.menu {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  place-content: center;
  width: 73px;
  height: 80px;
  cursor: pointer;
  z-index: 101;
}
.menu .menuInner {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.menu span.menuLine {
	height: 2px;
	background-color: var(--black);
	transition: all 0.6s;
}
.menu span#menuLine01 {
	width: 46px;
}
.menu span#menuLine02{
	width: 24px;
}
.menu .menuInner::after{
	content: "MENU";
	display: inline-block;
	line-height: 1em;
	font-size: var(--minF16);
}
.menu.active .menuInner::after{
	content: "CLOSE";
}
.menu.active span#menuLine01{
	width: 50px;
	transform: translateY(5px) rotate(-15deg);
	transform-origin: center;
}
.menu.active span#menuLine02{
	width: 50px;
	transform: translateY(-5px) rotate(15deg);
	transform-origin: center;
}
.menu.active  span.menuLine03 {
} 

.menuBg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100svh;
  z-index: 99;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s;
  cursor: pointer;
}
.menuBg.active {
    opacity: 1;
    visibility: visible;
}


/*		gNavi
-----------------------------*/
/*
body:has(#gNavi.active){
	overflow-y: hidden;
}
	*/
#gNavi{
	position: fixed;
	inset: 64px 0 0 0;
	width: var(--widthWrap);
	/*height: min(100svh - 64px)*/;
	overflow-y: scroll;
  margin: 0 auto;
	padding-top: 20px;
	display: none;
	opacity: 0;
  z-index: 100;
}
#gNavi.active{
	display: block;
	opacity: 1;
}
#gNavi .inner{
}
#gNavi li{
	border-bottom: 1px solid var(--black);
}
#gNavi li:first-of-type{
	border-top: 1px solid var(--black);
}
#gNavi li  a{
	position: relative;
	display: block;
	padding: 12px 28px 12px 8px;
}
#gNavi li  a span{
	font-size: var(--minF18);
	font-weight: 600;
	color: var(--black);
}
#gNavi li  a p{
	font-size: var(--minF16);
	color: var(--black);
}
#gNavi li a::after{
	position: absolute;
	top: 50%;
	right: 15px;
	content: "";
	display: inline-block;
  width: 8px; 
  height: 8px;
  border-top: 2px solid var(--black);
  border-right: 2px solid var(--black);
  transform: rotate(45deg) translateY(-50%);
  vertical-align: middle;
}

#gNaviTel{
	padding-top: 37px;
}
#gNaviTel p{
	font-size: var(--minF16);
	text-align: center;
}
#gNaviTel a{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: calc(infinity * 1px);
	border: 1px solid var(--black);
	margin-top: 12px;
	padding: 15px 10px;
	color: var(--black);
	cursor: pointer;
}
#gNaviTel a span.num{
	position: relative;
	padding-left: 21px;
	font-size: var(--minF20);
	line-height: 1.8em;
	font-weight: 600;
}
#gNaviTel a span.num::before{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	content: "";
	display: inline-block;
	width: 13px;
	height: 16px;
	background: url(images/ic_tel.svg) no-repeat center center / 100% auto;
}
#gNaviTel a span:not(.num){
	font-size: var(--minF18);
	font-weight: 600;
	line-height: 1.44em;
}

#gNaviMagazine {
	padding: 19px 0 48px;
	text-align: center;
}
#gNaviMagazine figure img{
	width: 200px;
  aspect-ratio: 286/88;
}
#gNaviMagazine figure figcaption{
    margin-top: 12px;
	font-size: var(--minF18);
	line-height: 1.78;
}
#gNaviMagazine p{
	font-size: var(--minF16);
}

.gNaviMagazineNum{
	margin-top: 12px;
}
.gNaviMagazineNum span{
	display: inline-flex;
	border: solid var(--black);
	border-width: 1px 0 1px 0;
	padding: 4px 0;
	font-size: var(--minF16);
	font-weight: 600;
	text-align: center;
}






/*-----------------------------
	footer
-----------------------------*/
/*		footerLinks
-----------------------------*/
#footerLinks {
	padding: 32px 0;
	background-color: #EAE5DB;
}

#footerLinks .btn{
  justify-content: center!important;
}

#footerLinks .btn::after{
  margin-left: 10px;
}

.footerLinksWeb{
	margin-top: 24px;
}
.footerLinksWeb > p{
	margin-bottom: 12px;
	font-size: var(--minF18);
	line-height: 1.78em;
	text-align: center;
}
.footerLinksLimited{
	margin-top: 24px;
}
.footerLinksLimited > p{
	margin-bottom: 8px;
}
.footerLinksLimited > p .slash{
	font-size: var(--minF18);
	line-height: 1.78em;
}
.footerLinksLimited .btn{
	padding-top: 16px;
	padding-bottom: 16px;
}
.footerLinksLimited .btn > span{
	display: flex;
	align-items: center;
	gap: 0 8px;
}
.footerLinksLimited .btn > span img.icLine{
	width: 40px;
}
.footerLinksLimited .btn > span img.icQR{
	margin-left: 8px;
	width: 80px;
	height: 80px;
}
.footerLinksLimited .btn > span p{
	font-size: var(--minF16);
	line-height: 1.333em;;
	font-weight: 400;
	vertical-align: middle;
}
.footerLinksLimited .btn > span p b{
	font-size: var(--minF20);
	line-height: 1em;
	font-weight: 600;
    vertical-align: middle;
}
.footerLinksLimited .btn > span p b:first-of-type::after{
	content: "";
	display: inline-block;
  transform: translateY(2px);
	margin-left: 2px;
	margin-right: 4px;
	width: 7px;
	height: 20px;
	background: url(images/txt_tax.svg) no-repeat left center / 100%;
}
.footerLinksLimited + .btnWrap{
	margin-top: 16px;
}
.footerLinksLimited + .btnWrap .btn{
	padding-top: 6px;
	padding-bottom: 6px;
	font-size: var(--minF18);
	line-height: 1.44em;
}

/*		footerMagazine
-----------------------------*/
#footerMagazine {
	padding: 40px 0;
	background-color: var(--skyblue);
}
#footerMagazine p span.slash{
 gap:0 25px;
	font-size: var(--minF18);
	font-weight: 600;
	text-align: center;
}
#footerMagazine p span.slash::before,
#footerMagazine p span.slash::after{
	width: 2px;
 height: 78px;
}
#footerMagazine figure{
 margin-top: 16px;
 text-align: center;
}


/*		footerInfo
-----------------------------*/
#footerInfo {

}
#footerInfoLinks{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding: 16px 0;
}
#footerInfoLinks a{
	width: calc((100% - 24px)/2);
	font-size: 12px;
	line-height: 20px;
	color: var(--black);
}
#footerInfoLinks a::after{
	content: "";
	display: inline-block;
	width: 5.6px; 
	height: 5.6px;
	border-top: 1px solid var(--black);
	border-right: 1px solid var(--black);
	transform: rotate(45deg) translateY(-50%);
	vertical-align: middle;
}

#cooy small{
	text-align: center;
	font-size: 10px;
	line-height: 24px;
}

/*-----------------------------
	fixedBtn
-----------------------------*/
#fixedBtn a{
	position: fixed;
	bottom: 20px;
	right: 7%;
 display: flex;
 flex-flow: column; 
 justify-content: center;
 align-items: center;
 gap:2px 0;
 border-radius: 50%;
	width: min(22.4vw,96px);
	height: min(22.4vw,96px);
 border: 1px #000 solid;
	background-color: #D3F2FF;
 margin-bottom: -4px;
	font-size: var(--minF14);
 font-weight: 600;
	line-height: 1.14;
	text-align: center;
	z-index: 80;
}
#fixedBtn a::before{
 content: "";
 display: block;
 background: url("images/ic_search.svg") no-repeat left top/100% auto;
 width: 16px;
 height: 16px;
 margin: 0 auto;
}
#fixedBtn a:hover{
	opacity: .8;
}

/*-----------------------------
	top
-----------------------------*/
.topSec h2:has(.en){
	font-size: 32px;	
	text-align: center;
}
.topSec h2:has(.en):not(:has(+.secLead)){
	padding-bottom: 0.5em;
}
.topSec h2:has(.jp){
	border-bottom: 1px solid var(--black);
	padding-bottom: 12px;
	text-align: left;
}
.topSec h2:has(.en):has(.jp){
	font-size: var(--minF24);
}
.topSec h2 .jp{
	margin-left: 10px;
	font-size: var(--minF18);
}
.topSec figure img{
	width: 100%;
	height: auto;
}

/*		topMV
-----------------------------*/
#topMV{
	padding-top: 20px;
}
.topMvBox{
	padding: 0 12px;
}
.topMvBox .txts{
	padding: 12px 21px 24px;
	text-align: center;
}
.topMvBox {

}
.topMvBox .en {
	display: block;
}
.topMvBox figure img{
	width: 100%;
	height: auto;
}
.topMvBox .mincho {
	font-size: var(--minF24);
}
.topMvBox .btnWrap {
	margin-top: 12px;
}
.topMvBox .btn {
	padding: 7px 24px 9px 24px;
	font-size: var(--minF18);
	font-weight: 500;
}

.topMvTips .topMvBoxInner {
	background-color: #F7F6F1;
}
.topMvWig .topMvBoxInner {
	background-color: #F6F3ED;
}
.topMvInterview .topMvBoxInner {
	background-color:  #E0EBF3;
}
.topMvRecipe .topMvBoxInner {
	background-color: var(--beige);
}

#topMV .slick-prev,
#topMV .slick-next{
	z-index: 10;	
	border-radius: 4px;
	background: rgba(37,37,37,0.4);
	width: 40px;
	height: 72px;
	padding: 0 14px;
}
#topMV .slick-prev{
	left: 0;	
}
#topMV .slick-next{
	right: 0;
}
#topMV .slick-prev:before,
#topMV .slick-next:before{
	border: solid #FFFFFF;
	border-width: 3px 3px 0 0;
	display: block;
	width: 24px;
	aspect-ratio: 1/1;
}
#topMV .slick-prev{
    left: 24px;
}
#topMV .slick-prev:before{
    content: '';
	transform: rotate(225deg);
}
#topMV .slick-next{
    right: 24px;
}
#topMV .slick-next:before{
    content: '';
	transform:translateX(-50%) rotate(45deg);
}


/*		topPickup
-----------------------------*/
#topPickup {
	margin-top: 20px;
	padding: 20px 0 12px;
}
#topPickupSliderWrap{
	margin-top: 24px;
	overflow: hidden;
}
#topPickupSlider{
	transform: translateX(-139px);
	margin-right: -139px;
}
.topPickupBox{
	padding: 0 12px;
}
.topPickupBox figure img{
	width: 100%;
	height: auto;
}
.topPickupBox figcaption{
	margin-top: 8px;
	font-size: var(--minF20);
	font-weight: 600;
}
.topPickupBox figcaption span{
	position: relative;
}
.topPickupBox figcaption span::after{
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--black);
    border-right: 2px solid var(--black);
    transform: translate(12px, -2px) rotate(45deg);
    vertical-align: middle;
}
.topPickupBox p{
	font-size: var(--minF16);
}

/*		topContents
-----------------------------*/
#topContents{
	padding-top: 40px;
	padding-bottom: 40px;
}
#topContents h2 a span,
#topContents ul.flex > li span{
	display: flex;
}
#topContents ul.flex > li span::after{
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--black);
    border-right: 2px solid var(--black);
    transform: translate(8px, 9px) rotate(45deg);
    vertical-align: middle;
}
#topContents ul.flex{
	margin-top: 24px;
	flex-wrap: wrap;
	gap: 24px;
}
#topContents ul.flex > li{
	width: calc((100% - 24px)/2);
}
#topContents ul.flex > li {
	padding: 12px 16px;
	border: 1px solid var(--black);
	border-radius: 8px;
}
#topContents ul.flex > li span{
	font-size: var(--minF18);
	font-weight: 600;
}
#topContents ul.flex > li p{
	margin-top: 4px;
	font-size: 14px;
	line-height: 20px;
}

/*		#topInterview
-----------------------------*/
#topInterview {
	padding-bottom: 40px;
}
#topInterview .innerWrap{
	position: relative;
}

#topInterview .inner{
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: rgb(53, 75, 88, .45);
	padding: 24px 16px;
}
#topInterview .inner h3{
	font-size: var(--minF24);
	color: #ffffff;
	text-align: center;
}
#topInterview .inner p{
	color: #ffffff;
	text-align: center;
}
#topInterview .inner p span:not(.name){
	font-size: var(--minF24);
}
#topInterview .inner p .name{
	font-size: var(--minF40);
}
#topInterview .btnWrap {
	margin-top: 12px;
}

/*		topTrip
-----------------------------*/
#topTrip {
	padding-bottom: 40px;
}
#topTrip .innerWrap {
	background-color: var(--Lgreen);
}

/*subTitleBox*/
.subTitleBox{
	padding: 24px var(--minF24);
	background-color: #ffffff;
	transform: translateY(-24px);
}
.subTitleBox .btnWrap {
	margin-top: 16px;
}

/*secLead*/
.secLead{
	margin: 16px 0;
	font-size: var(--minF28);
}
.subTitleBox .secLead:first-of-type{
	margin-top: 0;
}
h2 + .secLead:has(+figure){
	margin: 8px 0 24px;
}
/**/

#topTrip .subTitleBox {
	transform: translateY(-24px);
}

/*		topNews
-----------------------------*/
#topNews {
	padding-bottom: 40px;
}
#topNews .inner{
	padding-bottom: 16px;
}
#topNews .inner .secLead{
	margin: 14px 0;
}

/*		topWig
-----------------------------*/
#topWig {
	position: relative;
	padding-bottom: 40px;
}
#topWig .innerWrap {
	background-color: var(--orange);
	padding-bottom: 16px;
}
#topWig p .mincho{
	font-size: var(--minF20);
}
#topWig p b{
	font-size: var(--minF24);
}

/*		topHaircare
-----------------------------*/
#topHaircare {
	position: relative;
	padding-bottom: 40px;
}
#topHaircare .innerWrap{
	margin-top: -88px;
	padding: 88px 0 40px;
	background-color: var(--Pgreen);
}

/*		topBeauty
-----------------------------*/
#topBeauty {
	background-color: var(--pink);
	padding: 40px 0;
}

/*		topLife
-----------------------------*/
#topLife {
	padding: 40px 0 12px;
}
#topLife .subTi.flex {
	align-items: center;
	gap: 16px;
}
#topLife .subTi.flex figure{
	width: 120px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	overflow: hidden;
}
#topLife .subTi.flex figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#topLife .subTi.flex h3{
	flex: 1;
	font-size: var(--minF32);
    margin-right: -0.4em;
}
#topLife .btnWrap{
	margin-top: 24px;
}

/*faqList*/
.faqList{
	margin: 16px 0;
}
.faqList dt,
.faqList dd{
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.faqList dt span,
.faqList dd span{
	flex: 1;
	font-size: var(--minF20);
	font-weight: 600;
	line-height: 1.8em;
}
.faqList dt::before,
.faqList dd::before{
	display: grid;
	place-content: center;
	width: 56px;
	aspect-ratio: 1/1;
	border: 2px solid var(--black);
	border-radius: 50%;
	font-size: var(--minF24);
	line-height: 1em;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
}
.faqList dt::before{
	content: "Q";
}
/*
.faqList dd::before{
	content: "A";
	background-color: var(--yellow);
}
*/
.faqList dd{
	margin-top: 16px;
}

#top .faqList dt::before,
#top .faqList dd::before{
	border: 1px solid var(--black);
	font-size: var(--minF24);
  font-weight: 300;
}
#top .faqList dt span{
	font-weight: 400;
}

/*		topStudy
-----------------------------*/
#topStudy {
	padding: 32px 0 20px;
}

/*bdBox*/
.bdBox{
	border: 1px solid var(--black);
	padding: 32px var(--minF24) 40px;
}
/**/

#topStudy .bdBox figure{
	width: 200px;
	aspect-ratio: 1/1;
	margin: 0 auto;
}
#topStudy .bdBox figure img{
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
}
#topStudy .bdBox p{
	margin: 16px auto;
}

/*		topRecipe
-----------------------------*/
#topRecipe {
	padding: 20px 0;
}
#topRecipe .secLead{
	text-align: center;
}
#topRecipe p:not(.secLead){
	margin: 16px 0 24px;
	font-size: var(--minF24);
}

/*		topInformation
-----------------------------*/
#topInformation {
	padding: 20px 0 40px;
}
#topInformation .secLead{
	text-align: center;
}
#topInformation p:not(.secLead){
	margin: 16px 0 24px;
	font-size: var(--minF24);
}


/*-----------------------------
	interview
-----------------------------*/
.interviewMain h1 + figure{
	margin-right: -7.44vw;
	margin-left: -7.44vw;
}
.interviewMain h2{
	margin-top: 40px;
	text-align: center;
}
.interviewMain h2 .imgTit{
	font-size: 0;
}
.interviewMain h2 .imgTit img{
	width: min(71.28%, 268px);
	height: auto;
}
.interviewMain h2 .decoTit {
	margin-top: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--minF24);
}
.interviewMain h2 .decoTit::before,
.interviewMain h2 .decoTit::after {
	content: "";
	display: -block;
	height: 1px;
	background-color: var(--black);
	flex: 1;
}
.interviewMain h2 .decoTit .name {
	font-size: var(--minF20);
	font-weight: 600;
}
.interviewMain h2 .decoTit .name span{
	font-size: var(--minF24);
}
.interviewMain p + p{
	margin-top: 1.8em;
}
.interviewMain p + figure:has(+p){
	margin: 40px 0;
}



.interviewInfo{
	margin-top: 24px;
	background-color: #F4F4F4;
	padding: var(--minF24);
}
.interviewInfo:first-of-type{
	margin-top: 40px;
}
.interviewInfo dt .en{
	font-size: var(--minF24);
}
.interviewInfo dt .jp{
	margin-left: 0.5em;
	font-size: var(--minF16);
	font-weight: 600;
}
.interviewInfo dd{
	margin-top: 4px;
}
.interviewInfo dd p{
	font-size: var(--minF18);
}
.interviewInfo dd p b{
	font-size: var(--minF20);
}

.otherArticle:has(+.staffNote){
	padding-bottom: 40px;
}
.staffNote{
	padding-bottom: 56px;
	font-size: var(--minF14);
	line-height: 1.43em;
}



/*-----------------------------
	Trip
-----------------------------*/
#tripMarunouchi figure{
	margin-top: 24px;
}
.tripBoxWrap{
	margin-top: 40px;
}
.tripBoxSubtit h2:has(.balloon){
	position: relative;
	padding-top: 30px;
}
.tripBoxSubtit h2 .balloon{
	position: absolute;
	top: 4px;
	left: 0;
	background: url(images/trip_balloon.svg) no-repeat center bottom / 100% auto;
	display: inline-block;
	padding: 0 4px 9px;
	font-size: var(--minF16);
	font-weight: 600;
	text-align: center;
}
.tripBoxSubtit h2 + p{
	margin-top: 12px;
}
.tripBoxSubtit h2 + figure{
	margin-top: 24px;
	margin-bottom: 24px;
}

.tripMain h2{
	font-size: min(11.16vw, 48px);
}
.tripMain h2 .mincho + .en{
	margin-left: 0.5em;
	font-size: 0.5em;
}

.tripBox {
	margin: 40px 0;
}
#yurakucho .tripBox:last-of-type {
	margin-bottom: 0;
}
.tripBox figure + figure{
	margin-top: 12px;
}
.tripBox figure img{
	width: 100%;
	height: auto;
}
.tripBox figure figcaption{
	padding: 12px 0;
	font-size: var(--minF14);
	line-height: 1.43em;
}
.tripBox h3{
	margin-top: 12px;
	font-weight: 600;
	font-size: var(--minF20);
}
.tripBox h3 .fontS {
	display: block;
	font-size: 0.8em;
    line-height: 1.625em;
}
.tripBox p{
	margin-top: 8px;
	font-size: var(--minF18);
	line-height: 1.78em;
}
.tripBox ul{
  position: relative;
}
.tripBox ul {
	margin-top: 8px;
  padding: 8px;
  width: 100%;
}
.tripBox ul::before,
.tripBox ul::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-image: linear-gradient(to right, var(--black) 8px, transparent 8px);
  background-size: 14px 1px;
  background-repeat: repeat-x;
}
.tripBox ul::before {
  top: 0;
}
.tripBox ul::after {
  bottom: 0;
}
.tripBox ul li{
	font-size: var(--minF16);
	line-height: 1.5em;
}
.tripBox ul li a{
	text-decoration: underline;
}
.tripBox ul + ol{
	margin-top: 12px;
}
.tripBox ul + ol li{
	font-size: var(--minF16);
}
.tripBox ul + p{
	margin-top: 12px;
	font-size: var(--minF16);
}
main .inner section .tripBox ul + p{
	line-height: 1.5em;
}

.tripInfo{
	margin-top: 24px;
}
.tripInfo dt{
	font-size: var(--minF18);
	font-weight: 600;
}
.tripInfo dd li{
	display: inline-block;
	font-size: var(--minF16);
}



/*-----------------------------
	new
-----------------------------*/

.newMain .leadTxt + figure{
	margin-top: 40px;
}
.newMain > figure:has(figcaption) + figure{
	margin-top: 32px;
}
.newMain > figure figcaption.note{
	margin-top: 12px;
	line-height: 1.43em;
}
.newMain > figure figcaption:not(.note){
	margin-top: 24px;
	font-size: var(--minF18);
	line-height: 1.78em;
}
.newMain > figure img + img{
	margin-top: 24px;
}
.newMain > p {
	margin-top: 24px;
}

.newProfile,
.newSalon {
	margin-top: 40px;
	padding: var(--minF24);
  background-image: 
    radial-gradient(circle, var(--black) 1px, transparent 1px), /* 上 */
    radial-gradient(circle, var(--black) 1px, transparent 1px), /* 下 */
    radial-gradient(circle, var(--black) 1px, transparent 1px), /* 左 */
    radial-gradient(circle, var(--black) 1px, transparent 1px); /* 右 */
	background-position: 
			top left,    /* 上 */
			bottom left, /* 下 */
			top left,    /* 左 */
			top right;   /* 右 */
  background-size: 6px 2px, 6px 2px, 2px 6px, 2px 6px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}
.newProfile.flex{
	gap: var(--minF24);
	align-items: center;
}
.newProfile figure{
	width: 37.7%;
}
.newProfile .txts{
	flex: 1;
}
.newProfile .name{
	font-size: var(--minF24);
}
.newProfile .name span{
	display: block;
	font-size: var(--minF16);
	line-height: 1.5em;
}

.newExperience{
	margin-top: 40px;
}
.newExperience h2{
	position: relative;
	margin-bottom: 40px;
	text-align: center;
}
.newExperience h2::before{
	content: "";
	display: block;
	margin: 0 auto;
	width: 164px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background-color: #F9F2E8;
}
.newExperience h2 span.mincho{
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	transform: translateY(-50%);
	font-size: var(--minF32);
}

.newExProfile{
	background-color: #F9F2E8;
}
.newExProfile + .newExProfile{
	margin-top: 24px;
}
.newExProfile figure{
	width: 46.7%;
}
.newExProfile .txts{
	flex: 1;
	padding: var(--minF24);
}
.newExProfile .name b{
	font-size: var(--minF20);
}
.newExProfile .name span{
	display: block;
	font-size: var(--minF16);
	line-height: 1.5em;
}
.newExProfile .txts p{
	font-size: var(--minF18);
	line-height: 1.78em;
}


.newExperience > p{
	font-size: var(--minF18);
}
.newExperience > figure{
	margin: 32px 0;
}
.newExperience > figure img + img{
	margin-top: 32px;
}

.newExperience .faqList{
	margin-top: 40px;
}
.newExperience .faqList dd{
	margin-top: 32px;
}

.newExperience div.adviceBox {
  position: relative;
	margin-top: 32px;
  padding: 16px 0;
  width: 100%;
}
.newExperience div.adviceBox p{
	font-size: var(--minF18);
}
.newExperience div.adviceBox::before,
.newExperience div.adviceBox::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-image: radial-gradient(circle, var(--black) 1px, transparent 1px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
}
.newExperience div.adviceBox::before {
  top: 0;
}
.newExperience div.adviceBox::after {
  bottom: 0;
}


.newAfter{
	margin-top: 40px;
	padding: var(--minF24);
	background-color: #F4F4F4;
}
.newAfter dt{
	text-align: center;
}
.newAfter dt span{
	display: inline-block;
	padding-bottom: 8px;
	font-size: var(--minF18);
	font-weight: 600;
	border-bottom: 2px solid var(--black);
}
.newAfter dd {
	margin-top: 32px;
}
.newAfter dd figure{
	width: min(53.78%,171px);
	margin: 0 auto;
}
.newAfter dd p{
	margin-top: 24px;
	font-size: var(--minF18);
}

.newSalon{
	padding: 24px var(--minF24) 40px;
}
.newSalon dt{
	text-align: center;
	font-size: var(--minF16);
}
.newSalon dt b{
	font-size: 1.5em;
}
.newSalon dd {
	margin-top: 12px;
}
.newSalon dd figure{
	width: 100%;
}
.newSalon dd figure img{
	width: 100%;
	height: auto;	
}
.newSalon dd ul{
	margin-top: 12px;	
}
.newSalon dd ul li{
	font-size: var(--minF16);	
}
.newSalon dd .btnWrap{
	margin-top: 24px;
}
.newSalon dd .btnWrap a{
  padding: 12px var(--minF24);
	
}


/*-----------------------------
	wig
-----------------------------*/
/*
#wig .mainTitle{
 font-size: var(--minF24);
}
#wig .mainTitle .gothic{
	margin-top: 12px;
 font-size: var(--minF40);
 line-height: 1.2em;
}
*/
#wig .leadTxt{
	margin-top: 24px;
	font-size: var(--minF18);
	line-height: 1.44em;
}

.wigBox{
	margin: 40px auto;
}
.wigBox h3{
	font-size: var(--minF20);
	font-weight: 600;
	text-align: center;
}
.wigBox h3 span{
	font-size: 1.6em;
}
.wigBox .age{
	margin: 8px 0;
	font-size: var(--minF16);
	text-align: center;
	font-weight: 600;
}
.wigBox .mincho{
	font-size: var(--minF24);
	text-align: center;
	line-height: normal;
}
.wigBox figure {
	margin-top: 40px;
}
.wigBox figure figcaption {
	margin-top: 12px;
}
.wigBox figure figcaption.note {
    margin-top: 12px;
    line-height: 1.43em;
}
.wigBox figure + p {
	margin-top: 40px;
}
.wigBox .wigMyOrder {
	margin-top: 40px;
}
.wigBox .wigMyOrder p{
	margin-top: 16px;
	font-size: var(--minF18);
}

.wigNew h2{
	margin-bottom: 16px;
	border-bottom: 1px solid var(--black);
}
.wigNew h2 span{
	display: inline-block;
	padding: 0 1em;
	border: solid var(--black);
	border-width: 1px 1px 0 1px;
	font-size: var(--minF18);
	font-weight: 600;
}
.wigNew h2 + p{
	margin-bottom: 12px;
}
.wigNew h2 + p b{
	display: block;
	margin-bottom: 16px;
	font-size: var(--minF24);
}
.wigNew figure{
	width: 100%;
	margin: 0 auto;
}
.wigNew p + figure{
	margin: 16px auto;
}
.wigNew figure img{
	width: 100%;
	height: auto;
}
.wigNew h3:not(:first-of-type){
	margin-top: 12px;
}
.wigNew h3 .catch{
	display: block;
}
.wigNew h3 span.num{
	display: inline-flex;
	border-bottom: 3px solid #D3EDFB;
	margin: 12px 0;
	padding-bottom: 9px;
	font-size: var(--minF20);
	color: #008CCF;
	font-weight: 600;
}
.wigNew h3 span.num::before{
	content: "1";
	display: inline-block;
	background-color: #20AEE5;
	border-radius: 50%;
	margin-right: 12px;
	width: 32px;
	aspect-ratio: 1/1;
	line-height: 32px;
	color: #ffffff;
	text-align: center;
}
.wigNew h3 + p{
	font-size: var(--minF18);
}

.wigNew .flex{
	gap: 12px;
	align-items: flex-start;
}
.wigNew .flex figure{
	width: 46.8%;
}
.wigNew .flex p{
	flex: 1;
	font-size: var(--minF18);
}

.wigInfo{
	margin-top: 40px;
	margin-bottom: 40px;
	padding: 40px var(--minF24) 28px;
}
.wigInfo h3{
	margin-bottom: 24px;
	font-size: 0;
	text-align: center;
}
.wigInfo h3 img{
	width: 169px;
	aspect-ratio: 169/24;
}
.wigInfo h3 + p{
	font-size: var(--minF20);
	font-weight: 600;
}
.wigInfo h3 + p::after{
	content: "";
	display: block;
	margin: 8px 0;
	width: 100%;
	height: 24px;
	background: url(images/wig_ic_arrow.svg) no-repeat center center / auto 100%;
}
.wigInfo figure + p{
	margin-top: 24px;
	font-size: var(--minF18);
	font-weight: 600;
}
main .inner section .wigInfo figure + p{
	line-height: 1.44em;
}
.wigInfo dl{
	margin-top: 16px;
}
.wigInfo dl dt{
	display: flex;
	align-items: center;
	gap: 0 8px;
}
.wigInfo dl dt::before,
.wigInfo dl dt::after{
	content: "";
	display: inline-block;
	height: 13px;
	flex: 1;
	background: url(images/wig_bg_tel.svg) no-repeat center center / 100% auto;
}
.wigInfo dl dt span{
	font-size: var(--minF18);
	font-weight: 600;
}
.wigInfo dl dd{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.wigInfo dl dd::before{
	content: "";
	display: inline-block;
	width: 42px;
	aspect-ratio: 42/30;
	background: url(images/wig_ic_free.svg) no-repeat center center / 100% auto;
}
.wigInfo dl dd a{
	font-size: var(--minF40);
	color: var(--black);
	font-weight: 600;
	white-space: nowrap;
}



/*-----------------------------
	harecare
-----------------------------*/
.haircareMain h2{
 border-top: 2px #000 solid;
 border-bottom: 2px #000 solid;
 padding: 20px 0;
 margin: 40px 0;
 font-size: var(--minF20);
 font-weight: 600;
}
.haircareMain ol li  + li{
 margin-top: 40px;
}
.haircareMain ol li h3{
 display: flex;
 align-items: flex-start;
 gap:0 12px;
 margin:0 auto 12px;
 font-weight: 600;
 line-height: 1.7;
}
.haircareMain ol li h3 span{
 display: grid;
 place-content: center;
 border: 2px #000 solid;
 background: #fff;
	border-radius: calc(infinity * 1px);
 width: 40px;
 height: 72px;
 font-size: var(--minF24);
 font-weight: 400;
}
.haircareMain ol li p{
 font-size: var(--minF18);
}
.haircareMain ol li img{
 margin-top: 24px;
}
.haircareMain .bgW{
 margin-top: 40px;
 padding: 24px 24px;
}

.haircareProfile{
 margin-top: 40px;
 background: #fff;
}
.haircareProfile h3{
 display: flex;
 align-items: center;
 gap:0 24px;
 background: #A4D0C7;
 padding: 12px 24px;
 font-size: var(--minF20);
 font-weight: 600;
 line-height: 1.8;
}
.haircareProfile h3 img{
 width: 80px;
}
.haircareProfile h3 >span{
 width:calc(100% - 80px) ;
}
.haircareProfile h3 span span{
 display: block;
 font-size: var(--minF18);
 font-weight: 400;
 line-height: 1.5;
}
.haircareProfile p{
 padding: 24px;
 font-size: var(--minF18);}

.haircareRecommend{
 background: #EFF8F6;
 margin: 40px auto 0;
 padding: 32px 24px;
}
.haircareRecommend h2{
 margin-bottom: 16px;
 font-size: var(--minF20);
 font-weight: 600;
 text-align: center;
 line-height: 1.8;
}
.haircareRecommend figure{
 margin: 0 0 16px;
}
.haircareRecommend h3{
 margin-bottom: 8px;
 font-size: var(--minF18);
 font-weight: 600;
}
.haircareRecommend p{
 font-size: var(--minF18);
}
.haircareRecommend p.price{
 font-size: var(--minF16);
}
.haircareRecommend .btnWrap{
 margin: 16px 0;
}
.haircareRecommend .btnWrap .btn{
 padding: 15px 24px;
 font-size: var(--minF18);
}

.btn-center{
  justify-content: center;
}

.btn-center::after{
  margin-left: 10px;
}

.haircareRecommend dl{
 margin-top: 16px;
}
.haircareRecommend dt{
 display: inline-block;
 margin-bottom: 8px;
 background: #fff;
 padding: 4px 8px;
 font-size: var(--minF18);
 font-weight: 600;
 line-height: 1.4;
}
.haircareRecommend dd{
 color: #00A29A;
 font-size: var(--minF18);
 font-weight: 600;
 line-height: 1.4;
}
.haircareRecommend dd p{
 color: #000;
 font-weight: 400;
}
.haircareRecommend .note{
 font-size: var(--minF14);
 line-height: 1.4;
}
.haircareRecommend.bathroom h2{
 text-align: left;
}

.haircareMore{
 margin-top: 40px;
}
.haircareMore h2{
 border-top: 2px #fff dotted;
 border-bottom: 2px #fff dotted;
 padding: 16px 0;
 margin-bottom: 40px;
 font-size: var(--minF20);
 font-weight: 600;
 text-align: center;
}
.haircareMore .note{
 margin-top: 12px;
 line-height: 1.4;
}
.haircareMore > h3{
 background: url("images/haircare_line.svg") no-repeat center top/min(68.83vw,296px) auto;
 padding: 10px 49px 0;
 margin-top: 30px;
 margin-bottom: 24px;
 font-size: var(--minF18);
 font-weight: 600;
 text-align: center;
}
.haircareMore .box.treatment{
 background: #EFF8F6;
 padding: 32px 24px;
 margin: 0;
}
.haircareMore .box.treatment h4{
 margin-bottom: 16px;
 font-size: var(--minF20);
 font-weight: 600;
 line-height: 1.8em;
}
.haircareMore .box p{
 font-size: var(--minF18);
}
.haircareMore .box.treatment figure{
 margin: 16px 0 0;
 align-items: flex-start;
 justify-content: space-between;
}
.haircareMore .box.treatment figure img{
 width: calc((100% - 24px)/2);
}
.haircareMore .box.bgW{
 padding: 32px 24px;
}
.haircareMore .box.bgW a:not(.btn){
 background: #EFF8F6;
}
.haircareMore .btnWrap{
 margin-top: 16px;
}

/*-----------------------------
	beauty
-----------------------------*/
.beautyMain .mainTitle .slash{
    justify-content: flex-start;
	margin-bottom: -0.25em;
	font-size: 16px;
	line-height: 1.625em;
	font-weight: 600;
    font-family: "Noto Sans JP", sans-serif;
}
.beautyMain figure{
 margin: 40px auto ;
}
.beautyMain .bgW{
 margin: 24px auto ;
 padding: 16px 24px;
 font-weight: 600;
 line-height: 1.8;
}
.beautyHowto h2{
 margin-bottom: 24px;
 line-height: 1;
}
.beautyHowto ol li  + li{
 margin-top: 32px;
}
.beautyHowto ol li h3{
 display: flex;
 align-items: flex-start;
 gap:0 12px;
 margin: 12px auto ;
 font-weight: 600;
 line-height: 1.7;
}
.beautyHowto ol:not(:has(h3)){
	counter-reset: number;
	margin-top: 24px;
}
.beautyHowto ol:not(:has(h3)) li{
	counter-increment: number;
	display: flex;
	gap:0 12px;
}
.beautyHowto ol:not(:has(h3)) li p{
	flex: 1;
}
.beautyHowto ol:not(:has(h3)) li::before{
	content: counter(number);
}
.beautyHowto ol li h3 span,
.beautyHowto ol:not(:has(h3)) li::before{
 display: grid;
 place-content: center;
 border: 2px #000 solid;
 background: #F4EAE4;
	border-radius: calc(infinity * 1px);
 width: 40px;
 height: 72px;
 font-size: var(--minF24);
 font-weight: 400;
}
.beautyHowto ol li p{
 font-size: var(--minF18);
}

.beautyProfile{
 border-top: 1px #000 solid;
 border-bottom: 1px #000 solid;
 padding: 24px 0;
 flex-flow: row wrap;
 gap:12px 0;
 align-items: center;
}
.beautyProfile figure{
 width: 46.7%;
}
.beautyProfile h3{
 width: 53.3%;
 padding-left: 24px;
 font-size: var(--minF20);
 font-weight: 600;
 line-height: 1.8;
}
.beautyProfile h3 span{
 display: block;
 margin-bottom: 4px;
 font-size: var(--minF16);
 font-weight: 400;
 line-height: 1.5;
}
.beautyProfile p{
 font-size: var(--minF18);}


/*-----------------------------
	recipe
-----------------------------*/
.recipeMain h2{
 margin-bottom: 8px;
}
.recipeMain h2 span{
 border-bottom: 2px #000 solid;
 font-size: var(--minF20);
 font-weight: 600;
}
.recipeMain figure{
 margin-top: 40px;
 margin-bottom: 16px;
}
.recipeMain h3{
 margin-bottom: 16px;
 font-size: min(7.4vw,32px);
 line-height: 1.4;
}
.recipeMain h4{
 border-top: 1px #000 solid;
 padding-top: 24px;
 margin-top: 40px;
 margin-bottom: 8px;
 font-size: min(5.58vw,24px);
 font-weight: 600;
 line-height: 1.5;
}

.recipeMain .discList li{
 font-size: var(--minF20);
}
.recipeMain .point{
 margin-top: 24px;
 font-size: var(--minF16);
 line-height: 1.5;
}
.recipeMain .point + h4{
 margin-top: 24px;
}
.recipeTxts{
	counter-reset: listnum; /* カウンターをリセット */
	list-style: none; /* 標準のスタイルは消す */
}
.recipeTxts> li{
 position: relative;
 padding: 0 0 0 24px;
 margin-bottom: 12px;
 font-size: var(--minF20);
 line-height: 1.8;
}
.recipeTxts> li::before{
	counter-increment: listnum; /* counter-resetと同じ文字列 */
	content: counter(listnum); /* カウントした数に応じて番号を表示 */
 font-size: var(--minF24);
 font-family: "Oswald", sans-serif;
 font-weight: 400;
 position: absolute;
 top: 0;
 left: 0;
}

.recipeImgs{
 margin-top: 40px;
}
.recipeImgs li{
 position: relative;
}
.recipeImgs li+ li{
 margin-top: 25px;
}
.recipeImgs li span{
 position: absolute;
 left: 0;
 bottom: 0;
 display: grid;
 place-content: center;
 background: #fff;
 width: 32px;
 height: 32px;
 font-size: var(--minF20);
 font-weight: 400;
}

.sidedish.box{
    padding: 32px 24px;
 border: 1px #000 solid;
}
.sidedish h2{
 margin-bottom: 24px;
 text-align: center;
}
.sidedish h2 span:not(.mincho){
 display: inline-block;
 border-bottom: 2px #000 solid;
 padding-bottom: 8px;
 font-size: var(--minF18);
 font-weight: 600;
}
.sidedish h2 .mincho{
 display: block;
 margin-top: 16px;
 font-size: var(--minF28);
 text-align: left;
}
.sidedish figure{
 margin: 0 0 24px;
}
.sidedish ul{
 border-top: 2px #000 dotted;
 padding-top: 24px ;
 padding-bottom: 24px ;
}
.sidedish ul li{
 font-size: var(--minF18);
}
.sidedish p{
 border-top: 2px #000 dotted;
 padding-top: 24px ;
 font-size: var(--minF18);
}

.essayist{
 border-top:1px #000 solid;
 border-bottom:1px #000 solid;
 padding: 24px 0;
 gap:24px 0 ;
 flex-flow: row wrap;
 align-items: center;
}
.essayist figure{
 width: 46.7%;
}
.essayist h3{
 width:53.3% ;
 padding-left: 24px;
 font-size: var(--minF20);
 font-weight: 600;
}
.essayist h3 span{
 display: block;
 margin-bottom: 4px;
 font-size: var(--minF16);
 font-weight: 400;
}
.essayist p{
 font-size: var(--minF18);
 line-height: 1.77;
}

/*-----------------------------
	study
-----------------------------*/
.studyMain{
	padding-bottom: 40px;
}
.studyMain h2{
 position: relative;
 min-height: 105px;
 padding: 0 0 0 88px;
 margin-top: 40px;
 margin-bottom: 24px;
 font-size: var(--minF24);
 font-weight: 600;
}
.studyMain h2::before{
 content: "";
 display: block;
 background: url("images/study_img_q.svg") no-repeat left top/100% auto;
 width: 64px;
 height: 105px;
 position: absolute;
 top: 0;
 left: 0;
}
.studyMain h2 span{
 display: block;
 font-size: var(--minF16);
 line-height: 1.6;
}
.studyMain h2.answer{
 min-height: 133px;
}
.studyMain h2.answer::before{
 background: url("images/study_img_a.svg") no-repeat left top/100% auto;
 height: 133px;
}
.studyMain figure{
 margin: 40px auto;
}

.studyProfile{
 border-top: 1px #000 solid;
 border-bottom: 1px #000 solid;
 padding: 24px 0;
}
.studyProfile h3{
 margin-bottom: 12px;
 line-height: 0;
}
.studyProfile h3 span{
 display: inline-flex;
 align-items: center;
 gap:0 16px;
 font-size: var(--minF16);
 font-weight: 600;
 line-height: 1;
}
.studyProfile h3 span::before,
.studyProfile h3 span::after{
 content: "";
 display: block;
 background: #000;
 width: 2px;
 height: 20px;
}
.studyProfile h4{
 margin-bottom: 12px;
 font-size: var(--minF20);
 font-weight: 600;
}
.studyProfile h4 span{
 display: block;
 margin-bottom: 4px;
 font-size: var(--minF16);
 font-weight: 400;
 line-height: 1.5;
}
.studyProfile p{
 font-size: var(--minF18);
}


/*-----------------------------
	life
-----------------------------*/
.lifeMain{}
.lifeMain figure{
 margin: 40px auto;
}
.lifeMain .faqList{
 border-top: 2px #000 dotted;
 padding-top: 24px;
 font-weight: 600;
}
.lifeMain .faqList dt span,
.lifeMain .faqList dd span {
    font-size: var(--minF24);
	line-height: 1.5em;
}
.lifeMain .box dt{
 border-bottom: 2px #000 dotted;
 padding-bottom: 8px;
 margin-bottom: 24px;
 line-height: 1.8;
 font-weight: 600;
}
.lifeMain .box dt span{
 display: block;
 margin-bottom: 8px;
 border-bottom: 2px #000 dotted;
 padding-bottom: 8px;
}
.lifeMain .box dd{
line-height: 1.8em;
}

.lifeProfile{
 border-top: 1px #000 solid;
 border-bottom: 1px #000 solid;
 padding: 24px 0;
 flex-flow: row wrap;
 gap:12px 24px;
 align-items: center;
}
.lifeProfile figure{
 width: min(46.45%, 170px);
}
.lifeProfile h3{
	flex: 1;
 font-size: var(--minF20);
 font-weight: 600;
 line-height: 1.8;
}
.lifeProfile h3 span{
 display: block;
 margin-bottom: 4px;
 font-size: var(--minF16);
 font-weight: 400;
 line-height: 1.5;
}
.lifeProfile p{
 font-size: var(--minF18);}



/*-----------------------------
	information
-----------------------------*/
#information main{
 background: var(--green);
}
#information .mainTitle{
 font-size: min(5.58vw,24px);
}
#information .mainTitle img{
 margin: 0 16px 0 0;
 vertical-align: -0.2em;
}
.infoMain h2{
 margin-bottom: 40px;
 font-size: min(4.18vw,18px);
 font-weight: 600;
 line-height: 1.4;
}
.infoMain figure{
 margin: 0 0 24px;
}
.infoMain p{
 font-size: min(4.18vw,18px);
 line-height: 1.7;
}
.infoMain .box{
margin-top: 24;
 padding: 16px 24px 24px;
}
.infoMain .box h3{
 margin-bottom: 4px;
 font-size: min(4.18vw,18px);
 font-weight: 600;
 line-height: 1.8;
}
.infoMain .box p{
 font-size: min(3.72vw,16px);
 line-height: 1.5;
}
.infoMain .box .btnWrap{
 margin: 16px 0;
}
.infoMain .box .btn{
 padding: 12px 16px 12px 24px;
 gap:0 5px;
 line-height: 1.2;
}
.infoMain .box .btn.window::after{
 width: 20px;
 height: 20px;
}