@charset "shift_jis";
/*==============================================
common
============================================= */
#header {
border-bottom: #ededed solid 1px;
}

#footer {
padding-top: 30px;}

.copyRight { border-top: 1px solid #ededed; }
.pageTop {
width: 40px;
height: 40px;
right: 10px;
background-size: 40px;
border-radius: 50%;
}

.pageTop,
.pconly {
display: none;}


.paragraph a:link,
.paragraph a:visited {
color: #006bce;
text-decoration: underline;}

.paragraph a:hover,
.paragraph a:active {
color: #2f8ce2;
text-decoration: none;}

.mtop8 {
margin-top: 8px;}

/*==============================================
看板
============================================= */
h1 {
padding-top: 94%;
margin: 0 auto;
background: url(https://img1.kakaku.k-img.com/images/fx/article/gaitame/sp_title.jpg) center top no-repeat;
background-size: 100%;
text-indent: -999em;
font-size: 0;}

.lead{margin: 25px;
padding: 25px;
background-color: #fff;}

.lead p{
font-size: 1.2rem !important;
line-height: 1.7;}

.lead p + p{
margin-top: 15px;
}

.lead p img {
float: left;
margin: 0 10px 0 0;
width: 140px !important;
}

/*----- contentsNavi -----*/
.contentsNavi {
padding: 35px 25px;
background-color: #0d4882;
color: #fff;}

.contentsNavi p {
padding-top: 5%;
text-indent: -999em;
background: url(https://img1.kakaku.k-img.com/images/fx/article/gaitame/anchor_tit.png) left top no-repeat;
background-size: 80px;}

.contentsNavi ul {
margin-top: 10px;
}

.contentsNavi li + li{
margin-top: 13px;}

.contentsNavi a {
display: block;
font-size: 1.2rem !important;
line-height: 1.6;
color: #fff;
padding-left: 25px;
background: url(https://img1.kakaku.k-img.com/images/fx/article/gaitame/anchor_arrow.svg) left 8px no-repeat;
background-size: 15px;}

.contentsNavi a .icon {
display: block;
font-weight: bold;
color: #2fc8e8;
font-size: 1.4rem;
margin-bottom: 1px;
}

/*==============================================
#mainContents
============================================= */
#mainContents {
background-color: #e5f3f7;}

#mainContents .paragraph,
#mainContents .paragraphIn p,
#mainContents .mainTitleWrap,
table th,table td{
font-feature-settings: "palt" 1;
letter-spacing: 0.05em;}

.paragraph {
padding: 40px 25px;}

#article02,
#article04,
#article06{
background-color: #d5ebf2;}

/*----- 文字 -----*/
.paragraph p {
font-size: 1.28rem;
line-height: 1.7;
margin-top: 20px;}

#article07 p,
#article07 .paragraphIn li{
font-size: 1.18rem;
line-height: 1.7;}

#article07 .paragraphIn > p:first-child {
margin-top: 0;}

.paragraph .cap{
font-size: 1.1rem;
line-height: 1.6 !important;
margin-top: 10px !important;}

span.cap {
margin-top: 5px !important;}

#mainContents p.cap.mtop10 {
margin-top: 10px;}

#mainContents ul.capS{
margin: 20px 25px 0;}

#mainContents ul.capS li {
text-indent: -1.5em;
padding-left: 1.5em;
font-size: 0.85rem;
line-height: 1.6 !important;}

#mainContents ul.capS li + li{
margin-top: 5px;}


#mainContents img {
width: 100%;}

.paragraph h2 {
font-size: 1.45rem;
line-height: 1.6;
font-weight: bold;
text-align: center;}

.paragraph h2 .icon {
background-color: #0d4882;
color: #fff;
display: inline-block;
margin: 0 auto;
padding: 6px 15px 3px;
margin-bottom: 10px;}

.paragraph h2 .text {
display: block;
margin-top: 8px;}

.paragraph h3{
margin-top: 40px;}

