@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Amatic+SC&display=swap');

/* ---------------------------------------------
 font
--------------------------------------------- */
html{ font-size:62.5%; color:#555; } /*初期値16pxの62.5%でルートが10px*/
body { font-family:"Hiragino Kaku Gothic ProN",-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,メイリオ,Meiryo,sans-serif; }
.f_min { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
/*---------------------------------------------
 reset css
--------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,p,th,td { margin:0; padding:0; line-height:1.4; }
input,textarea { margin:0; font-size:100%; position:relative; }
table { border-collapse:collapse; border-spacing:0; font-size:100%; }
img { border:0; }
address,em,th { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
label { cursor:pointer;}
a,
area,
area:focus,
area:active { outline:none; border:none; border:0; position:relative;}
/*---------------------------------------------
 for IE8
--------------------------------------------- 
div { position:relative;}
/* ---------------------------------------------
 tag
--------------------------------------------- */
b,strong {font-weight:bold; color:#231815;}
i { font-style:italic;}
em { font-weight:normal; font-style:normal; background-color: #ff9; }
sub { vertical-align:baseline;}
p { line-height:1.6;}
img { vertical-align:middle; }
/* link */
a,a:visited { outline:none; transition:.2s; color:#000; text-decoration:none; }
a span { cursor:pointer;}
a:hover { text-decoration:underline; }
a img { border:none; }
/*a:hover img { opacity:0.7; filter:alpha(opacity=70); -ms-filter:"alpha(opacity=70)"; }
a:hover img.over { opacity:inherit; filter:none; -ms-filter:none; }*/
/* ---------------------------------------------
 js
--------------------------------------------- */
.over            {;/* rollover */}
.js_window_open-width-height {;}
.js_page_print   { cursor:pointer;}
.js_window_close {;}
.tile2,.tile3,.tile4,.tile5,.tile6 {;}
.hideattr {display:none;}
.debug .hideattr {display:inline-block; *display:inline; *zoom:1; margin-right:10px;}
.flexli { margin:0 auto; text-align:left; }
/* ---------------------------------------------
 PC/SP
--------------------------------------------- */
.hidePC { display:none !important; }
@media only screen and (max-width:767px) {
	html { padding:0; margin:0;}
	body { padding:0; margin:0; width:100%;}
	body {-webkit-text-size-adjust:100%; }
    iframe { max-width:100%; }
	img { max-width:100%; height:auto; }
	.hidePC { display:inherit !important; }
	.hideSP { display:none !important; }
    /* .spscroll table{ width:100%; } */
	.spscroll { overflow:auto; }
	.spscroll::-webkit-scrollbar{ height:5px;}
	.spscroll::-webkit-scrollbar-track{ background:#F1F1F1;}
	.spscroll::-webkit-scrollbar-thumb { background:#BCBCBC;}
}
/* ---------------------------------------------
 h*
--------------------------------------------- */
.main h2, .main h3, .main h4, .main h5, .main h6 { clear:both; }
.main div h2, .main div h3, .main div h4, .main div h5, .main div h6,
.main ul h2, .main ul h3, .main ul h4, .main ul h5, .main ul h6,
.main table h2, .main table h3, .main table h4, .main table h5, .main table h6 { clear:none; }
/* ---------------------------------------------
 list
--------------------------------------------- */
/*.article ul li,*/
ul.list0 { text-align:left; }
ul.list0 li { padding:5px 0;  line-height:1.4; }

ul.list1 { margin:0 0 0px 18px; padding: 10px 20px; text-align:left;}
ul.list1 li { padding:2px 0; text-indent:-18px; margin-bottom: 10px; }
ul.list1 li:before { content:'・'; font-family:'Font Awesome 5 Free'; margin-right:2px; vertical-align:middle; line-height:1.4; }

ul.list2 { margin:0 0 0px -0.5rem; padding: 10px 20px; text-align:left;}
ul.list2 li { padding:2px 0; text-indent:-1.2rem; margin-bottom: 10px; }
ul.list2 li:before { content:'-'; margin-right:0.5rem; vertical-align:middle; line-height:1.4; }

ul.idt { margin-left:1.3em; }
ul.idt li { text-indent:-1.3em; text-align:left; padding:0 0 10px; background:none; line-height:1.4; }
ul.idt li span { font-weight:bold; color:#378; margin-right:2px;}

ol { margin:0 0 10px 1.7em; list-style:decimal outside; }
ol li { padding:10px 0 10px 5px; line-height:1.4; }

ul.inlineblock li { position:relative; display:inline-block; letter-spacing:normal; margin-right:25px; }
ul.inlineblock li img { vertical-align:middle; margin:3px;}

ul li.nolistmark { background:none;}

/* ---------------------------------------------
 link
--------------------------------------------- */
/* 矢印付リンク */
a.link { text-decoration:none; display:block; color:#00afe5; margin-top:5px; font-weight:bold; }
a.link::before { content:'\f35a'; font-family:'Font Awesome 5 Free'; margin-right:0.4em; font-weight:normal !important; }

a.link_r { text-decoration:none; display:block; color:#00afe5; margin-top:0px; }
a.link_r::after { content:'\f35a'; font-family:'Font Awesome 5 Free'; margin-left:0.4em; font-weight:normal !important; }
a.link_r:hover { color: #405e7a; }

a.link_lft i { margin-left:0; margin-right:1rem; }
a.link_lft i::after { transform: scale(-1,1); right:auto; left:6px; right:inherit; }

a.newwin { text-decoration:none; display:block; color:#00afe5; margin-top:5px; }
a.newwin::before { content:'\f24d'; font-family:'Font Awesome 5 Free'; margin-right:0.4em; font-weight:400 !important; }
a.newwin:hover { color: #405e7a; }

a.q_mark { /*position: relative;*/ color: #2D75B8; font-weight: bold; border-bottom: 1px solid #2D75B8; cursor: pointer; }
a.q_mark:after { /*content:'\f059'; font-family:'Font Awesome 5 Free'; font-weight:900 !important; position: relative; top:-8px; right:0; font-size:12px; margin:0 3px 0 0;*/ }
a.q_mark:hover { text-decoration:none; }

/* ---------------------------------------------
 btn
--------------------------------------------- */
.btn1 { margin: 30px auto; text-align: center; }
.btn1 a { color: #52BEB8; background-color:#fff; font-size: 1.4rem; border-radius: 20px; border: 1px solid #52BEB8; line-height: 0; padding: 8px 15px; text-align: center; text-decoration: none; }
.btn1 a:after { content:'\f061'; font-family:'Font Awesome 5 Free'; font-weight:800 !important; position: relative; top: 0; right:0; padding-left: 5px; }
.btn1 a:hover { background-color: #89D2E0; border: 1px solid #89D2E0;  color:#fff; }

.btn2 { margin: 30px auto; text-align: center; }
.btn2 a { color: #fff; background-color:#ACC566; font-size: 1.4rem; border-radius: 20px; line-height: 0; padding: 8px 15px; text-align: center; text-decoration: none; }
.btn2 a:after { content:'\f061'; font-family:'Font Awesome 5 Free'; font-weight:800 !important; position: relative; top: 0; right:0; padding-left: 5px; }
.btn2 a:hover { background-color: #BFD289; }
.story .btn2 a { background-color:#89D2E0; }
.story .btn2 a:hover { background-color: #69b2c0; }
.manual .btn2 a { background-color:#89D2A6; }
.manual .btn2 a:hover { background-color: #66C58B; }
.test .btn2 a { background-color:#ACC566; }
.test .btn2 a:hover { background-color: #BFD289; }

.btn3 { margin: 30px auto; text-align: center; }
.btn3 a { color: #fff; background-color:#999; font-size: 1.4rem; border-radius: 20px; line-height: 0; padding: 8px 15px; text-align: center; text-decoration: none; }
.btn3 a:after { content:'\f015'; font-family:'Font Awesome 5 Free'; font-weight:800 !important; position: relative; top: 0; right:0; padding-left: 5px; }
.btn3 a:hover { background-color: #ccc; text-decoration:none; color:#fff;}
.rule .btn3 a { background-color:#3EBBC3; }
.rule .btn3 a:hover { background-color: #009BA5; }
.story .btn3 a { background-color:#89D2E0; }
.story .btn3 a:hover { background-color: #69b2c0; }
.manual .btn3 a { background-color:#89D2A6; }
.manual .btn3 a:hover { background-color: #66C58B; }
.test .btn3 a { background-color:#ACC566; }
.test .btn3 a:hover { background-color: #BFD289; }

.btn4 { margin: 30px auto; text-align: center; }
.btn4 a { color: #fff; background-color:#ACC566; font-size: 1.4rem; border-radius: 20px; line-height: 0; padding: 8px 15px; text-align: center; text-decoration: none; }
.btn4 a:after { content:'\f201'; font-family:'Font Awesome 5 Free'; font-weight:800 !important; position: relative; top: 0; right:0; padding-left: 5px; }
.btn4 a:hover { background-color: #BFD289; }
.test .btn4 a { background-color:#ACC566; }
.test .btn4 a:hover { background-color: #BFD289; }

/* ---------------------------------------------
 table
--------------------------------------------- */
th,td {text-align:inherit; text-justify:auto; }

/* 調整 */
table tr.noborder { border:none;}
table th.noborder-bottom,
table td.noborder-bottom { border-bottom:none;}
table .blankLefttop { border-left:0; border-top:0; background:none; }

thead.inlineL th,
tr.inlineL th,
tr.inlineL td { text-align:left;}

table.inlineC th,
table.inlineC td,
thead.inlineC th,
tr.inlineC th,
tr.inlineC td { text-align:center; padding-left:3px; padding-right:3px;}
@media only screen and (max-width:767px) {

}


/* ---------------------------------------------
  横並びグリッド
--------------------------------------------- */
/* レイアウト:横2つ  */
.cols2 { /*margin-right:-30px;*/ }
    .cols2:after { content:""; display:table; clear:both; }
.cols2 .col { width:50%; float:left; }
.cols2 .col .colinner { margin:0 30px 30px 0; }

/* レイアウト:横3つ  */
.cols3 { margin-right:-30px; }
    .cols3:after { content:""; display:table; clear:both; }
.cols3 .col { width:33.3%; float:left; }
.cols3 .colspan2 { width:66.6%;}
.cols3 .col .colinner { margin:0 30px 30px 0; }

/* レイアウト:横4つ  */
.cols4 { margin-right:-20px; }
    .cols4:after { content:""; display:table; clear:both; }
.cols4 .col { width:25%; *width:24.95%; float:left; }
.cols4 .colspan2 { width:50%;}
.cols4 .col .colinner { margin:0 20px 20px 0; display:block; }

/* .colinner */
.colinner { display:block; }
	.colinner:after { content:""; display:table; clear:both; }
.colinner img { max-width:100%; margin: 0 auto 10px auto; display: block; }

@media only screen and (max-width:767px) {    
	.cols2,
	.cols3,
	.cols4 { margin-left:auto; margin-right:auto; max-width:none; }
	.cols2 .col,
	.cols3 .col,
	.cols4 .col { width:auto; margin:0 auto 10px; }
	.cols2 .col .colinner,
	.cols3 .col .colinner,
	.cols4 .col .colinner { margin:0 0 20px; width:auto; }
}


/* ---------------------------------------------
 h1,h2,h3,h4,h5
--------------------------------------------- */
.h1 { font-size:5.0rem; font-weight:bold; margin:50px auto; color:#333; }
.h2 { font-size:3.0rem;margin:70px 0; line-height:1.3; text-align:center; color:#231815; }
.h3 { font-weight:bold; font-size:2.0rem; margin:50px 0 20px 0; line-height:1.3; color:#333; }
.h4 { font-weight:bold; font-size:1.8rem; margin:50px 0 30px 0; line-height:1.3; color:#666; }
.h5 {  font-size:1.8rem; margin:20px 0; line-height:1; color:#666; }
@media only screen and (max-width:767px) {
    .h2 { margin:60px auto 30px; }

}


/* ---------------------------------------------
 p
--------------------------------------------- */
p.p { line-height:1.8; margin:10px 0 20px; font-size:1.6rem; }
p.lead { line-height:1.8; margin:10px 0 20px; font-size:1.8rem; } 
p.note { font-size:1.4rem; margin-bottom:10px; }
@media only screen and (max-width:767px) {
    p.p { font-size:1.6rem; }
}

/* ---------------------------------------------
 img
--------------------------------------------- */
.img1 { display:block; margin-bottom:40px; text-align:center; }
.img1 img { display:block; margin:0 auto 15px; }
.img_center { text-align:center; margin:50px 0; }

/* マウスオーバーで画像拡大アニメーション */
a.imghover { overflow:hidden; display:block; }
a.imghover img { /* opacity:0.8; */ 
	-webkit-transform:scale(1); transform:scale(1); 
    transition:1s; }
a.imghover:hover img { /* opacity:1; */
	-webkit-transform: scale(1.1);	transform: scale(1.1); }


/* ---------------------------------------------
 other
--------------------------------------------- */



/* ============================================
 #wrapper / リキッドレイアウト
============================================ */
html { min-height: 100%; position: relative; /*コンテンツが少ないときfooterをボトムに固定する用*/ }
body { font-size:15px; font-size:1.6rem; margin:0 auto; }
body { margin-bottom: 50px/*コンテンツが少ないときfooterをボトムに固定する用*/; }
body.story,body.manual { margin-bottom: 100px/*コンテンツが少ないときfooterをボトムに固定する用*/; }
body.index { }
body.contents { }
#wrapper { margin:100px auto 0px auto; width:1000px; max-width:100%; }
	#wrapper:after { content:""; display:table; clear:both; }
body.index #wrapper { margin:0px auto; }
body.story #wrapper,
body.manual #wrapper,
body.test #wrapper { padding-top: 100px; margin-top: 0px; }
body.rule #wrapper,
body.corona #wrapper,
body.privacy #wrapper,
body.terms #wrapper { width: 100%; }
body.id-page #wrapper { margin:45px auto 0px auto; }
@media only screen and (max-width:767px) {
    #wrapper { width:100%; }
    body.index #wrapper { margin-top: 0px; }
    body.story #wrapper,
    body.manual #wrapper { padding-top: 110px; margin-top: 0px; }
    body.rule #wrapper,
    body.corona #wrapper,
    body.privacy #wrapper,
    body.terms #wrapper { margin-top: 60px; }
    body.id-page #wrapper { margin-top: 20px; }
}

/* ============================================
 #header
============================================ */
header { width:100%; padding:0; margin:0; z-index:100; position:relative; }
@media only screen and (max-width:767px) {
    header { padding: 0; }
}

#headernav { width:100%; /*width: 1000px;*/ margin: 0 auto; position: fixed; z-index: 100; top: 0; }
#headernav .headerinner { width:100%; height: 60px; padding:0px; }
    #headernav .headerinner:after { content:""; display:table; clear:both; }
#headernav .headerinner a { text-align: center; font-size: 2.0rem; font-weight: 800; color: #fff; margin:0 auto; padding: 18px 0; display: block; text-decoration: none;}
#headernav .headerinner ul li a { text-align: left; }
body.index #headernav { position:static; }
body.index #headernav .sub { font-size:1.6rem; text-align: center; padding-top: 15px; font-weight:bold; color:#aaa; }
body.index #headernav .headerinner { position:static; height:inherit; }
body.index #headernav .headerinner a { color: #666; font-size: 2.8rem; padding:5px 0 10px 0; }
body.story #headernav .headerinner     { background-color: #89D2E0; border-bottom: 5px solid #69b2c0; }
body.rule #headernav .headerinner      { background-color: #3EBBC3; border-bottom: 5px solid #009BA5; }
body.corona #headernav .headerinner    { background-color: #aaa; border-bottom: 5px solid #666; }
body.manual #headernav .headerinner    { background-color: #89D2A6; border-bottom: 5px solid #66C58B; }  
body.test #headernav .headerinner      { background-color: #BFD289; border-bottom: 5px solid #ACC566; }
body.privacy #headernav .headerinner   { background-color: #aaa; border-bottom: 5px solid #666; }
body.terms #headernav .headerinner     { background-color: #aaa; border-bottom: 5px solid #666; }
body.menuopen #headernav .headerinner  { background-color: #fff; }
body.menuopen #headernav .headerinner > a { color: #666; }
body.rule h1 { color:#009BA5; font-size: 2.0rem; font-weight: 800; border-bottom: 3px solid #009BA5; position: relative; top: 65px; text-align: center; padding: 10px 0; }
body.corona h1,
body.privacy h1,
body.terms h1 { color:#666; font-size: 2.0rem; font-weight: 800; border-bottom: 3px solid #666; position: relative; top: 65px; text-align: center; padding: 10px 0; }
body.id-page h1 { color:#666; font-size: 2.0rem; font-weight: 800; border-bottom: 3px solid #666; position: relative; text-align: center; padding: 10px 0; }
@media only screen and (max-width:767px) {
    #headernav { width:100%; }
    #headernav .headerinner { position: absolute; position: fixed; z-index: 10; /*box-shadow: 0px 2px 4px gray;*/ }
    #headernav .headerinner a { font-size: 1.8rem; }
    body.index #headernav .headerinner { position:static; }
}

/*gnavi*/

#gnavi { float: none; display: none; width:100%; margin: 0; position: absolute; z-index: 1000; top: 50px; 
        height:calc( 100vh - 65px ); overflow-y:auto; overflow-x:hidden; }
#gnavi ul { padding-top: 15px;}
#gnavi ul li { border-bottom: 5px solid #fff; padding: 0 10px; }
#gnavi ul li a { display:block; padding:10px 0 !important; margin: 0 auto !important; }
#gnavi ul li a:after { content:'\f054'; font-family:'Font Awesome 5 Free'; font-weight:900 !important; position: absolute; top: 17px; right: 0px; font-size: 2.0rem; }
#gnavi li a:hover,
#gnavi li.on a { opacity: 0.7; }
#gnavi ul li.story     { background-color: #89D2E0; }
#gnavi ul li.rule      { background-color: #3EBBC3; }
#gnavi ul li.manual    { background-color: #89D2A6; color: #fff; font-size: 2.0rem; font-weight: 800; }
#gnavi ul li.test      { background-color: #BFD289; color: #fff; font-size: 2.0rem; font-weight: 800; }
#gnavi ul li.rule a:before  { content:""; display:inline-block; width:40px; height:40px; vertical-align: middle; margin:3px 10px 0 0; background:url(../images/icon_rurle.svg) no-repeat; background-size: contain; }
#gnavi ul li.story a:before { content:""; display:inline-block; width:40px; height:40px; vertical-align: middle; margin:3px 10px 0 0; background:url(../images/icon_story.svg) no-repeat; background-size: contain; }
#gnavi ul li.manual span:before { content:""; display:inline-block; width:40px; height:40px; vertical-align: middle; margin:10px 10px 5px 0; background:url(../images/icon_manual.svg) no-repeat; background-size: contain; }
#gnavi ul li.test span:before { content:""; display:inline-block; width:40px; height:40px; vertical-align: middle; margin:10px 10px 5px 0; background:url(../images/icon_test.svg) no-repeat; background-size: contain; }
#gnavi ul li.corona,
#gnavi ul li.privacy,
#gnavi ul li.terms { background-color: #aaa; }
#gnavi ul li.manual span,
#gnavi ul li.test span { line-height: 2; }
#gnavi ul li.manual ul.sub,
#gnavi ul li.test ul.sub { padding: 0; padding-bottom: 5px; }
#gnavi ul li.manual ul.sub li   { background-color: #66C58B; border: none; margin-bottom: 5px; }
#gnavi ul li.manual ul.sub li a { font-size: 1.6rem; font-weight: 100; }
#gnavi ul li.test ul.sub li     { background-color: #ACC566; border: none; margin-bottom: 5px; }
#gnavi ul li.test ul.sub li a   { font-size: 1.6rem; font-weight: 100; }
#gnavi ul li.manual a:after,
#gnavi ul li.test a:after { top: 7px; }
#gnavi ul li.logout   { background: #999; }
#gnavi ul li.logout a { font-size: 1.4rem; text-align: center; font-weight: 400; }
#gnavi ul li.logout a:after { content: "";}
@media only screen and (max-width:767px) {
    #gnavi { float: none; display: none; width:100%; margin: 0; position: absolute; z-index: 1000; top: 50px; }
    #gnavi ul { padding-top: 15px;}
    #gnavi ul li { }
    #gnavi ul li.manual,
    #gnavi ul li.test { font-size: 1.8rem; }
    #gnavi ul li a { display:block; padding:10px 0 !important; margin: 0 auto !important; }
    #gnavi ul li.story a { font-size: 1.6rem; }
}
@media only screen and (max-width:374px) {
    #gnavi ul li a { display:block; padding:7px 0 !important; margin: 0 auto !important; }
    #gnavi ul li.story a { font-size: 1.4rem; }
    #gnavi ul li a:after { top: 7px; font-size: 2.0rem; }
    #gnavi ul li.manual a:after,
    #gnavi ul li.test a:after { top: 2px; }
    #gnavi ul li.rule a:before  { width:30px; height:30px; margin:0px 5px 0 0; }
    #gnavi ul li.story a:before { width:30px; height:30px; margin:0px 5px 0 0; }
    #gnavi ul li.manual span:before { width:30px; height:30px; margin:7px 5px 5px 0; }
    #gnavi ul li.test span:before { width:30px; height:30px; margin:7px 5px 5px 0; }
}


#menuBtn { /*display:none; position:absolute;*/  }
#menuBtn { display:block; transform:scale(0.8); position: fixed; top:6px; right:10px; width:60px; padding:0; z-index:300; }
@media only screen and (max-width:767px) {
    #menuBtn { display:block; transform:scale(0.8); position: fixed; }
}

body.menuopen header { z-index:100; position:relative; }
body.menuopen #wrapper { z-index:60; position:relative; }
body.menuopen #wrapper:after { 
    content:''; display:block; width:100vw; height:100vh; 
    position:fixed; top:0; bottom:0; left:0; margin:auto 0; 
    background:rgba(0,0,0,0.5); background-size:contain; 
    z-index:100; cursor:pointer;
}



.headernav_2 { position: fixed; top:65px; width: 100%; padding: 10px 0; z-index: 50; background-color: #fff; }
    .headernav_2:after { content:""; display:table; clear:both; }
body.story .headernav_2 { border-bottom: 3px solid #69b2c0; }
body.manual .headernav_2 { border-bottom: 3px solid #66C58B; }
body.test .headernav_2 { border-bottom: 3px solid #ACC566; }
.headernav_2 h2 { width: 90%; margin: 0 auto; text-align: center; font-weight: 800; font-size: 1.3rem; font-feature-settings: "palt"; }
    body.story .headernav_2,
    body.story .headernav_2 a { color:#69b2c0; }
    body.rule .headernav_2,
    body.rule .headernav_2 a { color:#009BA5; }
    body.corona .headernav_2,
    body.corona .headernav_2 a { color:#009BA5; }
    body.manual .headernav_2,
    body.manual .headernav_2 a { color:#66C58B; }
    body.test .headernav_2,
    body.test .headernav_2 a { color:#ACC566; }
.headernav_2 h2 span { margin-left: 5px; color: #333; font-size:1.7rem;}
.headernav_2 .arw_l { position: absolute; left: 8px; top: 8px; font-size: 20px; }
.headernav_2 .arw_r { position: absolute; right: 8px; top: 8px; font-size: 20px; }
span.maru_num { height:30px; width:30px; border-radius:50%; line-height:30px; text-align:center; color: #fff !important; display: inline-block; }
body.manual span.maru_num { background-color:#66C58B; }
body.test span.maru_num { background-color:#ACC566; }
@media only screen and (max-width:767px) {

}


/* ============================================
 #mainv
============================================ */
#mainv { margin:30px auto 50px auto; padding: 0; width: 1000px; text-align: center; }
#mainv img { max-width:100%; margin: 0 auto; padding: 0; }
@media only screen and (max-width:767px) {
    #mainv { margin:50px 0 20px 0; padding: 0; width: 100%; }
    #mainv img { max-width: 100%; }
}


/* ============================================
 #footer
============================================ */
.footernav_2 { position: absolute; bottom:50px; width: 100%; padding: 10px 0; z-index: 50; background-color: #fff;  }
    .footernav_2:after { content:""; display:table; clear:both; }
body.story .footernav_2 { border-top: 3px solid #52BEB8; border-bottom: 3px solid #69b2c0;}
body.manual .footernav_2 { border-top: 3px solid #66C58B;  border-bottom: 3px solid #66C58B; }
.footernav_2 h2 { width: 90%; margin: 0 auto; text-align: center; font-weight: 800; font-size: 1.7rem; font-feature-settings: "palt"; text-align: center; }
    body.story .footernav_2,
    body.story .footernav_2 a     { color:#69b2c0; }
    body.rule .footernav_2,
    body.rule .footernav_2 a { color:#009BA5; }
    body.manual .footernav_2,
    body.manual .footernav_2 a    { color:#66C58B; }
    body.test .footernav_2,
    body.test .footernav_2 a      { color:#ACC566; }
.footernav_2 h2 span { margin-left: 5px; color: #333; }
.footernav_2 .arw_l { position: absolute; left: 8px; top: 8px; font-size: 20px; }
.footernav_2 .arw_r { position: absolute; right: 8px; top: 8px; font-size: 20px; }

/* #linkPagetop */
#linkPagetop { transition:bottom .4s ease-in-out; z-index:50; position:fixed; right:0; bottom:-70px; width:auto; height:58px; }
    body.nottop #linkPagetop { bottom:10px; }
#linkPagetop a { display:inline-block; padding:5px; color:#999; font-size:4.0rem; font-weight: bold; border-radius: 30px; font-family:'Font Awesome 5 Free'; line-height: 1; z-index: 99; text-decoration:none; }
#linkPagetop a:hover { color:#888; text-decoration:none; background-color: rgba(255,255,255,0.7); }
@media only screen and (max-width:767px) {
    #linkPagetop a.pc { display:none; }
    #linkPagetop a.sp { display:inline-block; }
    body.nottop #linkPagetop { bottom:20px; }
}

/* #footerfoot */
footer { height: 50px; position: absolute; bottom: 0; width:100%; }
#footerfoot { position:relative; padding:5px 0; background-color:#f8f8f8; }
#footerfoot .footerinner { position:relative; max-width:1000px; margin:30px auto; }
#footerfoot .footerinner2 { position:relative; max-width:1000px; margin:0px auto; }
#footerfoot p.sub { text-align:center; font-size:1.4rem; }
#footerfoot #copyright { font-size:1.5rem; color:#888; margin-bottom: 10px; text-align: center; }

@media only screen and (max-width:767px) {
    #footerfoot .footerinner2 { width:100%; }
    #footerfoot #copyright { font-size:1.2rem; margin: 0; }

}


/* ============================================
 #main
============================================ */
#main { padding:0; margin:0 auto; position:relative; }
	#main:after { content:""; display:table; clear:both; }

#main h1 { font-size:3.0rem; font-weight:bold; margin:50px auto; color:#333; }
@media only screen and (max-width:767px) {
    #main { width: 100%; }
    .main_l { float: none; width: 100%; }
    .main_r { float: none; width: 100%; margin: 0; }
    #main h1 { text-align: center; }
}

.section { width: 90%; padding: 20px 5%; }
.rule .section { border-bottom: 3px solid #009BA5; }
.corona .section { border-bottom: 3px solid #aaa; }
h2.rule_h2 { color:#009BA5; text-align: center; font-size: 2.6rem; font-weight: 800; margin: 0 0 10px 0; padding: 0; }
h2.corona_h2 { color:#333; text-align: center; font-size: 2.6rem; font-weight: 800; margin: 0 0 10px 0; padding: 0; font-feature-settings:"palt"; }
h2.manual_h { color:#333; font-size: 1.8rem; font-weight: 800; margin:0; padding: 0; margin-top: 10px; }
    h2.manual_h:after { content:""; display:table; clear:both; }
h2.manual_h span.maru_num_b { float: left; width:45px; height:45px; border-radius:50%; line-height:1.6; font-size: 2.8rem; text-align:center; color: #fff !important; background-color:#66C58B; margin-right:10px; margin-bottom: 20px; margin-top: -10px; }

figure.image { max-width: 100%; margin:0 0 20px 0; }
figure.image img { max-width: 100%; max-height: 300px; margin:0 auto; display: block; height: auto; }

.caution { color: #fff; background: #c00; padding: 5px 20px; display: inline-block; font-size: 1.8rem; font-weight: bold; margin-bottom: 10px; }
.caution span { color: #ff0; margin-right: 8px; }

.frm1 { border: 1px solid #999; padding: 20px 30px; margin: 30px 0; font-size:0; }
.frm1 .txt1 { width: 70px; display: inline-block; vertical-align: top;  font-size:1.6rem;}
.frm1 .txt2 { display: inline-block; vertical-align: top; font-feature-settings: 'palt'; letter-spacing:0.05rem; width: calc(100% - 70px); font-size:1.6rem;}
@media only screen and (max-width:767px) {
    h2.manual_h { margin-top: 0px; }
    h2.manual_h span.maru_num_b { margin-top: 2px; }

}

/* ============================================
 login register
============================================ */
body.register #wrapper,
body.login #wrapper { margin-top: 30px; }
body.login #main h1 { font-size:2.4rem; font-weight: 800; margin: 30px auto; color: #333; text-align: center; }
body.login .h2 { margin: 30px 0; }
body.login form { width: 100%; text-align: center; }
body.login input#code,
body.login input#email  { width: 70%; margin:0 auto 10px auto; padding:10px 5%; line-height:2.0; display:block; appearance:none; outline: 0; border:1px solid #c4c4c4; background-color:#FEFDF9; font-size: 18px; }
body.login input#email::placeholder,
body.login input#code::placeholder { text-align: center; }
body.login .checkbox { margin-bottom:20px; }
body.login button { width: 80%; appearance: none; outline: 0; background-color: #86CC2E; border: 0; margin: 0; padding: 30px 0; color:#fff; border-radius: 3px; cursor: pointer; font-size: 18px; font-weight: 800; }
body.login p { font-size:1.4rem; padding: 20px 10%; color: #888; }
body.login p.notice { color:#f66; font-weight:bold; line-height:1.8; }
body.login ul.list2 { padding: 0 5% 0 15%; }

/* ============================================
 index
============================================ */
.box_story  { background-color: #89D2E0; padding: 0; display: block; color: #fff; position: relative; margin: 0 5px 5px 5px; }
.box_story a:after { content:'\f054'; font-family:'Font Awesome 5 Free'; font-weight:900 !important; position: absolute; top: 28px; right: 10px; font-size: 3.0rem; }
.box_story a { display: flex; color: #fff; font-weight: 800; font-size: 2.0rem; padding: 35px 10px 7px 10px; text-decoration: none; }
.box_story a:before{ content:""; display:inline-block; width:76px; height:76px; background:url(../images/icon_story.svg) no-repeat; vertical-align: middle; margin:-20px 20px 0 0; }

.box_rule   { background-color: #3EBBC3; padding: 0; display: block; color: #fff; position: relative; margin: 0 5px 5px 5px; }
.box_rule a:after { content:'\f054'; font-family:'Font Awesome 5 Free'; font-weight:900 !important; position: absolute; top: 28px; right: 10px; font-size: 3.0rem; }
.box_rule a { color: #fff; font-weight: 800; font-size: 2.0rem; display: block; padding: 10px 10px 7px 10px; text-decoration: none; }
.box_rule a:before{ content:""; display:inline-block; width:76px; height:76px; background:url(../images/icon_rurle.svg) no-repeat; vertical-align: middle; margin:3px 20px 0 0; }

.box_manual { background-color: #89D2A6; padding: 0 0 5px 0; display: block; color: #fff; margin: 0 5px 5px 5px; }
.box_manual .manual_h { display: flex; color: #fff; font-weight: 800; font-size: 2.0rem; padding: 35px 10px 7px 10px; }
.box_manual .manual_h:before{ content:""; display:inline-block; width:76px; height:76px; background:url(../images/icon_manual.svg) no-repeat; vertical-align: middle; margin:-20px 20px 0 0; }
.box_manual a.btn { background-color: #66C58B; color: #fff; font-weight: 800; font-size: 1.8rem; display: block; padding: 10px 10px 10px 15px; margin: 0 10px 5px 10px; text-decoration: none; position: relative; }
.box_manual a.btn:after { content:'\f054'; font-family:'Font Awesome 5 Free'; font-weight:900 !important; position: absolute; top: 9px; right: 10px; font-size: 2.0rem; }

.box_test { background-color: #BFD289; padding: 0 0 5px 0; display: block; color: #fff; margin: 0 5px 5px 5px; }
.box_test .test_h { display: flex; color: #fff; font-weight: 800; font-size: 2.0rem; padding: 35px 10px 7px 10px; }
.box_test .test_h:before{ content:""; display:inline-block; width:76px; height:76px; background:url(../images/icon_test.png) no-repeat; vertical-align: middle; margin:-20px 20px 0 0; }
.box_test a.btn { background-color: #ACC566; color: #fff; font-weight: 800; font-size: 1.8rem; display: block; padding: 10px 10px 10px 15px; margin: 0 10px 5px 10px; text-decoration: none; position: relative; }
.box_test a.btn:after { content:'\f054'; font-family:'Font Awesome 5 Free'; font-weight:900 !important; position: absolute; top: 9px; right: 10px; font-size: 2.0rem; }

.box_gray   { background-color: #aaa; padding: 0; display: block; color: #fff; position: relative; margin: 0 5px 5px 5px; }
.box_gray a:after { content:'\f054'; font-family:'Font Awesome 5 Free'; font-weight:900 !important; position: absolute; top: 6px; right: 10px; font-size: 2.0rem; }
.box_gray a { color: #fff; font-weight: 400; font-size: 1.6rem; display: block; padding: 10px 10px 7px 15px; text-decoration: none; }

.box_corona   { background-color: #fff; padding: 0; display: block; color: #c33; position: relative; margin: 0 5px 5px 5px; }
.box_corona a:before { content:'\f06a'; font-family:'Font Awesome 5 Free'; font-weight:900 !important; position: absolute; top: 13px; left: 15px; font-size: 2.0rem; }
.box_corona a:after { content:'\f054'; font-family:'Font Awesome 5 Free'; font-weight:900 !important; position: absolute; top: 13px; right: 10px; font-size: 2.0rem; }
.box_corona a { color: #c33; font-weight: 400; font-size: 1.8rem; display: block; padding: 15px 10px 15px 40px; text-decoration: none; border: 5px solid #c33; }

@media only screen and (max-width:767px) {
    .box_story a { padding: 23px 10px 7px 10px; }
    .box_story a:before{ margin:-8px 10px 0 0; }
    .box_test .test_h { padding: 23px 10px 7px 10px; }
    .box_test .test_h:before{ margin:-8px 20px 0 0; }
}


/* ============================================
 .qa_box
============================================ */
.qa_box { width: 900px; padding: 20px 50px; margin:0 auto 0px auto; background-color: #fffde7; }
@media only screen and (max-width:767px) {
   .qa_box { width: 90%; padding: 20px 5%; }
}

/* ============================================
 ol
============================================ */
ol.ans { counter-reset: my-counter; list-style: none; padding: 0; margin: 0; }
ol.ans li { font-weight: bold; font-size:1.5rem; padding:0; position: relative; margin:0 0 5px 0; }
ol.ans li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  border: 1px solid;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  width: 22px;
  color: #ffffff;
  font-size: 90%;
  line-height: 1;
  position: absolute;
  top: 12px;
  left: 10px;
  z-index: 10;
}
ol.ans li a { color: #fff !important; text-decoration: none; display: block; padding:12px 20px 12px 40px; background-color:#89D2E0; border-radius: 10px; cursor: pointer; font-feature-settings:"palt"; }
ol.ans li a.selected { background-color: #52BEB8; }
body.test ol.ans li a { background-color: #BFD289; }
body.test ol.ans li a.selected { background-color: #ACC566; }
ol.ans li a.no_selected,
body.test ol.ans li a.no_selected { background-color: #ddd; }

.correct { width: 300px; text-decoration:none; display:block; color:#52BEB8; margin: 0 auto; padding: 0 0 20px 0; font-size: 4rem; font-weight: bold; 
    background:url(../images/face_correct.png) no-repeat; 
    background-size:100px;/*background-size:contain;*/
    background-position: top 0px right 10px; }
.correct::before { content:'\f111'; font-family:'Font Awesome 5 Free'; margin-right:1rem; font-weight:400 !important; font-size:7rem; position: relative; top: 12px; }
.incorrect { width: 300px; text-decoration:none; display:block; color:#52BEB8; margin: 0 auto; padding: 0 0 20px 0; font-size: 4rem; font-weight: bold; 
    background:url(../images/face_correct.png) no-repeat; 
    background-size:100px;/*background-size:contain;*/
    background-position: top 0px right 10px; }
.incorrect::before { content:'\f00d'; font-family:'Font Awesome 5 Free'; margin-right:1rem; font-weight:800 !important; font-size:7rem; position: relative; top: 12px; }
body.test .correct { color: #ACC566; }
body.test .incorrect { color: #ACC566; }

body.test .score_area { margin: 0 auto 20px auto; width: 510px; text-align: center; }
body.test .score_area .h3_test_score { width: 80px; color: #ACC566; padding: 0px; margin:0; font-size: 2.4rem; font-weight: 800; display: inline-block; vertical-align: middle; }
body.test .score_correct { width: 200px; margin: 0 0 0px 0; display: inline-block; vertical-align: middle;}
body.test .score_correct .correct { width: 160px; text-decoration:none; display:block; color:#333; margin: 0; padding:0; font-size: 3.0rem; font-weight: bold; background: none; }
body.test .score_correct .correct::before { content:'\f111'; font-family:'Font Awesome 5 Free'; margin-right:0.2rem; font-weight:400 !important; font-size:3.0rem; position: relative; top: 0px; }
body.test .score_correct .incorrect { width: 160px; text-decoration:none; display:block; color:#333; margin: 0; padding:0; font-size: 3.0rem; font-weight: bold; background:none; }
body.test .score_correct .incorrect::before { content:'\f00d'; font-family:'Font Awesome 5 Free'; margin: 0 0.5rem; font-weight:800 !important; font-size:3rem; position: relative; top: 1px; }
/*body.test .score_correct .correct,
body.test .score_correct .incorrect { display:none; }*/
body.test .score_area .btn_next_q { width: 150px; margin: 0px 0 0 0px; text-align: center; display: inline-block; vertical-align: middle;}
body.test .score_area .btn_next_q a { color: #fff; background-color:#ACC566; font-size: 1.6rem; border-radius: 5px; line-height: 0; padding: 3px 5px; text-align: center; text-decoration: none; }
body.test .score_area .btn_next_q a:before { content:'\f061'; font-family:'Font Awesome 5 Free'; font-weight:800 !important; position: relative; top: 0; right:0; padding-right: 3px; }
body.test .score_area .btn_next_q a:hover { background-color: #BFD289; }
@media only screen and (max-width:767px) {
    body.test .score_area { width: 100%; text-align: left; }
    body.test .score_area .h3_test_score { width: 15%; }
    body.test .score_correct { width: 45%; }
    body.test .score_area .btn_next_q { width: 35%; }
}

.checkpoint { background-color: #ffe5b2; margin:0; padding: 0; }
    .checkpoint:after { content:""; display:table; clear:both; }
.checkpoint_h { font-size: 1.8rem; font-weight: 800; color:#fff; background-color: #52BEB8; text-align: center; line-height: 2.0; }
.checkpoint p { padding:10px 20px; margin: 0; color: #444; }
.checkpoint div.img { float: right; width: 20%; margin:0 10px 5px 10px; }
.checkpoint div.img img {width: 100%; max-width: 100%; }
@media only screen and (max-width:767px) {
    .checkpoint div.img { float: right; width: 30%; margin:10px 10px 5px 10px; }
}


.h2_title { color: #52BEB8; padding: 5px 0px 0px 0px; margin: 0 0 20px 0; font-size: 2.2rem; display: inline-flex; font-feature-settings:"palt"; font-weight: 800; }
.h2_title:before { content:'Q.'; margin:0px 7px 0 0; line-height:1; font-size: 2.6rem; font-weight: 800;}
.h2_title_test { color: #ACC566; padding: 20px 0px 0px 0px; margin: 0 0 20px 0; font-size: 1.8rem; display: inline-flex; font-feature-settings:"palt"; font-weight: 800; }
.h2_title_test:before { content:'Q.'; margin:0px 7px 0 0; line-height:1; font-size: 2.4rem; font-weight: 800;}
.h3_title_test { color: #ACC566; padding: 0px; margin:0; font-size: 2.2rem; font-weight: 800; }

@media only screen and (max-width:767px) {
    
}

/* ============================================
 story
============================================ */
.prof_area  { width: 100%; padding: 20px 0px; margin:0px auto; background-color: #ffeecc; }
    .prof_area:after { content:""; display:table; clear:both; }
.prof { margin: 0 0 20px 0; padding: 0 2%; width: 46%; float: left; }
    .prof:after { content:""; display:table; clear:both; }
    .prof:nth-child(n+3) { margin-bottom: 0; }
.prof .left30 { float: left; width: 30%; }
.prof .left65 { float: left; width: 65%; margin-right: 5%; }
.prof .right30 { float: right; width: 30%; }
.prof .right65 { float: right; width: 65%; }
.prof h3 { font-size: 2.0rem; font-weight: 800; margin: 0px 0 10px 0; padding: 0; color: #333; }
.prof p { line-height: 1.4; }
.prof img {width: 100%; }

.fukidashi_r { position: absolute; background: url(/images/story/fukidashi_r.png) no-repeat; background-size: contain; font-size: 1.7rem; text-align: center; display: flex; justify-content: center; align-items: center; }
.fukidashi_l { position: absolute; background: url(/images/story/fukidashi_l.png) no-repeat; background-size: contain; font-size: 1.7rem; text-align: center; display: flex; justify-content: center; align-items: center; }
.kakari { position: absolute; font-size: 1.8rem; font-weight: bold; }
.taro_area { position: relative; width: 100%; max-width: 310px; margin: 0 auto 30px auto; }
.taro_area img.face { width: 150px; }
.taro_area .fukidashi_r { top: -10px; right: 0px; width: 160px; height: 135px; }
.taro_area .kakari { bottom: 2px; left: 150px;}
.hanako_area { position: relative; width: 100%; max-width: 310px; margin: 0 auto 30px auto; text-align: right; }
.hanako_area img.face { width: 150px; }
.hanako_area .fukidashi_l { top: -10px; left: 0px; width: 160px; height: 135px; }
.hanako_area .kakari { bottom: 8px; left: 30px;}
.jiro_area { position: relative; width: 100%; max-width: 310px; margin: 0 auto 30px auto; }
.jiro_area img.face { width: 150px; }
.jiro_area .fukidashi_r { top: -10px; right: 0px; width: 160px; height: 135px; }
.jiro_area .kakari { bottom: 2px; left: 150px;}

.yamamoto_area { position: relative; width: 100%; max-width: 420px; margin: 180px auto 30px auto; }
.yamamoto_area img { width: 100%; max-height: 300px; }
.yamamoto_area .fukidashi_r2 { position: absolute; background: url(../images/story/fukidashi_r.png) no-repeat; background-size: contain; font-size: 1.6rem; font-weight: 800; text-align: center; display: flex; justify-content: center; /*align-items: center;*/ top: -190px; left: 60px; width: 195px; height: 250px; padding: 53px 30px 0 35px; line-height: 1.4; }
.yamamoto_area .fukidashi_r2 h3 {position: absolute; top: 25px; left: 55px; font-weight: 800; font-size: 2.0rem; color: #52BEB8; }

@media only screen and (max-width:767px) {
   .prof_area { width: 90%; padding: 20px 5%; }
   .prof { padding: 0; width: 100%; float: none; }
   .prof:nth-child(n+3) { margin-bottom: 20px; }
   .prof:last-child { margin-bottom: 0; }
}


/* ============================================
 test
============================================ */
.test_point { background-color: #ffe5b2; margin: 0 0 10px 0; padding: 0; }
    .test_point:after { content:""; display:table; clear:both; }
.test_point_h { font-size: 2.0rem; font-weight: 800; color:#fff; background-color: #ACC566; text-align: center; line-height: 2.0; }
.test_point p { padding:10px 20px; margin: 0; color: #444; }
.test_point div.img { float: right; width: 20%; margin:0 10px 5px 10px; }
.test_point div.img img {width: 100%; max-width: 100%; }

/* サークル */
.circle {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%; 
    margin: 20px auto;
    text-align: center;
}
.circle01 { background-color: #666; }
.circle02 { background-color: #c66; }
.circle03 { background-color: #c33; }
.circle04 { background-color: #f00; }
.circle-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: 800;
    font-size: 2.2rem;
    line-height: 1.2;
}
.circle-inner span { font-size: 5rem; padding:0 0.3rem 0 1.5rem; color: #ff0; }
.circle04 .circle-inner span { padding:0; color: #ff0; }

/* バースト */
.burst {
    background: #81C7D4;
    width: 160px;
    height: 160px;
    position: relative;
    text-align: center;
    margin: 40px auto;
}
.burst:before, .burst:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 160px;
    width: 160px;
    background: #81C7D4;
}
.burst:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
}
.burst:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
}
.burst01, .burst01:before, .burst01:after { background-color: #666; }
.burst02, .burst02:before, .burst02:after { background-color: #c66; }
.burst03, .burst03:before, .burst03:after { background-color: #c33; }
.burst04, .burst04:before, .burst04:after { background-color: #f00; }
.burst .pp { position: absolute; z-index: 10; width: 160px; top: 50%; left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); 
    color: #fff;
    font-weight: 800;
    font-size: 2.2rem;
    line-height: 1.2; }
.burst .pp span  { font-size: 5rem; padding:0 0.3rem 0 1.5rem; color: #ff0; }
.burst04 .pp span { padding:0; color: #ff0; }

.score { margin:20px 0 50px 0; }
.score h2 { font-size: 2.8rem; padding-bottom: 10px; font-weight: 800; text-align: center; color:#c33; }
.score > p { text-align: center; font-weight: 800; }

.btn_backtoscore { display:none; } /* テスト結果に戻るボタン */
body.mode_review .btn_nextquestion { display:none; } /* 次の問題ボタン */
body.mode_review .btn_backtoscore { display:block; } /* テスト結果に戻るボタン */

@media only screen and (max-width:767px) {
    .test_point div.img { float: right; width: 30%; margin:10px 10px 5px 10px; }
    .score > p { text-align: left; }

}



/* ============================================
 modal
============================================ */
.modal_open { }
.modal_box { position: fixed; z-index: 7777; display: none; width: 90%; max-width: 840px; margin: 0; padding: 60px 2vw 30px; background: #fff; box-sizing: border-box; }
    .modal_box:after { content:""; display:table; clear:both; }
.modal_box h2 { position: relative; color: #2D75B8; font-weight: bold; font-size: 2.0rem; margin-bottom: 10px;}
.modal_box h2:before { content:'\f059'; font-family:'Font Awesome 5 Free'; font-weight:900 !important; position: relative; top: 0px; left: 0px; margin-right: 3px;  }
.modal_box .left_img { width: 30%; float: left; }
.modal_box .left_img img { width: 100%; max-width: 300px; }
.modal_box .right_txt { width: 65%; float: right; }
.modal_close { position: absolute; top: 0; right: 0; display: block; width: 62px; font-size: 46px; color: #fff; line-height: 62px; text-align: center; background: #2D75B8; cursor: pointer; }
.modal_close i { line-height: 62px; vertical-align: bottom; }
.modal_bg { position: fixed; top: 0; left: 0; z-index: 6666; display: none; width: 100%; height: 120%; background-color: rgba(0,0,0,0.7); }

@media screen and (max-width: 767px) {
  .modal_box { padding: 40px 2vw 20px; }
  .modal_box .left_img { width: 20%; max-width: 200px; }
  .modal_box .right_txt { width: 77%; }
  .modal_close { width: 30px; line-height: 30px; font-size: 25px; }
  .modal_close i { line-height: 30px; }

}



/* ============================================
 Layout
============================================ */
/* clear % */ 
.clearfix:after {  content:""; display:table; clear:both; }
br.clear { clear:both; height:0; font-size:0; line-height:0; }
/* margin */ 
.mt,.mt30 { margin-top:30px !important; }
.mt10 { margin-top:10px !important; }
.mt20 { margin-top:20px !important; }
.m0,.m00 { margin:0 !important; }
.mb,.mb30 { margin-bottom:30px !important; }
.mb10 { margin-bottom:10px !important; }
.mb20 { margin-bottom:20px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }
.mAuto { margin-left: auto !important; margin-right: auto !important; display: block; }
/* width % */ 
.w05p { width:5%;} .w06p { width:6%;} .w07p { width:7%;} .w08p { width:8%;} .w09p { width:9%;} .w10p { width:10%;} .w11p { width:11%;} .w12p { width:12%;} .w13p { width:13%;} .w14p { width:14%;} .w15p { width:15%;} .w16p { width:16%;} .w17p { width:17%;} .w18p { width:18%;} .w19p { width:19%;} .w20p { width:20%;} .w25p { width:25%;} .w30p { width:30%;} .w33p { width:33%;} .w40p { width:40%;} .w50p { width:50%;} .w60p { width:60%;} .w70p { width:70%;} .w80p { width:80%;} .w90p { width:90%;} .w100p { width:100%;}
/* display % */
.ib { display:inline-block; }
/* align */ 
.inlineL { text-align:left; } .inlineC { text-align:center; } .inlineR { text-align:right; } 
.vlineT { vertical-align:top    !important; } .vlineM { vertical-align:middle !important; } .vlineB { vertical-align:bottom !important; }
@media only screen and (max-width:767px) {
   /* width % */ 
    .w05p_sp { width:5%;} .w06p_sp { width:6%;} .w07p_sp { width:7%;} .w08p_sp { width:8%;} .w09p_sp { width:9%;} .w10p_sp { width:10%;} .w11p_sp { width:11%;} .w12p_sp { width:12%;} .w13p_sp { width:13%;} .w14p_sp { width:14%;} .w15p_sp { width:15%;} .w16p_sp { width:16%;} .w17p_sp { width:17%;} .w18p_sp { width:18%;} .w19p_sp { width:19%;} .w20p_sp { width:20%;} .w25p_sp { width:25%;} .w30p_sp { width:30%;} .w33p_sp { width:33%;} .w40p_sp { width:40%;} .w50p_sp { width:50%;} .w60p_sp { width:60%;} .w70p_sp { width:70%;} .w80p_sp { width:80%;} .w90p_sp { width:90%;} .w100p_sp { width:100%;}
    /* margin % */ 
    .mt { margin-top:15px !important; }
    .mb { margin-bottom:15px !important; }    
}
@media only screen and (max-width:767px) {
    #wrapper #main .spflnone .tx { float:none; width:auto; }
    #wrapper #main .spflnone .img { float:none; width:auto; }
}

@media print{
    body { height:inherit; min-height:0; max-width:500px; }
    #menuBtn { display:none; }
    #wrapper { max-width:500px; }
    #headernav { position:relative; }
    .headernav_2 { position:relative; top:0; } 
    .headernav_2 .arw_r,
    .headernav_2 .arw_l { display:none; }
    body h1 { top:0 !important; }
    .footernav_2 { display:none; }
    #linkPagetop { display:none; }
    footer { max-width:500px; }
}



.invalid-feedback { display:block; color:#e70; margin-bottom:20px; font-weight:bold; }

/*------- sample -------------*/
body.samplepage { background:url(/images/bg_sample.png);}