﻿@charset "utf-8";
/* CSS Document */

html {
	margin: 0px;
	font-size:62.5%;/*10pt基準*/
	}

body {
	width: 100%;
	margin: 0px;/*ページ全体周りの余白がなくなる*/
	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	
	font-size: 15px; font-size: 1.5rem;
	letter-spacing: .4px;
	/*color: #333333;*/
	color: #440505;
	
	-webkit-tap-highlight-color: rgba(0,0,0,0);/*リンクがタップされている間に表示される強調色を設定*/
	/*line-height: 1.5;*/
	/*background-image: url("./images/top_bg_sp.png");
	background-attachment: fixed; block-start:0px; inline-start:0px;
	background-attachment: fixed; top:0px; left:0px; /*クローム対応*/
	/*background-size:100%;
	background-repeat: repeat;*/
	}

body::before {
	content:"";
	display: inline-block;
	width: 100%;
	height: 1080px;
	position:fixed;
	z-index:-1;
	/*background-image: url("./images/top_bg_sp.png");
	background-repeat: repeat;
	-webkit-background-size:contain;
	background-size: contain;
	vertical-align: middle;*/
}



img{
	margin: 0em auto 0 auto;
	width:100%;	
}
.in_gazou {
	display: block;
    width: 100%;
	margin: 0 auto;
}


.wrap{/* SPのための設定 */
	width: 100%;
	margin: auto;
	box-shadow: none;
}

/*-----------------------------------
●●●追従バナー（SP基準）
-----------------------------------*/
.follow_fix{
    display: none;
    position: fixed;
    bottom: 1%;
    z-index: 100;
}

.follow_box{
    width:94%;
	display: block;
	position: relative;
	    padding: 0px 0px 0px 0px;
   margin: 0 0 0 3%;
}

.dl_follow{/* このタグで囲うだけでfollow用に変更 */
	position: absolute;
    top: 27%;
}
.followbanner_space {
		width: 100%;
	margin: auto;
    display: block;
    padding-bottom: 26%;}

/*-----------------------------------
●●●TOP画像と背景（SP基準）
-----------------------------------*/
.top_box{
    width: 100%;
    display: block;
	position: relative;
}

.top_image{
	position: relative;	
	max-width: 100%;
	width: 100%;
    padding: 0px 0px 0px 0px;
   margin: 0 auto;
}

/*-----------------------------------
●●●メニュー（SP基準）
-----------------------------------*/

.nav_logo_img {
	height: 3.8em;
	width: 6.5em;
    margin: 3px 0 0 0;
}

.nav_box1 {
	width: 100%;
	z-index:10;
	position: sticky;
	top: 0em; /* 上端から0em;のところで固定 */
	height: 4em;
	background-color: #fff;
	}

.nav_box2 {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 3.8em;
	}

.nav_here{
	border-bottom: 0.3em solid #440505 ;
		padding: 0 0 0 0px;
	height: 4em;
}
.nav_nothere{
	border-bottom: 0.3em solid  rgba(255,255,255,0) ;
		padding: 0 0 0 0px;
	height: 4em;
}


.nav_text1:hover,.nav_text2:hover,.nav_text3:hover {/*クレーン ソリティア マージ*/
	opacity: 0.7;
}


/*-----------------------------------
●●●ストア（PC SP 共通）
-----------------------------------*/

.box_store {/* 背景いらない場合は使用しない */
	position: relative;
    width: 100%;
    display: block;
    background-color   : #fff;
    margin: 0px;
}

.jump_button_box{/* よこ並び */
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
}

.jump_button_img{
    display: block;
    width: 90%;
	margin: 0 auto;
	padding-bottom: 10px;
}

.jump_button_img:hover{
	opacity: 0.7;
}
/*-----------------------------------
●●●ストア(PC SP 共通ボトム用)
-----------------------------------*/

.dl_bottom{/* このタグで囲うだけでbottom用に変更 */
    position: absolute;
	top: 47%;
	left: 25%;
}

/*-----------------------------------
●●●ストア(PC SP 共通トップ用)
-----------------------------------*/

.dl_top{/* このタグで囲うだけでtop用に変更 */
	position: absolute;
	top:81%;
}


