@charset "utf-8";
#wrap-head {
width: 100%;
height: 190px;
padding-top: 18pt;
margin-bottom: 18px;
background-image: url(/service/smartphone/kakuyasu/images/top_bg.png);
background-repeat: no-repeat;
background-position: top center;
}
#wrap-head #p3h {
width: 100%;
margin: 0 auto 20px;
padding: 8px 0;
text-align: center;
background-color: #d60a23;
font-size: 1.5em; /*24pt*/
color: #fff;
}
#wrap-head #p2h {
width: 100%;
margin: 0;
text-align: center;
font-size: 1.2em; /*16pt*/
color: #000;
}
#wrap-head #p1h {
width: 100%;
text-align: center;
font-size: 3.75em; /*60pt*/
font-weight: bold;
color: #000;
}

h2,h3,h4 {
font-size: 2.6rem;
padding: 12px 15px;
color: #3d3333;
background: #f2ecd6;
border-left: solid 5px #10678f;
margin-bottom: 20px;
}
.wrap-cheap1, .wrap-cheap2, .wrap-cheap3 {
width: 100%;
text-align: center;
height: auto;
}
.wrap-cheap1 {
margin-bottom: 20px;
}
.wrap-cheap3 {
margin: 0 10px 30px;
font-size: 1.3em;
line-height: 2em;
text-align: left;
}
.flex {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
align-items: center;
}

.listCheck li {
background: url(/service/smartphone/kakuyasu/images/ico_check.png) no-repeat 0 center;
padding-left: 32px;
margin-bottom: 8px;
}
/* フォントのスタイル */
.bold {font-weight: bold;}
.red {color: #d60a23;}
.text-center {text-align: center;}
.f14, .f24, .f36 {text-align: center;}
.f16 {
font-size: 1rem;
top: 20px;
}
.f24 {
font-size: 2em;
font-weight: bold;
}
.f36 {
font-size: 3em;
margin-left: 20px;
margin-right: 20px;
}
ol.wC3 { list-style-position: inside; }
ol.wC3 li { text-align: left; font-size: 1em; line-height: 2em;}
ol.wC3 li span { font-weight:bold; }
#netshop { width: 100%; display: flex; }
#netshop img {margin-bottom: 15px; }
#netshop a { text-decoration: none; color: #3d3333; }
#netshop .ns-item  { -webkit-flex: 1 1 auto; flex: 1 1 auto; width: auto; padding: 20px; margin: 20px auto; -webkit-transition: width 0.7s ease-out; transition: width 0.7s ease-out; }
#netshop .item-name { padding: 15px auto; margin-bottom: 10px; color: #3d3333; font-weight: bold; font-size: 1.2em; }
#netshop .item-setsumei { padding: 15px auto; margin-bottom: 10px; }
#netshop .item-kakaku { padding: 15px auto; } #netshop .item-kakaku span { color: #e72f36; font-size: 1.2em; }
.cp-btn {display: block; cursor: pointer; padding: 20px 50px; text-align: center; width: 60%; margin: 0 auto; border: 3px solid #000;  box-shadow: 0 0 6px #888; }
.cp-btn span { font-size: 2em; color:#fff; text-shadow: 0 0 3px #000; }
.cp-btn:link, .cp-btn:visited, .cp-btn:hover, .ap-btn:active {color: #fff; text-decoration: none;}
.cp-btn-yellow {background: linear-gradient(#ff9000,#ffee00);}
.cp-btn-green {background: linear-gradient(#1aa93b,#30B04E);}
.cp-btn-red {background: linear-gradient(#e72f36,#E8484E);}
.radius1 {
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.margin {margin-bottom: 20px;}

/* ======================================================= SmartPhone & iPhone Style ======================================================= */
@media only screen and (max-width: 767px) {
#wrap-head {
width: 100%;
height: auto;
padding: 0px;
background-size: 100%;
}
#wrap-head #p1h {
font-size: 1.6em;
}
#wrap-head #p2h,  #wrap-head #p3h {
width: 100%;
font-size: 1em;
color: #000;
background-color: transparent;
margin: 0 auto;
}
#wrap-head #p3h {
font-size: 0.8em;
}
h3, h2 {
background: none;
font-size: 1.3em;
}
h3 {
margin-left: 0;
margin-right: 0;
}
/* フォントのスタイル */
.f36 {
font-size: 1.2rem;
top: 10px;
}
.f24 {
font-size: 1rem;
}
.wrap-cheap1,.wrap-cheap2,.wrap-cheap3,#netshop {width: 95%; margin: 0 auto 30px;}
.wrap-cheap3,ol.wC3 li,.wrap-cheap p,#netshop .item-name,#netshop .item-setsumei {font-size: 1em; line-height: 1.4em;}/*スマホ文字サイズ*/
.cp-btn {padding: 10px 20px; width: 90%; margin: 20px auto;}
.cp-btn span { font-size: 1em; text-shadow: 0 0 3px #000; }
}

/* フワッと出てくる */
.fuwatAnime {
-webkit-animation-fill-mode: both;
-ms-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1.5s;
-ms-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-name: fuwatAnime;
-ms-animation-name: fuwatAnime;
animation-name: fuwatAnime;
visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fuwatAnime {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
/* 上へボタン */
#goTop {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 0.8em;
}
#goTop a {
background: #6CE7DD;
text-decoration: none;
color: #fff;
width: 100px;
padding: 20px 0;
text-align: center;
display: block;
border-radius: 6px;
}
#goTop a:hover {
text-decoration: none;
background: #bbeae6;
transition: 0.6s;
}