@charset "UTF-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;
visibility:hidden;
}
.clearfix{ display: inline-block; }
/* Hides from IE Mac */
* html .clearfix{ height: 1%; }
.clearfix{ display:block; }

/* ---------- 初期 ---------- */
body { letter-spacing: 0.05em; -webkit-text-size-adjust: 100%; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; background: url("../images/bg_01.png") #F4F4F4; background-size: 1000px;}
img { max-width: 100%;}
a { text-decoration: none;}
a:hover { cursor: pointer;}
strong { font-weight: bold;}
/* ---------- /共通部分 ---------- */
#jougetyuou { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto;}
#kadomaru { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}
#resbtn { -webkit-appearance: none;}
#gurade { background: -moz-linear-gradient(開始位置, 開始色, 終了色); 
background: -webkit-linear-gradient(開始位置, 開始色, 終了色); 
background: linear-gradient(to 方向, 開始色, 終了色); }
.ancr { position: relative; transition: 0.5s;}
.anca { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 10; cursor: pointer;}
.ancr:hover { opacity: 0.75; transition: 0.5s; cursor: pointer;}
/* ---------- /参考タグ部分 ---------- */


section { text-align: center;}


/* PC */
@media screen and (min-width: 769px) {
	
	html { background: #F5F5F5;}
	body { width: 600px; margin: 0 auto; background: #fff;}
	
	#float_btn { position: fixed; z-index: 10; right: 0; bottom: 0; width: 100px;}
#float_btn img { cursor: pointer; display: block; margin-bottom: -2px; animation: fluffy1 3s ease infinite; width: 100%;}
	
.wrap { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
.sponly { display: none !important;}
h2.h2_ttl { text-align: center; font-size: 20px; display: inline-block; margin: 40px auto 25px; position: relative; z-index: 2; width: 100%; color: #838383;}
	
	header { width: 300px;}
	header img {}

#mv { width: 100%; margin: 0 auto;}
#mv img { width: 100%; height: auto; display: block;}
#mv {}

#main_text {  padding: 50px 0 80px;}
#main_text img { width: 90%; max-width: 700px;}
	
	.main_text1 { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; line-height: 1.8em; font-size: 32px; background: url("../images/h2_bg.png") no-repeat center; display: inline-block; background-size: contain; padding: 10px 0; line-height: 1.8em; margin-bottom: 15px;}
	.main_text1 img { width: 400px !important; height: auto;}
	.main_text2 { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; line-height: 1.8em; font-size: 20px; margin-bottom: 10px;}
	
	.stepimg { text-align: center;}
	.stepimg img { width: 80%; max-width: 600px; height: auto;}
	
	.main_text-video { max-width: 700px; margin: 20px auto; position: relative;}
	.main_text-video video { width: 100%; height: auto;}
	.main_text-video img { width: 100%; height: auto;}
	.main_text-video span { position: absolute; left: -30px; width: 100px; top: -30px;}

#about {}
#about .txt_center { line-height: 2em; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
	#about .txt_center span { font-size: 26px; background: url("../images/h2_bg.png") no-repeat center; display: inline-block; background-size: contain; padding: 10px 0; line-height: 1.8em;}
	
	
	#abouttop { padding: 5px 0 35px;}
	#abouttop img { width: 50%;}
	#abouttop .abouttop_txt { line-height: 1.6em; text-align: center; font-size: 12px; margin-top: 20px; color: #838383;}

	#about {}
	#about dl { width: 80%; margin: 0 auto 25px; box-sizing: border-box; border: solid 1px #cf8ecd;}
	#about dl:last-child { margin-bottom: 50px;}
	#about dl dt { background: #cf8ecd; color: #fff; font-size: 18px; padding: 15px 0;}
	#about dl dd { font-size: 14px; line-height: 1.8em; text-align: center;}
	#about dl dd ul { display: inline-block; padding: 10px; color: #838383;}
	#about dl dd ul li { text-align: left; position: relative; padding-left: 1em;}
	#about dl dd ul li.kome { font-size: 12px;}
	#about dl dd ul li::before { content: '・'; position: absolute; left: 0; top: 0;}
	#about dl dd ul li.kome::before { content: '※'; position: absolute; left: 0; top: 0;}
	#about dl dd ul li.none { padding: 0 10px;}
	#about dl dd ul li.none::before { display: none;}
	#about dl:last-child { margin-bottom: 0;}
	#about dl img { display: block;}
	.free_img { width: 80%; margin: 0 auto;}

#prize { padding: 80px 0;}
#prize .prize_inner { width: 98%; max-width: 1100px; margin: 0 auto;}
#prize .prize_inner dl { margin: 0 auto; margin-bottom: 40px; width: 90%;}
#prize .prize_inner dt { margin-bottom: 10px;}
#prize .prize_inner dt img { width: 80%; margin: 0 auto; display: block;}
#prize .prize_inner dd { line-height: 1.6em; font-size: 16px;}
#prize .txt_center { font-size: 13px; margin-top: 3em; line-height: 1.8em;}

#model { padding: 80px 0; width: 100%; max-width: 1440px; margin: 0 auto;}
#model .model_inner { width: 100%; max-width: 1440px;}
#model .model_left { width: 30%;}
#model .model_left h2 { text-align: left;}
#model .model_right { width: 66%; text-align: left; padding-right: 50px;}
#model .model_right .model_right-img { width: 40%; display: inline-block; margin-right: 5%; position: relative;}
	#model .model_right .model_right-img span { position: absolute; right: 10px; bottom: 10px; width: 30px; z-index: 10;}
#model .model_right .model_right-img img { width: 100%; height: auto;}
#model .model_right .model_right-txt { width: 57%; box-sizing: border-box; background: #fff; padding: 20px;}
#model .model_right .model_right-txt h3 { border-bottom: solid 1px #131313; padding-bottom: 0.8em; margin-bottom: 0.8em; font-size: 17px;}
#model .model_right .model_right-txt .comment { font-size: 13px; line-height: 1.5em;}

#rec { padding: 80px 0; width: 100%; max-width: 1440px; margin: 0 auto;}
#rec .rec_inner { width: 100%; max-width: 1440px;}
#rec .rec_left { width: 30%;}
#rec .rec_left img { width: 100%; height: auto;}
#rec .rec_right { width: 66%; text-align: left; padding-top: 30px;}
#rec .rec_right h2 { text-align: left;}
#rec .rec_right h2.h2_ttl::before { text-align: left; left: 100px !important;}
#rec .rec_right .txt_rec { padding-bottom: 60px;}
#rec .rec_right h5 { max-width: 700px; padding-right: 30px; font-size: 18px; margin-bottom: 10px; line-height: 1.5em;}
#rec .rec_right .txt { max-width: 700px; padding-right: 30px; margin-bottom: 30px; font-size: 13px; line-height: 1.8em;}

#schedule { padding: 40px 0 80px;}
#schedule ul { width: 90%; margin: 0 auto;}
#schedule ul li { background: #F7F7F7;; margin-bottom: 25px; box-sizing: border-box; padding: 15px 0; font-size: 16px; position: relative;}
#schedule ul li:last-child { margin-bottom: 0;}
#schedule ul li span { padding-left: 0.6em; display: inline-block; position: relative; margin-left: 0.5em; font-size: 14px;}
#schedule ul li span::before { content: '-'; position: absolute; left: 0; top: 0; display: block;}
#schedule ul li::before { position: absolute; top: -10px; left: -10px; font-size: 24px; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
#schedule ul li:nth-child(1)::before { content:'01';}
#schedule ul li:nth-child(2)::before { content:'02';}
#schedule ul li:nth-child(3)::before { content:'03';}
#schedule ul li:nth-child(4)::before { content:'04';}
#schedule ul li:nth-child(5)::before { content:'05';}
#schedule ul li:nth-child(6)::before { content:'06';}
#schedule ul li:nth-child(7)::before { content:'07';}
#schedule ul li:nth-child(8)::before { content:'08';}
#schedule ul li:nth-child(9)::before { content:'09';}
#schedule ul li:nth-child(10)::before { content:'10';}

#entry { padding: 20px 0 30px;}
#entry .whitearea { background: #fff; width: 80%; margin: 0 auto; margin: 0 auto; box-sizing: border-box; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; text-align: left;}
#entry .whitearea dl { color: #5A5857; font-size: 20px; margin-bottom: 30px;}
#entry .whitearea dl dt { margin-bottom: 15px;}
#entry .whitearea dl dt span { color:#fff; font-size: 10px; margin-right: 10px; display: inline-block; background: #E61B34; padding: 3px;}
#entry .whitearea dl dd { font-size: 15px;}
#entry .whitearea dl dd input[type="text"] { background: #F2F2F2; padding: 10px; box-sizing: border-box; border: none; width: 100%;}
#entry .whitearea dl dd input[type="tel"] { background: #F2F2F2; padding: 10px; box-sizing: border-box; border: none; width: 100%;}
#entry .whitearea dl dd input[type="email"] { background: #F2F2F2; padding: 10px; box-sizing: border-box; border: none; width: 100%;}
#entry .whitearea dl dd textarea { background: #F2F2F2; padding: 10px; box-sizing: border-box; border: none; width: 100%; height: 14em}
#entry .whitearea .btn { text-align: center;}
#entry .whitearea .btn input { display: inline-block; color: #fff; font-size: 20px !important; font-weight: bold; text-align: center; padding: 20px 0; background: #292C32; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; width: 438px; border: solid 2px #292C32; transition: 0.3s;}
#entry .whitearea .btn input:hover { color: #292C32; background: #fff; cursor: pointer !important;}

footer .footer_menu { padding: 10px 0; text-align: center; background: #fff;}
footer .footer_menu ul { font-size: 0;}
footer .footer_menu ul li { font-size: 12px; display: inline-block; padding-right: 1em; margin-right: 1em; border-right: solid 1px #131313;}
footer .footer_menu ul li:last-child { margin-right: 0; padding-right: 0; border: none;}
footer .footer_menu ul li a { color: #131313;}
footer .footer_menu ul li a:hover { text-decoration: underline;}

footer #copyright { background: #131313; text-align: center; padding: 10px 0;}
footer #copyright p { font-size: 10px; color: #fff;}



	
	#news { padding: 100px 0 80px;}
	#news .inner { width: 650px; margin: 0 auto;}
	#news dl { border-bottom: dotted 1px #CECECE; padding-bottom: 10px; margin-bottom: 10px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
	#news dl:last-child { margin-bottom: 0; padding-bottom: 0; border: none;}
	#news dt { width: 18%; color: #ff6796; line-height: 1.5em;}
	#news dd { width: 82%; text-align: left; line-height: 1.5em;}
	#news dd a { color: #000;}
	#news dd a:hover { color: #ff6796;}
	
	#entrants { background: #F2F2F2; padding: 80px 0;}
	#entrants .inner { width: 1100px; margin: 0 auto;}
#entrants .entrant { cursor: pointer; width: 23%; float: left; margin-right: 2.333%;}
#entrants .entrant p { text-align: center; line-height: 1.2em;}
#entrants .entrant:nth-child(4n) { margin-right: 0;}
#entrants .entrant .name { margin: 20px 0 10px; font-size: 18px;}
#entrants .entrant .group { color: #ff6796; font-size: 14px; height: 3em;}
#entrants .entrant .group a { color: #ff6796;}

#entrants .box { width: 250px; height: 250px; position: relative;}
#entrants .box .thumnnail { display: block; width: 100%; height: 100%; position: absolute; background-size: cover; z-index: 1; background-position: center;}
#entrants .entrant .btn {
	display: block; width: 100%; height: 100%;
   position: absolute; z-index: 2;
    display: inline-block; top: 0; left: 0;
    text-decoration: none !important;
}
#entrants .entrant .btn span { opacity: 0; transition: all 0.7s ease-out; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto;}
#entrants .entrant:hover .btn span { opacity: 1; transition: all 0.7s ease-out;}
#entrants .btn01 {
    background-color: #3169d1;
    color: #fff !important;
}
#entrants .entrant:hover .btn {
    opacity: 0.8;
}
#entrants .btn12 {
    background: transparent;
    color: #fff !important;
    -webkit-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
    background: -webkit-linear-gradient(180deg, rgba(242,156,43,0.8), rgba(244, 188, 114, 0.8), rgba(205, 200, 252, 0), rgba(205, 200, 252, 0));
    background: -webkit-linear-gradient(right, rgba(242,156,43,0.8), rgba(244, 188, 114, 0.8), rgba(205, 200, 252, 0), rgba(205, 200, 252, 0));
    background: linear-gradient(270deg, rgba(242,156,43,0.8), rgba(244, 188, 114, 0.8), rgba(205, 200, 252, 0), rgba(205, 200, 252, 0));
    background-position: 1% 50%;
    background-size: 300% 300%;
    border: none; 
}
#entrants .entrant:hover .btn12 {
    background-position: 99% 50%;
    color: #fff !important;
}
.center-btn { text-align: center; margin-top: 60px;}
a.btn_arrow { color: #fff; background: url("../images/icon_ar.png") no-repeat #ff6796; padding: 25px 55px; background-size: 27px; background-position: 94% 47%; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; transition: 0.3s; display: inline-block;}
a.btn_arrow:hover { transition: 0.3s; background-position: 92% 47%; background-color: #464646;}
	
	
	#page .page_body .inner { background: #fff; width: 850px; margin: 0 auto; box-sizing: border-box; padding: 40px;}
	#page .page_body .inner h2 { background: #F5F5F5; line-height: 1.4em; padding: 15px; font-size: 22px; margin-bottom: 15px; font-weight: bold;}
	#page .page_body .inner h3 { line-height: 1.4em; margin-top: 30px; margin-bottom: 10px; background: #ff6796; color: #fff; padding: 10px; font-size: 18px; font-weight: bold;}
	#page .page_body .inner h4 { line-height: 1.4em; margin-top: 30px; margin-bottom: 10px; color: #ff6796; font-weight: bold; font-size: 17px;}
	#page .page_body .inner h5 { font-weight: bold; margin-bottom: 5px; margin-top: 15px;}
	#page .page_body .inner p { line-height: 1.6em; margin-bottom: 10px;}
	#page .page_body .inner strong { font-weight: bold;}
	#page .page_body .inner a { color: #6C6C6C;}
	#page .page_body .inner a:hover { text-decoration: underline;}
	#page .page_body .inner img { margin-bottom: 10px; display: block; max-width: 100%; height: auto;}
	
	
	#page .archive_body h2 { text-align: center; margin-bottom: 40px;}
	#page .archive_body h2 span { font-size: 32px; font-weight: bold; border-bottom: solid 1px #000; display: inline-block; padding-bottom: 10px; margin-bottom: 10px;}
	#page .archive_body .inner { background: #fff; width: 1000px; margin: 0 auto; box-sizing: border-box; padding: 60px 40px;}
	#page .archive_body .entrant { cursor: pointer; width: 23%; float: left; margin-right: 2.333%; margin-bottom: 30px;}
#page .archive_body .entrant p { text-align: center; line-height: 1.2em;}
#page .archive_body .entrant:nth-child(4n) { margin-right: 0;}
#page .archive_body .entrant .name { margin: 15px 0 5px; font-size: 16px;}
#page .archive_body .entrant .group { color: #ff6796; font-size: 14px; height: 3em;}
#page .archive_body .entrant .group a { color: #ff6796;}

#page .archive_body .box { width: 100%; height: 200px; position: relative;}
#page .archive_body .box .thumnnail { display: block; width: 100%; height: 100%; position: absolute; background-size: cover; z-index: 1; background-position: center;}
#page .archive_body .entrant .btn {
	display: block; width: 100%; height: 100%;
   position: absolute; z-index: 2;
    display: inline-block;
    text-decoration: none !important;
}
#page .archive_body .entrant .btn span { opacity: 0; transition: all 0.7s ease-out; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto;}
#page .archive_body .entrant:hover .btn span { opacity: 1; transition: all 0.7s ease-out;}
#page .archive_body .btn01 {
    background-color: #3169d1;
    color: #fff !important;
}
#page .archive_body .entrant:hover .btn {
    opacity: 0.8;
}
#page .archive_body .btn12 {
    background: transparent;
    color: #fff !important;
    -webkit-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
    background: -webkit-linear-gradient(180deg, rgba(242,156,43,0.8), rgba(244, 188, 114, 0.8), rgba(205, 200, 252, 0), rgba(205, 200, 252, 0));
    background: -webkit-linear-gradient(right, rgba(242,156,43,0.8), rgba(244, 188, 114, 0.8), rgba(205, 200, 252, 0), rgba(205, 200, 252, 0));
    background: linear-gradient(270deg, rgba(242,156,43,0.8), rgba(244, 188, 114, 0.8), rgba(205, 200, 252, 0), rgba(205, 200, 252, 0));
    background-position: 1% 50%;
    background-size: 300% 300%;
    border: none; 
}
#page .archive_body .entrant:hover .btn12 {
    background-position: 99% 50%;
    color: #fff !important;
}
	.navi-area {}
	.navi-area span { display: inline-block; background: #ff6796; color: #fff; padding: 5px; margin-right: 2px; border: solid 1px #ff6796 !important;}
	.navi-area a { display: inline-block; background: #fff; color: #ff6796; padding: 5px; margin-right: 2px; border: solid 1px #ff6796; cursor: pointer;}

	
	#vote { margin-top: 10px;}
	
	#page { box-sizing: border-box; padding: 50px 0; display: block;}
	#page .page_body { background: #fff; box-sizing: border-box; padding: 50px; width: 90%; max-width: 1100px; margin: 0 auto;}
	#page .page_body h3 { margin-bottom: 10px; line-height: 1.6em; margin-top: 30px; border-bottom: solid 1px #000000; padding-bottom: 10px;}
	#page .page_body p { line-height: 1.8em; margin-bottom: 1em; font-size: 14px;}
	#page .page_body h1 { text-align: center; font-size: 22px; margin-bottom: 30px;}
	
	#page .single_body {}
	#page .single_body .inner { background: #fff; width: 1000px; margin: 0 auto; box-sizing: border-box; padding: 60px 40px;}
	
	#page .single_body .image_area { width: 50%;}
#page .single_body .image_area .thumnail_area {}
#page .single_body .image_area .thumnail_area li { float: left; margin-right: 2px; margin-bottom: 0; padding-bottom: 0 !important; height: auto !important; margin-bottom: 2px;}
#page .single_body .image_area .thumnail_area li:nth-child(4n) { margin-right: 0;}
#page .single_body .image_area .thumnail_area li { transition: 0.3s;}
#page .single_body .image_area .thumnail_area li:hover { transition: 0.3s; opacity: 0.7;}
#page .single_body .image_area .thumnail_area li a div { width: 113.1px; height: 113.1px; display: block; background-size: cover; background-position: center;}
#page .single_body .text_area { width: 46%;}
#page .single_body .text_area .single_name { font-size: 24px; margin-bottom: 30px; padding-top: 20px;}
#page .single_body .text_area .single_name a { position: relative; top: 4px; margin-right: 4px;}
#page .single_body .text_area .single_name a img { height: 22px;}
#page .single_body .text_area .midashi { color: #ff6796; font-size: 13px; line-height: 1.6em;}
#page .single_body .text_area .explane a { color: #ff6796;}
#page .single_body .text_area .explane { font-size: 16px; margin-bottom: 20px; line-height: 1.4em;}
	
	
	#req { padding: 60px 0 20px;}
		#req .inner { width: 80%; max-width: 900px; margin: 0 auto;}
		.req_box { text-align: left; border: solid 2px #000; box-sizing: border-box; padding: 25px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: url("../images/req_bg.png") no-repeat #fff; background-size: contain; background-size: 200px; background-position: top right;}
		.req_box_ttl { font-weight: bold; font-size: 16px; margin-bottom: 15px; letter-spacing: 0; line-height: 1.5em;}
		.req_box_txt { line-height: 1.8em; font-weight: bold; font-size: 13px; letter-spacing: 0;}
	
	.archive_body.other { padding: 50px 0;}
	.archive_body.other h2 { text-align: center; margin-bottom: 40px;}
	.archive_body.other h2 span { font-size: 32px; font-weight: bold; border-bottom: solid 1px #000; display: inline-block; padding-bottom: 10px; margin-bottom: 10px;}
	.archive_body.other .inner { width: 1000px; margin: 0 auto; background: none !important; padding-top: 0 !important; padding-bottom: 0 !important;}
	.archive_body.other .center-btn { margin-top: 10px !important;}
	
#nav-drawer {
  position: fixed; top: 30px; right: 30px;
		z-index: 998;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 3px;/*線の太さ*/
    width: 25px;/*長さ*/
    border-radius: 3px;
    background: #000;
    display: block;
    content: '';
    cursor: pointer;
}
#nav-open span:before {
    bottom: -8px;
}
#nav-open span:after {
    bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;/*最前面に*/
    width: 90%;/*右側に隙間を作る*/
    max-width: 330px;/*最大幅*/
    height: 100%;
    background: #979797;/*背景色*/
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);/*左に隠しておく*/
	box-sizing: border-box; padding: 20px;
}
	#nav-content h2 { border-bottom: solid 2px #fff; padding-bottom: 10px; color: #fff; font-weight: bold;}
	#nav-content h3 { font-weight: bold; border: solid 2px #fff; padding: 10px 0; margin-bottom: 5px; margin-top: 15px; text-align: center; color: #fff;}
	#nav-content ul { width: 100%;}
	#nav-content ul li { font-size: 15px;}
	#nav-content ul li a { color: #fff; display: block; width: 100%; border-bottom: solid 1px #fff; padding: 10px 3px; text-align: left; box-sizing: border-box;}


