body
{
	overflow       : scroll;
}

main
{
	font-family    : 'Zen Maru Gothic', "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-size      : 16pt;
	font-weight    : 500;
	line-height    : 1.8;
	
	min-width      : 1100px;

	background     : url(/asset/img/5ch-keyword/2508/back_01.png) top center repeat #fbe82d;
	
	overflow       : hidden;
}

a
{
	/* color          : #17a1e5; */
}

a:hover
{
	 /* color          : #40bfff; */
}

.page-top
{
	z-index        : 3;
	
	display        : none!important;	
}

h2
{
	margin         : 0 auto;

	text-align     : center;
}


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


.ribbon {
  position: relative;
	
  margin: 0 auto;
	
	width:500px;
  height: 60px;
	
  color: #fff;
	font-weight: bold;
  text-align: center;
  line-height: 60px;
	
  background: #ff3333;
	
  display: block;
}

.ribbon::before,
.ribbon::after {
  position: absolute;
  top: 0;
	
  content: '';
	width: 0px;
  height: 0px;
	
  border: 30px solid #ff3333;
}

.ribbon::before {
  left: -40px;
  border-left-width: 15px;
  border-left-color: transparent;
}

.ribbon::after {
  right: -40px;
  border-right-width: 15px;
  border-right-color: transparent;
}


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


.btn_obo a
{
	display        : block;
	
	margin         : 0 auto;
	padding        : 20px 0px 22px;
	
	width          : 630px;
	
	color          : #d92d0b;
	font-size      : 130%;
	font-weight    : bold;
	text-align     : center;
	line-height    : 1.0;
	text-decoration: none;
	
	background     : #fff;
	box-shadow     : 0px 0px 0px 4px #d92d0b, 0px 6px 0px 4px #d92d0b;
	border-radius  : 100px;
}

.btn_obo a:hover
{
	background     : #ffee33;
}

.btn_obo_off
{
	display        : block;
	
	margin         : 0 auto;
	padding        : 20px 0px 22px;
	
	width          : 630px;
	
	color          : #666;
	font-size      : 130%;
	font-weight    : bold;
	text-align     : center;
	line-height    : 1.0;
	text-decoration: none;
	
	background     : #ccc;
	box-shadow     : 0px 0px 0px 4px #666, 0px 6px 0px 4px #666;
	border-radius  : 100px;
}


.obo_btn_list
{
	margin         : 0 auto;
	
	width          : 95%;
	
	display        : flex;
	justify-content: space-between;
}

.obo_btn_list li
{
	width          : 47.5%;
}

.obo_btn_list li.single
{
	margin         : 0 auto;
	
	width          : 60%;
}

.obo_btn_list li.btn_obo_off
{
	width          : 73%;
}

.obo_btn_list li a
{
	display        : block;
	
	margin         : 0 auto;
	padding        : 15px 0px 20px;
	
	color          : #d92d0b;
	font-size      : 120%;
	font-weight    : bold;
	text-align     : center;
	line-height    : 1.0;
	text-decoration: none;
	
	background     : #fff;
	box-shadow     : 0px 0px 0px 4px #d92d0b, 0px 5px 0px 4px #d92d0b;
	border-radius  : 100px;
}

.obo_btn_list li a:hover
{
	background     : #ffee33;
}





/*=========================================================================================================

  MAIN_VISUAL

=========================================================================================================*/



#MAIN_VISUAL
{
	position       : relative;
	
	padding        : 65px 0 0;
}

#MAIN_VISUAL .inner
{
	position       : relative;
	
	margin         : 0 auto;
	padding        : 60px 0 0px;
	
	width          : 1100px;

	text-align     : center;
}

#MAIN_VISUAL .main_image
{
	box-shadow     : 10px 10px 30px -5px rgba(0, 0, 0, 0.25)
}

#MAIN_VISUAL .text_main
{
	margin-top     : 60px;

	color          : #1a1a1a;
	font-size      : 115%;
	font-weight    : bold;
	text-align     : center;
	line-height    : 2.2;
	letter-spacing : 0.05em;
	
	border-top     : 5px dotted #599f25;
}

