@charset "utf-8";
/*
 style info : 基本共通スタイル

2018/9/24

color
メインカラーオレンジ　#e7380d
サブカラー
緑　#33b963　
青　#3075fd
ピンク　#f15089

文字色グレー　#333


 */

/*----------------------------------------------------
	base
----------------------------------------------------*/
* {
}
html{
	font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
}
html,
body {
 overflow-x: hidden;
}
body{
	font-size:16px;
	font-size: 1.6rem;/* 16px */
	font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	line-height:1.6;
	-webkit-text-size-adjust: 100%;/*iphone 調整用*/
	-webkit-font-smoothing: antialiased;/*ちらつき防止用*/
	background:#fff;
	color:#333;
	padding-top:100px;
}

/*IE11用ハック*/
_:lang(x)::-ms-backdrop, body{
	font-family: Meiryo, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
}

@media screen and (max-width: 768px) {
body{
	padding-top:50px;
}
}
select,input,button,textarea,button{
	font:99% arial,helvetica,clean,sans-serif;
}

table{
	font-size:inherit;font:100%;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* link*/
a {
	text-decoration:none;
	color:#333;
}

a:link {
}

a:visited {
}

a:hover{
	color:#e7380d;
}
footer a:hover{
	color:#fff;
}


a img:hover,.mover:hover{
	-webkit-transition: 0.6s ;
	transition: 0.6s ;
	opacity:0.8;
	filter: alpha(opacity=80);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=80)";  /* ie 8 */
	-moz-opacity:0.8;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.8;              /* Safari 1.x */
}



@media screen and (max-width: 768px) {
img{
	max-width:100%;
	height:auto;
}
}

/*----------------------------------------------------
	layout
----------------------------------------------------*/
header{
	height:100px;
	z-index:10;
}
header,footer{
	width:100%;
}

header.inner,footer.inner{
	width:980px;
	margin:auto;
}

#contents,.inner{
	width:960px;
	margin:auto;
}
@media screen and (max-width: 959px),print{
	#contents,.inner,header.inner,footer.inner{
	width:100%;
}
}

@media screen and (max-width: 768px) {
#contents{
	width:90%;
}
	header{
	height:50px;
	}

}



/*----------------------------------------------------
	header
----------------------------------------------------*/
#fixed-head {
    position: fixed;
    width: 100%;
	top:0;
	left:0;
	z-index: 10;
	background:#fff;
	border-bottom:1px solid #e7380d;
	}

header{
	position:relative;

}
.header-logo{
	position:absolute;
	left:0;
	/*top:5px;*/
	top:10px;
}
.header-logo img{
	width:220px;
	}
/*検索フォーム*/

.header-search{
	position:absolute;
	right:0;
	/*top:10px;*/
	top:15px;
	width:280px;
}

.header-search dl{
    position:relative;
    background-color:#fff;
    border:1px solid #E7380C;
	border-radius:18px;
	margin:0;
}
.header-search dl dt{
    margin-right:40px;
    padding:2px 0 2px 8px;
}
.header-search dt input{
    width:100%;
    height:28px;
    line-height:30px;
    background:none;
    border:none;
	outline: 0;
	margin:0;
}

.header-search dd{
    position:absolute;
    top:0;
    right:0;
}
.header-search dd button{
    display:block;
    padding:0px;
    background:none;
    border:none;
	margin:0;
}
.header-search dd button span{
    display:block;
    width:45px;
    height:34px;
    background:#E7380C url('../img/common/search.png') no-repeat scroll center center;
	background-size:24px;
	border-top-right-radius:15px;
	border-bottom-right-radius: 15px;
}
.header-search.pc-none dd button span{
    background:#333 url('../img/common/search.png') no-repeat scroll center center;
	background-size:20px;
}

/*スクロールでヘッダー縮小 fixedクラス付与*/
@media screen and (min-width: 769px) {
	#fixed-head.fixed {
		background:rgba(255,255,255,0.8);
	}
	.fixed .header-logo,.fixed .header-search{
		display:none;
}
.fixed header{
	height:40px;
}
.fixed .dropnav{
	top:0;
}

}
/*マウスオーバーでドロップダウン*/


