@charset "UTF-8";
/***************************************
	layout
***************************************/
body{
    font-family: 'Noto Sans Japanese', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'HiraKakuPro-W3', Meiryo, メイリオ, 'sans-serif';
	line-height: 1.5;
	font-size: 100%;
}
@media (max-width: 768px){
	body{
		font-size: 87.5%;
	}
}

a{
	text-decoration: none;
}

h4{
	margin-top: 0;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0px;
	clear: both;
	visibility: hidden;
}


#wrap
{
/*    background: #f5f5f5;*/
}
@media (max-width: 768px)
{
    #wrap
    {
        background: #fff;
    }
}
#wrap .main-inner
{
    box-sizing: border-box;
    max-width: 1300px;
    margin: 0 auto;
    background: #fff;
}
@media (max-width: 768px)
{
    #wrap .main-inner
    {
        padding: 0;
    }
}

/***************************************
	header
***************************************/

#wrap #header
{
/*    max-width: 1200px;
    margin: 0 auto;
	padding: 0 50px;
*/}
#wrap #header:after
{
/*    display: table;
	table-layout: fixed;
    clear: both;

    content: '';
*/}
@media (max-width: 768px)
{
    #wrap #header
    {
/*        width: 90.625%;
		padding: 0;
*/	}
}
#wrap #header h1
{
/*    float: left;

    width: 100px;
    padding: 15px 0;
*/}
@media (max-width: 768px)
{
    #wrap #header h1
    {
/*        width: 50px;
        padding: 0;
*/    }
}
#wrap #header h2
{
    font-size: 1.125em;
    line-height: 1.44;

    float: right;

    padding: 26px 0;
	margin: 0;

    text-align: right;
}
@media (max-width: 768px)
{
    #wrap #header h2
    {
        font-size: 0.625em;

        padding: 20px 40px 15px 0;
    }
}

#contents{
	margin-top: -60px;
}
@media (max-width: 768px){
	#contents{
		margin-top: 0;
	}
}

/***************************************
	nav_main
***************************************/
nav.nav_main{
	width: 100%;
	height:auto;
	color: #3a280a;
	font-family: -apple-system, BlinkMacSystemFont, '.SFNSDisplay-Regular', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Yu Gothic Medium', '游ゴシック Medium', 'Yu Gothic', '游ゴシック', sans-serif;
	position: relative;
}
.navArea{
	position: absolute;
	top: 2px;
	left: 155px;
	z-index: 10!important;
}
nav.nav_main div.navArea ul{
	list-style: none;
	display: table;
	padding: 0;
	width: 1000px;
	margin: 15px auto;
}

nav.nav_main div.navArea ul li{
	display: table-cell;
	vertical-align: middle;
	padding: 0;
	padding-left: 10px;;
	color: #3a280a;
	border-bottom: 4px solid rgba(255,255,255,0);
	transition: border-bottom 0.5s;
	-webkit-transition: border-bottom 0.5s;
}

nav.nav_main div.navArea ul li a{
	display: table-cell;
	color: #3a280a;
	height: 4em;
	vertical-align: middle;
	text-align: left;
}
.current{
	border-bottom: 4px solid #3a280a!important;
	text-align: left;
}

nav.nav_main div.navArea ul li:hover,
nav.nav_main div.navArea ul li:focus{
	border-bottom: 4px solid #3a280a;
}
.nav_main a{
}
.nav_disable{
	padding: 7px 20px!important;
	color: #999;
}

#HeaderMenuToggle,
.header--menu__toggle {
  display: none;
}

nav.nav_main ul li a > span {
	display: none;
}

