@charset "UTF-8";
/*=============================================================
 04_modules
=============================================================*/
/*
#overview
タイトル

タイトル系モジュール
*/
.mod_tit01{ text-align:center; }
.mod_tit01 .ja{color:#fff; font-size:2.3rem;font-weight:700;letter-spacing:.08em;line-height:1.26;margin-bottom:5px; }
.mod_tit01 .en{color:#a8a8a8;display:inline-block;font-size:1.1rem;font-weight:700; letter-spacing:.2em; padding:0 22px;position:relative; }
.mod_tit01 .en:before{background:#ccc; content:"";display:block;height:1px;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%); width:15px; }
.mod_tit01 .en:after{background:#ccc; content:"";display:block;height:1px;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%); width:15px; }
/* #styleguide .mod_tit01 上部に日本語、下部に英語の見出し ``` <div class="heading mod_tit01"> <h2 class="ja" lang="ja">アロマの香りの<br class="viewSp">3つの特徴</h2> <p class="en" lang="en">FEATURE</p> </div> ``` */
/*
#overview
コンバージョン

コンバージョン部分
*/
.mod_cv01{ padding:39px 15px 40px; }
.mod_cv01 .inner .headingWrap .heading{margin:0 auto 15px;  width:200px; }
.mod_cv01 .inner .headingWrap .pic{margin:0 auto 20px;  width:220px; }
.mod_cv01 .inner .product .off{border:1px solid #192440; display:inline-block;margin-bottom:7px; padding:4px 9px 4px 8px; }
.mod_cv01 .inner .product .data{ margin-bottom:8px; }
.mod_cv01 .inner .product .data .txt{float:left;  letter-spacing:.08em; }
.mod_cv01 .inner .product .data .txt .name{ font-weight:500; }
.mod_cv01 .inner .product .data .txt .volume{color:#767676;  font-weight:500; }
.mod_cv01 .inner .product .data .price{color:#000c2b; float:right;font-family:"Oswald", sans-serif;font-size:3.6rem;line-height:1; }
.mod_cv01 .inner .product .data .price .off{border:1px solid #192440;color:#192440; display:inline-block;font-family:"Noto Sans Japanease",sans-serif;font-size:1.1rem;margin-right:10px; padding:4px 5px;vertical-align:middle; }
.mod_cv01 .inner .product .data .price img{display:inline-block;margin-left:4px; vertical-align:middle; width:21px; }
.mod_cv01 .inner .product .cart .number{background:url(../img/home/bg_select01.png) #f1f1f1 right center no-repeat;background-size:40px;border:1px solid #cbcbcb;-webkit-box-sizing:border-box;box-sizing:border-box;float:left;height:40px;padding-left:6.03%; width:32.76%;-webkit-appearance:none;-moz-appearance:none;appearance:none; }
.mod_cv01 .inner .product .cart .btn{float:right;  width:63.79%; }
.mod_cv01 .inner .product+.product{ margin-top:25px; }
/* #styleguide .mod_cv01 コンバージョン ``` <section class="cv01 mod_cv01"> <h2 class="heading"><img src="/img/home/tit_cv01_sp.png" alt="21種類の天然植物成分配合 安心シャンプー アロマの香"></h2> <p class="pic"><img src="/img/home/img_cv01_sp.png" alt="“皮フと毛髪とカラダに優しい” “家族全員が本当に安全で安心して使用できるシャンプー”"></p> <div class="product"> <div class="data cf"> <div class="txt"> <p class="name">アロマの香</p> <p class="volume">300ml × 1本</p> </div> <!-- / .txt --> <p class="price">2,800<img src="/img/home/txt_price01_sp.png" alt="円（税別）"></p> </div> <!-- / .data --> <div class="cart cf"> <select name="number" id="number01" class="number"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> <p class="btn"><img src="/img/home/btn_cart02_sp.png" alt="ご購入はこちら"></p> </div> <!-- / .cart --> </div> <!-- / .product --> <div class="product"> <p class="off">おまとめ買いで 10%OFF</p> <div class="data cf"> <div class="txt"> <p class="name">アロマの香</p> <p class="volume">300ml × 3本</p> </div> <!-- / .txt --> <p class="price">7,560<img src="/img/home/txt_price01_sp.png" alt="円（税別）"></p> </div> <!-- / .data --> <div class="cart cf"> <select name="number" id="number01" class="number"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> <p class="btn"><img src="/img/home/btn_cart02_sp.png" alt="ご購入はこちら"></p> </div> <!-- / .cart --> </div> <!-- / .product --> </section> <!-- / .cv01 --> ``` */

@media screen and (min-width: 600px){ .mod_tit01 .ja{ font-size:4rem;line-height:1;margin-bottom:16px; } .mod_tit01 .en{font-size:2rem;line-height:1;  padding:0 50px; } .mod_tit01 .en:before{ width:30px; } .mod_tit01 .en:after{ width:30px; } .mod_cv01{ padding:64px 0 52px; } .mod_cv01 .inner{margin:0 auto;  width:1040px; } .mod_cv01 .inner .headingWrap{ float:left; } .mod_cv01 .inner .headingWrap .heading{ margin:0 0 28px;width:325px; } .mod_cv01 .inner .headingWrap .pic{margin-bottom:0;  width:340px; } .mod_cv01 .inner .product{ float:right;margin-top:43px;width:542px; } .mod_cv01 .inner .product .off{border:2px solid #192440;  font-size:2rem;margin-bottom:-20px;padding:2px 10px; } .mod_cv01 .inner .product .data{ margin-bottom:21px; } .mod_cv01 .inner .product .data .txt{ font-size:1.6rem; } .mod_cv01 .inner .product .data .txt .name{ display:inline-block;margin-top:26px; } .mod_cv01 .inner .product .data .txt .volume{ display:inline-block;margin-left:20px; margin-top:26px; } .mod_cv01 .inner .product .data .price{ font-size:7rem; } .mod_cv01 .inner .product .data .price img{margin-left:10px;  width:32px; } .mod_cv01 .inner .product .cart .number{background-size:54px; height:54px; width:130px; } .mod_cv01 .inner .product .cart .btn{ width:400px; }  .mod_cv01 .inner .product .cart .btn a:hover{ opacity:.8; } .mod_cv01 .inner .product+.product{ margin-top:49px; } }