@charset "UTF-8";

/* 初期リセット・ベース設定 */
*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;height:auto;display:inline-block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

:root {

	--cocole-col: #f79911;

	--bace-col: #0081C9;
	--bace-col-rgb: 0, 129, 201;
	--bace-col-2: #339AD4;
	--bace-col-3: #66B3DF;
	--bace-col-4: #99CDE9;
	--bace-col-5: #CCE6F4;
	--bace-col-6: #E0F0F8;

	--tnote-col: #921b05;
	--tnote-col-rgb: 146, 27, 5;
	--meshi-col: #769164;
	--meshi-col-rgb: 118, 145, 100;
	--body-comp-col: #46c7b2;
	--body-comp-col-rgb: 70, 199, 178;
	--kimito-col: #ea5506;
	--kimito-col-rgb: 234, 85, 6;

	--gray: #555C60;
	--gray-2: #999DA0;
	--gray-3: #DDDEDF;
	--gray-4: #F8F8F9;
	--green: #4A4925;
	--green-2: #92927C;
	--green-3: #DBDBD3;
	--red: #C9000E;
	--red-2: #DF666E;
	--red-3: #F4CCCF;
	--yellow: #C9C400;
	--yellow-2: #DFDC66;
	--yellow-3: #F4F3CC;

	--social_x-col: #0f1419;
	--social_x-col-rgb: 15, 20, 25;
	--ins-col: #f13f79;
	--ins-col-rgb: 241, 63, 121;
	--youtube-col: #ff0000;
	--youtube-col-rgb: 255, 0, 0;
	--facebook-col: #4267b2;
	--facebook-col-rgb: 66, 103, 178;
	--line-col: #00b900;
	--line-col-rgb: 0, 185, 0;
	--hatena-col: #01a5df;
	--hatena-col-rgb: 1, 165, 223;
	--rakuten-col: #CC4E50;
	--rakuten-col-rgb: 204, 78, 80;
	--amazon-col: #FFA526;
	--amazon-col-rgb: 255, 165, 38;

	--ct-full: 3rem;
	--ct-middle: 2rem;

	--visual-radius: 25px;
	--card-radius: 5px;

	--gap:16px;

}

@media only screen and (min-width: 768px) {

	:root {

		--ct-full: 10rem;
		--ct-middle: 4rem;

		--visual-radius: 50px;
		--card-radius: 10px;

	}

}

/*html*/
html {
font-size: 62.5%;
}

body {
background: #fff;
color: var(--gray);
font-family: "Zen Maru Gothic", 'Hiragino Kaku Gothic ProN',Meiryo,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: clamp(1.6rem, 2.5vw, 2rem);
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}
h1, h2, h3, h4, h5, h6 {
font-family: "M PLUS Rounded 1c", 'Hiragino Kaku Gothic ProN',Meiryo,Helvetica,Arial,sans-serif;
font-weight: 800;
}

a {
	transition: .3s ease-in-out;
	color: var(--bace-col);
}

a:hover {
	color: var(--bace-col-3);
}

/*color*/
.col-gray { color: var(--gray); }
.col-gray-2 { color: var(--gray-2); }
.col-gray-3 { color: var(--gray-3); }
.col-gray-4 { color: var(--gray-4); }

/*font-size*/
.fs-s {
	font-size: clamp(1.2rem, calc(0.9rem + 0.625vw), 1.6rem);
}
.fs-m {
	font-size: clamp(1.6rem, calc(1.6rem + 0.625vw), 2rem);
}
.fs-l {
	font-size: clamp(2.4rem, calc(2.4rem + 0.625vw), 6rem);
}
.fs-12 {
	font-size: 1.2rem;
}

/*badge*/
.badge {
	padding: .25rem .5rem;
	border-radius: var(--card-radius);
	display: inline-block;
	background-color: var(--bace-col-3);
	color: var(--bace-col-6);
}

/*display*/
.print-area,
.read-only,
.svg-symbol {
    display: none;
}

/*section_box*/
.section_box {
    padding: var(--ct-full) 0;
}

/*container*/
.container {
  position: relative;
  width: 90%;
  max-width: 75vw;
  margin-left: auto;
  margin-right: auto;
}
.container > * {
  margin-block-start: var(--ct-middle);
  line-height: 1.5;
}

@media only screen and (min-width: 768px) {

.container {
  width: 86%;
  max-width: none;
}

}

/*grid*/
.grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}
.grid.grid-autofit {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
	grid-template-rows: auto;
  grid-row: span 4;
}
.grid.grid-autofit li {
  display: grid;
  grid-template-rows: subgrid;
}

/*site-header*/
.site-header {
}
/*nav-bar*/
.nav-bar {
	background: var(--cocole-col);
}

/*product-box*/
.product-box {
	margin-top: 2rem;
	background: #fff;
}
.product-box a {
	display: block;
	text-decoration: none;
	border: 1px solid var(--gray-3);
	border-radius: var(--card-radius);
}
.product-box a:hover {
	border: 1px solid var(--red);
	background: var(--gray-4);
}
.product-box a:hover .product-name {
	color: var(--red);
}
.product-box img {
	border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.product-box .brand-name {
	display: inline-block;
	padding: 1rem 1rem .5rem;
	border-bottom: 1px solid var(--gray-3);
}
.product-box .product-name {
	margin: 1.5rem 1rem;
	color: var(--bace-col);
}
.product-box .product-title {
	margin: 1.5rem 1rem;
}
.product-box .product-footer {
	padding: .5rem;
	border-top: 1px solid var(--gray-3);
	display: grid;
	grid-template-columns: repeat(2, auto);
	text-align: center;
	color: var(--gray);
}

/*footer*/
#footer {
	background: var(--gray-4);
}

/*copyright*/
.copyright {
padding: 1rem 0;
background: #555c60;
color: #bbbebf;
text-align: center;
font-size: 12px;
}