@media screen and (max-width: 899px){
	nav.nav_main{
		height: 0px;
		position: static;
	}
	.navArea{
		position: static;
	}
	
	nav.nav_main br{
		display: none;
	}
	nav.nav_main ul li a > span {
		display: inline;
	}
	.header--menu__toggle {
		position: absolute;
		display: block;
		top: 22px;
		right: 10px;
		padding: 6px;
		width: 24px;
		height: 24px;
		background-image: url(../images/header_menu_toggle.svg);
		background-repeat: no-repeat;
		background-position: center center;
		cursor: pointer;
	}
	
	#HeaderMenuToggle:checked 
	+ .header--menu__toggle {
		background-image: url(../images/header_menu_close.svg);
	}
	
	nav.c5-nav .c5-nav__inner ul {
		position: absolute;
		visibility: hidden;
		z-index: 10;
		top: 78px;
		left: 0;
/*		margin-top: -15px;*/
/*		height: 124px;*/
		width: 100%;
		background: #FFF;
		box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4);
		transition: opacity 0.2s;
	}
	
	#HeaderMenuToggle:checked 
	+ .header--menu__toggle + ul {
		visibility: visible;
		opacity: 1.0;
	}
	
/*	nav.c5-nav .c5-nav__inner ul li {
		display: block;
		width: 100%;
		height: 60px;
		float: none;
		border-right: 0px;
		padding: 0px;
	}
	
	nav.c5-nav .c5-nav__inner ul li:first-child{
		border-left: 0px;
	}
	
	nav.c5-nav .c5-nav__inner ul li:first-child a{
		border-bottom: 1px solid #FFF;
	}
	
	nav.c5-nav .c5-nav__inner ul li a {
		height: 20px;
		padding: 20px;
		display: block;
	}
	.current > span{
		height: 20px;
		padding: 20px;
		display: block;
		text-align: center;
	}
	.nav_disable{
		padding: 15px 0 0 0 !important;
		
	}
*/  
}
@media screen and (max-width: 767px){
	.header--menu__toggle {
		position: absolute;
		display: block;
		top: 8px;
		right: 14px;
		padding: 6px;
		width: 24px;
		height: 24px;
		background-image: url(../images/header_menu_toggle.svg);
		background-repeat: no-repeat;
		background-position: center center;
		cursor: pointer;
	}
	nav.c5-nav .c5-nav__inner ul {
		position: absolute;
		visibility: hidden;
		z-index: 10;
		top: 50px;
	}
}

/***************************************
	enq
***************************************/
.enq{
	background: #faefdd;
	width: 1300px;
	padding: 1em 0 3em;
	line-height: 1.5;
	text-align: center;
font-family: -apple-system, BlinkMacSystemFont, '.SFNSDisplay-Regular', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Yu Gothic Medium', '游ゴシック Medium', 'Yu Gothic', '游ゴシック', sans-serif;
}
.enq_title{
	text-align: center;
	padding: 1em 0;
	font-size: 1.5em;
}
.enq_link{
	display: block;
	margin: 0 auto;
	color: #FFF;
	width: 380px;
	font-size: 1.5em;
	padding: 15px 0 15px 35px;
	background: url(/feature/oteire/share/images/enq_arrow.png) no-repeat 8px center;
	background-color: #3a280a;
	text-align: center;
}
.enq_link:hover,
.enq_link:focus{
	opacity: 0.5;
}
@media screen and (max-width: 768px){
	.enq{
		width: auto;
	}
	.enq p{
		padding: 0 1em;
	}
	.enq_title{
		padding: 1em 1em!important;
	}
	.enq_link{
		width: 75%;
		height: auto;
		padding-right: 1em;
	}
}