/*-----------------------------------
●●●フッター
-----------------------------------*/
.blockFooter_crane{/*クレーン*/
	width: 100%;
	display: block;
	background-color:#f60032; 
}
.blockFooter_solitaire{/*ソリティア*/
	width: 100%;
	display: block;
	background-color:#00a87c; 
}
.blockFooter_merge{/*マージ*/
	width: 100%;
	display: block;
	background-color:#f985c2; 
}


.blockCopy{
	padding-top: 5px;
	color:#ffffff;
}

.p_footer_box{
	text-align: center;
	padding: 10% 3% 0 3%;
}
.p_footer_box p{
	display: inline-block;
	text-align: left;
	font-size: 1.2rem;
	font-size: 12px;
	color:#ffffff;
	line-height: 1.2em;

}
/*-----------------------------------
●●●TOPへもどる（SP基準）
-----------------------------------*/
html {
    scroll-behavior: smooth;
}
.TOPreturn {
    width: 15%;
    display: block;
    position: absolute;
    top: 85%;
    left: 82%;
}

img.TOPreturn:hover  {
	transform: scale(1.1);
	opacity: 1;
}

/*-----------------------------------
●●●TOPへもどる追従（SP基準）
-----------------------------------*/
html {
    scroll-behavior: smooth;
}
.return {
    width: 100%;
    display: block;
}

.pagetop {
	width: 25%;
    position: fixed;
    right: 1%;
    bottom: 1%;
    z-index: 100;
}
.pagetop:hover img {
	transform: scale(1.1);
	opacity: 1;
}


/*-----------------------------------
●●●内容1　共通追加
-----------------------------------*/
.box_naiyou_1_crane {/*クレーン*/
    width: 100%;
    display: block;
    background-color   : #ff8d95;
    margin: 0px;
}
.box_naiyou_1_solitaire{ /*ソリテイア*/
    width: 100%;
    display: block;
    background-color   : #93e5cf;
    margin: 0px;
}
.box_naiyou_1_merge {/*マージ*/
    width: 100%;
    display: block;
    background-color   : #ffcae8;
    margin: 0px;
}