#MAIN_VISUAL .text_main span
{
	display        : block;
	
	border-bottom  : 5px dotted #599f25;
}

/*
#MAIN_VISUAL .mv_image_03
{
	position       : absolute;
	bottom         : -70px;
	right          : -80px;
	
	z-index        : 3;
}
*/


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


#MAIN_VISUAL .mv_video_box
{
	position: relative;
}

#MAIN_VISUAL .mv_video_box .mv_video
{
	display: block;

	width: 100%;
	
	box-shadow     : 10px 10px 30px -5px rgba(0, 0, 0, 0.25)
}

#MAIN_VISUAL .mv_video_box .btn_audio
{
	position: absolute;
	top: 0;
	left: 0;
}

#MAIN_VISUAL .mv_video_box .btn_audio::after
{
	content: "";

	width: 60px;
	height: 60px;

	background-image: url(/asset/img/top/mainvisual/ico_s-off.svg);
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 45px;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;

	position: absolute;
	left: 30px;
	top: 30px;

	z-index: 5;

	cursor: pointer;
}

#MAIN_VISUAL .mv_video_box .btn_audio.s-on::after
{
	background-image: url(/asset/img/top/mainvisual/ico_s-on.svg);
}





/*=========================================================================================================

  ABOUT

=========================================================================================================*/



#ABOUT
{
	position       : relative;

	padding        : 60px 0;
	
	overflow       : hidden;

	z-index        : 1;
}
/*
#ABOUT::after
{
	content        : "";
	
	position       : absolute;
	bottom         : -30px;
	
	background     : url(/asset/img/5ch-keyword/2309/about_wave.png) top center repeat-x;
	height         : 30px;
	width          : 100%;
}
*/
#ABOUT .inner
{
	position       : relative;
	
	margin         : 0 auto;
	padding        : 50px 0 60px;
	
	width          : 1100px;

	background     : #fff;
	
	border-radius  : 20px;
	
	/*box-shadow     : 5px 5px 10px -5px rgba(0, 0, 0, 0.25);*/
	box-shadow     : 0px 0px 20px -10px rgba(0, 0, 0, 0.5);
	
	overflow       : hidden;
}

#ABOUT .text_main
{
	color          : #1a1a1a;
	font-size      : 110%;
	text-align     : center;
	line-height    : 1.8;
}

#ABOUT .text_main:not(:first-child)
{
	margin-top     : 30px;
}

#ABOUT .text_main strong
{
	color          : #e62e2e;
	font-size      : 160%;
	font-weight    : bold; 
}

#ABOUT .text_main .strong_text
{
	color          : #ff6600;
	font-size      : 120%;
	
	/* border-bottom  : 3px double #ff6600; */
}

#ABOUT .text_sub
{
	margin-top     : 20px;
	
	color          : #1a1a1a;
	font-size      : 85%;
	text-align     : center;
}
/*
#ABOUT .text_limit
{
	margin-top     : 45px;
	
	color          : #e62e2e;
	font-size      : 100%;
	text-align     : center;
}

#ABOUT .text_limit .limit_a
{
	display        : block;
	
	margin         : 0 auto;
	padding        : 2px 0px 5px;
	
	width          : 500px;
	
	color          : #fff;
	font-size      : 100%;
	text-align     : center;
	
	background     : #e62e2e;
}

#ABOUT .text_limit strong,
#ABOUT .limit_list strong
{
	font-size      : 160%;
	font-weight    : bold; 
	line-height    : 1.5;
}

#ABOUT .limit_list
{
	margin         : 0 auto;
	margin-top     : 0px;
	
	width          : 500px;
	
	color          : #e62e2e;
	font-size      : 100%;
	text-align     : center;
}

#ABOUT .limit_list li
{
	display        : flex;
	justify-content: center;
	align-items    : center;
	
	border-bottom  : 1px solid #f00;
}

#ABOUT .limit_list .limit_num
{
	width          : 4em;
	
	text-align     : left;
}

#ABOUT .limit_list .limit_date
{
	width          : 300px;
	
	text-align     : right;
}
*/