/***************************************
	nav_inner
***************************************/
.nav_inner{
	list-style: none;
	padding: 3em 0;
	width: 1050px;
	margin: 0 auto;
}
.nav_inner li{
	float: left;
	margin-right: 2em;
	margin-bottom: 3em;
}
.nav_inner a{
	position: relative;
	display: block;
}
.nav_inner a:hover,
.nav_inner a:focus{
	opacity: 0.5;
}
.ni_title{
	color: #3a280a;
	width: 198px;
	height: 57px;
	text-align: center;
	position: absolute;
	transform: rotate(-5deg);
	top: -63px;
	left: -24px;
	font-size: 1.5em;
	padding-top: 1em;
}
.ni_txt{
	color: #3a280a;
	background: url(/feature/oteire/share/images/bg_nav-inner.png) no-repeat left center;
	background-size: contain;	
	width: 312px;
	height: 146px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size: 1.125em;
	font-family: -apple-system, BlinkMacSystemFont, '.SFNSDisplay-Regular', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Yu Gothic Medium', '游ゴシック Medium', 'Yu Gothic', '游ゴシック', sans-serif;
	line-height: 1.5;
}
.ni_oteire.ni_title{
	background: url(/feature/oteire/share/images/bg_oteire.png) no-repeat left center;
}
.ni_hint.ni_title{
	background: url(/feature/oteire/share/images/bg_hint.png) no-repeat left center;
}
.ni_update.ni_title{
	background: url(/feature/oteire/share/images/bg_update.png) no-repeat left center;
}

@media screen and (max-width: 768px){
	.nav_inner{
		width: auto;
		padding-bottom: 0;
		padding-right: 1em;
	}
	.nav_inner li{
		margin-left: 2em;
		margin-right: 0;
		float: none;
	}
	.ni_title{
		font-size: 1.125em;
		top: -66px;
		left: -76px;
		display: table-cell;
	}
	.ni_txt{
		background-image: url(/feature/oteire/share/images/bg_nav-inner_left.png), url(/feature/oteire/share/images/bg_nav-inner_right.png), url(/feature/oteire/share/images/bg_nav-inner_center.png);
		background-repeat: no-repeat, no-repeat, repeat-x;
		background-position: left center, right center, left 2px center;
		width: 20%;
		height: 72px;
		padding-left: 2em;
		display: table-cell;
	}
	.ni_oteire.ni_title,
	.ni_hint.ni_title,
	.ni_update.ni_title{
		background-size: 50% 50%;
		background-position: center;
		padding-top: 2em;
	}
	
}
@media screen and (max-width: 400px){
	.ni_txt{
		font-size: 1em;
	}
}
/***************************************
	oteire, hint, update
***************************************/
#oteire,#hint,#update{
	margin: 3em 0 2em;
}

.note_title{
	color: #002B69;
}
.cntTitle{
	font-size: 2.625em;
	font-family: -apple-system, BlinkMacSystemFont, '.SFNSDisplay-Regular', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Yu Gothic Medium', '游ゴシック Medium', 'Yu Gothic', '游ゴシック', sans-serif;
	padding-left: 5px;
}
.cntTitle span{
	font-size: 0.55em;
	font-family: 'Noto Sans Japanese', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'HiraKakuPro-W3', Meiryo, メイリオ, 'sans-serif';
	padding: 0.65em 2.5em;
	font-weight: normal;
	vertical-align: middle;
}
@media screen and (max-width: 768px){
	.cntTitle{
		margin-bottom: 0.5em;
		font-size: 2em;
	}
	.cntTitle span{
		display: block;
		padding: 1em 2em;
	}
}
#oteire .cntTitle span {
	background: url(/feature/oteire/share/images/bg_oteire.png) no-repeat left center;
}
#hint .cntTitle span {
	background: url(/feature/oteire/share/images/bg_hint.png) no-repeat left center;
	padding: 1em 2em;
}
#update .cntTitle span {
	background: url(/feature/oteire/share/images/bg_update.png) no-repeat left center;
}
@media screen and (max-width: 768px){
	#oteire .cntTitle span,
	#hint .cntTitle span,
	#update .cntTitle span{
		background-size: 140px;
	}
}
/***************************************
	note
***************************************/
.note{
	display: table;
	table-layout: fixed;
	width: 97%;
	margin-bottom: 2em;
	padding: 1em 2%;
}
.note_left,
.note_right{
	display: table-cell;
	vertical-align: top;
}
.note_left{
	max-width: 840px;
}
.note_right{
	width: 30%;
	padding-left: 1em;
}
.note_title{
	display: table-caption;
	margin-bottom: 0;
	padding-left: 0.7em;
	font-size: 1.875em;
	font-family: -apple-system, BlinkMacSystemFont, '.SFNSDisplay-Regular', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Yu Gothic Medium', '游ゴシック Medium', 'Yu Gothic', '游ゴシック', sans-serif;
}
@media screen and (max-width: 768px){
	.note_title{
		font-size: 1.5em;
	}
	.note_left{
		width: auto!important;
		display: table-footer-group;
	}
	.note_right{
		width: auto!important;
		padding-left: 0;
	}
	
}
/***************************************
	notice
***************************************/

