@charset "UTF-8";


header.products { font-size:10px;}
.productsArea .note-02,
.productsArea .note-03,
.productsArea .table-01 .th-01,
.productsArea .table-01 .td-01 { font-size:15px;}
.materialArea .materials figcaption { font-size:16px;}

header.products .exp-01,
.productsArea .productName-01,
.productsArea .pic-01,
.productsArea .table-01 { font-size:20px;}
.materialArea .ttl-01 { font-size:28px;}

header.products .block-01 .ttl-01 > strong { display:block; overflow:hidden; position:absolute; text-align:left; left:105%; top:0; width:100%; height:100%;}

header { width:100%; overflow:hidden;}

header.products .block-01 { position:relative; max-width:1600px; width:100%; margin-left:auto; margin-right:auto;}

header.products .block-01 img.bg-01 { width:100%; height:auto; float:left; position:relative;}

header.products .block-01 img.sp { display:none;}

header.products .block-01 .ttl-01 { width:100%; position:absolute; left:0; top:62.5%; background-position:center center; background-repeat:no-repeat; background-size:auto 100%; background-image:url("../images/products/header-ttl-01.png"); font-size:1em;}

header.products .block-01 .ttl-01:before,
header.products .block-01 .ttl-01:after { content:""; display:block; position:absolute; top:0; height:100%; width:calc((100vw - 100%) / 2 + 1px);}

