@charset "utf-8";
/* Loading */
#loading { position:fixed; top:0; z-index:9999; width:100%; height:100%; background:#333744; }
#loading img { position:absolute; top:0; bottom:0; left:0; right:0; width:48px; height:48px; margin:auto; }
/*---共通---------------------------*/
body { background:#333744; color: #fff; font-weight: normal; }
.inner { position:relative; max-width:1000px; margin:0 auto; }
.yellow { color: #fbf045; }
.ivory { color: #f2ecdc; }
.brown { color: #663e3e; }

.enFont { font-family: 'Kurale', serif; letter-spacing: 1px; }
.sawarabi { font-family: "Sawarabi Mincho"; }

.conTtl { margin-bottom: 30px; text-align: center; }
.conTtl span { display: inline-block; padding: 10px 60px; min-height: 54px; font-size: 20px; color: #fbf045; background: url("img/tit_dec_left.png") no-repeat left center, url("img/tit_dec_right.png") no-repeat right center; }
.conTtl em { display: block; margin-top: 10px; padding-bottom: 30px; font-size: 32px; line-height: 1.4; background: url("img/tit_border.png") no-repeat center bottom; }

.subTtl { display: inline-block; padding: 10px 35px; font-weight: normal; font-size: 18px; font-family: "Sawarabi Mincho"; background: url("img/border_double_length.png") repeat-y left top, url("img/border_double_length.png") repeat-y right top; }
.subTtl + p { margin-top: 30px; }
.subTtl span { display: block; color: #fbf045; font-size: 13px; }

#contents > section { margin-bottom: 120px; }
#contents > section .lead { margin-bottom: 30px; text-align: center; font-size: 18px; }

.conBox { margin: 60px auto 100px; }
.conBox.flex { align-items: center; }
.conBox figure, .conBox .txtBox { width: 48%; }

.conBox.cb03 .txtBox { width: 100%; align-items: center; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }
.conBox.cb03 .txtBox .txt { margin-left: 4%; }
.conBox.cb03 .imgBox { margin-top: 30px; }
.conBox.cb03 .imgBox figure { width: 48%; text-align: center; }
.conBox.cb03 .imgBox figure + figure { margin-left: 4%; }
.conBox.cb03 .imgBox figure figcaption { margin-top: 10px; }

.linkBtn { text-align: center; }
.linkBtn a { display: inline-block; margin: 0 5px 5px 0; padding: 10px 97px 10px 60px; font-size: 20px; color: #663e3e; background: #f2ecdc url("img/arrow.png") no-repeat right 20px center / 17px auto; border-radius: 10px; position: relative; }
.linkBtn a:before { content: ""; position: absolute; bottom: -8px; left: 8px; width: 100%; height: 100%; background: url("img/yellow_stripe.png"); border-radius: 10px; z-index: -1; -ms-transition: all .5s; transition: all .5s; }
.linkBtn a:hover { margin: 5px 0 0 5px; }
.linkBtn a:hover:before { bottom: 0; left: 0; }

.float:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); cursor: pointer; }

.fade { opacity: 0; }

/*---header---------------------------*/
header { padding-top: 30px; position: relative; }
header .langBtn { position: absolute; top: 20px; z-index: 999; }
header .langBtn li + li { margin-top: 10px; }
header .langBtn li a { display: block; width: 100px; height: 40px; padding-top: 6px; font-size: 16px; text-align: center; color: #fbf045; background: url("img/lang_off.png") no-repeat top left / 100%; }
header .langBtn li a.active, header .langBtn li a:hover { background-image: url("img/lang_on.png"); }

.headCon { align-items: center; }
.headCon .conRight { margin-left: 70px; }
header h1 { margin-bottom: 25px; padding-bottom: 20px; text-align: center; position: relative; }
header h1:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; background: url("img/border_double.png") repeat-x; }
header h1 span { display: block; margin-bottom: 10px; font-size: 14px; color: #fbf045; }
header h1 em { font-size: 38px; line-height: 1.35; }
header .txt { text-align: center; }
header .txt p { display: inline-block; font-size: 18px; text-align: left; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }

/*---slide---*/
#slide { margin-top: 50px; }
/*#slide ul li { margin: 0; padding: 0; }*/
#slide ul li img { padding: 0 8px; }

/*---nav---*/
.gnav { margin: 50px auto 60px; }
.gnav ul li { width: 180px; height: 180px; }
.gnav ul li + li { margin-left: 45px; }
.gnav ul li a { display: block; width: 100%; height: 100%; padding: 35px 15px 20px; text-align: center; background: #f2ecdc; border-radius: 50%; position: relative; }
.gnav ul li a:after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 0; height: 0; margin-left: -14px;
border-style: solid;
border-width: 14px 14px 0 14px;
border-color: #f2ecdc transparent transparent transparent;
 }
.gnav ul li:nth-child(2) a, .gnav ul li:nth-child(3) a { padding-top: 50px; }
.gnav ul li:nth-child(4) a { padding-top: 60px; }
.gnav ul li a span { display: inline-block; font-size: 13px; color: #333744; }
.gnav ul li a p { margin: 8px auto 0; font-size: 20px; color: #663e3e; line-height: 1.4; }
.gnav ul li a:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); }

/*---about---------------------------*/
#about { text-align: center; }
#about .txt { margin-top: 20px; }

/*---yawaragikoubou---------------------------*/
#yawaragikoubou .conBox.cb01 { margin-bottom: 60px; }
#yawaragikoubou .subTtl { text-align: center; }

#yawaragikoubou .conBox { width: 80%; }
#yawaragikoubou .conBox .txtBox { width: 56%; }
#yawaragikoubou .conBox figure { width: 40%; }

/*---LINEUP---------------------------*/
.itemList { width: 90%; margin: 50px auto 0; }
.itemList > li { width: 28%; margin-bottom: 40px; padding-bottom: 7px; background: url("img/border_double.png") repeat-x left bottom; }
.itemList > li:not(:nth-child(3n+1)) { margin-left: 8%; }
.itemList > li .name { margin: 0 auto 5px; font-size: 20px; font-weight: bold; color: #fbf045; text-align: center; }
.itemList > li .gallery { padding: 4px; background: url("img/dec_bg.png"); }
.itemList > li .gallery li:not(:first-child) { display: none; }
.itemList > li dl { margin: 8px auto; }
.attr { width: 90%; margin: 0 auto; text-indent: -1em; padding-left: 1em; }

/*---footer---------------------------*/
#pagetop { margin: 0; position: fixed; bottom: 30px; right: 30px; z-index:999; width: 79px; }
#pagetop a { display: block; width: 100%; height: 100%; }
footer { padding-top: 7px; text-align: center; background: url("img/border_double.png") repeat-x top left; }
.fNav { margin: 30px auto; }
.fNav li { width: 23%; }
.fNav li + li { margin-left: 2.3%; }
.fNav li a { display: block; width: 100%; height: 100%; margin: 0 5px 5px 0; padding: 10px; background: #f2ecdc; border-radius: 10px; position: relative; }
.fNav ul li a:after { content: ""; position: absolute; top: -6px; left: 50%; width: 0; height: 0; margin-left: -14px;
border-style: solid;
border-width: 0 14px 14px 14px;
border-color: transparent transparent #f2ecdc transparent;
 }
 .fNav ul li a:before { content: ""; position: absolute; bottom: -8px; left: 8px; width: 100%; height: 100%; background: url("img/yellow_stripe.png"); border-radius: 10px; z-index: -1; -ms-transition: all .5s; transition: all .5s; }
.fNav ul li:nth-child(2) a, .fNav ul li:nth-child(3) a, .fNav ul li:nth-child(4) a { padding-top: 23px; }
.fNav ul li a span { display: inline-block; font-size: 14px; color: #333744; }
.fNav ul li a p { display: block; margin: 0 auto; font-size: 16px; color: #663e3e; line-height: 1.4; }
.fNav ul li a:hover { margin: 5px 0 0 5px; }
.fNav ul li a:hover:before { bottom: 0; left: 0; }


footer .zaurus_logo { margin:30px auto 20px; }
footer .zaurus_logo + p { margin:0 auto; font-size:18px; }
footer .name { font-size: 20px; }
footer .address { margin:15px auto 13px; line-height:1.5; }
footer .tel { margin:0 auto; }
footer .tel a { display:inline-block; color: #fff; }
footer .tel a span { font-size:22px; }
footer .copy { padding:5px 0 2px; margin:25px auto 0; font-size: 12px; color:#333744; font-weight:normal; letter-spacing:0.5px; background:#f2ecdc; }
footer .copy a { color:#333744; }
footer .copy a:hover { text-decoration: underline; }

/*----------------------------------------------------
タブレット
-----------------------------------------------------*/
@media screen and (max-width: 1000px) {
.inner { padding: 0 15px; }
#contents > section .lead { font-size: 16px; }
.subTtl { padding: 10px 25px; font-size: 16px;  }

header .langBtn { left: 10px; top: 10px; }
header .langBtn li a { width: 80px; height: 32px; padding-top: 4px; font-size: 14px; }

.headCon { padding: 0 30px; }
.headCon figure { width: 50%; }
.headCon .conRight { width: 46%; margin-left: 4%; text-align: center; }
header h1 { display: inline-block; }
header h1 span { font-size: 12px; }
header h1 em { font-size: 32px; }
header .txt p { font-size: 16px; }

.gnav { padding: 0 15px; }
.gnav ul li { width: 135px; height: 135px; }
.gnav ul li + li { margin-left: 10px; }
.gnav ul li a { padding-top: 20px; }
.gnav ul li:nth-child(2) a, .gnav ul li:nth-child(3) a { padding-top: 30px; }
.gnav ul li:nth-child(4) a { padding-top: 40px; }
.gnav ul li a span { line-height: 1.2; }
.gnav ul li a p { margin-top: 5px auto 0; font-size: 15px; }

.conBox.cb03 .imgBox figure figcaption { text-align: left; }

#yawaragikoubou .conBox { width: 90%; }

.itemList,.attr { width: 100%; }
.itemList > li { width: 32%; }
.itemList > li:not(:nth-child(3n+1)) { margin-left: 2%; }
.itemList > li .name { font-size: 18px; }
.itemList > li dl { font-size: 13px; }
.fNav ul li { display: flex; }
.fNav ul li a { height: auto; }
.fNav ul li a span { font-size: 12px; }
.fNav ul li a p { font-size: 14px; }
.fNav ul li:nth-child(2) a, .fNav ul li:nth-child(3) a, .fNav ul li:nth-child(4) a { padding-top: 15px; }

}

/*----------------------------------------------------
スマホ
-----------------------------------------------------*/
@media screen and (max-width: 600px) and (min-width: 481px) {
header h1 span { font-size: 10px; }
header h1 em { font-size: 26px; }
header .txt p { font-size: 14px; }
}
@media screen and (max-width: 600px) {
.conTtl span { min-height: 27px; padding: 10px 30px; font-size: 14px; background-size: auto 27px; }
.conTtl em { margin-top: 0; padding-bottom: 20px; font-size: 20px; background-size: 600px auto; }
.subTtl + p { margin-top: 15px; }

#contents > section { margin-bottom: 60px; }
#contents > section .lead { text-align: left; }
#contents > section .lead br { display: none; }

.linkBtn a { padding: 10px 32px 10px 10px; font-size: 14px; background-size: 12px auto; background-position: right 12px center; }

.gnav ul { display: block; }
.gnav ul li { width: 100%; height: inherit; margin-bottom: 15px; }
.gnav ul li +li { margin-left: 0; }
.gnav ul li a { margin: 0 5px 5px 0; border-radius: 10px; padding: 15px 10px !important; }
.gnav ul li a:after { display: none; }
.gnav ul li a span { font-size: 12px; line-height: 1.7; }
.gnav ul li a p { margin-top: 0; }
.gnav ul li a p br { display: none; }
.gnav ul li a:before { content: ""; position: absolute; bottom: -8px; left: 8px; width: 100%; height: 100%; background: url("img/yellow_stripe.png"); border-radius: 10px; z-index: -1; -ms-transition: all .5s; transition: all .5s; }
.gnav ul li a:hover { margin: 5px 0 0 5px; -webkit-transform: inherit; transform: inherit; }
.gnav ul li a:hover:before { bottom: 0; left: 0; }

#about .txt { text-align: left; }
#about .txt br { display: none; }

#yawaragikoubou .conBox { width: 100%; }

.fNav li { width: 100%; }
.fNav li + li { margin-top: 15px; margin-left: 0; }
.fNav ul li a::after { display: none; }
.fNav ul li:nth-child(2) a, .fNav ul li:nth-child(3) a, .fNav ul li:nth-child(4) a { padding: 10px; }
.fNav ul li a p br { display: none; }

#pagetop { width: 50px; right: 10px; }

}
@media screen and (max-width: 480px) {
header { padding-top: 15px; }
header .langBtn { right: 10px; left: auto; }
header .langBtn li + li { margin-top: 6px; }
header .langBtn li a { width: 70px; height: 28px; padding-top: 4px; font-size: 12px; }

.headCon { padding: 0 15px; }
.headCon figure { width: 100%; max-width: 400px; margin: 20px auto 0; }
.headCon .conRight { width: 100%; margin-top: 20px; margin-left: 0; }
header h1 { display: block; padding-bottom: 35px; }
header .txt p { font-size: 18px; }

.conBox { margin: 40px auto 60px; }
.conBox figure { text-align: center; }
.conBox:not(.cb03) figure { width: 100%; margin: 0 auto !important; order: 2; }
.conBox .txtBox { width: 100%; order: 1; }

.conBox.cb03 .txtBox { display: block; }
.conBox.cb03 .txtBox .txt { margin-left: 0; }
.conBox.cb03 .imgBox { margin-top: 0; }
.conBox.cb03 .imgBox figure { width: 100%; margin: 0 auto 20px; }
.conBox.cb03 .imgBox figure + figure { margin-left: 0; }

#yawaragikoubou .conBox .txtBox, #yawaragikoubou .conBox figure { width: 100%; }


.itemList > li { width: 100%; }

}

/*----------------------------------------------------
PC
-----------------------------------------------------*/
@media screen and (min-width: 1001px) {
header .langBtn { right: 20px; }
}