.notice{
	display: block;
	width: 100%;
	margin-bottom: 2em;
	background-color: #F5E2CF;
}
.notice h4{
	font-size: 1.5em;
	color: #002B69;
	font-family: -apple-system, BlinkMacSystemFont, '.SFNSDisplay-Regular', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Yu Gothic Medium', '游ゴシック Medium', 'Yu Gothic', '游ゴシック', sans-serif;
	margin: 0;
	padding-top: 1em;
	padding-left: 2.5em;
}
.notice_left,
.notice_right{
	vertical-align: top;
	padding: 1em;
	display: table-cell;
}
.notice_left{
	text-align: left;
	padding-left: 4em;
}
.notice_right{
	width: 30%;
	text-align: center;
}
@media screen and (max-width: 768px){
	.notice{
		padding: 1em;
		width: auto;
	}
	.notice h4{
		padding: 0;
		padding-bottom: 0.5em;
	}
	.notice_left{
		display: table-footer-group;
		padding: 0;
	}
	.notice_right{
		display: table-cell;
		width: auto!important;
		text-align: center;
		padding: 0;
	}
}

/***************************************
	store
***************************************/

.store{
	display: table;
	width: 100%;
	margin-bottom: 2em;
	background-color: #efefef;
}
.store_left,
.store_right{
	display: table-cell;
	vertical-align: top;
	padding: 1em;
}
.store_left{
	width: 30%;
	text-align: center;
}
.store_right{
	text-align: left;
}
@media screen and (max-width: 768px){
	.store{
		display: block;
	}
	.store_left{
		display: block;
		width: auto!important;
	}
	.store_right{
		display: block;
		text-align: center;
	}
}

/***************************************
	topics
***************************************/

.topics{
	display: block;
	width: 100%;
	margin-bottom: 2em;
	padding-bottom: 2em;
	background: url(/feature/oteire/share/images/bg_topics_top.png), url(/feature/oteire/share/images/bg_topics_bottom.png), url(/feature/oteire/share/images/bg_topics_middle.png);
	background-repeat: no-repeat,no-repeat, repeat-y;
	background-position: left top, left bottom, left top;
	
}
.topics_title{
	color: #FFF;
	width: 194px;
	padding: 1.2em 0 0 2.8em;
	text-align: center;
	letter-spacing: 0.5em;
	margin: 0;
}
.topics_lead{
	padding: 1em 1em 1em 3em;
}
.topics_lead h5{
	font-size: 1.5em;
	font-family: -apple-system, BlinkMacSystemFont, '.SFNSDisplay-Regular', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Yu Gothic Medium', '游ゴシック Medium', 'Yu Gothic', '游ゴシック', sans-serif;
	margin: 0.5em 0;
}
.topics_store{
	display: table;
	table-layout: fixed;
	width: 100%;
	padding: 0 1em 2em;
}
.topics_left,
.topics_right,
.topics_box{
	display: table-cell;
	vertical-align: top;
	padding: 1em;
}
.topics_left{
	width: 30%;
	text-align: center;
}
.topics_right{
	text-align: left;
}
.topics_right p{
	margin-top: 0;
}
.tb_cap{
	display: table-caption;
	text-align: center;
}
.topic_circle{
	list-style: none;
	display: table;
	table-layout: fixed;
	padding: 0;
	margin: 0.5em 0;
}
.topic_circle li{
	display: table-cell;
	padding: 0 0.5em;
}
.topic_circle li img{
	max-width: 100%;
	height: auto;
}
@media screen and (max-width: 768px){
	.topics_store{
		padding: 0 1em;
		display: block;
		width: auto;
	    margin-left: 1em;
	}
	.topics_left,
	.topics_right{
		padding: 0.5em;
	}
	.topics_left{
		width: 50%!important;
	}
	.topics_box{
		display: table;
		table-layout: fixed;
		width: 100%!important;
		padding: 0;
	}
	.topics_box .tb_pct,
	.topics_box .tb_txt{
		display: table-cell;
		vertical-align: top;
		padding: 0.5em;
		vertical-align: top;
	}
	.topics_box .tb_pct{
		width: 50%!important;
		text-align: center;
	}
	.topics_box .tb_txt p{
		margin-top: 0;
	}
}
/***************************************
	note, notice, store, topics
***************************************/
.w50{
	width: 50%;
}
.w25{
	width: 25%;
}
.w20{
	width: 20%;
}

