@charset "UTF-8";

/*======================
base
=======================*/
html{
height: 100%; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
font-size: 62.5%; /*-- ベースのフォントサイズを10pxに指定 各要素のフォントサイズ指定はremで --*/
}

body{
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.4em; /*-- bodyのフォントサイズを14pxに指定 --*/
font-weight: 400;
color: #094067;
display: flex; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
flex-direction: column; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
-webkit-text-size-adjust: 100%;/*-- iOSのSafariで意図せずフォントサイズが大きくなるのを防ぐ --*/
background: #FFFFFE;
user-select: none;
height: 100%;
}

header, footer {
flex: 0 0 auto; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
}

.contents {
flex: 1 0 auto; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
}

/*======================
common
=======================*/
/*
 テキストリンク
-----------------------*/
a {
text-decoration: none;
color: #f45d48;
}

a:link,
a:visited {
text-decoration: none;
color: #f45d48;
}

a:hover,
a:active {
text-decoration: underline;
color: #f45d48;
}

/*======================
 footer
=======================*/
footer {
width: 100%;
font-size: 1.1rem;
text-align: center;
padding: 1em;
}

/*======================
 header
=======================*/
header {
width: 100%;
text-align: center;
padding: 1em 0;
}

/*======================
 Form アイテムの共通設定
=======================*/
/*
 input
---------------------------*/
/* ラジオボタン */
input[type=radio] {
display: none;
}

.radio {
cursor: pointer;
display: flex;
white-space: nowrap;
align-items: center;
position: relative;
}

/* テキストボックス */
input[type="text"] {
width: 100%;
border: solid 1px #094067;
}

/* inputにフォーカスが当たっている時 */
input:focus {
border: 2px solid #ef4565;
}

/*
 プレースホルダーの色 
---------------------------*/
/* placeholderの文字色指定 */
input::placeholder,
textarea::placeholder {
color: #D2D4D8;
font-weight: normal;
}

/* IE (疑似クラスで指定) */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #D2D4D8;

}

/* Edge (疑似要素で指定)*/
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
color: #D2D4D8;
}



/*======================
 contents
=======================*/
.contents {
width: 100%;
}

/*.lead_txt {
font-size: 1.2rem;
margin: 1em auto 0;
text-align: center;
}*/

.headline {
color: #094067;
font-size: 1.2rem;
position: relative;
}

.headline::before {
content: "";
display: block;
width: 1em;
height: .2em;
background: #90b4ce;
position: absolute;
top: 50%;
left: -1.4em;
transform: translateY(-50%);
}

/*
 くらべる単位 
---------------------------*/
.set_unit {
display: flex;
align-items: center;
gap: 1em;
width: 90%;
max-width: 480px;
background: #F5F6F7;
margin: 1em auto 0;
padding: .5em;
}

.set_unit_box {
display: flex;
width: 100%;
justify-content: center;
gap: .5em;
}

.set_unit_item .radio::before {
content: '';
display: block;
width: 3em;
height: 3em;
background-size: cover;
border: solid 2px #094067;
background-color: #FFF;
border-radius: .5em;
opacity: .3;
}

.radio.solid::before {
background-image: url(../img/icon_solid.png);
}

.radio.liquid::before {
background-image: url(../img/icon_liquid.png);
}

.radio.toiletpaper::before {
background-image: url(../img/icon_toiletpaper.png);
}

.radio.tissue::before {
background-image: url(../img/icon_tissue.png);
}

.radio.apiece::before {
background-image: url(../img/icon_apiece.png);
}

.radio.percentoff::before {
background-image: url(../img/icon_percentoff.png);
}

input[type=radio]:checked + .radio::before {
opacity: 1;
}

/*
 比較 
---------------------------*/
.compare_box {
width: 90%;
max-width: 480px;
margin: 1em auto 0;
display: flex;
flex-wrap: wrap;
gap: 1em;
padding: 1em;
border: solid 1px #DCDFE5;
}

.item_info {
display: flex;
gap: 1em;
}

.item_info_detail {
display: flex;
gap: .2em;
}

.detail_title {
background: #094067;
padding: .1em .2em;
color: #FFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}

.detail_title label {
writing-mode: vertical-rl;
}

.detail_input {
display: flex;
gap: .2em;
}

.detail_input span {
font-size: 1.1rem;
margin: auto 0 0 0;
}


.item_info_detail input[type="text"] {
height: 100%;
text-align: right;
padding: .5em;
}

.item_info_detail input[name="pieces"] {
}

.result_price {
flex-grow: 1;
text-align: right;
padding: .8em .5em;
/*border: solid 1px #90b4ce;*/
background: #F5F6F7;
}

.result_price span {
font-size: 2rem;
white-space: nowrap;
display: inline-block;
margin: 0 .5em 0 0;
}

.result_button {
display: flex;
align-items: center;
background: #094067;
color: #FFF;
border-radius: .5em;
padding: 1em 1.3em;
cursor: pointer;
}

.item_liquid,
.item_apiece,
.item_toiletpaper,
.item_tissue,
.item_percentoff {
display: none;
}

.pieces {
display: none;
}

.lead_box {
width: 86%;
max-width: 460px;
margin: 1em auto 0;
display: flex;
align-items: center;
justify-content: space-between;
}

.lead_txt {
font-size: 1.2rem;
}

/*- まとめ買いモード -*/
.whole_box {
display: flex;
align-items: center;
gap: .5em;
margin: 0 0 0;
}

.whole_box .hd {
font-size: 1.1rem;
}

.whole_box_select {
display: flex;
justify-content: center;
align-items: center;
gap: .5em;
}

.whole_box_select > input {
display: none;
}

.whole_box_select > label {
display: block;
position: relative;
width: 2.5em;
height: 1em;
border-radius: 1em;
background-color: #CCC;
cursor: pointer;
}
.whole_box_select > input:checked + label {
background-color: #0A4067;
border: solid 1px #0A4067;
}
.whole_box_select > label::before {
position: absolute;
top: 50%;
left: 0.1em;
width: 1.3em;
height: 1.3em;
border-radius: calc(1em - 0.1em);
background-color: #FFF;
border: solid 1px #CCC;
transition: 0.5s;
transform: translateY(-50%);
content: "";
}
.whole_box_select > input:checked + label::before {
left: calc(100% - 1.4em);
}



/*
 追加ボタン
---------------------------*/
.add_compare_box {
display: block;
position: relative;
width: 3em;
height: 3em;
background: #094067;
border-radius: 50%;
margin: 1.5em auto;
cursor: pointer;
}
.add_compare_box:before, 
.add_compare_box:after {
display: block;
content: '';
background-color: #FFF;
border-radius: 100vw;
position: absolute;
width: 2em;
height: .3em;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.add_compare_box:before {
width: .3em;
height: 2em;
}