header.products .block-01 .ttl-01:before { right:calc(100% - 1px); background:#90C320;}

header.products .block-01 .ttl-01:after { left:calc(100% - 1px); background:#83BC1C;}

header.products .block-01 .ttl-01 > img { width:100%; height:auto; float:left; position:relative; left:50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%);}

header.products .exp-01 { line-height:2; width:95%; margin-right:auto; margin-left:auto; text-align:center; letter-spacing:0.05em;}
.productsArea { max-width:1100px; width:90%; margin-left:auto; margin-right:auto; margin-top:0.8rem;}
.productsArea > :first-child { margin-top:0;}
.productsArea .product-01 { width:100%;}
.productsArea .product-01 + .product-01 { margin-top:0.8rem;}
.productsArea .product-01 br.sp { display:none;}
.productsArea .productName-01 { background:#000; display:flex; align-items:center; position:relative; padding-top:0.7em; padding-bottom:0.85em; min-height:5em; width:100%; line-height:1.5;}
.productsArea .productName-01 strong { color:#fff; display:block; font-size:1em; position:relative; letter-spacing:0.05em;}
.productsArea .productName-01:before { content:""; display:block; background-color:#000; height:100%; width:114.5%; position:absolute; left:50%; top:0; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%);}
.productsArea .note-01:before,
.productsArea .note-03 strong:before { content:"※"; position:absolute; left:0; top:0.03em;}
.productsArea .note-01 { display:block; position:relative; padding-left:1.15em; font-size:1em;}
.productsArea .note-02 { padding-top:1em; padding-right:1em; padding-bottom:1.2em; padding-left:1.9em; margin-top:1em; letter-spacing:0.05em; width:100%; border-width:1px; border-color:#ecead2; border-style:solid; display:block; background:#fdfbe1;}
.productsArea .note-03 { clear:both; display:flex; width:calc(100% - 1em); padding-top:0.8em; line-height:1.5; justify-content:flex-end;}
.productsArea .note-03.sp { display:none;}
.productsArea .note-03 * { font-size:1em;}
.productsArea .note-03 strong { display:block; position:relative; padding-left:1.15em; letter-spacing:0.03em;}
.productsArea .pic-01 { overflow:hidden; width:29.54545%; float:left; margin-top:1.25em;}
.productsArea .pic-01 img { width:100%; height:auto; float:left;}
.productsArea .table-01 { display:flex; flex-wrap:wrap; justify-content:space-between; background:#fff; width:68.63636%; line-height:1.5; float:right; position:relative; margin-top:-4em;}
.productsArea .table-01 * { letter-spacing:0.05em;}
.productsArea .table-01 ul li { position:relative; padding-left:1.2em; margin-top:0.2em; font-size:1em;}
.productsArea .table-01 ul li:before { position:absolute; left:0.2em; top:0.63em; width:0.6em; height:0.6em; content:""; display:block; background-position:center center; background-repeat:no-repeat; background-size:90% auto; background-image:url("../images/common/list-circle-01.svg");}
.productsArea .table-01 ul li:first-of-type { margin-top:0;}
.productsArea .table-01 .th-01,
.productsArea .table-01 .td-01 { border-width:0 0 1px; border-color:#ccc; border-style:solid; padding-top:1.8em; padding-bottom:2em;}
.productsArea .table-01 > :nth-last-child(1):not(.note-02),
.productsArea .table-01 > :nth-last-child(2),
.productsArea .table-01 > :nth-last-child(3):not(.td-01) { border-width:0;}
.productsArea .table-01 .th-01 { background:#e6e6e6; width:12em; font-weight:600; padding-right:0.5em; padding-left:2.3em;}
.productsArea .table-01 .td-01 { width:calc(100% - 12em); padding-right:0.5em; padding-left:2em;}
.materialArea { max-width:1100px; width:90%; margin-left:auto; margin-right:auto; margin-top:1.5rem;}
.materialArea .ttl-01 { display:flex; align-items:center; width:114.5%; margin-left:50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%);}
.materialArea .ttl-01:before,
.materialArea .ttl-01:after { content:""; display:block; background-color:#777; height:1px; flex-grow:1;}
.materialArea .ttl-01:before { margin-right:3em;}
.materialArea .ttl-01:after { margin-left:3em;}
.materialArea .ttl-01 img { width:3.8rem;}
.materialArea .materials { margin-top:0.7rem; max-width:980px; width:100%; margin-left:auto; margin-right:auto; display:flex; flex-wrap:wrap;}
.materialArea .materials figure { width:calc(91.83673% / 3); margin-top:0.4rem;}
.materialArea .materials figure > img { width:100%; height:auto; float:left;}
.materialArea .materials figure:nth-of-type(1),
.materialArea .materials figure:nth-of-type(2),
.materialArea .materials figure:nth-of-type(3) { margin-top:0;}
.materialArea .materials figure:nth-of-type(3n-2) { margin-right:4.08163%;}
.materialArea .materials figure:nth-of-type(3n-1) { margin-right:4.08163%;}
.materialArea .materials figcaption { line-height:1.5; letter-spacing:0.03em; padding-top:0.4em; clear:both;}

@media (max-width:1400px) {
header.products { padding-top:0.1rem;}
}

@media (max-width:1326px) {
.productsArea .productName-01:before { width:95vw;}
.materialArea .ttl-01 { width:95vw;}
}

@media (max-width:1200px) {
header.products { padding-top:0.3rem;}
}

@media (max-width:1100px) {
.materialArea .ttl-01:before { margin-right:2.3em;}
.materialArea .ttl-01:after { margin-left:2.3em;}
}

@media (max-width:950px) {
header.products .block-01 .ttl-01 > img { width:120%;}
header.products .exp-01 { margin-top:0.7em;}
}

@media (max-width:900px) {
header.products { padding-top:0.4rem;}
}

@media (max-width:800px) {
header.products .block-01 .ttl-01 > img { width:130%;}
header.products .exp-01 { margin-top:1em;}
}

@media (max-width:768px) {
header.products .block-01 .ttl-01 > img { width:140%;}
header.products .exp-01 { margin-top:1.2em;}
.productsArea { margin-top:0.5355rem;}
.productsArea .product-01 + .product-01 { margin-top:0.693rem;}
.productsArea .product-01 br.pc { display:none;}
.productsArea .product-01 br.sp { display:block;}
.productsArea .productName-01 { min-height:auto; padding-top:0.9em; padding-bottom:1.05em;}
.productsArea .productName-01 strong { width:calc(100% - 43.40278% - 1em);}
.productsArea .productName-01 strong br { display:none;}
.productsArea .note-03 { width:calc(100% - 43.40278% - 1em);}
.productsArea .note-03.pc { display:none;}
.productsArea .note-03.sp { display:flex; justify-content:flex-end;}
.productsArea .pic-01 { overflow:visible; z-index:2; float:right; width:43.40278%; margin-top:-1.3rem; position:relative; min-height:2.7rem; display:flex; align-items:center;}
.productsArea .table-01 { float:none; clear:both; position:relative; z-index:1; top:-0.2rem; width:100%;}
.productsArea .table-01 .th-01,
.productsArea .table-01 .td-01 { padding-bottom:1.9em;}
.materialArea { margin-top:0.693rem;}
.materialArea .ttl-01:before { margin-right:0.882em;}
.materialArea .ttl-01:after { margin-left:0.882em;}
.materialArea .ttl-01 img { width:2.961rem;}
.materialArea .materials { margin-top:0.441rem;}
.materialArea .materials figure { margin-top:0.252rem;}
}

@media (max-width:700px) {
.productsArea .pic-01 { margin-top:-1.365rem;}
}

@media (max-width:650px) {
header.products .block-01 .ttl-01 > img { width:150%;}
header.products .exp-01 { margin-top:1.35em;}
}

@media (max-width:630px) {
header.products { padding-top:0.55rem;}
}

@media (max-width:600px) {
header.products { padding-top:0.78rem;}
header.products .block-01 img.pc { display:none;}
header.products .block-01 img.sp { display:block;}
header.products .block-01 .ttl-01 { top:auto; bottom:0;}
.productsArea .note-01:before,
.productsArea .note-03 strong:before { top:0;}
.productsArea .pic-01 { margin-top:-1.495rem;}
.productsArea .table-01 ul li:before { top:0.58em;}
.materialArea .ttl-01 img { width:3.2571rem;}
.materialArea .materials { margin-top:0.5292rem;}
}

@media (max-width:560px) {
header.products .block-01 .ttl-01 > img { width:165%;}
header.products .exp-01 { margin-top:1.6em;}
}

@media (max-width:500px) {
header.products .exp-01 { line-height:1.9;}
.productsArea .productName-01 { padding-top:0.7em; padding-bottom:0.8em;}
.productsArea .productName-01 strong { line-height:1.6;}
.productsArea .productName-01:before { width:100vw; min-width:320px;}
.productsArea .note-02 { padding-right:0.7em; padding-left:1.6em; letter-spacing:0.03em;}
.productsArea .pic-01 { margin-top:-1.82rem;}
.productsArea .table-01 * { letter-spacing:0.03em;}
.productsArea .table-01 .th-01 { width:9.8em; padding-left:1.3em;}
.productsArea .table-01 .td-01 { width:calc(100% - 9.8em); padding-left:1.3em;}
.materialArea .ttl-01 { width:100vw; min-width:320px;}
.materialArea .ttl-01 img { width:3.5532rem;}
.materialArea .materials figure { width:calc(95.30612% / 2);}
.materialArea .materials figure:nth-of-type(3) { margin-top:0.252rem;}
.materialArea .materials figure:nth-of-type(2n-1) { margin-right:4.69388%;}
.materialArea .materials figure:nth-of-type(2n) { margin-right:0;}
}

@media (max-width:450px) {
header.products { padding-top:1rem;}
header.products .block-01 { padding-bottom:0.25rem;}
header.products .block-01 .ttl-01 > img { width:190%;}
.productsArea { margin-top:0.61582rem;}
.materialArea .ttl-01 img { width:3.70125rem;}
}

@media (max-width:400px) {
header.products { padding-top:1.15rem;}
header.products .block-01 .ttl-01 > img { width:200%;}
header.products .exp-01 { line-height:1.85; margin-top:1.3em;}
.productsArea .note-02 { line-height:1.6;}
.productsArea .table-01 { display:block;}
.productsArea .table-01 .th-01,
.productsArea .table-01 .td-01 { width:100%; border-width:0;}
.productsArea .table-01 .th-01 { letter-spacing:0.05em; background:#e6e6e6; padding-top:0.3em; padding-bottom:0.4em; display:block;}
.productsArea .table-01 .td-01 { padding-top:0.6em; padding-bottom:1em;}
}

@media (max-width:350px) {
header.products { font-size:100px;}
.productsArea .note-02,
.productsArea .table-01 .th-01,
.productsArea .table-01 .td-01,
.materialArea .materials figcaption { font-size:11px;}
.productsArea .productName-01,
.productsArea .pic-01,
.productsArea .table-01 { font-size:12px;}
.materialArea .ttl-01 { font-size:12px;}
.productsArea .note-03 { font-size:10px;}
header.products .exp-01 { font-size:10px;}
}

@media (min-width:769px) and (max-width:1400px) {
header.products { font-size:calc(100px + ((1vw - 7.68px) * -14.2405));}
}

@media (min-width:351px) and (max-width:768px) {
header.products { font-size:calc(100px + ((1vw - 3.5px) * -21.5311));}
.productsArea .note-02,
.productsArea .table-01 .th-01,
.productsArea .table-01 .td-01,
.materialArea .materials figcaption { font-size:calc(11px + ((1vw - 3.5px) * 0.2392));}
.productsArea .productName-01,
.productsArea .pic-01,
.productsArea .table-01 { font-size:calc(12px + ((1vw - 3.5px) * 0.7177));}
.materialArea .ttl-01 { font-size:calc(12px + ((1vw - 3.5px) * 1.4354));}
.productsArea .note-03 { font-size:calc(10px + ((1vw - 3.5px) * 0.4785));}
header.products .exp-01 { font-size:calc(10px + ((1vw - 3.5px) * 0.7177));}
}

@media (min-width:769px) and (max-width:1222px) {
.productsArea .note-02,
.productsArea .note-03,
.productsArea .table-01 .th-01,
.productsArea .table-01 .td-01 { font-size:calc(12px + ((1vw - 7.68px) * 0.6608));}
.materialArea .materials figcaption { font-size:calc(12px + ((1vw - 7.68px) * 0.8811));}
header.products .exp-01,
.productsArea .productName-01,
.productsArea .pic-01,
.productsArea .table-01 { font-size:calc(13px + ((1vw - 7.68px) * 1.5419));}
.materialArea .ttl-01 { font-size:calc(18px + ((1vw - 7.68px) * 2.2026));}
}