/*----------------------------------------------------
	グローバルメニュー
----------------------------------------------------*/
@media screen and (min-width: 769px),print{

.dropnav{
	position:absolute;
	top:60px;
	left:0;
	margin:0;
}
	/*.dropnav  li{
	text-align:center;
}*/
.dropnav>li{
	float:left;
}
.dropnav li a.main-menu{
	display:block;
	width: 163px;
	text-align:center;
	height: 0;
	padding-top: 40px;
	overflow: hidden;
	background-image: url(../img/common/g-nav.png);
}
.dropnav li:nth-of-type(5) a.main-menu,.dropnav li:nth-of-type(6) a.main-menu{
	width: 164px;
	}
.dropnav li:nth-of-type(1) a.main-menu { background-position: 0 top;}
.dropnav li:nth-of-type(2) a.main-menu  { background-position: 817px top;}
.dropnav li:nth-of-type(3) a.main-menu  { background-position: 654px top;}
.dropnav li:nth-of-type(4) a.main-menu  {  background-position: 491px top;}
.dropnav li:nth-of-type(5) a.main-menu  { background-position: 328px top;}
.dropnav li:nth-of-type(6) a.main-menu   { background-position: 164px top;}

.dropnav li:nth-of-type(1) a.main-menu:hover { background-position: 0 bottom;}
.dropnav li:nth-of-type(2) a.main-menu:hover { background-position: 817px bottom;}
.dropnav li:nth-of-type(3) a.main-menu:hover { background-position: 654px bottom;}
.dropnav li:nth-of-type(4) a.main-menu:hover {  background-position: 491px bottom;}
.dropnav li:nth-of-type(5) a.main-menu:hover { background-position: 328px bottom;}
.dropnav li:nth-of-type(6) a.main-menu:hover { background-position: 164px bottom;}


.child-menu {
	display:none;
	min-width:163px;
background:#E7380C;
position:absolute;
top:40px;
margin:0;
}

.child-menu.double {
	min-width:326px;
}
.child-menu.double ul{
	width:50%;
	float:left;
	margin:0;
}
.child-menu>li{
	text-align:left;
}

.dropnav .child-menu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-size:1.3rem;
	box-sizing:border-box;
	padding:6px 12px;
	/*border-bottom:1px solid #fff;*/
	font-weight:bold;
}
.dropnav .child-menu li:last-child a{
	border-bottom:none;
}
.dropnav .child-menu a:hover{
	background:#e8795f;
	-webkit-transition: 0.6s ;
	transition: 0.6s ;
}
}


@media screen and (max-width: 768px) {
	header{

	}
	.header-logo{
		top: 5;
		left: 0;
		right: 0;
		margin: auto;
		width:140px;
	}

	.header-logo img{
	width:140px;
	}



.header-search{
	top:55px;
	left:0;
	right:0;
	margin:auto;
	width:90%;
	font-size:1.4rem;
}

	/*	#h-nav　ハンバーガーメニュー*/
#h-nav{
	position:fixed;
	top:10px;
	right:5px;
	z-index:2;
}
#h-nav .cat-wrap{
	display:none;
	position:fixed;
	top:0;
	right:0;
	background:#E7380C;
	width:100%;
	height:100%;
}

#h-nav ul.cat-menu{
	position:fixed;
	top:90px;
	left:0;
	width:100%;
	margin:0;
}

#h-nav ul.cat-menu li{
	display:block;
	float:none;
}
#h-nav ul.cat-menu li a{
	display:block;
	width:100%;
	height:50px;
	line-height:50px;
	color:#fff;
	text-decoration:none;
	text-align:left;
	padding:0 10px;
	box-sizing:border-box;
	background:none;
}
#h-nav ul.cat-menu li:hover{
	background-color: rgba(255,255,255,0.3);
}

.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
	z-index:3;
}
.menu-trigger {
	position: relative;
	width: 40px;
	height:24px;
	cursor:pointer;
}
.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #523b33;
	border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.menu-trigger span:nth-of-type(2) {
	top: 10px;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}
.menu-trigger.active span{
	background-color:#fff;
}

.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(11px) rotate(-45deg);
	transform: translateY(11px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-11px) rotate(45deg);
	transform: translateY(-11px) rotate(45deg);
}

/*ドロップダウンメニュー*/

.hmenu  nav{
	position:absolute;
	top:110px;
	width:100%;
	height: 100%;
}

.dropnav{
	/*width:100%;*/
	height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
	margin:0 30px;
	box-sizing:border-box;
	padding-bottom:120px;

	}
	.dropnav>li{
	width:100%;
}
.dropnav li a{
	display:block;
	width:100%;
	height:100%;
	padding:8px;
	box-sizing:border-box;
	color:#fff;
	border-bottom:1px solid #fff;
}
.dropnav li a.cat-menu{
	position:relative;
}
.dropnav li a.cat-menu:after{
	position: absolute;
	right: 20px;
    content: "\f0da";
	color:#fff;
    font-family: FontAwesome;
}

