@charset "utf-8";
/* CSS Document */
* {
	box-sizing: border-box;
}
html {
	font-size: clamp(13px, 2.0vw, 20px);
	-webkit-text-size-ajust: 100%;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	color: #4B4742;
	width: 100%;
}
body {
	background-color: #f4f0ec;
	line-height: 1.6;
	margin: 0;
}
img {
	vertical-align: bottom;
	max-width: 100%;
}
figure {
	margin: 0;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
h1 {
	font-size: clamp(15px, 4.15vw, 30px);
	font-family: 'M PLUS Rounded 1c', sans-serif;
	margin: 0;
}
h2 {
	font-size: clamp(22px, 6.87vw, 36px);
	font-family: 'M PLUS Rounded 1c', sans-serif;
	color: #f08300;
	margin: 0;
}
section {
	padding: 100px 0 0;
}
a {
	display: inline-block;
	color: #4B4742;
	text-decoration: none;
}
main {
	margin-top: 70px;
}
.wrapper {
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
}
.flex_box {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.brown_txt {
	color: #30120f;
}
.highlight_txt {
	font-size: clamp(15px, 4.15vw, 30px);
}
.attention {
	font-size: clamp(8px, 2.0vw, 12px);
}

#loading {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999999999;
    background: rgba(255,255,255);
    text-align: center;
    color: #fff;
}
#loading img {
    position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
header {
	position: fixed;
	top: 0;
	width: 100%;
	max-width: 1600px;
	background-color: #ffffff;
	z-index: 99999999;
	transition: all 0.5s ease-out;
}


.openbtn {
    position: relative;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    z-index: 999999999;
}
.openbtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
    background: #111111;
    width: 45%;
}
.openbtn span:nth-of-type(1) {
    top: 15px;
}
.openbtn span:nth-of-type(2) {
    top: 23px;
}
.openbtn span:nth-of-type(3) {
    top: 31px;
}
.openbtn.active span:nth-of-type(1) {
    top: 23px;
	opacity: 0;
}
.openbtn.active span:nth-of-type(2) {
    top: 23px;
}
.openbtn.active span:nth-of-type(3) {
    top: 23px;
	opacity: 0;
}
header ul {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
	gap: 10px;
	max-width: 1000px;
	width: 77%;
	height: 70px;
	text-align: center;
	align-items: center;
	margin: 0 auto;
}
header ul#g-nav li {
	width: 100%;
	height: 70px;
	font-size: clamp(13px, 2.0vw, 18px);
	line-height: 70px;
	margin: auto 0;
}
header ul#g-nav a {
	width: 100%;
	height: 70px;
}
header .buy_link {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
}
#main_image figure img {
	width: 100%;
}
#concept {
	background: #ffffff;
	text-align: center;
	height: 225px;
}
#concept figure img {
	width: auto;
	height: 205px;
}
#concept figure {
	margin-top: auto;
}
.bg_wh {
	background: #ffffff;
	text-align: center;
	padding: 0 0 50px;
}
.bg_gy {
	background: #e7e8e8;
	text-align: center;
	padding: 0 0 50px;
}
#features {
	width: 90%;
	max-width: 850px;
	margin: 0 auto;
}
#features .brown_txt {
	font-size: clamp(14px, 4.37vw, 28px);
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: bold;
	text-align: center;
}
#features .brown_txt span {
	font-size: clamp(22px, 6.87vw, 40px);
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: bold;
}
#features p {
	text-align: left;
	margin-bottom: 0;
}
#features figure {
	margin: 20px auto 50px;
}

