@charset "utf-8";
@media screen and (max-width: 1024px) {
.header {
	background:url(../../../../images/project/perfect/header_gk.png) top 14px center / 1024px 440px no-repeat #d9b34a;
	width: 100%;
	height: 560px;
	margin: -14px auto 0;
	position:relative;
	padding:1px 0;
	z-index:3;
}
/*--------------------------------------------------------------*/
.form_wrap {
    margin: -350px auto 11px;
}
.form_wrap_mae1 {
    margin: 105px auto 11px;
    max-width:560px;
}
.formbox{
	padding:1rem;
}
/*--------------------------------------------------------------*/
#footer{
	z-index:9;
}

}


@media screen and (max-width: 768px) {

.width10{width:20%;}
.width8{width:12%;}
.width5{width:10%;}

/*
br{display:none;}
*/


.fs100{font-size:60px !important;}
.fs110{font-size:60px !important;}
.fs120{font-size:60px !important;}
.fs130{font-size:60px !important;}
.fs140{font-size:60px !important;}
.fs150{font-size:60px !important;}

.subbg .fs30{font-size:16px !important;}
.subbg .fs60{font-size:25px !important;}
.subbg .fs70{font-size:30px !important;}
.subbg .fs80{font-size:35px !important;}
.subbg .fs90{font-size:40px !important;}
.subbg .fs100{font-size:45px !important;}
.subbg2 .fs100{font-size:50px !important;}

/*-------------------------------------------*/

canvas#c{
	animation: open_anime 6s linear;
}

@keyframes open_anime {
	0% { opacity:1; z-index:10000;transform:scale(1,1);}
	60% { opacity:1; z-index:10000;transform:scale(1,1);}
	80%{ opacity:0; z-index:10000;transform:scale(3,3);}
	100% { opacity:0;z-index:-10000;}
}

/*-------------------------------------------*/
.fixed_chan{
	width:25%;
	right:0;
}
/*-------------------------------------------*/

.header {
	background:url(../../../../images/project/perfect/header_gk.png) top 14px center / 1000px 440px no-repeat #d9b34a;
	width: 100%;
	height: 560px;
	margin: -14px auto 0;
	position:relative;
	padding:1px 0;
	z-index:3;
}
/*--------------------------------------------------------------*/
.form_wrap {
    margin: -360px auto 11px;
}
/*--------------------------------------------------------------*/
.formbox{
	font-size:1rem;
	width:100%;
	text-align:left;
	padding:1rem;
}
.fild{
	font-size:1rem;
	width:90%;
	margin-bottom:1rem;
}
.fild2{
	font-size:1rem;
	width:90%;
	margin:0 auto;
}
/*--------------------------------------------------------------*/
.movie_waku_top{
	margin: -13% auto 0 auto;
}
/*--------------------------------------------------------------*/

}

@media screen and (max-width: 684px) {
/*--------------------------------------------------------------*/
.movie_waku_top{
	margin: -20% auto 0 auto;
}
/*--------------------------------------------------------------*/
.movie_waku{
	width:90%;
}
/*--------------------------------------------------------------*/
}

@media screen and (max-width: 540px) {
body{
	font-size:14px;
}

br.blk{display: inline-block;}
br.spbr{display: inline-block;}
br.pcbr{display: none;}

.pc-only{display: none;}
.sp-only{display: block;}


/****流れるコメント*************/
#main_slide_bg {
    height: 50px;
    font-size:1rem;
}
/****流れるコメント*************/


/*********************************/

.header {
	background:url(../../../../images/project/perfect/header_gk_sp.png) top 14px center / 540px 520px no-repeat #d9b34a;
	width: 100%;
	height: 490px;
	margin: -14px auto 0;
	position:relative;
	padding:1px 0;
	z-index:3;
}
/*--------------------------------------------------------------*/
.sub_box {
    padding: 2rem 1rem;
}

/*--------------------------------------------------------------*/
.form_wrap {
    margin: -320px auto 11px;
}
/*--------------------------------------------------------------*/
.movie_waku_top{
	margin: -35% auto 0 auto;
}
/*--------------------------------------------------------------*/