#ABOUT .limit_list
{
	margin         : 0 auto;
	margin-top     : 50px;
	
	width          : 440px;
}

#ABOUT .limit_list img
{
	width          : 100%;
}

#ABOUT .about_image_01
{
	position       : absolute;
	top            : 0px;
	left           : 0px;
	
	width          : 200px;
}

#ABOUT .about_image_02
{
	position       : absolute;
	top            : 0px;
	right          : 0px;
	
	width          : 200px;
}

#ABOUT .about_image_03
{
	position       : absolute;
	bottom         : 0px;
	left           : 30px;
	
	width          : 180px;
}





/*=========================================================================================================

  PRESENT

=========================================================================================================*/



#PRESENT
{
	position       : relative;

	background     : url(/asset/img/5ch-keyword/2508/present_back.png) top center repeat #ff9d00;
	
	/*background-attachment: fixed;*/
}

#PRESENT[data-type="second"]
{
	padding-top    : 60px;
}

#PRESENT h2
{
	padding-top    : 100px;
}

#PRESENT .inner
{
	padding        : 0px 0 150px;
}

#PRESENT .present_box
{
	margin         : 0 auto;
	margin-top     : 100px;
	
	width          : 1100px;
}

#PRESENT .present_box.first
{
	margin-top     : 80px;
}


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


#PRESENT .present_period
{
	position       : relative;
	
	margin         : 0 0px;
	
	height         : 80px;
	
	text-align     : center;
	
	background     : #d92d0b;
}

#PRESENT .present_period::before,
#PRESENT .present_period::after
{
	content        : "";
	
	border         : 40px solid #d92d0b;
}

#PRESENT .present_period::before
{
	position       : absolute;
	top            : 0;
	left           : -40px;
	
	border-left-width: 25px;
	border-left-color: transparent;
}

#PRESENT .present_period::after
{
	position       : absolute;
	top            : 0;
	right          : -40px;
	
	border-right-width: 25px;
	border-right-color: transparent;
}

#PRESENT .present_period p
{
	display        : inline-block;
	
	margin-top     : -4px;
	
	color          : #fff;
	font-size      : 160%;
	font-weight    : bold;
	text-align     : center;
	line-height    : 1.0;
	line-height    : 80px;
}

#PRESENT .present_period p strong
{
	margin-right   : 0px;
	
	font-size      : 130%;
}

#PRESENT .present_period p span
{

}

#PRESENT .present_period .present_bln
{
	position       : absolute;
	top            : -55px;
	left           : -5px;
}


#PRESENT .ex_present .present_period
{
	background     : #ffee33;
}

#PRESENT .ex_present .present_period::before,
#PRESENT .ex_present .present_period::after
{
	border         : 40px solid #ffee33;
}

#PRESENT .ex_present .present_period::before
{
	border-left-width: 25px;
	border-left-color: transparent;
}

#PRESENT .ex_present .present_period::after
{
	border-right-width: 25px;
	border-right-color: transparent;
}

#PRESENT .ex_present .present_period p
{
	color          : #d92d0b;
}


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


#PRESENT .present_wrap
{
	margin-top     : 60px;
}

#PRESENT .present_wrap + .present_wrap
{
	margin-top     : 90px;
	padding-top    : 60px;

	border-top     : 5px dotted #d92d0b;
}

#PRESENT .ex_text_box
{
	margin-bottom  : 60px;

	text-align     : center;
}


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


#PRESENT .present_list
{
	display        : flex;
	justify-content: center;
	
	position       : relative;
	
	z-index        : 1;
}
/*
#PRESENT .present_list:not(.first)
{
	margin-top     : 90px;
	padding-top    : 80px;

	border-top     : 5px dotted #d92d0b;
}
*/
#PRESENT .present_list li
{
	width          : 440px;

	border-radius  : 15px;
	overflow       : hidden;
}

#PRESENT .present_list li.type_c
{
	width          : 540px;

	border-radius  : 0px;
}

#PRESENT .present_list li:nth-child(2)
{
	margin-left    : 80px;
}

#PRESENT .present_list li img
{
	width          : 100%;
}

#PRESENT .text_note
{
	margin-top     : 20px;
}