.jump_txt_box{/* よこ並び */
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.colum_jump_txt_r{/* たて並び右 */
	width: 40%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0 0 5% 3%;
}
.colum_jump_txt_l{/* たて並び左 */
	width: 40%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0 3% 5% 0;
}
.in_gazou_icon {
	display: block;
    width: 65%;
	margin: 0 auto;
}


/*文章*/
.txt_series{
    position: absolute;
	top: 30%;
}

.p_txt_series{/*SP*/
	font-size: 13px; font-size: 1.3rem;
	letter-spacing: 1.3px;
	color: #440505;
	font-weight: 800;
	line-height: 1.3;
	padding: 8px 0 0 0;
}


/* アプリカラー */
.color_crane a{
	color:#f60032;
	border-bottom: solid 1px;
}
.color_solitaire a{
	color:#00a87c;
	border-bottom: solid 1px;

}
.color_merge a{
	color:#f985c2;
	border-bottom: solid 1px;

}
.color_crane a:hover{
	opacity: 0.5;}

.color_solitaire a:hover{
	opacity: 0.5;}

.color_merge a:hover{
	opacity: 0.5;}



/*-----------------------------------
●●●内容2　共通追加
-----------------------------------*/
.box_naiyou_2_crane {/*クレーン*/
    width: 100%;
    display: block;
    background-color: #f60032;
  background-image   : radial-gradient(#ff4545 7%, transparent 16%),
                       radial-gradient(#ff4545 7%, transparent 16%);
  background-position: 0 0, 9px 9px;
  background-size    : 18px 18px;
    margin: 0px;
}

.box_naiyou_2_solitaire {/*ソリテイア*/
    width: 100%;
    display: block;
    background-color: #00a87c;
  background-image   : radial-gradient(#1dbc8e 7%, transparent 16%),
                       radial-gradient(#1dbc8e 7%, transparent 16%);
  background-position: 0 0, 9px 9px;
  background-size    : 18px 18px;
    margin: 0px;
}

.box_naiyou_2_merge {/*マージ*/
    width: 100%;
    display: block;
    background-color: #f985c2;
  background-image   : radial-gradient(#f29ed2 7%, transparent 16%),
                       radial-gradient(#f29ed2 7%, transparent 16%);
  background-position: 0 0, 9px 9px;
  background-size    : 18px 18px;
    margin: 0px;
}


/*-----------------------------------
●●●ふせん　共通追加（SP基準）
-----------------------------------*/

.husen {
   width: 80%;/* 紙の横幅 100%にすると全幅表示に *//* 各々画面で設定しています */
   padding: 20px 15px 0px 15px;
   margin: 2em auto 0.5em auto;
   background: #fff;/* 紙の色 */
   color: #000;/* 文字色 */
   box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform:rotate(1deg);
   word-break: break-all;
}

.husen_box_tape {
    width: 50%;
    height: 40px;
    margin: -58px auto 0;
    background: rgba(55, 207, 255, 0.4);/* テープの色 */
    transform: rotate(-3deg);
    opacity: 0.9;
}

.in_gazou_husen {
	display: block;
    width: 100%;
	margin: 0 auto;
}


.no-rorate{
transform:rotate(-1deg);}

/*-----------------------------------
●●●内容3　共通追加
-----------------------------------*/
.box_naiyou_3_crane {/*クレーン*/
    width: 100%;
    display: block;
    background-color   : #ff8d95;
    margin: 0px;
}
.box_naiyou_3_solitaire{ /*ソリテイア*/
    width: 100%;
    display: block;
    background-color   : #93e5cf;
    margin: 0px;
}
.box_naiyou_3_merge {/*マージ*/
    width: 100%;
    display: block;
    background-color   : #ffcae8;
    margin: 0px;
}

/*-----------------------------------
●●●お役立ち　共通追加（SP基準）
-----------------------------------*/
.box_other_crane {
    width: 100%;
    display: block;
    background-image:url("./images/bg_other.jpg");
	background-size:cover;
	margin: 0 auto;
}

.in_gazou_other {
	display: block;
    width: 100%;
	margin: 0 auto;
	
}


/*-----------------------------------
●●●coin_block
-----------------------------------*/
#coin_block{
  width: 100%;
}
#coin_block .coin_parts_box{
  position: relative;
}
#coin_block .coin_parts_box img{
  position: absolute;
}
#coin_block .coin_parts_box img:nth-child(2n+1){
  width: 5%;/*コインのサイズ*/
}
#coin_block .coin_parts_box img:nth-child(2n){
  width: 8%;/*コインのサイズ*/
}

/*-----------------------------------
●●●①コインパーツの表示位置
-----------------------------------*/
.parts_01{top: 0; left: 5%;}
.parts_02{top: 0; left: 11%;}
.parts_03{top: 0; left: 17%;}
.parts_04{top: 0; left: 24%;}
.parts_05{top: 0; right: 5%;}
.parts_06{top: 0; right: 11%;}
.parts_07{top: 0; right: 17%;}
.parts_08{top: 0; right: 24%;}

/*-----------------------------------
●●●①舞い散る 回転しつつ上から下へ
-----------------------------------*/
@keyframes coin {
    0% {opacity: 0;}
    20% {transform:translate(3px,30px) rotate(20deg);
         opacity: 1;}
    30% {transform:translate(0,70px) rotate(50deg); }
    50% {transform:translate(-10px,130px)  rotate(150deg);}
    70% {transform:translate(10px,240px) rotate(-50deg);
         opacity: .8;}
    90% {transform:translate(-5px,320px) rotate(-180deg);}
    100%{transform:translate(10px,360px);
         opacity: 0;}
}

.coin_parts_box img {
    animation: coin linear 6s infinite;
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}

/*-----------------------------------
●●●②coin_block
-----------------------------------*/
#coin_block2{
  width: 100%;
}
#coin_block2 .coin_parts_box2{
  position: relative;
}
#coin_block2 .coin_parts_box2 img{
  position: absolute;
}
#coin_block2 .coin_parts_box2 img:nth-child(2n+1){
  width: 5%;/*星のサイズ*/
}
#coin_block2 .coin_parts_box2 img:nth-child(2n){
  width: 8%;/*星のサイズ*/
}

/*-----------------------------------
●●●②コインパーツの表示位置
-----------------------------------*/
.parts_01{top: 0; left: 5%;}
.parts_02{top: 0; left: 11%;}
.parts_03{top: 0; left: 17%;}
.parts_04{top: 0; left: 24%;}
.parts_05{top: 0; right: 5%;}
.parts_06{top: 0; right: 11%;}
.parts_07{top: 0; right: 17%;}
.parts_08{top: 0; right: 24%;
}