/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
    opacity: .5;
}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}		
	
	
	
	
	
	
	
	
	/* モーダル全体(背景＋本体) */
.modal{
  display: none;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: 100%; z-index: 100;
}

/* モーダル背景 */
.modal-bg{
  position: absolute;
  height: 100vh;
  width: 100%; z-index: 101;
  background: rgba(0, 0, 0, 0.8);
}

/* モーダル本体 */
.modal-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: scroll; /* はみ出た部分はスクロールさせる */
  height: 80%;/* これが無いと「overflow:scroll」が利かない */
  width: 60%;/* これが無いと「overflow:scroll」が利かない */
  background: white;
  padding: 40px; z-index: 102;
}

/* モーダルウィンドウ表示中に記事本体を固定 */
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}
	
	.modal-content { text-align: center;}
	.modal-content h3 { font-size: 23px; margin-bottom: 1em;}
	.modal-content .modal-content_img { text-align: center; margin-bottom: 20px;}
	.modal-content .modal-content_img img { width: 250px !important; height: auto;}
	.modal-content .comment { line-height: 1.8em; text-align: left; font-size: 14px; margin-bottom: 20px;}
	.modal-content .js-modal-close { display: inline-block; color: #fff; background: #464646; padding: 10px 30px;}
	
	
	.comments { line-height: 1.8em; padding-left: 20px; box-sizing: border-box;}
	
	.entrybtn { padding: 30px 0; width: 90%; margin: 0 auto; text-align: center; font-family: "Hiragino Kaku Gothic Std", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
		.entrybtn img { width: 300px; height: auto;}
	
	.iconfree {}
	.iconfree img { width: 100px; margin-bottom: 20px;}
	
}


/* SP */
@media screen and (max-width: 768px) {
	
	.iconfree {}
	.iconfree img { width: 15vw; margin-bottom: 4vw;}
	
	.entrybtn { padding: 4vw 0; width: 90%; margin: 0 auto; text-align: center; font-family: "Hiragino Kaku Gothic Std", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
		.entrybtn img { width: 70vw; height: auto;}
	
	body { background: url("../images/bg_01.png") #F4F4F4; background-size: 90%;}
.spwrap { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
	.pconly { display: none !important;}
h2.h2_ttl { text-align: center; font-size: 5vw; display: inline-block; margin: 0 auto 3vw; position: relative; z-index: 3; padding-bottom: 3.4vw;}
h2.h2_ttl::before { position: absolute; top: 100%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto; content: ' '; width: 3em; height: 3px; background: #cf8ecd;}

	header { width: 33%;}
	header img {}

#mv { width: 100%; max-width: 1440px; margin: 0 auto;}
#mv img { width: 100%; height: auto; display: block;}
#mv {}

#main_text {  padding: 4vw 0;}
#main_text img { width: 90%;}
#main_text img:first-child { width: 60%;}
	
	.req_box { text-align: left; border: solid 2px #000; box-sizing: border-box; padding: 3vw; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: url("../images/req_bg.png") no-repeat #fff; background-size: contain; background-size: 40%; background-position: top right; width: 100%; margin: 0 auto;}
		.req_box_ttl { font-weight: bold; font-size: 3.4vw; margin-bottom: 3vw; line-height: 1.6em; letter-spacing: 0;}
		.req_box_txt { line-height: 1.8em; font-weight: bold; font-size: 3vw !important; letter-spacing: 0;}
		
		#req { padding: 10vw 0 0; background: url("../images/bg01.jpg") no-repeat center; background-size: cover;}
		#req .inner { width: 90%; max-width: 900px; margin: 0 auto;}
	
	.main_text1 { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; line-height: 1.8em; font-size: 4.8vw; background: url("../images/h2_bg.png") no-repeat center; display: inline-block; background-size: contain; padding: 3vw 0; line-height: 1.8em; font-weight: bold; letter-spacing: 0.01em;}
	.main_text1 img { width: 30%; height: auto;}
	.main_text2 { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; line-height: 1.8em; font-size: 4vw; padding-bottom: 4vw;}
	
	
	.stepimg { text-align: center; width: 70%; margin: 0 auto;}
	.stepimg img { width: 100%; height: auto;}
	
	.main_text-video { margin: 5vw 0; position: relative;}
	.main_text-video video { width: 100%; height: auto;}
	.main_text-video img { width: 100%; height: auto;}
	.main_text-video span { position: absolute; left: -5vw; width: 15vw; top: -5vw;}

#about { width: 90%; margin: 0 auto;}
#about .txt_center { line-height: 2em; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 3.7vw;}
	#about .txt_center span { font-size: 4vw; background: url("../images/h2_bg.png") no-repeat center; display: inline-block; background-size: contain; padding: 3vw 0; line-height: 1.8em;}

	#abouttop { padding: 1vw 0 5vw;}
	#abouttop .abouttop_txt { line-height: 1.6em; text-align: center; font-size: 4.4vw; font-weight: bold;}
	
	#about {}
	#about dl { width: 100%; margin: 0 auto 3vw; box-sizing: border-box; border: solid 1px #cf8ecd; padding-bottom: 2vw; background: #fff;}
	#about dl dt { background: #cf8ecd; color: #fff; font-size: 4vw; padding: 3vw 0; margin-bottom: 2vw;}
	#about dl dd { font-size: 3.4vw; line-height: 1.8em; text-align: left; padding: 3vw;}
	#about dl dd ul { display: inline-block;}
	#about dl dd ul li { text-align: left; position: relative; padding-left: 1em;}
	#about dl dd ul li.kome { font-size: 3vw;}
	#about dl dd ul li::before { content: '・'; position: absolute; left: 0; top: 0;}
	#about dl dd ul li.kome::before { content: '※'; position: absolute; left: 0; top: 0;}
	#about dl dd ul li.none { padding: 0 10px;}
	#about dl dd ul li.none::before { display: none;}
	#about dl:last-child { margin-bottom: 0;}

#prize { padding: 10vw 0;}
#prize .prize_inner { width: 98%; max-width: 1100px; margin: 0 auto;}
#prize .prize_inner dl { margin-bottom: 8vw;}
#prize .prize_inner dl:last-child { margin-bottom: 0;}
#prize .prize_inner dt { margin-bottom: 4vw;}
#prize .prize_inner dt img { width: 70%; margin: 0 auto; display: block;}
#prize .prize_inner dd { line-height: 1.6em; font-size: 4vw;}
#prize .txt_center { font-size: 3.4vw; margin-top: 3em; line-height: 1.8em;}

#model { padding: 10vw 0; width: 100%; max-width: 1440px; margin: 0 auto;}
#model .model_inner { width: 100%; max-width: 1440px;}
#model .model_left {}
#model .model_left h2 {}
#model .model_right {}
#model .model_right .model_right-img { width: 70%; margin: 0 auto 5vw; position: relative;}
	#model .model_right .model_right-img span { position: absolute; right: 3vw; bottom: 3vw; width: 10vw; z-index: 10;}
#model .model_right .model_right-img img { width: 100%; height: auto;}
#model .model_right .model_right-txt { width: 90%; box-sizing: border-box; background: #fff; padding: 5vw; margin: 0 auto;}
#model .model_right .model_right-txt h3 { border-bottom: solid 1px #131313; padding-bottom: 0.5em; margin-bottom: 0.8em; font-size: 4.6vw;}
#model .model_right .model_right-txt .comment { font-size: 3.4vw; line-height: 1.5em; text-align: left;}
	
	.model_img { width: 50%; margin: 0 auto;}

#rec { padding: 10vw 0; width: 100%; max-width: 1440px; margin: 0 auto;}
#rec .rec_inner { width: 100%; max-width: 1440px;}
#rec .rec_left { display: none;}
#rec .rec_left img { width: 100%; height: auto;}
#rec .rec_right { width: 90%; margin: 0 auto;}
#rec .rec_right h2 {}
#rec .rec_right .txt_rec { padding-bottom: 3em; font-size: 4vw; text-align: center;}
#rec .rec_right h5 { padding-right: 5vw; font-size: 4vw; margin-bottom: 2vw; line-height: 1.5em; text-align: left;}
#rec .rec_right .txt { padding-right: 5vw; margin-bottom: 30px; font-size: 3.4vw; line-height: 1.8em; padding-left: 1em; text-align: left;}

#schedule { padding: 10vw 0; }
#schedule ul { width: 90%; margin: 0 auto;}
#schedule ul li { background: #fff; margin-bottom: 8vw; box-sizing: border-box; padding: 4vw 0; font-size: 4vw; position: relative;}
#schedule ul li:last-child { margin-bottom: 0;}
#schedule ul li span { margin: 0 auto; display: block; position: relative; font-size: 3.4vw; margin-top: 0.5em; line-height: 1.5em;}
#schedule ul li::before { position: absolute; top: -2vw; left: -2vw; font-size: 8vw; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
#schedule ul li:nth-child(1)::before { content:'01';}
#schedule ul li:nth-child(2)::before { content:'02';}
#schedule ul li:nth-child(3)::before { content:'03';}
#schedule ul li:nth-child(4)::before { content:'04';}
#schedule ul li:nth-child(5)::before { content:'05';}
#schedule ul li:nth-child(6)::before { content:'06';}
#schedule ul li:nth-child(7)::before { content:'07';}
#schedule ul li:nth-child(8)::before { content:'08';}
#schedule ul li:nth-child(9)::before { content:'09';}
#schedule ul li:nth-child(10)::before { content:'10';}

#entry { padding: 10vw 0;}
#entry .whitearea { background: #fff; width: 90%; margin: 0 auto; box-sizing: border-box; padding: 5vw 4vw; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; text-align: left;}
#entry .whitearea dl { color: #5A5857; font-size: 4vw; margin-bottom: 3vw;}
#entry .whitearea dl dt { margin-bottom: 2vw; line-height: 1.4em;}
#entry .whitearea dl dt span { color:#fff; font-size: 14px; margin-right: 10px; display: inline-block; background: #E61B34; padding: 2px 5px;}
#entry .whitearea dl dd { font-size:12px;}
#entry .whitearea dl dd input[type="text"] { background: #F2F2F2; padding: 10px; box-sizing: border-box; border: none; width: 100%;}
#entry .whitearea dl dd input[type="tel"] { background: #F2F2F2; padding: 10px; box-sizing: border-box; border: none; width: 100%;}
#entry .whitearea dl dd input[type="email"] { background: #F2F2F2; padding: 10px; box-sizing: border-box; border: none; width: 100%;}
	#entry .whitearea dl dd textarea { background: #F2F2F2; padding: 10px; box-sizing: border-box; border: none; width: 100%; height: 14em}
#entry .whitearea .btn { text-align: center;}
#entry .whitearea .btn input { border-radius: 0; -webkit-appearance: none; display: inline-block; color: #fff; font-size: 4vw; font-weight: bold; text-align: center; padding: 1em 0; background: #292C32; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; width: 80%; border: solid 2px #292C32; transition: 0.3s;
}	

footer .footer_menu { padding: 10px 0; text-align: center; background: #fff;}
footer .footer_menu ul { font-size: 0;}
footer .footer_menu ul li { font-size: 12px; display: inline-block; padding-right: 1em; margin-right: 1em; border-right: solid 1px #131313;}
footer .footer_menu ul li:last-child { margin-right: 0; padding-right: 0; border: none;}
footer .footer_menu ul li a { color: #131313;}
footer .footer_menu ul li a:hover { text-decoration: underline;}

footer #copyright { background: #131313; text-align: center; padding: 10px 0;}
footer #copyright p { font-size: 10px; color: #fff;}

#float_btn { position: fixed; z-index: 10; right: 1vw; bottom: 1vw; width: 20vw;}
#float_btn img { cursor: pointer; display: inline-block; width: 100%; height: auto; animation: fluffy1 3s ease infinite;}
	
	
	#news { padding: 40px 0 30px;}
	#news .inner { width: 92%; margin: 0 auto;}
	#news dl { border-bottom: dotted 1px #CECECE; padding-bottom: 5px; margin-bottom: 5px;}
	#news dl:last-child { margin-bottom: 0; padding-bottom: 0; border: none;}
	#news dt { width: 100%; color: #ff6796; line-height: 1.5em; font-size: 12px;}
	#news dd { width: 100%; text-align: left; line-height: 1.5em; font-size: 14px;}
	#news dd a { color: #000;}
	#news dd a:hover { color: #ff6796;}
	
	
	#entrants { background: #F2F2F2; padding: 35px 0; overflow: hidden;}
	#entrants .inner { width: 92%; margin: 0 auto; overflow: hidden;}
#entrants .entrant { cursor: pointer; width: 48%; float: left; margin-right: 4%; margin-bottom: 20px;}
#entrants .entrant p { text-align: center; line-height: 1.2em;}
#entrants .entrant:nth-child(2n) { margin-right: 0;}
#entrants .entrant .name { margin: 10px 0 5px; font-size: 16px;}
#entrants .entrant .group { color: #ff6796; font-size: 12px;}
#entrants .entrant .group a { color: #ff6796;}

#entrants .box { width: 100%; height: 42vw; position: relative;}
#entrants .box .thumnnail { display: block; width: 100%; height: 100%; position: absolute; background-size: cover; z-index: 1; background-position: center;}
#entrants .entrant .btn {
	display: block; width: 100%; height: 100%;
   position: absolute; z-index: 2;
    display: inline-block; top: 0; left: 0;
    text-decoration: none !important;
}
#entrants .entrant .btn span { opacity: 0; transition: all 0.7s ease-out; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto;}
#entrants .entrant:hover .btn span { opacity: 1; transition: all 0.7s ease-out;}
#entrants .btn01 {
    background-color: #3169d1;
    color: #fff !important;
}
#entrants .entrant:hover .btn {
    opacity: 0.8;
}
#entrants .btn12 {
    background: transparent;
    color: #fff !important;
    -webkit-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
    bbackground: -webkit-linear-gradient(180deg, rgba(242,156,43,0.8), rgba(244, 188, 114, 0.8), rgba(205, 200, 252, 0), rgba(205, 200, 252, 0));
    background: -webkit-linear-gradient(right, rgba(242,156,43,0.8), rgba(244, 188, 114, 0.8), rgba(205, 200, 252, 0), rgba(205, 200, 252, 0));
    background: linear-gradient(270deg, rgba(242,156,43,0.8), rgba(244, 188, 114, 0.8), rgba(205, 200, 252, 0), rgba(205, 200, 252, 0));
    background-position: 1% 50%;
    background-size: 300% 300%;
    border: none;  font-size: 10px;
}
#entrants .entrant:hover .btn12 {
    background-position: 99% 50%;
    color: #fff !important;
}
.center-btn { text-align: center; margin-top: 20px;}
a.btn_arrow { color: #fff; background: url("../images/icon_ar.png") no-repeat #ff6796; padding: 15px 45px; background-size: 18px; background-position: 94% 47%; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; transition: 0.3s; display: inline-block;}
a.btn_arrow:hover { transition: 0.3s; background-position: 92% 47%; background-color: #464646;}
	
	
	#page .page_body .inner { background: #fff; width: 95%; margin: 0 auto; box-sizing: border-box; padding: 15px;}
	#page .page_body .inner h2 { background: #F5F5F5; line-height: 1.4em; padding: 10px; font-size: 18px; margin-bottom: 10px; font-weight: bold;}
	#page .page_body .inner h3 { line-height: 1.4em; margin-top: 25px; margin-bottom: 10px; background: #ff6796; color: #fff; padding: 8px; font-size: 17px; font-weight: bold;}
	#page .page_body .inner h4 { line-height: 1.4em; margin-top: 25px; margin-bottom: 10px; color: #ff6796; font-weight: bold; font-size: 16px;}
	#page .page_body .inner h5 { font-weight: bold; margin-bottom: 5px; margin-top: 10px;}
	#page .page_body .inner p { line-height: 1.6em; margin-bottom: 10px;}
	#page .page_body .inner strong { font-weight: bold;}
	#page .page_body .inner a { color: #6C6C6C;}
	#page .page_body .inner a:hover { text-decoration: underline;}
	#page .page_body .inner img { margin: 0 auto; margin-bottom: 10px; display: block; max-width: 100%; height: auto;}
	
	
	#page .archive_body h2 { text-align: center; margin-bottom: 15px; font-size: 12px;}
	#page .archive_body h2 span { font-size: 20px; font-weight: bold; border-bottom: solid 1px #000; display: inline-block; padding-bottom: 10px; margin-bottom: 10px;}
	#page .archive_body .inner { background: #fff; width: 95%; margin: 0 auto; box-sizing: border-box; padding: 20px;}
	#page .archive_body .entrant { cursor: pointer; width: 48%; float: left; margin-right: 4%; margin-bottom: 20px;}
#page .archive_body .entrant p { text-align: center; line-height: 1.2em;}
#page .archive_body .entrant:nth-child(2n) { margin-right: 0;}
#page .archive_body .entrant .name { margin: 10px 0 5px; font-size: 14px;}
#page .archive_body .entrant .group { color: #ff6796; font-size: 12px;}
#page .archive_body .entrant .group a { color: #ff6796;}

#page .archive_body .box { width: 100%; height: 38vw; position: relative;}
#page .archive_body .box .thumnnail { display: block; width: 100%; height: 100%; position: absolute; background-size: cover; z-index: 1; background-position: center;}
#page .archive_body .entrant .btn {
	display: block; width: 100%; height: 100%;
   position: absolute; z-index: 2;
    display: inline-block;
    text-decoration: none !important;
}
#page .archive_body .entrant .btn span { opacity: 0; transition: all 0.7s ease-out; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto;}
#page .archive_body .entrant:hover .btn span { opacity: 1; transition: all 0.7s ease-out;}
#page .archive_body .btn01 {
    background-color: #3169d1;
    color: #fff !important;
}
#page .archive_body .entrant:hover .btn {
    opacity: 0.8;
}
#page .archive_body .btn12 {
    background: transparent;
    color: #fff !important;
    -webkit-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
    background: -webkit-linear-gradient(180deg, rgba(242,156,43,0.8), rgba(244, 188, 114, 0.8), rgba(205, 200, 252, 0), rgba(205, 200, 252, 0));
    background: -webkit-linear-gradient(right, rgba(242,156,43,0.8), rgba(244, 188, 114, 0.8), rgba(205, 200, 252, 0), rgba(205, 200, 252, 0));
    background: linear-gradient(270deg, rgba(242,156,43,0.8), rgba(244, 188, 114, 0.8), rgba(205, 200, 252, 0), rgba(205, 200, 252, 0));
    background-position: 1% 50%;
    background-size: 300% 300%;
    border: none; 
}
#page .archive_body .entrant:hover .btn12 {
    background-position: 99% 50%;
    color: #fff !important;
}
	.navi-area {}
	.navi-area span { display: inline-block; background: #ff6796; color: #fff; padding: 5px; margin-right: 2px; border: solid 1px #ff6796 !important;}
	.navi-area a { display: inline-block; background: #fff; color: #ff6796; padding: 5px; margin-right: 2px; border: solid 1px #ff6796; cursor: pointer;}

	
	#vote { margin-top: 10px;}
	
	#page { box-sizing: border-box; padding: 4vw 0; display: block;}
	#page .page_body { background: #fff; box-sizing: border-box; padding: 5vw; width: 90%; max-width: 1100px; margin: 0 auto;}
	#page .page_body h3 { margin-bottom: 4vw; line-height: 1.6em; margin-top: 5vw; border-bottom: solid 1px #000000; padding-bottom: 3vw; font-size: 4vw;}
	#page .page_body p { line-height: 1.8em; margin-bottom: 1em; font-size: 3.2vw;}
	#page .page_body h1 { text-align: center; font-size: 5vw; margin-bottom: 4vw;}
	
	#page .single_body { background: #ff6796; padding: 2.5vw 0;}
	#page .single_body .inner { background: #fff; width: 95%; margin: 0 auto; box-sizing: border-box; padding: 20px;}
	
	#page .single_body .image_area { width: 100%;}
#page .single_body .image_area .thumnail_area {}
#page .single_body .image_area .thumnail_area li { float: left; margin-right: 0.5vw; margin-bottom: 0; padding-bottom: 0 !important; height: auto !important; margin-bottom: 0.5vw;}
#page .single_body .image_area .thumnail_area li:nth-child(4n) { margin-right: 0;}
#page .single_body .image_area .thumnail_area li { transition: 0.3s;}
#page .single_body .image_area .thumnail_area li:hover { transition: 0.3s; opacity: 0.7;}
#page .single_body .image_area .thumnail_area li a div { width: 20.75vw; height: 20.75vw; display: block; background-size: cover; background-position: center;}
#page .single_body .text_area { width: 100%;}
#page .single_body .text_area .single_name { font-size: 18px; margin-bottom: 15px; padding-top: 20px;}
#page .single_body .text_area .single_name a { position: relative; top: 4px; margin-right: 4px;}
#page .single_body .text_area .single_name a img { height: 18px;}
#page .single_body .text_area .midashi { color: #ff6796; font-size: 13px; line-height: 1.6em;}
#page .single_body .text_area .explane a { color: #ff6796;}
#page .single_body .text_area .explane { font-size: 14px; margin-bottom: 10px; line-height: 1.4em;}
	
	
	.archive_body.other { background: #F3F3F3 !important; padding: 5vw 0 !important;}
	.archive_body.other h2 { text-align: center; margin-bottom: 15px; font-size: 12px;}
	.archive_body.other h2 span { font-size: 20px; font-weight: bold; border-bottom: solid 1px #000; display: inline-block; padding-bottom: 10px; margin-bottom: 10px;}
	.archive_body.other .inner { width: 95%; margin: 0 auto; background: none !important; padding-top: 0 !important; padding-bottom: 0 !important;}
	.archive_body.other .center-btn { margin-top: 10px !important;}

#nav-drawer {
  position: fixed; top: 10px; right: 10px;
		z-index: 998;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 3px;/*線の太さ*/
    width: 25px;/*長さ*/
    border-radius: 3px;
    background: #000;
    display: block;
    content: '';
    cursor: pointer;
}
#nav-open span:before {
    bottom: -8px;
}
#nav-open span:after {
    bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;/*最前面に*/
    width: 90%;/*右側に隙間を作る*/
    max-width: 330px;/*最大幅*/
    height: 100%;
    background: #979797;/*背景色*/
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);/*左に隠しておく*/
	box-sizing: border-box; padding: 20px;
}
	#nav-content h2 { border-bottom: solid 2px #fff; padding-bottom: 10px; color: #fff; font-weight: bold;}
	#nav-content h3 { font-weight: bold; border: solid 2px #fff; padding: 10px 0; margin-bottom: 5px; margin-top: 15px; text-align: center; color: #fff;}
	#nav-content ul { width: 100%;}
	#nav-content ul li { font-size: 15px;}
	#nav-content ul li a { color: #fff; display: block; width: 100%; border-bottom: solid 1px #fff; padding: 10px 3px; text-align: left; box-sizing: border-box;}


/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
    opacity: .5;
}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}		
	
	
	
	
	
	/* モーダル全体(背景＋本体) */