/***************************************
	linkBt
***************************************/

.linkBt{
	margin: 1em 0;
	padding: 1em 0;
}
.linkBt a{
	background: url(/feature/oteire/share/images/icon_arw.png) no-repeat right 10px center;
	background-color: #002B69;
	background-size: 10px;
	padding: 1em 3em 1em 2em;
	color: #FFF;
}
.linkBt a:hover,
.linkBt a:focus{
	opacity: 0.5;
}
@media screen and (max-width: 400px){
	.linkBt a{
		display: block;
		text-align: center;
		padding: 1em 2em 1em 1em;
	}
}
/***************************************
	txtlink
***************************************/
p.txtlink{
	padding-left: 1em;
	background: url(/feature/oteire/share/images/link_arrow.png) no-repeat left center;
	color: #0058DB;
}
.txtlink:hover,
.txtlink:focus{
	text-decoration: underline;
}

/***************************************
	text-align
***************************************/

.tal{
	text-align: left!important;
}
.tar{
	text-align: right!important;
}
.tac{
	text-align: center!important;
}


.c5-heading5{
    font-size: 1.5rem;
    margin: 1em 0 0 0;
    padding: .1em 0 .1em .5em;
  	border-left: 6px solid #ccc;
}
.c5-attn{
	/*color: #C81717;*/
	font-size: 0.8rem;
	/*font-weight: bold;*/
}


.pt5 { padding-top:5px !important; }

.pt10 { padding-top:10px !important; }

.pt15 { padding-top:15px !important; }

.pt20 { padding-top:20px !important; }

.pt30 { padding-top:30px !important; }

.pt40 { padding-top:40px !important; }

.pt50 { padding-top:50px !important; }

.pb0 { padding-bottom:0 !important; }

.pb5 { padding-bottom:5px !important; }

.pb10 { padding-bottom:10px !important; }

.pb15 { padding-bottom:15px !important; }

.pb20 { padding-bottom:20px !important; }

.pb30 { padding-bottom:30px !important; }

.pb40 { padding-bottom:40px !important; }

.pb50 { padding-bottom:50px !important; }

.mt0 { margin-top:0 !important; }

.ml0 { margin-left:0 !important; }

.mt5 { margin-top:5px !important; }

.mt10 { margin-top:10px !important; }

.mt15 { margin-top:15px !important; }

.mt20 { margin-top:20px !important; }

.mt30 { margin-top:30px !important; }

.mt40 { margin-top:40px !important; }

.mt50 { margin-top:50px !important; }

.mb0 { margin-bottom:0 !important; }

.mb5 { margin-bottom:5px !important; }

.mb10 { margin-bottom:10px !important; }

.mb15 { margin-bottom:15px !important; }

.mb20 { margin-bottom:20px !important; }

.mb30 { margin-bottom:30px !important; }

.mb40 { margin-bottom:40px !important; }

.mb50 { margin-bottom:50px !important; }