/*-----------------------------------
●●●②舞い散る 回転しつつ上から下へ
-----------------------------------*/
@keyframes coin2 {
    0% {opacity: 0;}
    10% {transform:translate(-5px,0px) rotate(-10deg);
         opacity: 1;}
    30% {transform:translate(2,15px) rotate(-80deg); }
    50% {transform:translate(-10px,80px)  rotate(-270deg);}
    70% {transform:translate(15px,120px) rotate(100deg);
         opacity: .8;}
    90% {transform:translate(-8px,250px) rotate(180deg);}
    100%{transform:translate(7px,350px);
         opacity: 0;}
}

.coin_parts_box2 img {
    animation: coin2 linear 7s infinite;
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}


/*-----------------------------------
●●●starcoin_block
-----------------------------------*/
#starcoin_block{
  width: 100%;
}
#starcoin_block .starcoin_parts_box{
  position: relative;
}
#starcoin_block .starcoin_parts_box img{
  position: absolute;
}
#starcoin_block .starcoin_parts_box img:nth-child(2n+1){
  width: 5%;/*コインのサイズ*/
}
#starcoin_block .starcoin_parts_box img:nth-child(2n){
  width: 8%;/*コインのサイズ*/
}

/*-----------------------------------
●●●①コインパーツの表示位置
-----------------------------------*/
.parts_01{top: 0; left: 5%;}
.parts_02{top: 0; left: 11%;}
.parts_03{top: 0; left: 17%;}
.parts_04{top: 0; left: 24%;}
.parts_05{top: 0; right: 5%;}
.parts_06{top: 0; right: 11%;}
.parts_07{top: 0; right: 17%;}
.parts_08{top: 0; right: 24%;}

/*-----------------------------------
●●●①舞い散る 回転しつつ上から下へ
-----------------------------------*/
@keyframes starcoin {
    0% {opacity: 0;}
    20% {transform:translate(3px,30px) rotate(20deg);
         opacity: 1;}
    30% {transform:translate(0,70px) rotate(50deg); }
    50% {transform:translate(-10px,130px)  rotate(150deg);}
    70% {transform:translate(10px,240px) rotate(-50deg);
         opacity: .8;}
    90% {transform:translate(-5px,320px) rotate(-180deg);}
    100%{transform:translate(10px,360px);
         opacity: 0;}
}

.starcoin_parts_box img {
    animation: starcoin linear 6s infinite;
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}

/*-----------------------------------
●●●②starcoin_block
-----------------------------------*/
#starcoin_block2{
  width: 100%;
}
#starcoin_block2 .starcoin_parts_box2{
  position: relative;
}
#starcoin_block2 .starcoin_parts_box2 img{
  position: absolute;
}
#starcoin_block2 .starcoin_parts_box2 img:nth-child(2n+1){
  width: 5%;/*星のサイズ*/
}
#starcoin_block2 .starcoin_parts_box2 img:nth-child(2n){
  width: 8%;/*星のサイズ*/
}

/*-----------------------------------
●●●②コインパーツの表示位置
-----------------------------------*/
.parts_01{top: 0; left: 5%;}
.parts_02{top: 0; left: 11%;}
.parts_03{top: 0; left: 17%;}
.parts_04{top: 0; left: 24%;}
.parts_05{top: 0; right: 5%;}
.parts_06{top: 0; right: 11%;}
.parts_07{top: 0; right: 17%;}
.parts_08{top: 0; right: 24%;
}

/*-----------------------------------
●●●②舞い散る 回転しつつ上から下へ
-----------------------------------*/
@keyframes starcoin2 {
    0% {opacity: 0;}
    10% {transform:translate(-5px,0px) rotate(-10deg);
         opacity: 1;}
    30% {transform:translate(2,15px) rotate(-80deg); }
    50% {transform:translate(-10px,80px)  rotate(-270deg);}
    70% {transform:translate(15px,120px) rotate(100deg);
         opacity: .8;}
    90% {transform:translate(-8px,250px) rotate(180deg);}
    100%{transform:translate(7px,350px);
         opacity: 0;}
}