#compatibility .brown_txt {
	font-size: clamp(14px, 4.37vw, 28px);
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: bold;
	text-align: center;
}
#compatibility .flex_box {
	width: 95%;
	max-width: 1200px;
	gap: 2%;
	margin: 2em auto;
}
#compatibility .flex_box .bg_wh {
	padding: 5% 0;
	border-radius: 20px;
}
#compatibility .cup_size {
	width: 95%;
	max-width: 1000px;
	margin: 2em auto;
}
#compatibility .cup_size+#compatibility .cup_size {
	margin: 1em auto;
}
#compatibility .cup_size h2 {
	max-width: 800px;
	margin: 0 auto;
}
#compatibility .table_02 { 
	width: 100%;
	max-width: 1000px;
	display: grid;
	background: #ffffff;
	border: 3px solid #000000;
	gap: 1px;
	margin: 0 auto;
	align-items: center;
	grid-template-areas: 
    "name04 name04 name04 name04 name04 name04 name04 name04 name05 name05 name05 name05 name05 name05 name06 name06 name06 name06 name06 name06"
    "hot04 hot04 hot04 hot04 cold04 cold04 cold04 cold04 hot05 hot05 hot05 cold05 cold05 cold05 hot06 hot06 hot06 cold06 cold06 cold06"
    "size18 size19 size20 size21 size22 size23 size24 size25 size26 size27 size28 size29 size30 size31 size32 size33 size34 size35 size36 size37"
	"ok_no18 ok_no19 ok_no20 ok_no21 ok_no22 ok_no23 ok_no24 ok_no25 ok_no26 ok_no27 ok_no28 ok_no29 ok_no30 ok_no31 ok_no32 ok_no33 ok_no34 ok_no35 ok_no36 ok_no37"; 
}
#compatibility .table { 
	width: 100%;
	display: grid;
	background: #ffffff;
	border: 3px solid #000000;
	gap: 1px;
	margin: 1em auto;
	align-items: center;
	grid-template-areas: 
    "name01 name01 name01 name01 name02 name02 name02 name02 name02 name02 name03 name03 name03 name03 name03 name03 name03"
    "hot01 hot01 cold01 cold01 hot02 hot02 cold02 cold02 cold02 cold02 hot03 hot03 hot03 hot03 cold03 cold03 cold03"
    "size01 size02 size03 size04 size05 size06 size07 size08 size09 size10 size11 size12 size13 size14 size15 size16 size17"
	"ok_no01 ok_no02 ok_no03 ok_no04 ok_no05 ok_no06 ok_no07 ok_no08 ok_no09 ok_no10 ok_no11 ok_no12 ok_no13 ok_no14 ok_no15 ok_no16 ok_no17"; 
}
.name01 { grid-area: name01; }
.name02 { grid-area: name02; }
.name03 { grid-area: name03; }
.name04 { grid-area: name04; }
.name05 { grid-area: name05; }
.name06 { grid-area: name06; }
.hot01 { grid-area: hot01; }
.hot02 { grid-area: hot02; }
.hot03 { grid-area: hot03; }
.hot04 { grid-area: hot04; }
.hot05 { grid-area: hot05; }
.hot06 { grid-area: hot06; }
.cold01 { grid-area: cold01; }
.cold02 { grid-area: cold02; }
.cold03 { grid-area: cold03; }
.cold04 { grid-area: cold04; }
.cold05 { grid-area: cold05; }
.cold06 { grid-area: cold06; }
.size01 { grid-area: size01; }
.size02 { grid-area: size02; }
.size03 { grid-area: size03; }
.size04 { grid-area: size04; }
.size05 { grid-area: size05; }
.size06 { grid-area: size06; }
.size07 { grid-area: size07; }
.size08 { grid-area: size08; }
.size09 { grid-area: size09; }
.size10 { grid-area: size10; }
.size11 { grid-area: size11; }
.size12 { grid-area: size12; }
.size13 { grid-area: size13; }
.size14 { grid-area: size14; }
.size15 { grid-area: size15; }
.size16 { grid-area: size16; }
.size17 { grid-area: size17; }
.size18 { grid-area: size18; }
.size19 { grid-area: size19; }
.size20 { grid-area: size20; }
.size21 { grid-area: size21; }
.size22 { grid-area: size22; }
.size23 { grid-area: size23; }
.size24 { grid-area: size24; }
.size25 { grid-area: size25; }
.size26 { grid-area: size26; }
.size27 { grid-area: size27; }
.size28 { grid-area: size28; }
.size29 { grid-area: size29; }
.size30 { grid-area: size30; }
.size31 { grid-area: size31; }
.size32 { grid-area: size32; }
.size33 { grid-area: size33; }
.size34 { grid-area: size34; }
.size35 { grid-area: size35; }
.size36 { grid-area: size36; }
.size37 { grid-area: size37; }
.ok_no01 { grid-area: ok_no01; }
.ok_no02 { grid-area: ok_no02; }
.ok_no03 { grid-area: ok_no03; }
.ok_no04 { grid-area: ok_no04; }
.ok_no05 { grid-area: ok_no05; }
.ok_no06 { grid-area: ok_no06; }
.ok_no07 { grid-area: ok_no07; }
.ok_no08 { grid-area: ok_no08; }
.ok_no09 { grid-area: ok_no09; }
.ok_no10 { grid-area: ok_no10; }
.ok_no11 { grid-area: ok_no11; }
.ok_no12 { grid-area: ok_no12; }
.ok_no13 { grid-area: ok_no13; }
.ok_no14 { grid-area: ok_no14; }
.ok_no15 { grid-area: ok_no15; }
.ok_no16 { grid-area: ok_no16; }
.ok_no17 { grid-area: ok_no17; }
.ok_no18 { grid-area: ok_no18; }
.ok_no19 { grid-area: ok_no19; }
.ok_no20 { grid-area: ok_no20; }
.ok_no21 { grid-area: ok_no21; }
.ok_no22 { grid-area: ok_no22; }
.ok_no23 { grid-area: ok_no23; }
.ok_no24 { grid-area: ok_no24; }
.ok_no25 { grid-area: ok_no25; }
.ok_no26 { grid-area: ok_no26; }
.ok_no27 { grid-area: ok_no27; }
.ok_no28 { grid-area: ok_no28; }
.ok_no29 { grid-area: ok_no29; }
.ok_no30 { grid-area: ok_no30; }
.ok_no31 { grid-area: ok_no31; }
.ok_no32 { grid-area: ok_no32; }
.ok_no33 { grid-area: ok_no33; }
.ok_no34 { grid-area: ok_no34; }
.ok_no35 { grid-area: ok_no35; }
.ok_no36 { grid-area: ok_no36; }
.ok_no37 { grid-area: ok_no37; }