.formbox {
    font-size: 0.3rem;
    width: 95%;
    text-align: left;
    padding: 1rem;
}
.formbox3 {
    padding: 0.5rem;
}
/*--------------------------------------------------------------*/
.main p{
	padding:.3rem;
}
/*--------------------------------------------------------------*/
.hatena_box p{
	line-height:1.3;
}
.hatena_box{
	padding:0.5rem;
	border:0.3rem solid #FFDF90;
}
/*--------------------------------------------------------------*/
.hatena_box2{
	margin:2rem 0;
}
.hatena_box2 p{
	font-size:1.4rem;
}
/*--------------------------------------------------------------*/
.emo_box p{
	font-size:1.4rem;
}
/*--------------------------------------------------------------*/
.emo_box3 {
    padding: 0.3rem 1rem;
    border: 0.3rem solid #F68F63;
    width: 88%;
}
/*--------------------------------------------------------------*/
.intro_box {
	font-size:1.4rem;
	padding:2rem 0.5rem;
	border: 0.3rem solid #B1FBC5;
}
.intro_box p {
    padding: 0.5rem;
    font-size: 14px;
}
/*--------------------------------------------------------------*/
.ex_box p {
    padding: .5rem;
    font-size: 14px;
}
/*-------------------------------------------*/
.wt_box4{
	width:100%;
}
/*--------------------------------------------------------------*/
.balloon3 {
    font-size: 14px;
    border: #5ACC48 solid 0.3rem;
    width: 100%;
    margin: 2rem auto;
    padding: 2rem;
}
/*--------------------------------------------------------------*/
.banner_a{
	border:#cccccc outset .5rem;
}
/*--------------------------------------------------------------*/
.result_t th{
	font-size:10px;
	padding: 0.3rem;
}
.result_t td{
	font-size:12px;
	padding: 0.2rem;
}
/*--------------------------------------------------------------*/
.result_t2 th{
	font-size:10px;
	padding: 0.3rem;
	border: 0.1rem solid #B1FBC5;
}
.result_t2 td{
	font-size:10px;
	padding: 0.2rem;
	border: 0.1rem solid #B1FBC5;
}
/*--------------------------------------------------------------*/
.logo_left{
	margin-top:-0.5rem;
}
/*--------------------------------------------------------------*/
/*  ----------ローディング-------------- */
.loader img {
  width:100%;
  max-width:100px;
}
/*  ----------ローディング-------------- */
/*--------------------------------------------------------------*/
.iframe_wrap {
    padding-top: 485%;
}
/*--------------------------------------------------------------*/
.y_box {
    padding: 2rem .5rem;
    width:100%;
}
/*--------------------------------------------------------------*/
.place_button{
	padding:1.5rem 1rem 2rem 1rem;
	font-size:3rem;
	line-height:1;
}

/*--------------------------------------------------------------*/
.choice{
	line-height:1.7;
}
/*--------------------------------------------------------------*/
.service_t {
    width: 100%;
}
/*--------------------------------------------------------------*/
.anq_t{
	border:0.01rem #ccc solid;
	font-size:8px;
}
.anq_t_top {
    padding: 2rem;
}
.anq_t_top .logo_right{margin-top:-0.5rem;}
.anq_t td.num{
	border:0.01rem #ccc solid;
}
.anq_t td.nam{
	border:0.01rem #ccc solid;
	max-width: 33px;
}
.anq_t td.perc{
	border:0.01rem #ccc solid;
}
/*--------------------------------------------------------------*/
.youkou_t {
	width:98%;
	font-size:12px;
}
.youkou_t th{
	width:18%;
	padding:0.5rem 0;
}
.youkou_t td .fs16 {
    font-size: 1rem;
}
.youkou_t td .fs18 {
    font-size: 1rem;
}
.youkou_t td .fs20 {
    font-size: 1.2rem;
}
.youkou_t td .fs25 {
    font-size: 1.5rem;
}
.youkou_t td .fs70 {
    font-size: 3rem;
}