#PRESENT .text_note li
{
	margin-left    : 1em;
	text-indent    : -1em;
	
	font-size      : 70%;
	line-height    : 1.4;
}

#PRESENT .btn_obo,
#PRESENT .btn_obo_off
{
	margin-top     : 80px;
	
	text-align     : center;
}


#PRESENT .obo_btn_list
{
	margin-top     : 30px;
	margin-bottom  : 0px;

	text-align     : center;
}

#PRESENT .obo_btn_list[data-type="notext"]
{
	margin-top     : 80px;
}

/*
#PRESENT .obo_btn_list li.btn_obo_off
{
	width          : 73%;
}
*/

#PRESENT .obo_btn_list li a
{
	color          : #1a1a1a;
	font-size      : 130%;
	
	box-shadow     : 0px 0px 0px 5px #d92d0b, 0px 6px 0px 4px #8f2b18;
}

#PRESENT .obo_btn_list li a:hover
{
	background     : #ffff66;
}

#PRESENT .obo_btn_list li a strong
{
	display        : inline-block;
	margin-top     : -4px;
	vertical-align : -3px;
	
	font-size      : 160%;
	font-weight    : bold;
}

#PRESENT .obo_btn_list li a strong.type_a
{
	color          : #b3376d;
}

#PRESENT .obo_btn_list li a strong.type_b
{
	color          : #2d9685;
}

#PRESENT .obo_btn_list li a strong.type_c
{
	padding        : 4px 0;
	color          : #d23900;
	font-size      : 130%;
}

#PRESENT .obo_btn_list li .ex_text
{
	display        : block;
	
	margin-bottom  : 5px;
	
	color          : #1a1a1a;
	font-size      : 120%;
	text-align     : center;
}

#PRESENT .obo_btn_list li .ex_text strong
{
	color          : #ff0;
	font-size      : 140%;
	font-weight    : bold;
}


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


#PRESENT .text_note
{
	margin-top     : 60px;
	margin-bottom  : -30px;
}

#PRESENT .text_note li
{
	margin-left    : 1em;
	text-indent    : -1em;
	
	font-size      : 70%;
	line-height    : 1.4;
}

#PRESENT .text_note li + li
{
	margin-top     : 5px;
}


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


#PRESENT .next_box
{
	margin         : 0 auto;
	margin-top     : 90px;
	padding-top    : 80px;

	width          : 1100px;

	border-top     : 5px dotted #d92d0b;
}

#PRESENT .next_box .next_list
{
	display        : flex;
	justify-content: center;
	flex-wrap      : wrap;
	gap            : 40px;
}

#PRESENT .next_box .next_list + .next_list
{
	margin-top     : 40px;
}

#PRESENT .next_box .next_list li
{
	width          : 530px;
}

#PRESENT .next_box .next_list li img
{
	width          : 100%;

	border-radius  : 20px;
}

#PRESENT .next_box .next_list li a:hover
{
	opacity        : 0.8;
}


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


.btn_area
{
	padding        : 74px 0 80px;

	background     : #fff;
}





/*=========================================================================================================

  HOWTO

=========================================================================================================*/



#HOWTO
{
	position       : relative;

	background     : #fff;
}

#HOWTO::before
{
	content        : "";
	
	position       : absolute;
	top            : -40px;
	
	background     : url(/asset/img/5ch-keyword/2309/howto_wave.png) top center repeat-x;
	height         : 40px;
	width          : 100%;
}

#HOWTO h2
{
	padding-top    : 50px;
}

#HOWTO .inner
{
	margin         : 0 auto;
	padding        : 0px 0 100px;
	
	width          : 1100px;
}

#HOWTO .obo_box
{
	margin-top     : 60px;
	counter-reset  : circle 0;
	
	border-bottom  : 4px dotted #c5a26f;
}

#HOWTO .obo_box > li
{
	padding        : 30px 0px 35px 50px;
	
	border-top     : 4px dotted #c5a26f;
	
	position       : relative;
}

#HOWTO .obo_box > li::before
{
    content          : counter(circle);
    counter-increment: circle 1;

    position       : absolute;
    top            : 20px;
    left           : 20px;

    color          : #c30d23;
    font-size      : 3rem;
    font-weight    : bold;
}