.dropnav li a.cat-menu.ac:after{
	position: absolute;
	right: 20px;
    content: "\f0d7";
	color:#fff;
    font-family: FontAwesome;
}
.dropnav li a.cat-menu.ac{
background:#e8795f;
	-webkit-transition: 0.6s ;
	transition: 0.6s ;
}
ul.child-menu,.child-menu.double ul{
	margin:0;
}

.child-menu li a{
	padding-left:30px;
}
.child-menu li br{
	display:none;
}
}

/*----------------------------------------------------
	#contetnts
----------------------------------------------------*/
#contentswrap{
	padding-bottom:40px;
}
#contents{

}


@media screen and (max-width: 768px) {
#contentswrap{
	padding-bottom:30px;
}

#contents{

}

}


/* 入力パーツ
-----------------------------------------*/
input,select{
	margin:5px;
	height:2em;
	box-sizing: border-box;
	font-size:1.6rem;
}
input[type="radio"],input[type="checkbox"]{
	height:initial;
}

input.btn,input.btn-back{
	cursor:pointer;
}
input[type="submit"],input[type="button"]  { /*iphone調整用*/
   -webkit-appearance: none;
   border-radius: 0;
}

/*inputボタン装飾*/
input[type="submit"].btn,input[type="button"].btn{
	font-family: FontAwesome;
	background:#5a4015;
	border:0;
	width:80%;
	height:50px;
	font-size:1.6rem;
	color: #fff;
}
input[type="submit"].btn.back,input[type="button"].btn.back{
	background:#666;
}
@media screen and (max-width: 768px) {
	input[type="submit"].btn,input[type="button"].btn{
		width:100%;
	}
	/*input,select,textarea{
	margin:8px auto;
	}*/
	input,select{
	margin:2px;
	}
	select{
		width:100%;
	}
	input,select,textarea{/*iphone拡大防止用*/
		font-size:1.6rem;
	}
}

/* フォーカス・チェック*/
input[type="password"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="email"]:focus,
textarea:focus,input[type="number"]:focus{
	background-color:#FFFFCC;
}

/* 注釈*/
.required{
	background:#E9585A;
	color:#fff;
	text-align:center;
	padding:5px 8px;
	margin:0 0 3px 8px;
	font-size:1.4rem;
	display:inline-block;
	float:right;
}

@media screen and (max-width: 768px) {
	.required{
		padding:2px 8px;
	}
}
/* エラー、注釈など*/
.ex-comment{
	color:#666;
	font-size:1.4rem;
	/*margin:5px;*/
}
.error-comment{
	color:#c0272d;
}
th.error-bg{
	background-color:#FCC;
}

.error-box{
	background:#FFF;
	color:#c0272d;
	border:1px solid #F00;
	padding:5px 20px;
	text-align:center;
	margin:15px auto;
	box-sizing: border-box;
}
@media screen and (max-width: 768px) {
	.ex-comment{
	margin-left:0;
	display:block;
}
}


/*共通
----------------------------------------------------*/

/*PC 兼用左右パディングbox*/
.box{
	padding:0 20px;
}

@media screen and (max-width: 768px) {
	.box{
	padding:0 10px;
}
/*スマホのみ左右パディングbox*/
.sp-box{
	padding:0 20px;
	box-sizing:border-box;
}
}

/*----------------------------------------------------
	footer
----------------------------------------------------*/

.navwrap{
	width:100%;
	background:#e7380d;
}

footer .copy {
	padding:8px 0 6px;
	font-size:1.2rem;
	color:#e7380d;
}

footer a,footer li a{
	color:#fff;
	font-size:1.2rem;
}

footer h5,footer ul,footer p{
	margin:0;
}
 .footer-logo img{
	 max-width:310px;
 }