.starcoin_parts_box2 img {
    animation: starcoin2 linear 7s infinite;
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}







/*-----------------------------------
メニューとび先表示を綺麗に見せる
-----------------------------------*/
.pagejump {
padding-top: 3.5em;/* 少し下にずれるように設定してます */
}






.fadeIn {
animation-name: fadeInAnime;
animation-fill-mode:backwards;
animation-duration:1s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 1.0s;
animation-direction:normal;
}


@keyframes fadeInAnime{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



#pop-up {/*インプットタグ*/
	/*display: block;*/
	display: none; 
}

#pop-up:checked + .overlay {
	display: none; 
}

.overlay {
	display: block;
	z-index: 999;
	background-color: rgba(0,0,0,0.8);
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	opacity: 1.0;
}




/*▼ファーストビュー用フェードイン-----------*/

.fst_view-fadein{ 
  opacity:0;
  animation-name: sample01; /*←@keyframesにも同じ名前を記述*/
  animation-duration: 4s; 
  animation-fill-mode: forwards; 
}
@keyframes sample01 {  /*←animation-nameにも同じ名前を記述*/
0% {
  opacity: 0;
  /*color:#000;*/
}
90% {
 opacity: 1;
 /*color:#000;*/
}
 100% {
  opacity: 1;
  /*color:#00f;*/
} 
}

/*▲ファーストビュー用フェードイン-----------*/


/*▼途中からフェードインY（classにelement js-fadeinを記載すればOK）-----------*/


.js-fadein {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.js-fadein.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/*▲途中からフェードインY（classにelement js-fadeinを記載すればOK）-----------*/

/*▼途中からフェードインX（classにelement js-fadeinを記載すればOK）-----------*/


.js-fadein_X {
  opacity: 0; 
  visibility: hidden;
  transform: translateX(40px);
  transition: all 1s;
}
.js-fadein.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);
}

/*▲途中からフェードインX（classにelement js-fadeinを記載すればOK）-----------*/

/*▼途中からフェードインZ（classにelement js-fadeinを記載すればOK）-----------*/


.js-fadein_Z {
  opacity: 0; 
  visibility: hidden;
  transform: translateZ(40px);
  transition: all 1s;
}
.js-fadein.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateZ(0px);
}

/*▲途中からフェードインZ（classにelement js-fadeinを記載すればOK）-----------*/

.fadein_img_wrap,.fadein_img_wrap_left,.fadein_img_wrap_right{
	z-index: 10;
	position: relative;
}

.fadein_img_wrap,.fadein_img_wrap_left,.fadein_img_wrap_right{
	width: 100%;
}

.fadein_img_wrap_left{
	width: 80%;
	margin-left: 2.5%;
}
	
.fadein_img_wrap_right{
	width: 80%;
	margin-left: 17.5%;
}




.fadein_img_box01,.fadein_img_box02,.fadein_img_box03,.fadein_img_box04,.fadein_img_box05
,.fadein_img_box06,.fadein_img_box07,.fadein_img_box08,.fadein_img_box09,.fadein_img_box10{
	position: absolute;
	width: 30%;
}

.fadein_img_box01{top: 10%;left: 10%;}
.fadein_img_box02{top: 10%;right: 10%;}
.fadein_img_box03{top: 10%;left: 10%;}
.fadein_img_box04{bottom: 10%;left: 20.25%;}
.fadein_img_box05{top: 10%;right: 10%;}
.fadein_img_box06{bottom: 10%;left: 10%;}
.fadein_img_box07{bottom: 10%;left: 10%;}
.fadein_img_box08{bottom: 10%;right: 10%;}
.fadein_img_box09{top: 10%;left: 10%;}
.fadein_img_box10{top: 10%;left: 10%;}










/*
body:before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	padding-top: 133%;
	background:url("./images/top_sp.png") center no-repeat;
	background-size:cover;
	}
*/






	
@media (orientation: portrait){/*★スマホ用　タテ時のレスポンシブ設定*/
	
iframe{
	width: 377px;
	height: 211px;
}


	

}
@media (orientation: landscape){/*★スマホ用　横時のレスポンシブ設定*/
	
iframe{
	width: 530px;
	height: 298px;
}


}



.pcOnly {
	 display: none !important
}
	
