@charset "utf-8";


:root {
	--color-header-text: #1F8BEB;	/* ヘッターテキスト */
	--color-header-active-text: #ff5c98;	/* ヘッターテキスト */
	--color-footer-text: #1F8BEB;	/* フッターテキスト */  
	--color-text: #3e3e3e;	/* テキスト */
	
	--color-base_bg: #F1FAFF;	/* 背景(フッター含む) */

 	--color-box-title-bg: #1985E5;/*タイトル等の背景*/
 	--color-btn-text: #FFFFFF;	/* ボタン色　*/
 	--color-btn-bg: #1985E5;		/* ボタン背景　*/

  --color-loginbtn-text: #1985E5;	/* ログインボタン色　*/
 	--color-loginbtn-bg: #ffd803;		/* ログインボタン背景　*/


 	--color-card-color: #1F8BEB;					/* FAQなどのカード　#1F8BEB */
 	--color-card-bg: #F1FAFF;								/* F1FAFF */

 	--color-h: #1F8BEB;					/* h2 h3 など*/
 	
 	--color-userregisgt-btn:#f25043;	/*ユーザー登録;*/
 	
 	
 	--color-link: #1aafff;	/* リンク */

  --color-buybtn-text: #1985E5;	/* 購入ボタン色　*/
 	--color-buybtn-bg: #ffd803;		/* 購入ボタン背景　*/


}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.25);
  }
}

html {
	-webkit-text-size-adjust: 100%;
  font-size: 62.5%;
  color: #ff5c98;
}

body {
  font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,"MS Pゴシック", Osaka, sans-serif;
  font-weight: normal;
  background: #fff;
  -webkit-text-size-adjust: 100%;  
  word-wrap: break-word;
  word-break: normal;
  word-break:break-all;
  overflow-wrap: break-word;
  color: #313131;
  min-width: 100%;
  width: 100%;
  font-size: 1.6rem;
  -webkit-touch-callout:none; /* リンク長押しのポップアップを無効化*/
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;/*Chrome,Safari*/
  -ms-text-size-adjust: 100%;/*EgdeMobile*/
  -moz-text-size-adjust: 100%;/*firefox*/
}


.font-pop{
	font-family: 'Mochiy Pop P One', 'Noto Sans JP',sans-serif;
}
* {
  box-sizing: border-box;
}
a{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  transition: opacity .3s ease-in-out;
  color:var(--color-link);
  font-weight: bold;
  text-decoration: none;

}
a:hover{
  opacity: 0.5;
}

a.disable{
  pointer-events: none;
  opacity: 0.5;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance:textfield;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}


a:focus {
  outline: none !important;
}

.over a {
  text-decoration: none;
}

.underline{
   text-decoration: underline;
}

textarea,
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="text"]{
  border: none;
  border-radius: 6px;
  outline: none;
  background: #fff;
  font-size: 1.6rem;
  padding: 0.4em 0.5em;
  border: 1px solid var(--color-box-title-bg);
  width: 100%;
 }

button,
input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  transition: background-color .3s,color .3s;
}
.bold{
  font-weight: bold;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
  align-self: flex-end;
}

.anc{
  margin-top:-80px;
  padding-top:80px;
}


.mt0 { margin-top: 0 !important; }

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

.mt10 { margin-top: 10px !important; }

.mt15 { margin-top: 15px !important; }

.mt20 { margin-top: 20px !important; }

.mt25 { margin-top: 25px !important; }

.mt30 { margin-top: 30px !important; }

.mt40 { margin-top: 40px !important; }

.mt50 { margin-top: 50px !important; }

.mb0 { margin-bottom: 0 !important; }

.mb5 { margin-bottom: 5px !important; }

.mb10 { margin-bottom: 10px !important; }

.mb15 { margin-bottom: 15px !important; }

.mb20 { margin-bottom: 20px !important; }

.mb25 { margin-bottom: 25px !important; }

.mb30 { margin-bottom: 30px !important; }

.mb40 { margin-bottom: 40px !important; }

.mb50 { margin-bottom: 50px !important; }

