/*___________ 【/reset.css】 ___________ */ #shopify-section-header,#floatBnr { display:none; } div#ht-tms-dropdown__selected { display: none; } /**************************************** commonstyle *****************************************/ .section01 { width: 100%; height: 100%; /* 画面全体の高さ */ background: linear-gradient(to bottom, #5bb2ac, #99cccc, #fff8b0, #5bb2ac); padding:0 0 40px 0; } .section02 { position: relative; width: 100%; height: 100%; background: white; /* 背景を白に */ overflow: hidden; padding:0 0 40px;} .bubble { position: absolute; bottom: -50px; width: 30px; height: 30px; background: url('https://cdn.shopify.com/s/files/1/0567/8245/4946/files/bubble.png?v=1742184895') no-repeat center/contain; /* 泡画像を適用 */ opacity: 0.8; animation: floatUp linear infinite; } @keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: 0.8; } 100% { transform: translateY(-110vh) scale(1.2); /* 少し大きくしながら上がる */ opacity: 0; } } .section03 { width: 100%; height: 100%; /* 画面全体の高さ */ background: #ffffe5; padding:40px 0; } .section04 { position: relative; width: 100%; height: 100%; background: #e7f5fb; overflow: hidden; padding:0 0 40px 0; } .section05 { width: 100%; height: 100%; /* 画面全体の高さ */ background: linear-gradient(to bottom, #7ab69c, #b8d3b2, #fff8b0, #7ab69c); padding:40px 0; } .section06 { width: 100%; height: 100%; /* 画面全体の高さ */ background: linear-gradient(to bottom, #ffffff, #ffffff, #d2e8eb, #7abdc6); } /* アニメーション設定 */ .scr-target { opacity: 0; transform: translate3d(0, 30px, 0); } .scr-target.is-active { opacity: 1; transform: translate3d(0, 0, 0); transition: 1s; } #beige{ background-color:#F8F0E0; } #brown{ background-color:#383134; } ? /*___________ 【commonstyle】 ___________ */ /*スマホ用とPC用に自動で画像のサイズを縮小・拡大*/ /**/img { max-width: 100%; height:auto; } /*■■■■■オンマウスで画像が透過■■■■■*/ a:hover img { opacity: 0.6; filter: alpha(opacity=60); } { opacity: 0.6; filter: alpha(opacity=60); } /*オンマウスで画像が透過させない*/ a:hover img.opa100 { opacity: 1.0; filter: alpha(opacity=100); } /*■■■■■float関連■■■■■*/ .l{float: left;}/*float　left*/ .r{float: right;}/*float　right*/ .c{clear: both;}/*clear　both*/ /*■■■■■font関連　揃え関連■■■■■*/ .b{font-weight: bold;}/*太字*/ .red{color: red;}/*赤字*/ .tyuigaki { margin-left: 1em; text-indent: -1em; }/*注意書き*/ .center{ text-align:center;}/*中央揃え*/ .textr{ text-align:right;}/*右揃え*/ .textl{ text-align:left;}/*左揃え*/ .bottom{ position : absolute ; bottom : 0 ;}/*下揃え*/ @media screen and (max-width: 735px) { .center_switch {text-align:center;} .textr_switch {text-align:right;} .textl_switch {text-align:left;} } /* ※.bottomの使用前提：親要素をposition:relative;にしてください。 */ .top{vertical-align:top;}/*上揃え*/ .middle{vertical-align:middle;}/*中央揃え*/ .mannaka { margin: auto; }/*真ん中に配置*/ .mannaka img { display: block; margin: auto; } .mark_y{background: none repeat scroll 0 0 #ffff00;}/*マーカー*/ .ul{text-decoration: underline;}/*アンダーライン*/ .waku_wh {text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;} .waku_non {none;} /*■■■■■position プロパティを使用した位置の調整■■■■■*/ .mother {position: relative;z-index: 1;} .nest1 {position: absolute;z-index: 2;}/*最下層*/ .nest2 {position: absolute;z-index: 3;} .nest3 {position: absolute;z-index: 4;} /* ※nestのboxに対して topなどをあてる*/ /*■■■■■z-index レイヤーの調整■■■■■*/ .zi0 {z-index: 0;} .zi1 {z-index: 1;} .zi2 {z-index: 2;} .zi3 {z-index: 3;} .zi4 {z-index: 4;} .zi5 {z-index: 5;} .zi6 {z-index: 6;} .zi7 {z-index: 7;} .zi8 {z-index: 8;} .zi9 {z-index: 9;} .zi10 {z-index: 10;} /*■■■■■枠線■■■■■*/ .box{} .box_bg{} /*■■■■■マージンによる余白（px）■■■■■*/ .mt10{margin-top:10px;} .mt20{margin-top:20px;} .mt30{margin-top:30px;} .mt40{margin-top:40px;} .mt50{margin-top:50px;} .mt60{margin-top:60px;} .mt70{margin-top:70px;} .mt80{margin-top:80px;} .mt90{margin-top:90px;} .mt100{margin-top:100px;} .mb10{margin-bottom:10px;} .mb20{margin-bottom:20px;} .mb30{margin-bottom:30px;} .mb40{margin-bottom:40px;} .mb50{margin-bottom:50px;} .mb60{margin-bottom:60px;} .mb70{margin-bottom:70px;} .mb80{margin-bottom:80px;} .mb90{margin-bottom:90px;} .mb100{margin-bottom:100px;} .ml10{margin-left:10px;} .ml20{margin-left:20px;} .ml30{margin-left:30px;} .ml40{margin-left:40px;} .ml50{margin-left:50px;} .ml60{margin-left:60px;} .ml70{margin-left:70px;} .ml80{margin-left:80px;} .ml90{margin-left:90px;} .ml100{margin-left:100px;} .mr10{margin-right:10px;} .mr20{margin-right:20px;} .mr30{margin-right:30px;} .mr40{margin-right:40px;} .mr50{margin-right:50px;} .mr60{margin-right:60px;} .mr70{margin-right:70px;} .mr80{margin-right:80px;} .mr90{margin-right:90px;} .mr100{margin-right:100px;} /*■■■■■マージンによる余白（%）■■■■■*/ .mt1p{margin-top:1%;} .mt2p{margin-top:2%;} .mt3p{margin-top:3%;} .mt4p{margin-top:4%;} .mt5p{margin-top:5%;} .mt6p{margin-top:6%;} .mt7p{margin-top:7%;} .mt8p{margin-top:8%;} .mt9p{margin-top:9%;} .mt10p{margin-top:10%;} .mb1p{margin-bottom:1%;} .mb2p{margin-bottom:2%;} .mb3p{margin-bottom:3%;} .mb4p{margin-bottom:4%;} .mb5p{margin-bottom:5%;} .mb6p{margin-bottom:6%;} .mb7p{margin-bottom:7%;} .mb8p{margin-bottom:8%;} .mb9p{margin-bottom:9%;} .mb10p{margin-bottom:10%;} .ml1p{margin-left:1%;} .ml2p{margin-left:2%;} .ml3p{margin-left:3%;} .ml4p{margin-left:4%;} .ml5p{margin-left:5%;} .ml6p{margin-left:6%;} .ml7p{margin-left:7%;} .ml8p{margin-left:8%;} .ml9p{margin-left:9%;} .ml10p{margin-left:10%;} .mr1p{margin-right:1%;} .mr2p{margin-right:2%;} .mr3p{margin-right:3%;} .mr4p{margin-right:4%;} .mr5p{margin-right:5%;} .mr6p{margin-right:6%;} .mr7p{margin-right:7%;} .mr8p{margin-right:8%;} .mr9p{margin-right:9%;} .mr10p{margin-right:10%;} /*■■■■■paddingによる余白(px)■■■■■*/ .pt10{padding-top:10px;} .pt20{padding-top:20px;} .pt30{padding-top:30px;} .pt40{padding-top:40px;} .pt50{padding-top:50px;} .pt60{padding-top:60px;} .pt70{padding-top:70px;} .pt80{padding-top:80px;} .pt90{padding-top:90px;} .pt100{padding-top:100px;} .pb10{padding-bottom:10px;} .pb20{padding-bottom:20px;} .pb30{padding-bottom:30px;} .pb40{padding-bottom:40px;} .pb50{padding-bottom:50px;} .pb60{padding-bottom:60px;} .pb70{padding-bottom:70px;} .pb80{padding-bottom:80px;} .pb90{padding-bottom:90px;} .pb100{padding-bottom:100px;} .pl10{padding-left:10px;} .pl20{padding-left:20px;} .pl30{padding-left:30px;} .pl40{padding-left:40px;} .pl50{padding-left:50px;} .pl60{padding-left:60px;} .pl70{padding-left:70px;} .pl80{padding-left:80px;} .pl90{padding-left:90px;} .pl100{padding-left:100px;} .pr10{padding-right:10px;} .pr20{padding-right:20px;} .pr30{padding-right:30px;} .pr40{padding-right:40px;} .pr50{padding-right:50px;} .pr60{padding-right:60px;} .pr70{padding-right:70px;} .pr80{padding-right:80px;} .pr90{padding-right:90px;} .pr100{padding-right:100px;} /*■■■■■paddingによる余白(%)■■■■■*/ .pt1p{padding-top:1%;} .pt2p{padding-top:2%;} .pt3p{padding-top:3%;} .pt4p{padding-top:4%;} .pt5p{padding-top:5%;} .pt6p{padding-top:6%;} .pt7p{padding-top:7%;} .pt8p{padding-top:8%;} .pt9p{padding-top:9%;} .pt10p{padding-top:10%;} .pb1p{padding-bottom:1%;} .pb2p{padding-bottom:2%;} .pb3p{padding-bottom:3%;} .pb4p{padding-bottom:4%;} .pb5p{padding-bottom:5%;} .pb6p{padding-bottom:6%;} .pb7p{padding-bottom:7%;} .pb8p{padding-bottom:8%;} .pb9p{padding-bottom:9%;} .pb10p{padding-bottom:10%;} .pl1p{padding-left:1%;} .pl2p{padding-left:2%;} .pl3p{padding-left:3%;} .pl4p{padding-left:4%;} .pl5p{padding-left:5%;} .pl6p{padding-left:6%;} .pl7p{padding-left:7%;} .pl8p{padding-left:8%;} .pl9p{padding-left:9%;} .pl10p{padding-left:10%;} .pr1p{padding-right:1%;} .pr2p{padding-right:2%;} .pr3p{padding-right:3%;} .pr4p{padding-right:4%;} .pr5p{padding-right:5%;} .pr6p{padding-right:6%;} .pr7p{padding-right:7%;} .pr8p{padding-right:8%;} .pr9p{padding-right:9%;} .pr10p{padding-right:10%;} /* ■■■■■clearfix ■■■■■*/ .clearfix{zoom:1;} .clearfix:after{ content:"."; display:block; height:0px; clear:both; visibility:hidden; font-size: 0.1em; } /* WinIE7 MacIE5 */ .clearfix{ display:inline-table; zoom:100%; } /* WinIE5-6 */ /* Hides from IE-mac \*/ * html html .clearfix{ height:1px; } .clearfix{display:block;} /*■クリアフィックスによるカラム分け■*/ .twocolumns{width: 100%;} .threecolumns{width: 100%;} .fourcolumns{width: 100%;} .twocolumns .l{width:50%;} .threecolumns .l{width:33.3%;} .fourcolumns .l{width:25%;} .twocolumns .r{width:50%;} .threecolumns .r{width:33.3%;} .fourcolumns .r{width:25%;} /*■フォントサイズ■*/ .fs_s{font-size: 1.4em;} .fs_m{font-size: 1.6em;} .fs_l{font-size: 1.8em;} .fs05rem{font-size:0.5rem;} .fs06rem{font-size:0.6rem;} .fs07rem{font-size:0.7rem;} .fs08rem{font-size:0.8rem;} .fs09rem{font-size:0.9rem;} .fs10rem{font-size:1.0rem;} .fs11rem{font-size:1.1rem;} .fs12rem{font-size:1.2rem;} .fs13rem{font-size:1.3rem;} .fs14rem{font-size:1.4rem;} .fs15rem{font-size:1.5rem;} .fs16rem{font-size:1.6rem;} .fs17rem{font-size:1.7rem;} .fs18rem{font-size:1.8rem;} .fs19rem{font-size:1.9rem;} .fs20rem{font-size:2.0rem;} .readbox{padding:20px;} .readtxt{font-size:1.4rem;text-align: left; color:#000000;} .copytxt{ font-size:1.6rem; font-weight: bold;} .ttltxt{ font-size:1.8rem; font-weight: bold; color:#000000; margin:10px 0;} /*■flexbox■*/ .flexbox_c { display: flex; justify-content: center; }/*中央揃え*/ .flexbox_sa { display: flex; justify-content: space-around; }/*均等揃え*/ .flexbox_sb { display: flex; justify-content: space-between; }/*両端揃え*/ .flexbox_fs { display: flex; justify-content: flex-start; }/*左揃え*/ .flexbox_orikaeshi { flex-wrap: wrap; }/*折返しあり*/ .column1_box .item {width: 100%;} .column2_box .item {width: 49%;} .column3_box .item {width: 32%;} .column4_box .item {width: 23%;} /*■flexbox■*/ /*親要素*/ .flbox {display: flex;} /*↓↓用途に応じて追記↓↓*/ .fbox-wrap {flex-wrap: wrap}/*子要素を折り返し、複数行に上から下へ並べる*/ .fbox-column {flex-direction: column}/*子要素を上から下に配置*/ .fbox-flex-end {justify-content: flex-end;}/*行末から配置。右揃え。*/ .fbox-center {justify-content: center;}/*中央揃え*/ .fbox-space-between {justify-content: space-between;}/*最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置*/ .fbox-space-around {justify-content: space-around;}/*両端の子要素も含め、均等に間隔をあけて配置*/ /*子要素*/ .fbox-column1_box .item {width: 100%;} .fbox-column2_box .item {width: 49%;} .fbox-column3_box .item {width: 32%;} .fbox-column4_box .item {width: 23%;} .fbox-column5_box .item {width: 19%;} .fbox-column2_1 {flex:0 1 50%;} .fbox-column3_1 {flex:0 1 32%;} .fbox-column3_2 {flex:2 0 32%;} .fbox-column4_1 {flex:0 1 23%;} .fbox-column4_2 {flex:2 0 23%;} .fbox-column4_3 {flex:3 0 23%;} .fbox-column5_1 {flex:0 1 19%;} .fbox-column5_2 {flex:2 0 19%;} .fbox-column5_3 {flex:3 0 19%;} .fbox-column5_4 {flex:4 0 19%;} .flex_order1{order:1;} .flex_order2{order:2;} .flex_order3{order:3;} .flex_order4{order:4;} .flex_order5{order:5;} .flex_order6{order:6;} .flex_order7{order:7;} .flex_order8{order:8;} .flex_order9{order:9;} .flex_order10{order:10;} /*画面サイズによるスイッチ*/ @media screen and (max-width: 735px) { .flexbox.switchFbox-wrap {flex-wrap: wrap} .flexbox.switchFbox-row {flex-direction: row} .flexbox.switchFbox-column {flex-direction: column} .flexbox.switchFbox-flex-end {justify-content: flex-end;} .flexbox.switchFbox-center {justify-content: center;} .flexbox.switchFbox-space-between {justify-content: space-between;} .flexbox.switchFbox-space-around {justify-content: space-around;} .flexbox .switchflex_order1{order:1;} .flexbox .switchflex_order2{order:2;} .flexbox .switchflex_order3{order:3;} .flexbox .switchflex_order4{order:4;} .flexbox .switchflex_order5{order:5;} .flexbox .switchflex_order6{order:6;} .flexbox .switchflex_order7{order:7;} .flexbox .switchflex_order8{order:8;} .flexbox .switchflex_order9{order:9;} .flexbox .switchflex_order10{order:10;} .is-sp_w25p{width: 25%;} .is-sp_w50p{width: 50%;} .is-sp_w75p{width: 75%;} } /* pc */ @media screen and (min-width: 736px) { .is-sp { display: none; } } /* sp */ @media screen and (max-width: 735px) { .is-pc { display: none; } } /*購入ボタン -------------------------------------*/ #floatBnr{ display:none; } .buybtn1 { position: fixed !important; bottom: 0; right: 0; z-index: 995; } .buybtn1 a { display: block; width: 140px; padding: 10px 5px; text-align: center; } .buybtn1 a:hover { opacity: 0.8 ; } #page-lp .buybtn_pc { text-align: center; } #page-lp .buybtn_pc a:hover { opacity: 0.8 ; } .page-lp img {width:100%;} /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .sp { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 768px){ .pc { display: none !important; } .sp { display: block !important; } } /*___________ 【/commonstyle】 ___________ */ /* pc */ @media screen and (min-width: 736px) { .page-lp { padding: 0; } } /* sp */ @media screen and (max-width: 735px) { .page-lp { color:#fff; width:100%;} #floatBnr a { padding: 5px; } } .main-content{} .main img {width:100%;} .js-focus-hidden{} .container{} #prime-review-favorites-float{ display: none; } /* アニメーション設定 */ .scr-target { opacity: 0; transform: translate3d(0, 30px, 0); } .scr-target.is-active { opacity: 1; transform: translate3d(0, 0, 0); transition: 1s; } -->