.youkou_t .emo_box6 {
    padding: 0.5rem 0rem;
}
.youkou_t .hatena_box4 {
    padding: 0.5rem 0rem;
	border-top: 0.3rem solid #FDD78F;
	border-bottom: none;
	border-right: none;
	border-left: none;
}
.youkou_t .hatena_box5 {
    padding: 0.5rem 0rem;
}
.youkou_t .hatena_box6 {
    padding: 0.5rem 0rem;
}
/*--------------------------------------------------------------*/
.voice_box{padding:1rem;}
/*--------------------------------------------------------------*/
#video {
    opacity: .2;
}
/*--------------------------------------------------------------*/



/*************************** Swiper ***************************/
:root {
    --swiper-navigation-size: 5rem !important;
}

.gacha_btn_t th.sp100{
	width:100%;
	display:block;
}
.top_gacha th{
	width:42%;
}
.top_gacha {
    padding: 0rem;
}
/*************************** Swiper ***************************/

/*******　ポイント課金モーダル　*************/
#modal {
  width: 80%;
  padding: 1.5rem;
}
#modal1 {
  width: 80%;
  padding: 1.5rem;
}
#modal2 {
  width: 80%;
  padding: 1.5rem;
}
#modal3 {
  width: 80%;
  padding: 1.5rem;
}
#modal4 {
  width: 80%;
  padding: 1.5rem;
}
#modal .fs25 {
  font-size:1.4rem;
}
#modal1 .fs25 {
  font-size:1.4rem;
}
#modal2 .fs25 {
  font-size:1.4rem;
}
#modal3 .fs25 {
  font-size:1.4rem;
}
#modal4 .fs25 {
  font-size:1.4rem;
}
/*******　ポイント課金モーダル　*************/
.point_box{
	font-size:1rem;
	max-width:120px;
}
.point_num{
	font-size:1.5rem;
}
.coin_icon{
	width:30%;
}


/*******　説明モーダル　*************/
.modal-wrapper .modal-window {
    width: 80%;
    padding:1rem;
    background: #fcfcfc;
    font-size:1.2rem;
}
/*******　説明モーダル　*************/

/*** トップ ***/
.top_t td.one {
    width: 20%;
}
.top_t td.two {
    width: 5%;
}
.top_t td.three, .four {
    vertical-align:bottom;
}
.top_t td.three .fs18 {
    font-size:1.2rem;
}
.top_t td.four.fs12 {
    font-size:.6rem;
}

.btn-container button {
    font-size: 1.8rem;
}


/*********************************/
.gray_box{
	font-size:1rem;
}
/*********************************/
.point_box_top{
	width:25%;
}

.point_box_top .coin_icon {
    width: 50%;
}
/*** トップ ***/

/*-------------------------------------------
くじのトップ部分
/*-------------------------------------------*/
.flex_line .btn-container {
    padding: 1rem 0.5rem 0 0rem;
}
/*-------------------------------------------
くじのトップ部分
/*-------------------------------------------*/


/*-------------------------------------------
久保メッセージ
/*-------------------------------------------*/
.message_wrap .title {
    font-size: 1.6rem;
}
.message_wrap .conts {
	font-size:1.2rem;
}
.message_wrap .day {
	font-size:1.2rem;
}
.message_wrap .day .cate {
	font-size:1.1rem;
}
.flex_message div{
	font-size:1.2rem;
}
/*-------------------------------------------
久保メッセージ
/*-------------------------------------------*/
/*-------------------------------------------
久保メッセージ　過去記事
/*-------------------------------------------*/

.pastwrap .onimg {
	width:auto;
	max-width:none;
}

.pastwrap .onimg img{
	width:auto;
}

.pastwrap .past_text {
    font-size: 1rem;
}
/*-------------------------------------------
久保メッセージ　過去記事
/*-------------------------------------------*/



/*************************** コレクションページ ***************************/
/* ===================================================
course  （ここもクリック前の横並びに並べる見映だけ）
=================================================== */
.course-wrapper {
    padding: 0 2rem;
    justify-content: space-between;
}
.course-item {
    width: 30%;
    padding: 0.8rem 0;
}
/*************************** コレクションページ ***************************/


/* SP下のメニューボタン */
.sp_btm_menu{
	display:flex;
	position:fixed;
	bottom:0;
	z-index:99999;
}
.sp_btm_menu a{
	position:relative;
	flex: 1;
}
.sp_btm_menu button{
	position:relative;
	flex: 1;
}
.sp_btm_menu .redmark {
    width:16px;
    height:16px;
	right: 1.5rem;
	border: 0.2rem solid #fcfcfc;
}