.mb-em1{ margin-bottom: 1em !important; }
.mb-em2{ margin-bottom: 2em !important; }
.mb-em3{ margin-bottom: 3em !important; }
.mt-em1{ margin-top: 1em !important; }
.mt-em2{ margin-top: 2em !important; }
.mt-em3{ margin-top: 3em !important; }

.pt0{ padding-top: 0 !important; }
.pb0{ padding-bottom: 0 !important; }

.login { position: fixed; top: 0; right: 0; background: var(--color-box-title-bg); padding: 10px 15px 20px; z-index: 1100; width: 250px; color:#fffffe;}
.login .title { margin-bottom: 20px; font-weight:bold;  text-align: center;}
.login .form { font-size: 10px; margin-top: 10px; }
.login .form span { display: block; width: 100%; margin-bottom: 5px; }
.login input[type="text"] { width: 100%;}
.login input[type="password"] { width: 100%;}
.login .auto { display: block; font-size: 10px; text-align: center; margin-top: 15px; }
.login .auto label { cursor: pointer; }
.login input[type="submit"] { display: block; width: 100%; background: var(--color-loginbtn-bg); font-size: 1.6rem; font-weight: bold; color: var(--color-loginbtn-text); padding: 10px; border: none; cursor: pointer; border-radius: 5px; text-align: center; margin-top: 20px; }
.login .ask { display: block; font-size: 10px; color: #fffffe; line-height: 1.4; text-decoration: underline; text-align: center; margin-top: 10px; }
.login.frame { border-bottom: 1px solid #F1FAFF; border-left: 1px solid #F1FAFF; }
.login span,.login small{color:#fffffe;}

.login{
  right: -250px;
  transition: right .3s ease-in-out;
}
.login.open{
  right: 0;
}

.login-side-btn{
  position: fixed;
  top:50px;
  right: 0;
  background: var(--color-box-title-bg);
  padding: 1em 1em;
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
  z-index: 1110;
  color: #fffffe;
  font-size: 1.6rem;
  cursor: pointer;
  transition: opacity .3s ease-in-out,right .3s ease-in-out;
}
.login-side-btn.open{
  right: 250px;
}
.login-side-btn:hover{
  opacity: 0.5;
}


/* 縦書きとなり、行は右から左へ */
.vrl {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
/* 縦書きとなり、行は左から右へ */
.vlr {
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
}
/* 縦書きとなり、行は右から左へ。各行内のテキストは左に倒れる（反時計周りに90度） */
.srl {
  writing-mode: sideways-rl;
}
/* 縦書きとなり、行は左から右へ。各行内のテキストは右に倒れる（時計周りに90度） */
.slr {
  writing-mode: sideways-lr;
}

header { position: relative; width: 100%; margin: 0;}
header figure { width: 100%; }
header figure img { width: 100%; }
header h1 { position: absolute; top: 0; left: 0; width: 100%; font-size: 18px; font-weight: normal; color: #F1FAFF; padding: 10px; text-align: center; z-index: 50;}
header .main-logo{
  width: 120px;
  position: fixed;
  top:10px;
  left: 10px;
  z-index: 60;
}
header .main-logo img{
  width: 100%;
}
@media screen and (min-width: 768px) {

header .top-nav{
	min-height: 80px;
}
}
header .panel{
  /*position: absolute;*/
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  border-bottom: 1px solid var(--color-header-text);
  z-index: 10;
  height: 80px;
  display: flex;
  justify-content:center;
  align-items: center;
}


header .panel ul{
  display: flex;
  justify-content:center;
  align-items: center;
   
}
header .panel ul > li{
}

header .panel ul a{
  color: var(--color-header-text);
  padding: 0.7em 0;
  margin: 0 1em;
  font-size: 1.4rem;
  display: block;
  text-decoration: none;
  font-weight: bold;
  transition: background-color .3s,color .3s;

}
header .panel ul a:hover,
header .panel ul a.active{
  color: var(--color-header-active-text);
  opacity: 1;
}

.main-bg-wrap,
.main-bg{
  position: relative;
}

.main-bg-text{
  position: absolute;
  font-size: 4.2rem;
  font-weight: bold;
  color: #fffffe;
  width: 100%;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 60;
  text-shadow: 0px 0px 3px #808080;
  text-shadow: 0px 0px 8px  #000;
}



.sec-top-info{
  padding: 4em 0;
  background-color: var(--color-base_bg);
}
.sec-top-info h2{
  color: var(--color-h);
  text-align: center;
  margin-bottom: 3em;
}



.logic-box{
  display: flex;
  justify-content: space-between;
	font-size: 1.4rem;
}
.logic-box p{
	text-align: left;
}

.logic-box li{
  width: 30%;
  border: 2px solid var(--color-h);
  border-radius: 10px;
  color: var(--color-text);
  background-color: #fffffe;
  text-align: center;
  padding: 40px 20px;  
}
.logic-box li img{
  width: 70%;
}
.sec-campaign{
  padding: 4em 0;
}
.sec-campaign ul{
  display: flex;
  justify-content: space-between;
}
.sec-campaign ul li{
  width: 30%;
  border-radius: 10px;
  color: #F1FAFF;
  background-color: #1F8BEB;
  text-align: center;
  padding: 40px 20px;  
}
.sec-campaign ul li img{
  width: 70%;
}

.sec-campaign h2{
  text-align: center;
  color: var(--color-h);
  padding: 10px 20px;  
  margin-bottom: 3em;
}
.sec-campaign ul h3{
  color: #fffffe;
  margin-bottom: 1em;
}

.sec-campaign ul p{
  color: #fffffe;
  font-size: 1.4rem;
}


.sec-conv{
  padding: 4em 0;
  color: #fffffe;
  text-align: center;
}
.sec-conv .btn-top-wrap{
  text-align: center;
  margin-bottom: 1em;
}

.top-text{

	width:100%;
	
  text-align: center;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%,0);
  z-index: 60;  
  color: #FFF;

 /* 
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 2px rgba(0, 0, 0, 1);  /*
*/
}
.top-text .main-text{
	font-family: 'HuiFontP29', sans-serif;
	font-size: 4.2rem;
  font-weight: normal;
	line-height: 1.8;
	margin-bottom: 2em;
}

@media screen and (max-width: 767px) {
	.top-text .main-text{
		font-size: 2.4rem;
	}
}
.top-text .info{
	font-size: 2.2rem;
	font-family: 'HuiFontP29', sans-serif;
	color: #fff;
	-webkit-text-stroke: .6em #fff;
	-webkit-text-fill-color: #000;
	paint-order: stroke fill;

}

.top-text .info::before {
	content: attr(data-text);
	position: absolute;
	-webkit-text-stroke: 0;
}

.top-info {
	width:100%;
  text-align: center;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%,0);
  z-index: 60; 
}


.top-text .btn-top-wrap{
	margin-bottom: 30px;
}


.top-text .btn-top-wrap a,
.top-info .btn-top-wrap a,
.sec-conv .btn-top-wrap a{
  background-color: var(--color-userregisgt-btn);
  border-radius: 6px;
  color: #fffffe;
  font-size: 2.4rem;
  padding: 0.5em 2em;
  text-decoration: none;
}
.top-info .btn-top-wrap{
  margin-bottom:20px;
}


.top-info .btn-top-wrap a{
	box-shadow: 8px -8px 8px -4px rgba(0,0,0,0.8);
}
.top-info .btn-top-wrap-blue a{
	background-color: #ffd803;
	color: #1F8BEB;	  
}


.top-info p{
  display: inline-block;
	font-size: 1.8rem;
	padding: 0.8em 1em 0;
	font-weight: bold;
  color: #1F8BEB;
/*	text-shadow: 0px 0px 8px #000;*/
	text-shadow:1px 1px 3px #000
}
.sec-conv p{
	font-size: 1.2rem;
  color: #1F8BEB;
}
.sec-conv p.info{
  padding-top: 1em;
  font-size: 1.4rem;
  color: var(--color-text);
}
@media screen and (max-width: 767px) {
	.top-info {
		bottom:5px;
	}
	
	.top-info .btn-top-wrap{
	  margin-bottom:4vw;
	}	
	
}
.top-info p{
	font-size: 3.2rem;
	
	font-family: 'Mochiy Pop One', sans-serif;
	color: #FFF;
	
}
.sec-security{
  padding: 4em 0;
  background-color: #F1FAFF;

}
.sec-security h2{
  color: var(--color-h);
  text-align: center;
  margin-bottom: 3em;
}

.sec-security ul{
  display: flex;
  justify-content: space-between;
}
.sec-security ul li{
  width: 30%;
}
.sec-security ul li .c-in{
  position: relative;
  text-align: center;
  color: var(--color-text);
  width: 100%;
  height: 0;
  padding-top: 100%;
  border-radius: 50%;
  border: 2px solid var(--color-h);
  background-color: #fffffe;
}
.sec-security ul li .c-text{
  position: absolute;
  width:80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.c-text h3{
  margin-bottom: 0.5em;
  color: var(--color-h);
}
.c-text p{
  font-size: 1.4rem;
}

footer{
  padding: 3em 0 2em;
  background-color: var(--color-base_bg);
  
}
footer .inner{
  display: flex;
  justify-content:space-between;
}

footer .inner2{
	text-align: right;
	max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;	
}

footer a{
  color: var(--color-footer-text);
  text-decoration: none;
  padding: 0 0.5em;
  font-size: 1.4rem;
}

footer .logo{
  width: 100px;
}
footer .logo img{
  width: 100%;
}
footer .link-link{
  width: calc(100% - 150px);
}

footer .link-sub,
footer .link-main{
  display: flex;
  width: 100%;
  justify-content:space-between;
}

footer .info{
  padding: 30px 0;
  text-align: right;
  font-size: 1.0rem;
  color:  var(--color-footer-text);
  
}

footer small{
  text-align: center;
  color:  var(--color-footer-text);
  margin: 0 auto;
}

.splab{
  display: none;
}



@-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}

@keyframes zoomUp { /* 1.15倍させる指定 */
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}


.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


.slide-img img{
  display: block;
  width: 100%;
}



.swiper-fade .swiper-slide-active .slide-img,
.swiper-fade .swiper-slide-duplicate-active .slide-img,
.swiper-fade .swiper-slide-prev .slide-img{
    -webkit-animation: zoomUp 10s linear 0s;
    animation: zoomUp 10s linear 0s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards ;
  
}




#topbutton { position: fixed; bottom: 60px; right: 22px; z-index: 200; display: none; }

/* sub page */



.sideContent.faq a{
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--color-text);
}

main.lower #contents h2{
  background-color: var(--color-box-title-bg);
  color: #fffffe;
  font-size: 2rem;
  font-weight: bold;
  padding: 0.5em 1em;
  margin-bottom: 1em;
  
  position: relative;
  display: inline-block;
  padding: 1rem 2rem 1rem 4rem;
  color: #fff;
  border-radius: 100vh 0 0 100vh;  
  
}

main.lower #contents h2:before{
 position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background-color: #fff;
}



.login2 { background: var(--color-box-title-bg); padding: 10px 15px 10px; width: 200px; color:#fffffe; border-radius: 16px; margin-bottom: 1em; }
.login2 .title { margin-bottom: 10px; font-weight:bold;  text-align: center;}
.login2 .form { font-size: 10px; margin-top: 10px; }
.login2 .form span { display: block; width: 100%; margin-bottom: 5px; }
.login2 input[type="text"] { width: 100%;}
.login2 input[type="password"] { width: 100%;}
.login2 .auto { display: block; font-size: 10px; text-align: center; margin-top: 15px; }
.login2 .auto label { cursor: pointer; }
.login2 input[type="submit"] { display: block; width: 100%; background: var(--color-loginbtn-bg); font-size: 1.6rem; font-weight: bold; color: var( --color-loginbtn-text); padding: 10px; border: none; cursor: pointer; border-radius: 5px; text-align: center; margin-top: 20px; }
.login2 .ask { display: block; font-size: 10px; color: #fffffe; line-height: 1.4; text-decoration: underline; text-align: center; margin-top: 10px; }
.login2.frame { border-bottom: 1px solid #F1FAFF; border-left: 1px solid #F1FAFF; }
.login2 span,.login small{color:#fffffe;}



.card-box{
  background-color: var(--color-box-title-bg);
  padding: 1em 1em;
  border-radius: 10px;
  color: #fffffe;
  margin-bottom: 1em;

}



.card-box2{
  background-color: var(--color-card-bg);
  padding: 1em 1em;
  border-radius: 10px;
  color: var(--color-card-color);
  border: 1px solid var(--color-card-color);
  margin-bottom: 1em;
}


.card-box-line{
  border: 2px solid #1F8BEB;
  padding: 1em 1em;
  border-radius: 10px;
  color: #1F8BEB;
  position: relative;
  margin-bottom: 1em;
}

.sideContent.faq{
  margin-top: 2.5em;
  margin-bottom: 3.5em;

  border-top-left-radius: none !important;
  border-radius: 0 10px 10px 10px;
  border: 2px solid var(--color-box-title-bg);
  padding: 1em 1em;
  color: var(--color-text);
  position: relative;
	background-color: #ffffff;
} 

.sideContent.faq h2 a{
  font-weight: bold;
  font-size: 1.6rem;
}

.sideContent.faq:after{
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: bold;
  content: '\f128\ FAQ';
  background: var(--color-box-title-bg);
  color: #fffffe;
  left: -2px;
  top:-2.0em;
  bottom: 100%;
  border-radius: 10px 10px 0 0;
  padding: 0.4em 0.8em;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.05em;
}
main.lower #contents .notes{
  margin-bottom: 1em;
}

main.lower #contents .notes li::before { display: block; content: "\f0a4"; font-family: "Font Awesome 5 Free"; position: absolute; top: 0.8em; left: -0.5em; color: var(--color-text); font-size: 1.8rem;}


main.lower #contents .notes2 li,
main.lower #contents .notes li{
  border-bottom: 1px dashed var(--color-text);
  margin-bottom: 1em;
  position: relative;
  margin-left: 1.5em;
  margin-right: 1.5em;
  line-height: 1.5em;
  padding: 1em 0 1em 1em;
}

main.lower #contents .notes2 li{
  padding: 1em 0;
}
main.lower #contents .notes dt{
  font-weight: bold;
  color: var(--color-text);
  font-size: 1.6rem;
  margin-bottom: 0.5em;
}


main a.btn,
main input[type="submit"] {
   display: block; width: 100%; background: var(--color-btn-bg); font-size: 1.6rem; font-weight: bold; color: var(--color-btn-text); padding: 0.5em 1em; border: none; cursor: pointer; border-radius: 5px; text-align: center; }


.add a.btn,
.add input[type="submit"] {
   display: block; width: 100%; background: var(--color-loginbtn-bg); font-size: 1.6rem; font-weight: bold; color: var(--color-loginbtn-text); padding: 0.5em 1em; border: none; cursor: pointer; border-radius: 5px; text-align: center; }




main.lower .link{
  color:var(--color-link);
  font-weight: bold;
}

main .emp,
main.lower .emp{
  color: #1985E5;
}

main .headline,
main.lower .headline{
  color: var(--color-text);
}

main.lower p{
  margin-bottom: 1em;
}


.sec-check{
  padding: 3em 0;
  color: var(--color-text);
  text-align: center;
}

.sec-check .enter{
  display: block;
  margin: 3em 0;
}
.sec-check .enter a{
  display: inline-block;
  background: #f25043;
  font-size: 2.4rem;
  font-weight: bold;
  color: #fffffe;
  padding: 0.5em 1.5em;
  border-radius: 16px;
  text-align:center;
}
.sec-check .enter a span{
  font-size: 1.6rem;
  display: block;
}

.next-profile-btn{
	padding: 5em 0;
	text-align: center;
	
	
}
.next-profile-btn a{
	background-color: #1F8BEB;
	border-radius: 6px;
	color: #fffffe;
	font-size: 2.0rem;
	padding: 0.5em 1.5em;
	text-decoration: none;
}
select{
font-size:16px;
border: 1px solid #999;
border-radius: 6px;
padding: 0.2em 0.2em;
}


p.bg-info { position: absolute; top: 0; left: 0; width: 100%; font-size: 32px; font-weight: normal; color: #ffffff; padding: 10px; text-align: center; z-index: 50;
	font-family: 'Mochiy Pop One', sans-serif;

/*	text-shadow: 0px 0px 8px #000;*/

   text-shadow:1px 1px 3px #000
}


/* pc */
@media screen and (min-width: 768px) {
  .sp {
    display: none!important;
  }
  .inner-pc,
  .inner{
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  main.lower{
    padding-top: 110px;
    padding-bottom: 20px;
    color: var(--color-text);
    font-size: 1.4rem;
  }

  main.lower #contents{
    float: left;
    width: calc(100% - 220px);
    margin-right: 20px;
  }
  
  main.lower #rightSide{
    float: left;
    width: 200px;
  }
    
  
}