#compatibility .table p.ex ,#compatibility .table_02 p.ex {
	background: #5c3723;
	color: #ffffff;
}
#compatibility .table p.ex span,#compatibility .table_02 p.ex span {
	font-size: clamp(8px, 2.5vw, 16px);
}
#compatibility .table p[class^="name"],#compatibility .table_02 p[class^="name"] {
	width: auto;
	background: #f4f0ec;
	padding: 10px 0;
}
#compatibility .table p[class^="name"]:nth-child(2n+1),#compatibility .table_02 p[class^="name"]:nth-child(2n+1) { 
	background: #ffffff;
}
#compatibility .table p[class^="ok_no"],#compatibility .table_02 p[class^="ok_no"] { 
	width: auto;
	background: #f4f0ec;
}

#compatibility .table p[class^="ok_no"].red,#compatibility .table_02 p[class^="ok_no"].red { 
	color: #eb615a;
}

#compatibility .table p[class^="size"],#compatibility .table_02 p[class^="size"] { 
	width: auto;
	background: #ffffff;
}
#compatibility .table p[class^="size"].red,#compatibility .table_02 p[class^="size"].red { 
	color: #eb615a;
}
#compatibility .table p[class^="size"].blue,#compatibility .table_02 p[class^="size"].blue { 
	color: #0075be;
}
#compatibility .table p[class^="hot"],#compatibility .table_02 p[class^="hot"] { 
	color: #ffffff;
	background: #eb615a;
}
#compatibility .table p[class^="cold"],#compatibility .table_02 p[class^="cold"] { 
	color: #ffffff;
	background: #0075be;
}
#compatibility .table .shop,#compatibility .table_02 .shop { 
	width: 100%;
}
#compatibility .table p,#compatibility .table_02 p { 
	margin: 0;
}
#compatibility .table p.font_rl,#compatibility .table_02 p.font_rl { 
	width: 1.5em;
	display: inline;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	background: #ffffff;
	margin: 0 auto;
}



