@charset "utf-8";

/*-----------------------------------------------------
html
-------------------------------------------------------*/
html{
	overflow-y:scroll;
}


/*-----------------------------------------------------
body
-------------------------------------------------------*/
body{
	font-size:12px;
	font-size:75%\9;
	color:#363636;
	line-height:1.6;
	letter-spacing:0.03em;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Arial,Osaka,Sans-Serif;
	-webkit-text-size-adjust:none;
}
input,textarea{
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Arial,Osaka,Sans-Serif;
}

/* for IE6 */
* html body{
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}
* html input,
* html textarea{
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}
/* for IE9 */
body:not(:target){
	font-size:75%\9;
}

/*-----------------------------------------------------
Noto Sans
-------------------------------------------------------*/
.noto {font-family: 'Noto Sans Japanese';}
.thin {font-weight: 100;}
.light {font-weight: 200;}
.demi-light {font-weight: 300;}
.regular {font-weight: 400;}
.medium {font-weight: 500;}
.bold {font-weight: 700;}
.black {font-weight: 900;}

/*-----------------------------------------------------
ICO
-------------------------------------------------------*/
.ico{
	display: inline-block;
	vertical-align: middle;
}
.ico img{
	width: 100%; height: auto;
}
/*-----------------------------------------------------
a
-------------------------------------------------------*/
a:link,
a:visited{
	color:#363636;
	text-decoration:underline;
}
a:hover,
a:active{
	color:#363636;
	text-decoration:none;
}


/*-----------------------------------------------------
nonvisual-menu
-------------------------------------------------------*/
div.nonvisual-menu{
	width:0;
	height:0;
	font-size:1px;
	line-height:1px;
	overflow:hidden;
	/* except MacIE \*/position: absolute;/* end */
	left:0;
	top:0;
	color:#fff;
}

div.nonvisual-menu a{
	text-decoration:none;
	font-size:1px;
	line-height:1px;
	color:#fff;
}
#main-Contents img{
	position:absolute;
	border:none!important;
	height:1px;
	top:0px;
	left:0px;
}


/*-----------------------------------------------------
Container
-------------------------------------------------------*/
#Container{
	min-width: 320px;
	overflow: hidden;
}

/*-----------------------------------------------------
Header
-------------------------------------------------------*/
#Header{
	width: 100%;
	min-height:70px;
	position: fixed;
	top:0;
	left:0;
	background: #fff;
	z-index: 1000;
}
#Header div.menu{
	display: none;
}
#Header h1{
	position: absolute;
	top:23px;
	left:15px;
	margin: 0;
}
#Header h1 a > img{
	width: 121px;
	height: auto;
}
#Header h1 span img{
	width: 117px;
	height: auto;
	padding: 7px 0 0 5px;
}

/* btn
---------------------*/
#Header p.btn{
	width: 40px;
	height: 40px;
	position: absolute;
	top:15px;
	right:15px;
	background: url(../images/sp/menu_bg.png) 50% 50% no-repeat;
	background-size: contain;
	display: none;
}
#Header p.btn.active{
	background-image: url(../images/sp/menu_bg_close.png);
}
#Header p.btn a{
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
}

/*-----------------------------------------------------
Content
-------------------------------------------------------*/
#Content{
	width: 100%;
	overflow: hidden;
	margin: 70px 0 0;
}

#Content p.sukiyaki{
	display: none;
}

/*-------------------------------------
Main
---------------------------------------*/
#Main{
}
#Main a{
	color: #51789b;
	text-decoration: underline;
}
#Main a:hover{
	text-decoration: none;	
}

/* photolist
---------------------*/
#Main div.photolist{
	padding: 21px 0 0;
	position: relative;
}
#Main div.photolist div.photolist-inline{
	width: 220px;
	overflow: hidden;
	margin: 0 auto;
}

/* photolist-inline */
#Main div.photolist div.photolist-inline ul{
	width: 880px;
	overflow: hidden;
}
#Main div.photolist div.photolist-inline ul li{
	width: 220px;
	float: left;
	text-align: center;
}
#Main div.photolist div.photolist-inline ul li img{ max-width: 220px; height: auto;}