/* sp */
@media screen and (max-width: 767px) {
  html {
    font-size: 2.4vw;
  }
  
  .pc {
    display: none !important;
  }
  
  header{
    padding-top: 60px;
  }
  
  .inner-sp,
  .inner{
    padding: 0 4vw;
  }
  
  main.lower{
    padding-top: 1em;
    padding-bottom: 1em;
    color: var(--color-text);
    font-size: 1.4rem;
  }
  
  
  .spnav{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    background-color: #fff;
    height: 60px;
    z-index: 1000;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
  }
  .splab{
    position: absolute;
    top:10px;
    right: 10px;
    display: block;
    cursor: pointer;
  }
  header .panel ul{
    display: block;
  }
  header .panel li{
    border-bottom: 1px solid #cfcfcf;
  }
  header .panel{
    display: block;
    position: fixed;
    width: 100%;
    height: 0;
    top:60px;
    left: 0;
    z-index: 999;
    background-color: #fff;
    overflow-y: scroll;
    transition: height .3s ease-in-out;
  }
  
  header .panel.open{
    height: 100%;
  }
 
  .main-bg-text{
    font-size: 2.4rem;
  }
	.top-text{
    font-size: 2.0rem;
		
	}
	

	.top-info .btn-top-wrap a,
	.sec-conv .btn-top-wrap a{
	  font-size: 1.6rem !important;
	}	

  .sec-security ul,
  .sec-campaign ul,
  .logic-box{
    display: block;
  }

  .sec-security ul li,
  .sec-campaign ul li,
  .logic-box li{
    width: 100%;
    margin-bottom: 1em;
  }
  
  .logic-box,
  .sec-security ul li{
      width: 80%;
      margin: 0 auto 1em;
  }
  footer .inner{
    display: block;
  }

  footer .link-sub,
  footer .link-main{
    display: block;
  }
  footer .link-link{
    width: 100%;
  }
  footer a{
    padding: 0;
    font-size: 1.8rem;
  }
  footer li{
    margin-bottom: 1em;
  }
  footer .info{
    text-align: left;
  }
  footer .logo{
    margin: 0 auto;
  }
  
  .sec-splogin{
    padding: 1em 0;
    background-color: var(--color-box-title-bg);
    color: #fffffe;
  }
  .sec-splogin .title{
    font-size: 1.6rem;
    margin-bottom: 0.5em;
  }
  .sec-splogin p{
    font-size: 1.4rem;
  }
  .sec-splogin input{
    margin-bottom: 1em;
    width: 100%;
  }
  
  .sec-splogin input[type="submit"] { display: block; width: 100%; background: var(--color-loginbtn-bg); font-size: 1.6rem; font-weight: bold; color: var(--color-loginbtn-text); padding: 10px; border: none; cursor: pointer; border-radius: 5px; text-align: center; margin-top: 20px; }


  .splogin-btn a{
    font-size: 1.2rem;
    color: var(--color-loginbtn-text);
    text-decoration: none;
   	text-align: center; 
  }

  .splogin-btn2 a{
	 	color: #FFF;
	 }

  h1.bg-h1{
      font-size: 1.2rem;
      padding:1vw;

  }
  p.bg-info {
		font-size: 1.2rem;
    padding:1vw !important;

  }
	.top-info p{
		font-size: 1.6rem;
		
		font-family: 'Mochiy Pop One', sans-serif;
		color: #FFF;
		padding-bottom: 0;
		
	}  
}


@media screen and (max-width: 1200px) {
	p.bg-info{
		padding-left:120px;
		padding-top: 16px;
		 font-size: 2.66666666666667vw;
	}


}