#scene ul {
	max-width: 1200px;
	margin: 0 auto;
}
#scene ul li {
	color: #ffffff;
	margin: 10px 0;
}
#scene ul li:first-of-type {
	margin: 30px 0 0;
}
#scene ul li .txt {
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
	width: 50%;
}
#scene ul li figure {
	width: 50%;
}
#scene ul li.scene_01 {
	background: #99918b;
}
#scene ul li.scene_02 {
	background: #705541;
}
#scene ul li.scene_03 {
	background: #b6bbc1;
}
#product video {
	width: 100%;
	max-width: 480px;
}
#product div {
	background: #ffffff;
    max-width: 850px;
    width: 90%;
    margin: 0 auto;
    padding: 50px;
}
#photo,#lineup {
	text-align: center;
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
}
#photo h2 {
	margin-bottom: 30px;
}
#lineup .flex_box {
	width: 90%;
	max-width: 1000px;
	justify-content: center;
	gap: 10px;
	margin: 20px auto;
}
#lineup .spec {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 5px 20px;
	align-items: center;
	max-width: 800px;
	width: 98%;
	margin: 0 auto;
}
#lineup .spec p {
	vertical-align: middle;
	height: 100%;
}
#lineup .spec div:nth-of-type(2n) {
	text-align: left;
}
#lineup .spec div:nth-of-type(2n+1) {
	background: #e7e8e8;
	text-align: center;
	height: 100%;
}
#lineup .item_link {
	margin: 0;
}
#lineup .item_link:first-of-type {
	margin: 30px auto 0;
}
#lineup .item_link:first-of-type a {
	background: #e3711c;
	color: #ffffff;
}
#lineup .item_link a {
	background: #f4f0ec;
	width: 310px;
	border: 1px solid #e7e8e8;
	padding: 10px 20px;
	margin: 20px auto 0;
}

#lineup .manual_link {
	margin: 0;
}
#lineup .manual_link a {
	background: #4b4742;
	color: #ffffff;
	width: 310px;
	border: 1px solid #4b4742;
	padding: 10px 20px;
	margin: 20px auto;
}


#pagetop {
	position: fixed;
	bottom: 120px;
	right: 10px;
	width: 50px;
	opacity: 0;
	transition: all 0.5s ease-out;
}
#pagetop.pagetop_add {
	opacity: 1;
}
#pagetop a {
	display: block;
}
.purchase_promotion {
	width: 95%;
	max-width: 1000px;
	position: fixed;
	left: 50%;
	bottom: -4%;
	transform: translateX(-50%);
	background: #ffffff;
	box-shadow: 0 7px 12px -4px #0006;
	border-radius: 10px;
	margin: 50px auto;
	opacity: 0;
	transition: all 0.5s ease-out;
	z-index: 999999;
}
.purchase_promotion.scroll_view {
	opacity: 1;
}

.purchase_promotion .flex_box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 1%;
	margin: 2% auto;
}
.purchase_promotion p {
	width: 50%;
	text-align: center;
	font-size: clamp(15px, 4.6vw, 22px);
	margin: 0;
}
.purchase_promotion p.doshisha_marche {
	width: 23%;
}
.purchase_promotion p.rakuten {
	width: 23%;
}
.purchase_promotion p.doshisha_marche a {
	display: block;
	width: 100%;
	text-align: center;
	color: #ffffff;
	background: #e3711c;
	background-size: 15%;
	border-radius: 50px;
	padding: 5% 18%;
}
.purchase_promotion p.rakuten a {
	display: block;
	width: 100%;
	text-align: center;
	color: #ffffff;
	background: #f5ab23;
	background-size: 15%;
	border-radius: 50px;
	padding: 5% 18%;
}
.purchase_promotion p.doshisha_marche a:hover, .purchase_promotion  p.rakuten a:hover {
	opacity: 0.5;
}