/* pointer */
#Main div.photolist ul.pointer{
	overflow: hidden;
	margin: 21px 0 0;
	padding: 12px 0;
	text-align: center;
	background: #f2f2f2;
}
#Main div.photolist ul.pointer li{
	width: 50px;
	display: inline-block;
	margin:0 2px;
	border:1px solid #dcdcdc;
	cursor: pointer;
	transition: border .2s linear;
	text-align: text-align: center;
}
#Main div.photolist ul.pointer li.current{
	border:1px solid #363636;
}
#Main div.photolist ul.pointer li img{max-width: 50px; height: auto;}

/* pointer */
#Main div.photolist p.prev,
#Main div.photolist p.next{
	height: 330px;
	position: absolute;
	top:21px;
	cursor: pointer;
}
#Main div.photolist p.prev[disabled="disabled"],
#Main div.photolist p.next[disabled="disabled"]{
	opacity: 0;
}
#Main div.photolist p.prev{
	left:10px;
	width: 38px;
}
#Main div.photolist p.next{
	right:10px;
	width: 38px;
}
#Main div.photolist p.prev .ico,
#Main div.photolist p.next .ico{
	width: 20px;
	height: 23px;
	position: absolute;
	top:50%;
	left: 50%;
	margin: -10px 0 0 -10px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 20px auto;
	opacity: 0.34;
}
#Main div.photolist p.prev .ico{
	background-image: url(../images/ico04_left.png);
}
#Main div.photolist p.next .ico{
	background-image: url(../images/ico04_right.png);
}

/* conversion
---------------------*/
#Main div.main-inline section.conversion{
	padding: 20px 15px;
	background: #e4ecf2;
}
#Main div.main-inline section.conversion h2{
	margin: 0 0 5px;
	font-size: 150%;
	font-weight: bold;
	line-height: 138%;
}
#Main div.main-inline section.conversion p.price{
	margin: 0 0 15px;
	font-size: 116%;
	text-align: right;
}
#Main div.main-inline section.conversion div.btn{
	overflow: hidden;
	font-family: 'Noto Sans Japanese';
}
#Main div.main-inline section.conversion div.btn a{
	text-align: center;
	text-decoration: none;
}
#Main div.main-inline section.conversion div.btn .ico{
	margin-left: 4px;
}
#Main div.main-inline section.conversion div.btn p{
	font-size: 133%;
}
#Main div.main-inline section.conversion div.btn p .ico{
	width: 13px;
}
#Main div.main-inline section.conversion div.btn p a{
	line-height: 1;
	padding:17px 0;
	display: block;
	color: #fff;
	background: #f0517b;
}
#Main div.main-inline section.conversion div.btn p.off span{
	height: 50px;
	display: block;
	color: #fff;
	line-height: 50px;
	text-align: center;
	background: #bebebe;
}
#Main div.main-inline section.conversion div.btn ul{
	overflow: hidden;
}
#Main div.main-inline section.conversion div.btn ul li{
	width: 50%;
	float: right;
	margin: 6px 0 0;
	overflow: hidden;
}
#Main div.main-inline section.conversion div.btn ul li a{
	display: block;
	padding: 14px 5px;
	color: #f0517b;
	border:1px solid #f0517b;
	background: #fff;
	font-size: 92%;
	line-height: 1;
}
#Main div.main-inline section.conversion div.btn ul li:nth-child(odd) a{
	margin: 0 0 0 6px;
}
#Main div.main-inline section.conversion div.btn ul li .ico{
	width: 8px;
}

/* template
---------------------*/
#Main div.main-inline section.template{
	margin: 0 15px;
	padding: 20px 0;
	font-size: 108%;
	line-height: 153%;
}
#Main div.main-inline section.template:first-of-type{
	border-top: none;
}
#Main div.main-inline section.template h1,
#Main div.main-inline section.template h2,
#Main div.main-inline section.template h3,
#Main div.main-inline section.template h4,
#Main div.main-inline section.template h5,
#Main div.main-inline section.template h6{
	margin: 0 0 15px;
	color: #51789b;
	font-size: 123%;
	font-weight: bold;
	line-height: 140%;
}
#Main div.main-inline section.template hr{
	margin: 20px 0;
	border-top:1px solid #363636;
}

#Main div.main-inline section.template p{
	margin-bottom: 10px;
}

#Main div.main-inline section.template a{
	color: #f0517b;
	font-weight: bold;
}

#Main div.main-inline section.template img{
	max-width: 100%;
	height: auto;
}