.sp_btm_menu .redmark_inner {
    padding-left: 0.3rem;
    font-size: 1rem;
}
/* フルスクリーンメニュー */
/* メニューボタン */
#btn-menu {
  transition: all .2s ease-in;
  background:none;
  border:none;
  padding:0;
}
/* メニュー */
#sp-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10,10,10,0.65);
  overflow: scroll;
  z-index: 1;
  transition: all .3s ease-in;
  visibility: hidden;
  opacity: 0;
}
 
.open-menu #sp-menu {
  visibility: visible;
  opacity: 1;
}
 
#sp-menu-position {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width:65%;
}
 
.sp-menu-list {
  list-style: none;
  padding:0;
  width:100%;
}
.sp-menu-list li{
  position:relative;
}

.sp-menu-list .redmark_inner {
    padding-left: 0.4rem;
    font-size: 1.2rem;
}

.sp-menu-list a {
  font-size: 22px;
  font-weight: bold;
  color: #e73363;
}

/* チュートリアル ***************/
/* 久保がしゃべるよ */
.mv-image.character img{
    max-width:110px;
}

.mv-comment {
    padding:1rem;
}
/* 久保がしゃべるよ */
/* チュートリアル ***************/




.menu_n{
	margin: 2rem auto;
}
.menu_n .menu_div{
	position:relative;
}
.menu_n img{
	width:80%;
}




}


@media screen and (max-width: 490px) {
/*--------------------------------------------------------------*/
.movie_waku_top{
	margin: -55% auto 0 auto;
}
/*--------------------------------------------------------------*/
}


@media screen and (max-width: 400px) {
/*--------------------------------------------------------------*/
.movie_waku_top{
	margin: -60% auto 0 auto;
}
/*--------------------------------------------------------------*/

}









@media screen and (max-width: 280px) {
/*--------------------------------------------------------------*/
.header {
	background:url(../../../../images/project/perfect/header_gk_sp.png) top 14px center / 280px 270px no-repeat #d9b34a;
	width: 100%;
	height: 390px;
	margin: -14px auto 0;
	position:relative;
	padding:1px 0;
	z-index:3;
}
/*--------------------------------------------------------------*/
/*** トップ ***/
.top_t td.one {
    width: 15%;
}
.top_t td.three .fs18 {
    font-size:.8rem;
}
.top_t td.four .fs12 {
    font-size:.6rem;
}

.gray_box {
    font-size: .6rem;
}
/*************　ポイント購入＋ボタン　*************/
.btn-container button {
    font-size: 1.2rem;
    border: double 0.2rem #E2D81B;
    width: 2.8rem;
    height: 2.8rem;
}
.point_box_top{
	padding: 0.2rem;
}
.point_box_top .fs14{
	font-size:.6rem;
}
.point_num {
    font-size: 1.2rem;
}
.coin_icon {
    width: 24%;
}

/*************　ポイント購入＋ボタン　*************/

/*-------------------------------------------
久保メッセージ
/*-------------------------------------------*/
.message_wrap .title {
    font-size: 1.4rem;
}
.message_wrap .conts {
    font-size: 1.1rem;
}
.message_wrap .day {
    font-size: 1.1rem;
}
.message_wrap .day .cate {
    font-size: 1rem;
}
.flex_message div {
    font-size: 1rem;
}
/*-------------------------------------------
久保メッセージ
/*-------------------------------------------*/


/*--------------------------------------------------------------*/
.form_wrap {
    margin: -290px auto 11px;
}
.form_wrap .fs16{
    font-size:1rem;
}
.form_wrap .fs14{
    font-size:1rem;
}
.fild{
	width:90%;
}
.fild2{
	width:90%;
}
/*--------------------------------------------------------------*/
.movie_waku_top{
	margin: -90% auto 0 auto;
}
/*--------------------------------------------------------------*/
/* チュートリアル ***************/
/* 久保がしゃべるよ */
.mv-image.character img{
    max-width:80px;
}
.pointer {
    right:1rem;
}

.mv-comment {
    padding:1rem;
}
/* 久保がしゃべるよ */
/* チュートリアル ***************/


}