@charset "shift_jis";
/*==============================================
common
============================================= */
.sponly {display: none;}

#header {
border-bottom: #ededed solid 1px;
}

.headerIn,
.footerIn {
width: 930px;
margin: 0 auto;
}
.copyRight { border-top: 1px solid #ededed; }
#footer { padding-top: 20px; }

.pageTop { border-radius: 50%; }

.mtop8 {
margin-top: 8px;}



/*---- 文字　 ----*/
#mainContents {
font-family:'游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-feature-settings: "palt" 1;
letter-spacing: 0.03em;
background-color: #e8f4f8;}

#mainContents p {
font-size:  139%;
line-height: 1.9;}

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

#mainContents p + p,
#mainContents span.cap + p{
margin-top: 30px;
}

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

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

#mainContents .cap{
font-size: 15px;
line-height: 1.8 !important;
display: block;}

#mainContents ul.capS{
margin: 0 auto;
padding-bottom: 50px;
width: 930px;}

#mainContents ul.capS li {
font-size: 13px;
line-height: 1.8 !important;
text-indent: -1em;
padding-left: 1em;}

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

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

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

/*==============================================
看板
============================================= */
.mainTitleWrap {
background: url(https://img1.kakaku.k-img.com/images/fx/article/gaitame/top_bg.png) center top repeat-x;}

.mainTitle {
/*width: 930px;*/
margin: 0 auto;
padding: 45px 0 0;}

h1 {
width: 1154px;
height: 520px;
margin: 0 auto;
background: url(https://img1.kakaku.k-img.com/images/fx/article/gaitame/pc_title.png) center top repeat-x;
text-indent: -999em;
font-size: 0;
z-index: 1;}

.lead {
width: 930px;
margin: 0 auto;
box-sizing: border-box;
background-color: #fff;
padding: 45px;}

.lead p span{
display: table-cell;
vertical-align: middle;}

.lead p img {
margin: 0 20px 0 0;
}


/*----- contentsNavi -----*/
.contentsNavi{
margin-top: 90px;
background-color: #0d4882;
padding: 40px 0;}

.contentsNavi div {
width: 930px;
margin: 0 auto;}

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

.contentsNavi li {
margin-top: 20px;}

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

.contentsNavi a:hover {
color: #2fc8e8;}

.contentsNavi a .icon {
display: inline-block;
width: 140px;
font-weight: bold;
color: #2fc8e8;
}


/*==============================================
#mainContents
============================================= */

.paragraph {
padding: 100px 0;
}

.paragraphIn {
width: 930px;
margin: 50px auto 0;}

#article07 .paragraphIn {
margin: 0 auto;}

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

.paragraph h2{
width: 930px;
margin: 0 auto 0;
font-size: 30px;
line-height: 1.7;
font-weight: bold;
text-align: center;}

.paragraph h2 .icon {
display: inline-block;
padding: 8px 30px 5px;
color: #fff;
background-color: #0d4882;}

.paragraph h2 .text {
display: block;
padding-top: 30px;}

.paragraph h3{
text-align: center;
margin-top: 90px;}

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

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

/*----- 特長 -----*/
.tokucyotit{
color: #0d4882;
font-size: 24px;
font-weight: bold;
margin: 50px 0 25px;}

.tokucyotit .icon {
display: inline-block;
width: 132px;
margin-right: 20px;}

.tokucyotit .icon img {
width: 100%;}


/*----- 画像 -----*/
.w535 {
width: 535px;}

.imgBox{
margin: 80px auto 0;}

.imgBox div{
overflow: hidden;}

.imgBox img{
width: 100%;}

.imgBox .floatL {
width: 590px;}

.imgBox .floatR {
width: 320px;}

.imgBox.w455 .floatL,
.imgBox.w455 .floatR{
width: 455px;}

.imgBox.col3 {width: 715px;}

.imgBox.col3 .floatL {width: 225px;}
.imgBox.col3 .floatL + .floatL {
margin-left: 20px;}


.imgBox div + .cap{
margin-top: 10px;}

.paragraph .imgBox + p{
margin-top: 80px;}


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

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

.balloonleft,
.balloonright{
width: 800px;
margin: 30px auto 0;
display: table;}

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

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

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


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

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

.balloonleft .balloon p {
margin: 0;
padding: 0;
font-size: 17px !important;}


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

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

.balloonright .balloon p {
margin: 0;
padding: 0;
font-size: 17px !important;}

/*----- 通貨 -----*/
.flagbox {
width: 930px;
box-sizing: border-box;
padding: 40px 65px;
flex-wrap: wrap;
display: flex;
background-color: #fff;
margin-top: 80px;}

.flagbox div{margin: 10px;}

.flagbox p {
font-size: 14px !important;
text-align: center;}

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

.mtop100 {
margin-top: 100px;}

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

.simulatorbox p {
font-size: 16px !important;
font-weight: bold;}

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

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

.simulatorbox a {
font-weight: normal;
display: inline-block;
font-size: 16px;}

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

.blue{background-color:#16b3d4; }
.blue02{background-color:#d0f0f6; }
.gray{background-color:#9e9e9e; }
.gray02{background-color:#eee; }

table th,
table td{
padding: 10px 8px;
box-sizing: border-box;
font-size: 17px;
line-height: 1.7;
text-align: center;
background-color: #fff;}

table th {
width: 200px;
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: 365px;
border-bottom: #424242 1px solid;}
table th +th,
table td + td {border-left: #424242 1px solid;}

table .end{border-bottom:none;}


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

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

.cp01 {
width: 620px;
margin: 0 auto;}

.cp02 {
width: 712px;
margin: 0 auto;}

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

.cpbox li {
font-size: 17px;}

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


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

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

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


#article07 {
padding-bottom: 250px;
}

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

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

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

/*==============================================
.bnrWrap
============================================= */

.bnrWrap {
position: fixed;
z-index: 2;
opacity: 0;
transform: translateY(177px);
width: 100%;
background: rgb(4,131,179);
background: linear-gradient(180deg, rgba(4,131,179,1) 0%, rgba(22,179,212,1) 42%);
box-shadow: 0px -10px 0px 0px rgba(0,0,0,0.1);
transition: box-shadow .2s;
padding: 10px 0 0;
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 .bnr {
display: block;
width: 689px;
height: 167px;
text-indent: -9999px;
background:url(https://img1.kakaku.k-img.com/images/fx/article/gaitame/banner.png) no-repeat;
overflow: hidden;
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
transition: .2s ease-in-out;
margin: 0 auto;
}
.bnrWrap a {
display: block;
width: 689px;
height: 167px;
background:url(https://img1.kakaku.k-img.com/images/fx/article/gaitame/banner_over.png) no-repeat;
margin: 0 auto;
}
.bnrWrap .bnr:hover {
opacity: 0;
}


/* PC版　上に上がる動き　*/

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

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

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

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