footer {
	margin: 60px auto 0;
}
footer p.do-cooking {
	max-width: 230px;
	width: 100%;
	border: 1px solid #999;
	margin: 0 auto;
}
footer p.attention {
	background: #4b4742;
	color: #ffffff;
	width: 100%;
	text-align: center;
	margin: 30px auto 0;
	padding: 50px;
}
br.br_768 {
	display: none;
}
@media (orientation: portrait){
	section {
		padding: 50px 0 0;
	}
	#main_image figure img {
		width: auto;
		object-fit: cover;
		object-position: 50% 50%;
		/*margin-top: 50px;*/
	}
	#scene ul li:first-of-type {
		margin: 30px auto 0;
	}
	#scene ul li {
		width: 100%;
		max-width: 800px;
		display: block;
		margin: 10px auto;
	}
	#scene ul li .txt {
		width: 100%;
		margin: 0 auto;
		padding: 10px 0 0;
	}
	#scene ul li figure {
		width: 100%;
		margin: 0 auto;
	}
}




@media screen and (min-width: 1025px) {
	header .openbtn {
		display: none;
	}
	header p.logo {
		display: none;
	}
}


/* ---------------------------- 1024pxまでの幅の場合に適応される ---------------------------- */
@media screen and (max-width: 1024px) {
	header {
		height: 50px;
	}
	header ul {
		display: none;
		grid-template-columns: 1fr;
		gap: 0;
		width: 30vw;
		height: auto;
		background: #ffffff;
		margin: 0;
	}
	header ul#g-nav li {
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin: auto 0;
	}
	header ul#g-nav a {
		width: 100%;
		height: 50px;
	}

	header ul.panelactive {
		display: grid;
		animation: navAnimate;
    	animation-duration: 0.6s;
	}
	header ul li.logo {
		display: none;
	}
	header ul li:last-of-type {
		padding: 0 0 10px;
	}

	header p.logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		margin: 0;
	}
	header .buy_link img {
		height: 50px;
	}
	main {
		margin-top: 50px;
	}
	.purchase_promotion p {
		width: 100%;
		margin: 0 0 1%;
	}
	.purchase_promotion p.doshisha_marche {
		width: 48%;
		max-width: 200px;
		margin: 0;
	}
	.purchase_promotion p.rakuten {
		width: 48%;
		max-width: 200px;
		margin: 0;
	}


}



@media screen and (max-width: 768px) {
	#concept {
		height: 150px;
	}
	#concept figure img {
		height: 130px;
	}
	#scene ul li .txt {
		top: 70%;
		left: 50%;
	}
	#compatibility .flex_box {
		width: 90%;
		flex-flow: column;
		margin: 0 auto;
	}
	#compatibility .flex_box .bg_wh {
		margin: 2% auto 0;
	}
	br.br_768 {
		display: block;
	}
}

@media screen and (max-width: 480px) {
	#main_image figure img {
		width: auto;
		height: 30vh;
	}
	#concept {
		height: 100px;
	}
	#concept figure img {
		height: 80px;
	}
	#scene ul li .txt {
		/*font-weight: bold;*/
		text-shadow: 2px 3px 20px rgba(0, 0, 0, 0.4), 2px 3px 20px rgba(0, 0, 0, 0.4);
	}

	#product div {
		padding: 30px;
	}
	footer {
		margin: 40px auto 0;
	}
	footer p.do-cooking {
		width: 30%;
	}
	footer p.attention {
		padding: 10px;
	}
	#lineup .item_link a {
		margin: 10px auto 0;
	}
	#lineup .manual_link a {
		margin: 10px auto;
	}

}
@media screen and (max-width: 360px) {
	#concept {
		height: 200px;
	}
	#concept figure img {
		display: none;
	}
}