@media screen and (min-width: 769px),print{
footer{
	/*padding:20px 0 0;*/
}

.navwrap{
	padding:20px 0;
}

footer .box-1,footer .box-2,footer .box-2 ul{
	float:left;
}
footer .box-1{
	width:16.5%;
}
footer .box-2{
	width:32%;
}
footer .box-2 ul{
	width:50%;
}
footer li.brtext{
	line-height:1.1;
	margin-bottom:5px;
}

footer h5 {
		border-bottom:1px solid #fff;
		margin:0 15px 5px 0;
}
footer h5 a{
	font-size:1.4rem;
}

footer h5.single{
	margin-top:15px;
}

footer .copy p{
	float:left;
}
footer .copy .footer-logo{
	float:right;

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

footer a,footer li a{
	font-size:1.4rem;
}
footer li.brtext br{
	display:none;
}
footer h5 a{
		border-bottom:2px solid #fff;
		padding:8px ;
		box-sizing:border-box;
		display:block;
		width:100%;
		height:100%;
}
footer li a{
	border-bottom:1px solid #fff;
	padding:8px 8px 8px 20px ;
	box-sizing:border-box;
	display:block;
		width:100%;
		height:100%;
}

footer h5 a.cat-menu:after{
	position: absolute;
	right: 20px;
    content: "\f0da";
	color:#fff;
    font-family: FontAwesome;
}

footer h5.ac a.cat-menu:after{
	position: absolute;
	right: 20px;
    content: "\f0d7";
	color:#fff;
    font-family: FontAwesome;
}
footer h5.ac a.cat-menu{
background:#e8795f;
	-webkit-transition: 0.6s ;
	transition: 0.6s ;
}

	footer .copy {
		text-align:center;
	}
}

/*TOPへ戻るボタン*/
.totop{
	position:fixed;
	right:30px;
	bottom:50px;
}
.totop a{
	display:block;
	background:rgba(230,230,230,0.7);
	width:50px;
	height:50px;
	line-height:50px;
	border-radius:25px;
	text-align:center;
	color:#e7380d;
}

.totop i{
	font-size:2.6rem;
}
@media screen and (max-width: 768px) {

.totop{
	right:20px;
	bottom:55px;
}
.totop a{
	width:40px;
	height:40px;
	line-height:40px;
	border-radius:20px
}
.totop i{
	font-size:2.0rem;
}

}

/*----------------------------------------------------
	汎用クラス
----------------------------------------------------*/



/* clerfix */

.clear {
  clear: both;
}
.cf:after{
	content: "";
	display: block;
	clear: both;
}
.cf:before {
  display: inline-table;
}
.cf {
	zoom:1;
}

/* float */

.floatL {
	float: left;
}
.floatR {
	float: right;
}

/*位置*/
.imgC {
	margin:0 auto 20px;
}

.alL{
	text-align: left;
}

.alC{
	text-align: center;
}
.alR{
	text-align: right;
}
/*fontsize*/

.s-font{
	font-size:1.2rem ;
}
.l-font{
	font-size:1.8rem;
}

.bold{
	font-weight:bold;
}
.red{
	color:#c0272d;
}

.blue{
	color:#006DFF;
}


/*PCだけ非表示*/
.pc-none{
	display:none;
}
@media screen and (max-width: 768px) {
.pc-none{
	display:block;
}
}
/*SPだけ非表示*/

@media screen and (max-width: 768px) {
.sp-none{
	display:none;
}
}

 /*ページ内リンクのずれ防止*/
.anchor{
	margin-top:-100px;
	padding-top:100px;
	display:block;
}

@media screen and (max-width: 768px) {
.anchor{
	margin-top:-50px;
	padding-top:50px;
}
}


/* よく使いそうなCSS3
----------------------------------------------------*/
#selectors {
/* 角丸 */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

/* 角丸個別 */
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topright: 15px;
	border-top-right-radius: 15px;

/* ボックスに影 */
	-webkit-box-shadow: 1px 1px 3px #999;
	-moz-box-shadow: 1px 1px 3px #999;
	box-shadow: 1px 1px 3px #999;

/* テキストに影 */
	text-shadow: 1px 1px 0px #999;
}


/* English 202304
----------------------------------------------------*/
@media (min-width: 769px) {
.header-search {
	right:150px;
}
}
.header-lang {
	display: block;
	position:absolute;
	right:0;
	top:0;
	width:124px;
}
.fixed .header-lang {
	display: none;
}

@media (max-width: 768px) {
	.header-logo {
		left: 8px;
right: auto;
	}
	#h-nav {
		top:13px;
	}
	.header-lang {
		right:54px;
		height: 100%;
		width: auto;
		line-height: 0;
  }
	.header-lang a {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #E7380C;
		height: 100%;
		aspect-ratio: 1/1;
  }
	.header-lang img {
		aspect-ratio: 1/1;
  }
.fixed .header-lang {
		display: block;
	}
}