#Main div.main-inline section.template ul{
	margin: 0 0 10px 10px;
}
#Main div.main-inline section.template ul li{
	list-style: disc;
}
#Main div.main-inline section.template ol{
	margin: 0 0 10px 10px;
}
#Main div.main-inline section.template ol li{
	list-style: disc;
}

#Main div.main-inline section.template blockquote{
	background: #f2f2f2;
	margin: 0 10px 10px 10px;
	padding: 10px;
	border-left: 10px solid #CCC;
	
	box-sizing: border-box;
}
#Main div.main-inline section.template blockquote p:last-of-type{
	margin-bottom: 0;
}


#Main div.main-inline section.template iframe{
	display: block;
}

/* margin bottom */
#Main div.main-inline section .mb00{margin-bottom: 0!important;}
#Main div.main-inline section .mb05{margin-bottom: 2px!important;}
#Main div.main-inline section .mb10{margin-bottom: 5px!important;}
#Main div.main-inline section .mb15{margin-bottom: 7px!important;}
#Main div.main-inline section .mb20{margin-bottom: 10px!important;}
#Main div.main-inline section .mb25{margin-bottom: 12px!important;}
#Main div.main-inline section .mb30{margin-bottom: 15px!important;}
#Main div.main-inline section .mb35{margin-bottom: 17px!important;}
#Main div.main-inline section .mb40{margin-bottom: 20px!important;}
#Main div.main-inline section .mb50{margin-bottom: 25px!important;}
#Main div.main-inline section .mb60{margin-bottom: 30px!important;}
#Main div.main-inline section .mb70{margin-bottom: 35px!important;}

/* margin top */
#Main div.main-inline section .mt00{margin-top: 0!important;}
#Main div.main-inline section .mt05{margin-top: 2px!important;}
#Main div.main-inline section .mt10{margin-top: 5px!important;}
#Main div.main-inline section .mt15{margin-top: 7px!important;}
#Main div.main-inline section .mt20{margin-top: 10px!important;}
#Main div.main-inline section .mt25{margin-top: 12px!important;}
#Main div.main-inline section .mt30{margin-top: 15px!important;}
#Main div.main-inline section .mt35{margin-top: 17px!important;}
#Main div.main-inline section .mt40{margin-top: 20px!important;}
#Main div.main-inline section .mt50{margin-top: 25px!important;}
#Main div.main-inline section .mt60{margin-top: 30px!important;}
#Main div.main-inline section .mt70{margin-top: 35px!important;}

/* writer
---------------------*/
#Main div.main-inline section.writer{
	width: auto;
	overflow: hidden;
	padding: 20px 15px;
	background: #e4ecf2;
}
#Main div.main-inline section.writer p.image{
	width: 110px;
	float: left;
	margin-top: 1px;
}
#Main div.main-inline section.writer p.image img{
	width: 100%;
	height: auto;
	border:1px solid #363636;
}
#Main div.main-inline section.writer div.writer-inline{
	margin: 0 0 0 127px;
	font-size: 92%;
	line-height: 163%;
}
#Main div.main-inline section.writer div.writer-inline h3{
	overflow: hidden;
	margin: 0 0 5px;
	font-size: 118%;
	line-height: 1;
	font-weight: 600;
}
#Main div.main-inline section.writer div.writer-inline h3 span{
	height: 11px;
	margin: 0 5px 0 0;
	display: inline-block;
}
#Main div.main-inline section.writer div.writer-inline h3 span img{
	width: auto;
	height: 100%;
	margin-top: 1px;
}

/* attention
---------------------*/
#Main section.attention{
	overflow: hidden;
	margin: 20px 15px 0;
	border: 1px solid #51789b;
}
#Main section.attention h3{
	padding: 7px;
	color: #fff;
	font-size: 133%;
	font-family: 'Noto Sans Japanese';
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.1em;
	background: #51789b;
}
#Main section.attention dl{
	padding: 10px 14px;
}
#Main section.attention dl dt{
	padding-left: 21px;
	margin-top: 10px;

	color: #51789b;
	font-size: 108%;
	font-weight: bold;
	letter-spacing: 0.1em;
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-size: auto 16px;
	min-height: 16px;
}
#Main section.attention dl dt:first-child{
	margin-top: 0;
}