#HOWTO .obo_box .text_head
{
	font-size      : 100%;
}

#HOWTO .obo_box .text_main
{
	margin-top     : 10px;
}

#HOWTO .obo_box .text_main strong
{
	color          : #e62e2e;
	font-size      : 100%;
	font-weight    : bold; 
}

#HOWTO .obo_box .text_note
{
	margin-top     : 10px;
	
	font-size      : 80%;
}

#HOWTO .obo_box .text_note li
{
	margin-left    : 1em;
	text-indent    : -1em;
}


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


#HOWTO .btn_obo,
#HOWTO .btn_obo_off
{
	margin-top     : 40px;
	margin-bottom  : 15px;
}


#HOWTO .obo_btn_list
{
	margin         : 0;
	margin-top     : 40px;
	margin-bottom  : 15px;
}


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


#HOWTO .ap_box
{
	position       : relative;
	
	margin-top     : 80px;
	padding        : 40px;
	
	background     : #f4d11f;
}

#HOWTO .ap_box .text_box
{
	width          : 740px;
}

#HOWTO .ap_box .text_box .ap_text
{
	line-height    : 1.6;
}

#HOWTO .ap_box .text_box .ap_text strong
{
	display        : block;
	
	margin-bottom  : 15px;
	
	color          : #e22508;
	font-size      : 160%;
	font-weight    : bold;
	text-align     : left;
	line-height    : 1.0;
}

#HOWTO .ap_box .text_box .btn_ap
{
	margin-top     : 30px;
}

#HOWTO .ap_box .text_box .btn_ap a
{
	display        : block;
	
	margin         : 0 auto;
	padding        : 15px 0px;
	
	width          : 630px;
	
	color          : #fff;
	font-size      : 100%;
	font-weight    : bold;
	text-align     : center;
	line-height    : 1.0;
	text-decoration: none;
	
	background     : #e22508;
	border-radius  : 100px;
}

#HOWTO .ap_box .text_box .btn_ap a:hover
{
	color          : #e22508;
	
	background     : #fff;
}

#HOWTO .ap_box .ap_illust
{
	position       : absolute;
	bottom         : 0;
	right          : 40px;
}


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


#HOWTO .ex_obo_box
{
	margin-top     : 60px;
	padding        : 40px;
	padding-bottom : 0px;
	
	border         : 5px solid #ff7f00;
	border-radius  : 30px;
}

#HOWTO .ex_obo_box h3
{
	color          : #ff7f00;
	font-size      : 150%;
	font-weight    : bold;
	text-align     : center;
	line-height    : 1.0;
}

#HOWTO .ex_obo_box .obo_box
{
	margin-top     : 40px;
	
	border-bottom  : 4px dotted #e22508;
	border-bottom  : none;
}

#HOWTO .ex_obo_box .obo_box > li
{
	/*border-top     : 4px dotted #e22508;*/
}

#HOWTO .ex_obo_box .obo_btn_list
{
	justify-content: center;
}

#HOWTO .ex_obo_box .obo_btn_list  li
{
	width          : 80%;
}


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


#HOWTO .pp_box
{
	margin-top     : 80px;
}

#HOWTO .pp_box .h4_text
{
	margin-bottom  : 20px;

	color          : #518c4d;
	font-size      : 120%;
}

#HOWTO .pp_box .text_list
{
	margin         : 0 auto;
	padding        : 0 20px;
}

#HOWTO .pp_box .text_list li
{
	list-style-type: disc;
	margin-left    : 1.2em;

	font-size      : 95%;
	line-height    : 1.6;
}

#HOWTO .pp_box .text_list li + li
{
	margin-top     : 15px;
}

#HOWTO .pp_box .text_list li .paddent
{
	margin-top     : 10px;

	font-size      : 80%;
}

#HOWTO .pp_box .text_list li .paddent + .paddent
{
	margin-top     : 5px;
}







/*=======================================================================================================*/


br.compact { display : block; margin-top : 20px; }
br.compact2{ display : block; margin-top : 10px; }