@charset "euc-jp";
/* CSS Document */


/* 見出し文字の上に斜体緑文字 */
.mainproduct-pickup{position: relative; }
.mainproduct-pickup::before { content: attr(data-en); display: block; color: #1dcc89; font-size: 1.2rem; font-style: italic; text-transform: uppercase; margin-top:2rem; }





/* 画像3＋丸囲みコメント記事SP用 float仕様 */
@media screen and (max-width: 767px) {
.mainproduct__threeimage{width:100%;}
.main_image { width:100%; height:auto; display:inline-block; vertical-align:  bottom; box-sizing: border-box; }
.main_image img {width:100%;}
.main_image_copy { width:100%; padding:1rem 2rem; display:  inline-block; vertical-align:top; box-sizing: border-box; font-size:0.857rem; line-height:1.6; }
.sub_image_left { width:60%; height:auto; display: inline-block; vertical-align:top; box-sizing: border-box; margin-top:1rem; }
.sub_image_left img { width:100%; }
.sub_copy_right { width:40%; height:auto; padding:20% 1rem 20% 1rem; display: inline-block; text-align:left; vertical-align:bottom; box-sizing: border-box; margin-top:1rem; line-height:1.95; float:right; }
.sub_image_right { width:60%; height:auto; display:  inline-block; vertical-align:top; box-sizing: border-box; margin-top:1rem; }
.sub_image_right img { width:100%; }
.sub_copy_left { width:40%; height:auto; padding:20% 1rem 20% 1rem; display: inline-block; text-align:left; vertical-align:bottom; box-sizing: border-box; margin-top:1rem; line-height:1.95; float:left; }
.sub_copy_right_circle p{ text-align:left; align-items:center; text-align:justify; color:#333; font-size:0.857rem; line-height:1.6; }
.sub_copy_left_circle p{ text-align:left; align-items:center; text-align:justify; color:#333; font-size:0.857rem; line-height:1.6; }
}


/* 画像3＋丸囲みコメント記事PC用 grid仕様 */
@media screen and (min-width: 768px){
.mainproduct__threeimage { display: grid; width:100%; max-width:800px; grid-template-columns: 3fr repeat(3, 1fr); grid-template-rows: repeat(6, 1fr); grid-column-gap: 2rem; grid-row-gap: 1rem; }
.main_image { grid-area: 1 / 1 / 6 / 2; }
.main_image_copy { grid-area: 6 / 1 / 7 / 2; }
.sub_image_left { grid-area: 1 / 2 / 4 / 4; }
.sub_copy_right { grid-area: 1 / 4 / 4 / 5; position:relative; }
.sub_copy_left { grid-area: 4 / 2 / 7 / 3; position:relative; }
.sub_image_right { grid-area: 4 / 3 / 7 / 5; }
.sub_image_left img { width:100%; }
.sub_image_right img { width:100%; }
.sub_copy_right_circle { position:absolute; aspect-ratio:1 /1; text-align:center; border:solid #666 1px; border-radius:50%; height:auto; padding:2.4em 1em; box-sizing: border-box; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; }
.sub_copy_left_circle { position:absolute; aspect-ratio:1 /1; text-align:center; border:solid #666 1px; border-radius:50%; height:auto; padding:2.4em 1em; box-sizing: border-box; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; }
.sub_copy_right_circle::before { content: ""; position:absolute; margin:auto; top:0; bottom:0; left:-52px; width:52px; height:1px; background:#666; }
.sub_copy_left_circle::after { content: ""; position:absolute; margin:auto; top:0; bottom:0; right:-52px; width:52px; height:1px; background:#666; }
.sub_copy_right_circle p{ text-align:left; align-items:center; text-align:justify; color:#333; font-size:0.9rem; line-height:1.3; }
.sub_copy_left_circle p{ text-align:left; align-items:center; text-align:justify; color:#333; font-size:0.9rem; line-height:1.3; }	
}

/* 改造用・左画像＋右文字＋商品ページボタン記事 PCはgrid仕様 */
.feature-wrapper .mainproduct article header{padding:0 2rem;margin-bottom:1rem}
.feature-wrapper .mainproduct article header p.mainproduct-categoryIcon{padding:1rem 0}
.feature-wrapper .mainproduct article header p.mainproduct-categoryName{font-size:1.2rem;color:#aaa;background-color:#fff;padding:0.2em 0;border:1px solid #aaa;}
.feature-wrapper .mainproduct article .mainproduct-copy{margin-bottom:1.5rem}
.feature-wrapper .mainproduct article .mainproduct-copy h3{text-align:center;font-size:1.143rem;margin:0.25em 0}
.feature-wrapper .mainproduct article .mainproduct-copy p{text-align:center;font-size:1rem}

@media screen and (min-width: 768px){
.feature-wrapper .mainproduct article.mainproduct__oneimage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;grid-column-gap:2rem;}
.feature-wrapper .mainproduct article.mainproduct__oneimage .mainproduct__oneimage__header{grid-column:2 / 3;grid-row:2 / 3;margin-bottom:0;margin-top:2rem;align-self: start;}
.feature-wrapper .mainproduct article.mainproduct__oneimage .mainproduct__oneimage__copy{grid-column:2 / 3;grid-row:1 / 2;align-self:end;}
.feature-wrapper .mainproduct article.mainproduct__oneimage .mainproduct__oneimage__image{grid-column:1 / 2;grid-row:1 / 3}}