.spOnly {
	 display: block !important
}

.pcOnly_center{
	text-align: left;
}



a {
	/*color: #18499e;*/
	color: #fc326c;
	text-decoration:none;
	font-weight: bold;
}

a :hover {
	opacity: 0.5;
	/*color: #fff;*/
}

a :visited {
	color: #fff;
	/*color: #18499e;*/
}



ul {
    font-size: 1.6rem;
    font-size: 16px;
    display: block;
    list-style: none;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}

li{
	display: block;
	font-size: 1.53rem;
	font-size: 15.3px;
	margin: 0 0 1.5em 1.5em;
	line-height: 1.2;
}

.li_no {
  list-style: none;
}


.center{
	text-align: center;
	margin: auto;
}

.left{
	text-align: left;
	margin-left: 0;
}

.right{
	text-align: right;
	margin-right: 0;
}



.li_text{
	font-size: 1.4rem;
	font-size: 14px;
}



small{
	display: inline-block;
	font-size: 1.2rem;
	font-size: 12px;
	color: #999999;
	margin: 0 0 1.8em;
	line-height: 1.4;
}

hr{
	margin-block-start: 0.0em;
	margin-block-end: 1.9em;
}



@media screen and (min-width:533px){/*★PC用レスポンシブ設定*/
	
iframe{
	width: 480px;
	height: 280px;
}

/*body {
	background-image: url("./images/top_bg_sp.png");
	background-attachment: fixed; block-start:0px; inline-start:0px;
	background-repeat: repeat;
	background-size:100%;
	background-position:center top;
	}
	
body::before {
	
	content:"";
	display: inline-block;
	width: 100%;
	height: 100%;
	position:fixed;
	z-index:-1;
	background-image: url("./images/top_bg_pc.png");
	background-repeat: repeat;
	-webkit-background-size:contain;
	background-size: contain;
	vertical-align: middle;
}*/
	
.wrap{/* PCのための設定 */
	width: 600px;
	margin: auto;
	box-shadow: 0px 0 24px rgba(0, 0, 0, 0.3) ;
}
/*-----------------------------------
●●●内容1　共通追加
-----------------------------------*/

.p_txt_series{
	font-size: 18px; font-size: 1.8rem;
	letter-spacing: 1.6px;
	color: #440505;
	font-weight: 800;
	line-height: 1.3;
	padding: 8px 0 0 0;
}
}


@media screen and (min-width:600px){/*★追従為のサイズSPからPCの途中*/
	

/*-----------------------------------
●●●追従バナー（600～）
-----------------------------------*/
.follow_box{
    width:570px;
	display: block;
	position: relative;
	    padding: 0px 0px 0px 0px;
   margin: 0 0 0 15px;
}


}

	
@media screen and (min-width:816px){/*★PC用レスポンシブ設定*/
	
iframe{
	width: 640px;
	height: 360px;
}
	
body{
	font-size: 17px; font-size: 1.7rem;
	line-height: 1.9;
}

/*
body:before{
	display:none;
	}
	*/
	
	
.pcOnly {
	 display: block!important
}
	
.spOnly {
	 display: none !important
}
	
.pcOnly_center{
	text-align: center;
}
	
/*-----------------------------------
●●●左右背景（PCだけ表示）
-----------------------------------*/
.bg_left{
	position:fixed;
	width: 110px;
	top:0%;
   left:0%;
	z-index: 1;
}

.bg_right{
	position:fixed;
	width: 110px;
	top:0%;
   right:0%;
	z-index: 1;
}	
/*-----------------------------------
●●●追従バナー（PC816～一応記載していますが600と同じです。）
-----------------------------------*/
.follow_box{
    width:570px;
	display: block;
	position: relative;
	    padding: 0px 0px 0px 0px;
   margin: 0 0 0 15px;
}
	

@media screen and (min-width:1016px){/*★PC用レスポンシブ設定*/

body {
	width: 100%;	
	}

/*-----------------------------------
●●●左右背景（PCだけ表示）
-----------------------------------*/
.bg_left{
	position:fixed;
	width: 200px;
	top:0%;
   left:0%;
	z-index: 1;
}

.bg_right{
	position:fixed;
	width: 200px;
	top:0%;
   right:0%;
	z-index: 1;
}	


}}