#Main section.attention dl dt.attention01{background-image: url(../images/sp/ico_attention01.png);}
#Main section.attention dl dt.attention02{background-image: url(../images/sp/ico_attention02.png);}
#Main section.attention dl dt.attention03{background-image: url(../images/sp/ico_attention03.png);}
#Main section.attention dl dt.attention04{background-image: url(../images/sp/ico_attention04.png);}
#Main section.attention dl dt.attention05{background-image: url(../images/sp/ico_attention05.png);}

#Main section.attention dl dd{
	margin: 3px 0 0;
	padding-bottom: 10px;
	font-size: 92%;
	line-height: 163%;
	border-bottom:1px solid #dcdcdc;
}

#Main section.attention dl dd:last-child{
	padding-bottom: 0;
	border:none;
}


#Main section.attention dl ul.notes li{
	margin: 0 0 0 1em;
	text-indent: -1em;
}

/* sns_share
---------------------*/
#Main section.sns_share{
	margin: 20px 15px 0;
}
#Main section.sns_share ul{
	width: 100%;
	overflow: hidden;
}
#Main section.sns_share ul li{
	width: 50%;
	height: 50px;
	float: left;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#Main section.sns_share ul li a{
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: auto 100%;
	transition: all .1s linear;
}

/* facebook */
#Main section.sns_share ul li.fb{
	padding-right: 3px;
}
#Main section.sns_share ul li.fb a{
	background-color: #3b5998;
	background-image: url(../images/sp/share_fb.png);
}

/* twitter */
#Main section.sns_share ul li.tw{
	padding-left: 3px;
}
#Main section.sns_share ul li.tw a{
	background-color: #55acee;
	background-image: url(../images/sp/share_tw.png);
}

/* line */
#Main section.sns_share ul li.line{
	width: 100%;
	height: 40px;
	margin-top: 6px;
}
#Main section.sns_share ul li.line a{ 
	background-color: #00c300;
	background-image: url(../images/sp/share_line.png);
}

/*-------------------------------------
mono,koto
---------------------------------------*/
#Main.mono div.main-inline,
#Main.koto div.main-inline{
	border-top:1px solid #363636;
}

#Main.koto div.main-inline p.mv img{
	width: 100%;
	height: auto;
}

#Main.koto div.main-inline h2{
	margin: 20px 15px 0;
	padding: 0 0 20px;
	font-size: 150%;
	font-weight: 500;
	font-family: 'Noto Sans Japanese';
	border-bottom: 1px solid #363636;
}
#Main.koto div.main-inline h2 span{
	display: block;
	padding: 0 0 0 10px;
	line-height: 138%;
	border-left: 5px solid #51789b;
}

/*-------------------------------------
link
---------------------------------------*/
#Main div.link{
	margin: 30px 15px 0;
}

/* bnr */
#Main div.link p.bnr{
	margin: 0 0 15px;
}
#Main div.link p.bnr a{
	display: block;
	border: 1px solid #51789b;
}
#Main div.link p.bnr img{ width: 100%; height: auto;}

#Main div.link ul.bnr{
	overflow: hidden;
}
#Main div.link ul.bnr li{
	width: 50%;
	float: left;
	margin: 0 0 6px;
}
#Main div.link ul.bnr li a{
	display: block;
}
#Main div.link ul.bnr li:nth-child(odd) a{
	margin: 0 3px 0 0;
}
#Main div.link ul.bnr li:nth-child(even) a{
	margin: 0 0 0 3px;
}

#Main div.link ul.bnr li img{ width: 100%; height: auto;}
#Main div.link p.mailmag{
	margin: 7px 0 15px;
}
#Main div.link p.mailmag img{ width: 100%; height: auto;}

/* widget */
#Main div.link div.widget div.facebook,
#Main div.link div.widget div.twitter{
	width: 100%;
	margin: 0 0 15px;
}

/*-------------------------------------
Side
---------------------------------------*/
#Side{
	width: 100%;
	position: absolute;
	top:0;
	left:0;
	padding: 70px 0 0 0;
	font-family: 'Noto Sans Japanese';
	background: #363636;
	display: none;
}
#Side a{
	text-decoration: none;
}