.modal{
  display: none;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: 100%; z-index: 100;
}

/* モーダル背景 */
.modal-bg{
  position: absolute;
  height: 100vh;
  width: 100%; z-index: 101;
  background: rgba(0, 0, 0, 0.8);
}

/* モーダル本体 */
.modal-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: scroll; /* はみ出た部分はスクロールさせる */
  height: 90%;/* これが無いと「overflow:scroll」が利かない */
  width: 90%;/* これが無いと「overflow:scroll」が利かない */
  background: white;
  padding: 4vw; z-index: 102; box-sizing: border-box;
}

/* モーダルウィンドウ表示中に記事本体を固定 */
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}
	
	.modal-content { text-align: center;}
	.modal-content h3 { font-size: 5vw; margin-bottom: 1em;}
	.modal-content .modal-content_img { text-align: center; margin-bottom: 20px;}
	.modal-content .modal-content_img img { width: 70% !important; height: auto;}
	.modal-content .comment { line-height: 1.8em; text-align: left; font-size: 3.4vw; margin-bottom: 3vw;}
	.modal-content .js-modal-close { display: inline-block; color: #fff; background: #464646; padding: 2vw 4vw; font-size: 3vw;}
	
	.comments { line-height: 1.8em; width: 90%; margin: 3vw auto 0; font-size: 3.4vw; text-align: left;}
	
}





@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}