.paragraph h3 .subtit {
font-size: 1.4rem;
line-height: 1.7;
font-weight: bold;
background:linear-gradient(transparent 64%, #7fd3e6 64%);}

.paragraph h3 + p {
margin-top: 30px;
}

/*----- 特長 -----*/
.tokucyotit{
color: #0d4882;
font-size: 1.4rem;
font-weight: bold;
margin-top: 30px;}

.tokucyotit .icon {
display: block;
margin-bottom: 10px;}

.tokucyotit .icon img {
width: 100px !important;}


/*----- 画像 -----*/
.imgBox{
margin-top: 30px;}

.imgBox div {
overflow: hidden;}

.imgBox.col3 {
flex-wrap: wrap;
display: flex;}

.imgBox.col3 .floatL{
margin: 0 5px;
width: calc(100% / 3 - 10px);
display: block;}

.imgBox.w455 .floatR {
margin-top: 10px;}

imgBox + p{
margin-top: 30px;}




/*----- レビュー -----*/
.reviewBox {
background-color: #fff;
border-radius: 15px;
padding: 30px 20px 20px;
box-sizing: border-box;
margin-top: 40px;}

.reviewBox .title{
font-size: 1.4rem;
font-weight: bold;
color: #f2b100;
text-align: center;}

.balloonleft,
.balloonright{
margin: 20px auto 0;
display: table;}

.balloonleft .icon,
.balloonleft .text,
.balloonright .icon,
.balloonright .text {
display: table-cell;
vertical-align: top;}

.balloonleft .icon,
.balloonright .icon{
width: 64px;}

.balloonleft .icon img,
.balloonright .icon img{width: 100%;}

.balloonleft .text{padding-left: 20px;}
.balloonright .text{padding-right: 20px;}


/*  吹き出し（左） */
.balloonleft .balloon {
position: relative;
display: inline-block;
padding: 15px;
min-width: 120px;
max-width: 100%;
background: #ffedbc;
border-radius: 10px;
box-sizing: border-box;
}

.balloonleft .balloon:before {
content: "";
position: absolute;
top: 20%;
left: -20px;
margin-top: -15px;
border: 10px solid transparent;
border-right: 10px solid #ffedbc;}

.balloonleft .balloon p {
margin: 0;
padding: 0;
font-size: 1.2rem;}


/*  吹き出し（右） */
.balloonright .balloon {
position: relative;
display: inline-block;
padding: 15px;
min-width: 120px;
max-width: 100%;
background: #ffedbc;
border-radius: 10px;
box-sizing: border-box;
}

.balloonright .balloon:before  {
content: "";
position: absolute;
top: 20%;
left: 100%;
margin-top: -15px;
border: 10px solid transparent;
border-left: 10px solid #ffedbc;}

.balloonright .balloon p {
margin: 0;
padding: 0;
font-size: 1.2rem;}

/*----- 通貨 -----*/
.flagbox {
box-sizing: border-box;
padding: 10px;
flex-wrap: wrap;
display: flex;
background-color: #fff;
margin-top: 30px;}

.flagbox div{
padding: 10px;
width: calc(100% / 2);
box-sizing: border-box;}

.flagbox p {
font-size: 1rem !important;
text-align: center;}

.flagbox img {width: 100% !important;}

.flagbox img + p{
margin-top: 5px;} 


/*----- シュミレーター -----*/
.simulatorbox{
margin-top: 30px;}

.simulatorbox p {
font-size: 1.28rem !important;
font-weight: bold;}

.simulatorbox p + p {
margin-top: 3px !important;}

.simulatorbox .icon {
line-height: 1;
display: inline-block;
background-color: #0d4882;
padding: 7px 10px 5px;
color: #fff;
margin-right: 10px;}

.simulatorbox .text {
margin-top: 5px;
display: block;}

.simulatorbox a {
font-weight: normal;
display: block;
font-size: 1.18rem;
line-height: 1.6;
word-wrap:break-word;}


/*----- campaign -----*/
.cpbox{
background: #fff url(https://img1.kakaku.k-img.com/images/fx/article/gaitame/cp_bg.png) left top no-repeat;
background-size: 70px;
box-sizing: border-box;
padding: 25px;
margin-top: 40px;}

.cpbox + .cpbox {
margin-top: 20px;}

.cp01 .img,
.cp02 .img{
width: 76%;
margin: 0 auto;}


.cpbox ul {
margin-top: 30px;}

.cpbox li {
font-size: 1.2rem;
line-height: 1.6;}

.cpbox li span.icon{
font-weight: bold;
display: inline-block;}

/*.cpbox .cp01 li span.icon,*/
.cpbox .cp02 li span.icon{
font-weight: bold;
display: block;}

.cpbox li + li {
margin-top: 10px;
}

.cpbox + p {
margin-top: 30px;}

#article07 {
padding-bottom: 120px;
}

#article07 li {
text-indent: -1em;
padding-left: 1em;}

#article07 li + li {
margin-top: 5px;
}

#article07 p strong {
padding-bottom: 10px;
display: block;
}


