@charset "UTF-8";


/* --------------------------------------------------------------------------
Placeholder
---------------------------------------------------------------------------- */
::-webkit-input-placeholder { color:#9B9D99; font-size:80%; font-family: mp; text-align:center; }
::-ms-input-placeholder { color:#9B9D99; font-size:80%; font-family: mp; text-align:center; }
::-moz-placeholder { color:#9B9D99; font-size:80%; font-family: mp; text-align:center; }

/* --------------------------------------------------------------------------
Cursor
---------------------------------------------------------------------------- */
.zoom_out { cursor: zoom-out !important; }
.pointer { cursor: pointer !important; }
.default { cursor: default !important; }
.z1000 { z-index: 1001 !important; }

/* --------------------------------------------------------------------------
popup
---------------------------------------------------------------------------- */
div.pop_back { width:100%; height:100%; margin:0; padding:0; background: rgba(0,0,0,0.8); position: fixed; top:0; left:0; z-index: 98; }
div.pop_in { width:50%; max-height: 80vh; margin:0; padding:20px; background: var(--pop_color); border-radius: 12px; overflow-x: hidden; overflow-y: auto;  position: fixed; top:10vh; left:25%; z-index: 98; }
div.pop_in_mid { width:60%; max-height: 80vh; margin:0; padding:20px; background: var(--pop_color); border-radius: 12px; overflow-x: hidden; overflow-y: auto;  position: fixed; top:10vh; left:20%; z-index: 98; }
div.pop_in_wide { width:85%; max-height: 94vh; margin:0; padding:20px; background: var(--pop_color); border-radius: 12px; overflow-x: hidden; overflow-y: auto;  position: fixed; top:3vh; left:7.5%; z-index: 98; }

p.pop_title { width:90%; margin:20px auto 0 auto; padding:0; text-align: center; font-size: 200%; color:#524C42; }
p.pop_str { width:90%; margin:30px auto 0 auto; padding:0; font-size:110%; color:#524C42; }

div.pop_obj { width:100%; margin:0; padding:0; overflow: hidden; }
input.pininput { width:300px; margin:40px auto 0 auto; padding:15px; background: #fff; border:none; border-radius: 8px; font-size:120%; }
input.pinbtn { width:200px; margin:30px auto 20px auto; padding:15px 0 15px 0; color:#fff; border:none; border-radius: 4px; }
p.pop_close_btn { width:200px; margin:30px auto 20px auto; padding:15px 0 15px 0; color:#fff; border:none; border-radius: 4px; }

p.pclose_btn { width:200px; margin:30px auto 20px auto; padding:15px 0 15px 0; color:#fff; border:none; border-radius: 4px; background: var(--head_color); }
p.pclose_btn:hover { width:200px; margin:30px auto 20px auto; padding:15px 0 15px 0; color:#fff; border:none; border-radius: 4px; background: var(--icon_blue_hover_color); }

div.info_grid { width:90%; margin:0 auto 0 auto; padding:40px 0 0 0; display: grid; grid-template-columns: 40% 1fr; gap: 15px; }
div.info_left { margin:0; padding:0; overflow: hidden; }
div.info_left img { width:100%; margin:0; padding:0; }
p.info_str { margin:0; padding:0; font-size:110%; text-align: left; color:var(--head_color); }

div.info_one { width:90%; margin:0 auto 0 auto; padding:40px 0 0 0; overflow: hidden; }
p.info_one_str { width:100%; margin:0; padding:0; font-size: 120%; color:var(--head_color); text-align: center; }
div.info_one_img { width:100%; margin:0 0 10px 0; padding:0; overflow: hidden; }
div.info_one_img img { width:100%; margin:0; padding:0; }

p.er { width:90%; max-width: 500px; margin:10px auto 0 auto; padding:10px; background: var(--icon_red_hover_color); color:#fff; text-align: center; font-size:100%; }


/* --------------------------------------------------------------------------
Discord
---------------------------------------------------------------------------- */
div.discord_qr { width:300px; height:300px; margin:30px auto 0 auto; padding:0; overflow: hidden; }
div.discord_qr img { width:100%; margin:0; padding:0; }


/* --------------------------------------------------------------------------
search
---------------------------------------------------------------------------- */
div.border_under { width:80%; margin:30px auto 0 auto; height:2px; padding:0; border-style: solid; border-color: var(--head_color); border-width:0 0 1px 0; }
div.result_box { width:90%; margin:0 auto 0 auto; padding:30px 0 30px 0; }
div.result_box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
div.result_box_2 { width:90%; margin:0 auto 0 auto; padding:30px 0 30px 0; }
div.result_box_2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
p.result_name { width:100%; margin:10px auto 0 auto; padding:10px; background: var(--head_color); color:var(--pop_color); text-align: left; font-size:100%; cursor: pointer; }
p.result_name:hover { width:100%; margin:10px auto 0 auto; padding:10px; background: var(--head_color); color:#fff; text-align: left; font-size:100%; cursor: pointer; }
span.taitensumi { background: var(--icon_red_color); color:#fff; font-size:80%; padding:5px; }
p.nogo { width:100%; margin:30px 0 0 0; padding:0; font-size:110%; text-align: center; }


div.trush_obj { width:100%; margin:20px 0 0 0; padding:0; position: relative; }
div.detail_trush { width:30px; height:30px; margin:0; padding:0; position: absolute; bottom:10px; right:10px; cursor: pointer; }
div.detail_trush img { width:100%; height:100%; margin:0; padding:0; }
div.detail_pdf { width:35px; height:35px; margin:0; padding:0; position: absolute; bottom:10px; right:10px; cursor: pointer; }
div.detail_pdf img { width:100%; height:100%; margin:0; padding:0; }

div.bottom_sub_obj { width:90%; margin:0 10% 0 0; padding:0; overflow: hidden; }
p.sub_menu_str { margin:0 20px 0 0; padding:10px; color:var(--head_color); font-size: 100%; cursor: pointer; float:left; }
p.sub_menu_str:hover { margin:0 20px 0 0; padding:10px; background:var(--head_color); color:var(--pop_color);  font-size: 100%; cursor: pointer; float:left; }

/* -----fukidasi----- */
.fukidashi { position: absolute; bottom:65px; right:50px; width: fit-content; padding: 12px 16px; border-bottom: 2px solid var(--fukidashi_color); }
.fukidashi::before { content: ""; position: absolute; right: -24px; bottom: -13px; width: 30px; height: 2px; transform: rotate(50deg); box-sizing: border-box; background-color: var(--fukidashi_color); }
.fukidashi::after { content: ""; position: absolute; right: -23px; bottom: -28px; width: 8px; height: 8px; box-sizing: border-box; border: 1px solid #ffffff; /* 背景色と同じ色を指定 */ border-radius: 50%; background-color: var(--fukidashi_color); }


/* ------------------------
radio button
------------------------- */
fieldset { border: none; padding: 30px auto 30px auto; margin: 0; text-align: center; }
.radio-inline__input { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; }
.radio-inline__label { display: inline-block; padding: 15px; margin-right: 18px; border-radius: 3px; transition: all .2s; cursor: pointer; background: var(--tab_color); }
.radio-inline__input:checked + .radio-inline__label { background: var(--icon_red_color); color: #fff; }
.radio-inline__input:focus + .radio-inline__label { outline-color: var(--head_color); outline-offset: -2px; outline-style: auto; outline-width: 5px; }

.shift_up_inline__input { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; }
.shift_up_inline__label { display: inline-block; padding: 15px; margin-right: 18px; border-radius: 3px; transition: all .2s; cursor: pointer; background: var(--tab_color); color:var(--font_tab_color); font-size: 80%; }
.shift_up_inline__input:checked + .shift_up_inline__label { background: var(--icon_red_color); color: #fff; }
.shift_up_inline__input:focus + .shift_up_inline__label { outline-color: var(--head_color); outline-offset: -2px; outline-style: auto; outline-width: 5px; }


/* ------------------------
check button
------------------------- */
input[type=checkbox] { display: none; }
input[type=checkbox]:checked + label.checkbox_shop:before { opacity: 1; }
label.checkbox_shop { box-sizing: border-box; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; }
label.checkbox_shop { margin: 0 20px 8px 0; padding: 12px 12px 12px 42px; vertical-align: middle; cursor: pointer; color: var(--font_tab_color); font-size: 90%; }
label.checkbox_shop { position: relative; display: inline-block; border-radius: 8px; background-color: var(--tab_color); }
label.checkbox_shop:hover { background-color: var(--btn_perple_color); color:#000; }
label.checkbox_shop:after { -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; position: absolute; top: 50%; left: 15px; }
label.checkbox_shop:after { display: block; margin-top: -10px; width: 16px; height: 16px; border: 2px solid var(--tab_color); border-radius: 6px; content: ''; }
label.checkbox_shop:before { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; position: absolute; top: 50%; left: 21px; display: block; }
label.checkbox_shop:before { content: ''; opacity: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
label.checkbox_shop:before { margin-top: -7px; width: 5px; height: 9px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; }
label.checkbox_shop:hover:after { border-color: #000; }
input[type=checkbox]:checked + label.checkbox_shop { background: var(--btn_perple_color); color:#fff; }
input[type=checkbox]:checked + label.checkbox_shop:after { /* 枠の色 */ border: 2px solid #FFD7FF; }


/* --------------------------------------------------------------------------
Animation
---------------------------------------------------------------------------- */
/* -- fade in -- */
.fadeIn { animation-name:fadeInAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeInAnime{ from { opacity: 0; } to { opacity: 1; }}

/* -- fade out -- */
.fadeOut { animation-name:fadeOutAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:1; }
@keyframes fadeOutAnime{ from { opacity: 1; } to { opacity: 0; }}


/* ------------------------------------------------------
300 - 350 (iphone 4)
-------------------------------------------------------- */
@media screen and (min-width: 300px ) and (max-width:350px) {

	div.pop_in { width:90%; position: fixed; top:5vh; left:5%; }
	div.pop_in_mid { width:90%; position: fixed; top:10vh; left:5%; }
	div.pop_in_wide { width:90%; left:5%; padding:20px 20px 60px 20px; }
	p.pop_title { font-size: 150%; }
	p.pop_str { font-size:100%; }
	input.pininput { width:300px; padding:10px; font-size:100%; }
	input.pinbtn { width:150px; padding:10px 0 10px 0; }
	p.pop_close_btn { width:150px; padding:10px 0 10px 0; }

	div.info_grid { width:95%; grid-template-columns: 65% 1fr; gap: 15px; }
	p.info_str { font-size:90%; }

	/* ------------------------------------------------------
	300 - 350 (iphone 5)
	-------------------------------------------------------- */
	@media screen and (max-width : 350px) and (max-height : 568px) {

	}
}


/* ------------------------------------------------------
350 - 400 ( android)(iphone6-375)（ SE ）
-------------------------------------------------------- */
@media screen and (min-width: 351px ) and (max-width:400px) {

	div.pop_in { width:90%; position: fixed; top:5vh; left:5%; }
	div.pop_in_mid { width:90%; position: fixed; top:10vh; left:5%; }
	div.pop_in_wide { width:90%; left:5%; padding:20px 20px 60px 20px; }
	p.pop_title { font-size: 150%; }
	p.pop_str { font-size:100%; }
	input.pininput { width:300px; padding:10px; font-size:100%; }
	input.pinbtn { width:150px; padding:10px 0 10px 0; }
	p.pop_close_btn { width:150px; padding:10px 0 10px 0; }

	div.info_grid { width:95%; grid-template-columns: 65% 1fr; gap: 15px; }
	p.info_str { font-size:90%; }

}


/* ------------------------------------------------------
400 - 450(iphone6plus 414)
-------------------------------------------------------- */
@media screen and (min-width: 401px) and (max-width:450px) {

	div.pop_in { width:90%; position: fixed; top:5vh; left:5%; }
	div.pop_in_mid { width:90%; position: fixed; top:10vh; left:5%; }
	div.pop_in_wide { width:90%; left:5%; padding:20px 20px 60px 20px; }
	p.pop_title { font-size: 150%; }
	p.pop_str { font-size:100%; }
	input.pininput { width:300px; padding:10px; font-size:100%; }
	input.pinbtn { width:150px; padding:10px 0 10px 0; }
	p.pop_close_btn { width:150px; padding:10px 0 10px 0; }

	div.info_grid { width:95%; grid-template-columns: 65% 1fr; gap: 15px; }
	p.info_str { font-size:90%; }

}


/* ------------------------------------------------------
450 - 500(iphone4 横)
-------------------------------------------------------- */
@media screen and (min-width: 451px) and (max-width:500px) {

	div.pop_in { width:90%; position: fixed; top:5vh; left:5%; }
	div.pop_in_mid { width:90%; position: fixed; top:10vh; left:5%; }
	div.pop_in_wide { width:90%; left:5%; padding:20px 20px 60px 20px; }
	p.pop_title { font-size: 150%; }
	p.pop_str { font-size:100%; }
	input.pininput { width:300px; padding:10px; font-size:100%; }
	input.pinbtn { width:150px; padding:10px 0 10px 0; }
	p.pop_close_btn { width:150px; padding:10px 0 10px 0; }

	div.info_grid { width:95%; grid-template-columns: 65% 1fr; gap: 15px; }
	p.info_str { font-size:90%; }

	/* ------------------------------------------------------
	450 - 500(pc)
	-------------------------------------------------------- */
	@media screen and (max-width : 500px) and (min-height : 480px) {

	}
}


/* ------------------------------------------------------
500 - 550 ( xperia z ultra)
-------------------------------------------------------- */
@media screen and (min-width: 501px) and (max-width:550px){

	div.pop_in { width:90%; position: fixed; top:5vh; left:5%; }
	div.pop_in_mid { width:90%; position: fixed; top:10vh; left:5%; }
	div.pop_in_wide { width:90%; left:5%; padding:20px 20px 60px 20px; }
	p.pop_title { font-size: 150%; }
	p.pop_str { font-size:100%; }
	input.pininput { width:300px; padding:10px; font-size:100%; }
	input.pinbtn { width:150px; padding:10px 0 10px 0; }
	p.pop_close_btn { width:150px; padding:10px 0 10px 0; }

	div.info_grid { width:95%; grid-template-columns: 65% 1fr; gap: 15px; }
	p.info_str { font-size:100%; }

	/* ------------------------------------------------------
	500 - 550(pc)
	-------------------------------------------------------- */
	@media screen and (max-width : 550px) and (min-height : 350px) {
	}
}


/* ------------------------------------------------------
550 - 600(iphone5 横)
-------------------------------------------------------- */
@media screen and (min-width: 551px) and (max-width:600px){

	div.pop_in { width:90%; position: fixed; top:5vh; left:5%; }
	div.pop_in_mid { width:90%; position: fixed; top:10vh; left:5%; }
	div.pop_in_wide { width:90%; left:5%; }
	p.pop_title { font-size: 150%; }
	p.pop_str { font-size:100%; }
	input.pininput { width:300px; padding:10px; font-size:100%; }
	input.pinbtn { width:150px; padding:10px 0 10px 0; }
	p.pop_close_btn { width:150px; padding:10px 0 10px 0; }

	div.info_grid { width:95%; grid-template-columns: 65% 1fr; gap: 15px; }
	p.info_str { font-size:100%; }

	/* ------------------------------------------------------
	550 - 600(pc)
	-------------------------------------------------------- */
	@media screen and (max-width : 600px) and (min-height : 350px) {
	}
}


/* ------------------------------------------------------
600 - 650(android 横)
-------------------------------------------------------- */
@media screen and (min-width: 601px) and (max-width:650px){

	div.pop_in { width:90%; position: fixed; top:5vh; left:5%; }
	div.pop_in_mid { width:90%; position: fixed; top:10vh; left:5%; }
	div.pop_in_wide { width:90%; left:5%; }
	p.pop_title { font-size: 150%; }
	p.pop_str { font-size:100%; }
	input.pininput { width:300px; padding:10px; font-size:100%; }
	input.pinbtn { width:150px; padding:10px 0 10px 0; }
	p.pop_close_btn { width:150px; padding:10px 0 10px 0; }

	div.info_grid { width:95%; grid-template-columns: 65% 1fr; gap: 15px; }
	p.info_str { font-size:100%; }

	/* ------------------------------------------------------
	600 - 650(pc)
	-------------------------------------------------------- */
	@media screen and (max-width: 650px) and (min-height:420px){

	}
}


/* ------------------------------------------------------
650 - 700(iphone6横=667)（ SE横 ）
-------------------------------------------------------- */
@media screen and (min-width: 651px) and (max-width:700px){

	div.pop_in { width:90%; position: fixed; top:5vh; left:5%; }
	div.pop_in_mid { width:90%; position: fixed; top:10vh; left:5%; }
	div.pop_in_wide { width:90%; left:5%; }
	p.pop_title { font-size: 150%; }
	p.pop_str { font-size:100%; }
	input.pininput { width:300px; padding:10px; font-size:100%; }
	input.pinbtn { width:150px; padding:10px 0 10px 0; }
	p.pop_close_btn { width:150px; padding:10px 0 10px 0; }

	div.info_grid { width:95%; grid-template-columns: 65% 1fr; gap: 15px; }
	p.info_str { font-size:90%; }

	/* ------------------------------------------------------
	650 - 700(pc)
	-------------------------------------------------------- */
	@media screen and (max-width: 700px) and (min-height:450px){
	}
}


/* ------------------------------------------------------
700 - 750(iphone6plus横=736)
-------------------------------------------------------- */
@media screen and (min-width: 701px) and (max-width:750px){

	div.pop_in { width:90%; position: fixed; top:5vh; left:5%; }
	div.pop_in_mid { width:90%; position: fixed; top:10vh; left:5%; }
	div.pop_in_wide { width:90%; left:5%; }
	p.pop_title { font-size: 150%; }
	p.pop_str { font-size:100%; }
	input.pininput { width:300px; padding:10px; font-size:100%; }
	input.pinbtn { width:150px; padding:10px 0 10px 0; }
	p.pop_close_btn { width:150px; padding:10px 0 10px 0; }

	div.info_grid { width:95%; grid-template-columns: 65% 1fr; gap: 15px; }
	p.info_str { font-size:100%; }

	/* ------------------------------------------------------
	700 - 750(pc)
	-------------------------------------------------------- */
	@media screen and (max-width: 750px) and (min-height:450px){
	}
}


/* ------------------------------------------------------
750 - 800( ipad )
-------------------------------------------------------- */
@media screen and (min-width: 751px) and (max-width:850px){

	div.pop_in { width:80%; position: fixed; top:10vh; left:10%; }
	div.pop_in_mid { width:80%; position: fixed; top:10vh; left:10%; }
	div.pop_in_wide { width:90%; left:5%; }
	div.detail_wrap { grid-template-columns: repeat(1, 1fr); gap: 0; }
	div.detail_left { border:none; }
	div.detail_center { border-width:1px 0 0 0; margin-top:30px; }
	div.detail_right { border-style: solid; border-color: var(--head_color) ; border-width:1px 0 0 0; margin-top:30px; }
	div.op_out { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	p.detail_etc { max-height: initial; }
	div.detail_img_box { padding:10px 0 10px 0; }

	div.info_grid { grid-template-columns: 60% 1fr; gap: 15px; }

}


/* ------------------------------------------------------
850 - 900
-------------------------------------------------------- */
@media screen and (min-width: 851px) and (max-width:900px) {

	div.pop_in { width:80%; position: fixed; top:10vh; left:10%; }
	div.pop_in_mid { width:80%; position: fixed; top:10vh; left:10%; }
	div.pop_in_wide { width:90%; left:5%; }

	div.info_grid { grid-template-columns: 60% 1fr; gap: 15px; }

}


/* ------------------------------------------------------
900 - 1000 (xperia z ultra 横)
-------------------------------------------------------- */
@media screen and (min-width: 901px) and (max-width:1000px) {

	div.pop_in { width:70%; position: fixed; top:10vh; left:15%; }
	div.pop_in_mid { width:80%; position: fixed; top:10vh; left:10%; }
	div.pop_in_wide { width:90%; left:5%; }

	div.info_grid { grid-template-columns: 60% 1fr; gap: 15px; }

	/* ------------------------------------------------------
	900 - 1000(pc)
	-------------------------------------------------------- */
	@media screen and (max-width : 1000px) and (min-height : 600px) {
		p.detail_etc { max-height: initial; }
	}
}


/* ------------------------------------------------------
1000 - 1100(ipad 横)
-------------------------------------------------------- */
@media screen and (min-width: 1001px) and (max-width:1300px){

	div.pop_in { width:70%; position: fixed; top:10vh; left:15%; }
	div.pop_in_mid { width:80%; position: fixed; top:10vh; left:10%; }
	div.pop_in_wide { width:90%; left:5%; }

	div.info_grid { grid-template-columns: 50% 1fr; gap: 15px; }


	/* ------------------------------------------------------
	1000 - 1100( height 700まで)
	-------------------------------------------------------- */
	@media screen and (max-width : 1300px) and (max-height : 700px) {
	}
}


/* ------------------------------------------------------
1101 - 1300
-------------------------------------------------------- */
@media screen and (min-width: 1301px) and (max-width:1400px){

	div.pop_in { width:70%; position: fixed; top:10vh; left:15%; }
	div.pop_in_mid { width:70%; position: fixed; top:10vh; left:15%; }
	div.pop_in_wide { width:90%; left:5%; }

}