/* link
---------------------*/
#Side ul.link{
	margin: 15px;
}
#Side ul.link li{
	margin: 15px 0 0;
	position: relative;
}
#Side ul.link li:first-child{
	margin: 0;
}
#Side ul.link li a{
	display: block;
	padding: 10px 15px;
	border:3px solid #fff;
	font-size: 108%;
	font-weight: 500;
	line-height: 1;
	background: #fff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#Side ul.link li a .ico{
	width: 12px;
	height: 100%;
	position: absolute;
	top:0;
	right:15px;
	background: url(../images/ico03.png) 100% 50% no-repeat;
	background-size: 12px auto;
}

/* dl
---------------------*/
#Side dl{
}
#Side dl dt{
	height: 40px;
	color: #fff;
	font-size: 133%;
	font-weight: 500;
	line-height: 40px;
	text-align: center;
	background: #51789b;
}
#Side dl dd{
	border-bottom: 1px solid #fff;
	background: #363636;
}
#Side dl dd:last-child{
	border-bottom: none;
}
#Side dl dd a,
#Side dl dd span{
	display: block;
	position: relative;
	padding: 10px 30px 10px 15px;
	color: #fff;
	font-size: 108%;
	font-weight: 400;
	cursor: pointer;
}
#Side dl dd span .ico{
	width: 13px;
	height: 100%;
	padding: 0;
	position: absolute;
	top:0;
	right:15px;
	background: url(../images/ico01_down.png) 100% 50% no-repeat;
	background-size: 13px auto;
	transition: all .2s linear;
}

/* ul */
#Side dl dd div{
	display: none;
	overflow: hidden;
	-webkit-transition:height .2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	-moz-transition:height .2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	-o-transition:height .2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	transition:height .2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
#Side dl dd div ul{
	margin: 0 0 0 25px;
}
#Side dl dd div ul li a{
	padding: 10px 0 7px;
	border-top:1px solid #fff;
}

/* active */
#Side dl dd.active > a,
#Side dl dd div ul li.active a{
	color: #51789b;
}
#Side dl dd.active .ico{
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-transform-origin:50% 50%;
	transform-origin:50% 50%;
}

/* mailmag
---------------------*/
#Side p.mailmag{
	display: none;
}


/*-----------------------------------------------------
Footer
-------------------------------------------------------*/
#Footer{
	width: 100%;
	position: relative;
	padding: 0 0 24px;

}

/*-------------------------------------
sns
---------------------------------------*/
#Footer div.sns{
	width: 100%;
	padding: 15px 0;
	background: #e4ecf2;
}
#Footer div.sns div.sns-inline ul{
	overflow: hidden;
	text-align: center;
}
#Footer div.sns div.sns-inline ul li{
	display: inline-block;
	margin: 0 3px;
	vertical-align: top;
}

/*-------------------------------------
pagetop
---------------------------------------*/
#Footer p.pagetop{
}
#Footer p.pagetop a{
	display: block;
	position: relative;
	padding: 15px 0 15px 15px;
	color: #fff;
	font-size: 108%;
	font-weight: 400;
	font-family: 'Noto Sans Japanese';
	text-align: center;
	text-decoration: none;
	line-height: 1;
	background: #363636;
}
#Footer p.pagetop a .ico{
	width: 12px;
	height: 100%;
	transition: all .2s linear;
}
#Footer p.pagetop a .ico{
	margin-right: 4px;
}

/*-------------------------------------
footer-inline
---------------------------------------*/
#Footer div.footer-inline{
	text-align: center;
	font-size: 75%;
}


/* link
---------------------*/
#Footer div.footer-inline div.link{
	padding: 22px 0 13px;
}
#Footer div.footer-inline div.link span{
	display: inline;
	margin:13px 0 13px 0;
	text-align: center;
}

#Footer div.footer-inline div.link span:nth-of-type(1),
#Footer div.footer-inline div.link span:nth-of-type(2),
#Footer div.footer-inline div.link span:nth-of-type(6){
	display: none;
}

#Footer div.footer-inline div.link a{
	text-decoration: none;
}

#Footer div.footer-inline div.link a:nth-of-type(1){
	display: none;
}

/* logo
---------------------*/
#Footer div.footer-inline p.logo{
	padding: 0 0 13px;
}
#Footer div.footer-inline p.logo img{
	width: 71px;
	height: auto;
}

/* address
---------------------*/
#Footer div.footer-inline address{
	color: #808080;
}