/*----　table　----*/
table{
width: 100%;
margin: 30px auto 0;
border-collapse:separate;
border-spacing:0;
box-sizing: border-box;
border: #424242 1px solid;}

.blue{background-color:#16b3d4; font-size: 1.2rem !important;}
.blue02{background-color:#d0f0f6; }
.gray{background-color:#9e9e9e; font-size: 1.2rem !important;}
.gray02{background-color:#eee; }

table th,
table td{
padding: 3px;
box-sizing: border-box;
font-size: 1.1rem !important;
line-height: 1.6;
text-align: center;
background-color: #fff;}

table th {
width: 24%;
background-color:#e4e4e4;
border-right: #424242 1px solid;
border-bottom: #424242 1px solid;
word-break: break-all}

table td.name{
color: #fff;
font-size: 20px;
font-weight: bold;}

table td{
width: 38%;
border-bottom: #424242 1px solid;}
table th +th,
table td + td {border-left: #424242 1px solid;}

table .end{border-bottom:none;}

/*----- .scroll -----*/
.scroll {
overflow: auto;
padding-bottom: 10px;
}
.scroll::-webkit-scrollbar{
height: 5px;
}
.scroll::-webkit-scrollbar-track{
background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {
background: #BCBCBC;
}



/*----- bnr -----*/
.bnrWrap {
position: fixed;
z-index: 2;
opacity: 0;
transform: translateY(120px);
width: 100%;
background-color: #16b3d4;
box-shadow: 0px -10px 0px 0px rgba(0,0,0,0.1);
transition: box-shadow .2s;
box-sizing: border-box;
}

.bnrWrap.UpMove {
animation: UpAnimeSp 0.5s forwards;
}
.bnrWrap.DownMove {
animation: DownAnimeSp 0.5s forwards;
}
.bnrWrap.end {
box-shadow: 0px -10px 0px 0px rgba(0,0,0,0.00);
}
.bnrWrap a {
display: block;
}
.bnrWrap {
height: 85px;
transform: translateY(120px);
}
.bnrWrap a {
height: auto;
padding: 0;
}
.bnrWrap.UpMove {
animation: UpAnimePc 0.5s forwards;
}
.bnrWrap.DownMove {
animation: DownAnimePc 0.5s forwards;
}

.bnr {
box-sizing: border-box;
text-align: center;
}
.bnr img {
width: 100%;
}
/* PC版　上に上がる動き　*/

@keyframes UpAnimeSp {
from {
opacity: 0;
transform: translateY(120px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*　PC版　下に下がる動き　*/

@keyframes DownAnimeSp {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(120px);
}
}
/* PC版　上に上がる動き　*/

@keyframes UpAnimePc {
from {
opacity: 0;
transform: translateY(120px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*　PC版　下に下がる動き　*/

@keyframes DownAnimePc {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(120px);
}
}