@charset "UTF-8";

/* RESPONSIVE 
---------------------------------------------------------------------- */

/* ===========================================

 	PC向け表示設定
	 
============================================== */
@media only screen and (min-width: 900px){	


/* -------------------------------------------
main
============================================== */
.container {
margin: 0 auto;
}
/* -------------------------------------------
header
============================================== */
#header .headerWrap {
width: 900px;
display: table;
}
#header h1 {
height: 52px;
line-height: 52px;
display: table-cell;
}
#header h1 a {
width: 100%;
}
#header h1 img {
max-width: 230px;
}
/* -------------------------------------------
globalnavi
============================================== */
#header #close,
#header #toggle {
display: none;
}
#gnav { 
width: 70%;
display: table-cell;
text-align: right;
vertical-align: middle;
font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;	

}
#gnav #nav {
margin: 0 auto;
width: 100%;
max-width: 1000px;
height: 35px;
position: relative;
display: inline-block;
font-size: 13px;
}
#gnav a {
color: #3333333;
}
#nav > li {
position: relative;
}
#gnav .nav > li a {
display: block;
}
#gnav #nav {
*zoom: 1;
}
#gnav #nav li {
padding: 0 0.5em;
height: 35px;
display: inline-block;
border-right: 1px solid #808080;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#nav > li:first-child {
border-left: 1px solid #808080;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#gnav #nav li a {
margin: 0;
padding: 0;
width: 8.5em;
line-height: 30px;
display: block;
position: relative;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}

#gnav #nav li:last-child a {
border-right: none;
}
#gnav #nav li a:hover {
border-bottom: 5px solid rgba(246,122,105,0.5);
text-decoration: none;
-moz-transition: border-color .3s linear;
-webkit-transition: border-color .3s linear;
transition: border-color .3s linear;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
#gnav #nav li a:hover {
text-decoration: none;
}
#gnav #nav li:hover .subNav {
visibility: visible;
display: block;
}

#gnav #nav .subNav {
display: none;

z-index: 99999;
}
#gnav #nav .subNav ul {
position: absolute;
top: 35px;
left: -1px;
width: 20em;
background: #ffffff;
text-align: left;
-webkit-transition: all .2s ease;
transition: all .2s ease;
z-index: 999;
}
#gnav #nav .subNav ul li {
padding: 0;
display: block;
height: auto;
border-right: 0;
border-bottom: 1px solid #808080;
}
#gnav #nav .subNav ul li a {
padding-left: 1em;
display: block;
width: 100%;
text-align: left;	
line-height: 4;
border-right: none;
border-bottom: 1px solid #ffffff;
}
#gnav #nav .subNav ul li a:hover {
background:  rgba(246,122,105,0.5);
text-decoration: none;
}
#gnav li span {
margin: 0;
padding: 0;
}







/* -------------------------------------------
mainImg
============================================== */
#mainImg {
overflow: hidden;
}
#mainImg .warp {
margin: 0 auto;
width: 900px;
}
.slick-slide .caption span {
margin: auto;
width: 900px;
display: inline-block;
text-align: center;
}
#mainLogo > span {
margin-bottom: 0.3em;
font-weight: bold;
font-size: 0.8rem;
}


/* -------------------------------------------
main Logo
============================================== */
#mainLogo {
padding-bottom: 1.5em;
}
#mainLogo ul {
width: 900px;
}
#mainLogo .incLogo {
margin-bottom: 1em;
display: block;
}
#mainLogo .incLogo img {
width: 300px;
}
#mainLogo .license {
width: 300px;
}
#mainLogo .chara img {
max-height: 150px;
}
#mainLogo p.copy {
margin-top: 1.5em;
}


/* -------------------------------------------
shareBtn
============================================== */
#share ul {
width: 900px;
}

/* -------------------------------------------
footer
============================================== */
#footer .footerWrap {
width: 900px;
}

#footer footer .wrap {
width: 900px;
}
#footer .footerWrap header > span {
font-size: 0.8rem;
}
#footer .detail {
width: 900px;
display: inline-block;
}
#footer .detail li {
display: inline-block;
width: 440px;
}
#footer .detail li {
display: inline-block;
width: 440px;
}
#footer .detail li:nth-child(2n) {
margin-left: 13px;
}
#footer .detail li:nth-last-child(-n+2), 
#footer .detail li:last-child {
margin-bottom: 0;
}
#footer .detail li .tel,
#footer .detail li .mail {
padding: 2em 0;
}
#footer header {
width: 100%;
min-height: 255px;
background: url(../images/inquiry.png) no-repeat bottom right;	
}
#footer .footerHead {
display: table;
}
#footer .footerHead .footerLogo {
display: table-cell;
vertical-align: middle;
}
#footer .footerHead .footerLogo img {
width: 230px;
}
#footer .footerHead .footerLogo a {
display: block;
width: 100%;
height: 100%;
}
#footer .footerHead .tel .caption,
#footer .footerHead .tel .number,	
#footer .footerHead .tel {
display: table-cell;
}
#footer .footerHead .tel {
width: 72%;
}
#footer .footerHead .tel .caption {
padding-left: 1em; 
width: 62%;
font-size: 0.7rem;
vertical-align: middle;
}

.footerWrap header figure img {
max-width: 300px;
}
#footer .footerHead .tel .caption::before {
font-family: "FontAwesome";
content: '\f0da';
}
#footer .detail li .tel,
#footer .detail li .mail {
font-size: 2rem;
}
#footer footer .address dt {
margin-right: 1em;
padding-right: 1em;
display: inline-block;
}
#footer footer .address dt:nth-child(n+2) {
-webkit-transform: skewX(150deg);
-moz-transform: skewX(150deg);
transform: skewX(150deg);
border-right: 1px solid #040000;
}
#footer footer .address dt:nth-child(n+2) span {
-webkit-transform: skewX(-150deg);
-moz-transform: skewX(-150deg);
transform: skewX(-150deg);
}

#footer .address .line ul li {
display: table-cell;
vertical-align: top;
}
#footer .address .line ul li:first-of-type {
width: 64%;
}
#footer .address dl {
width: 67%;
display: inline-block;
vertical-align: top;
}
#footer footer .address dl dt:first-child {
margin-bottom: 1em;
}
#footer .address .line ul li:first-of-type figure {
width: 30%;
}
#footer footer .address dt:nth-child(n+2) {
line-height: 1;
}
#footer footer .address dt:nth-child(n+2) span {
font-weight: normal;
}
#footer footer .address dd {
width: 83%;
display: inline-block;
}
#footer .address .line {
margin-top: 2em;
width: 32%;
display: inline-block;
}
#footer .address .line h2 {
color: #00B900;
}
#footer .address .line ul li:last-of-type {
padding-left: 1em;
}
#footer .address .line ul li:last-of-type img {
width: 100%;
}
#footer .address .line ul li .caption, 
#footer .address .line ul li .txt {
font-size: 0.9rem;
}




}/* end */
/* 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

	PC以外向け表示設定
	
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
@media only screen and (max-width: 899px){
	
/* 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
main
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
body {
	display:  inherit;
}
/* 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
header
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
#header {
margin: 0;
position: sticky;
width: 100%;
}
#header .headerWrap {
position: relative;
width: 100%;
height: 68px;
}
#header h1 {
width: 50vw;
}

/* 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
globalnavi
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
#toggle {
position: absolute;
top: 0.5em;
right: 1em;
display: inline-block;
padding-top: 0.3em;
padding-right: 0.5em;
padding-bottom: 0.3em;
padding-left: 0.5em;
color: #8e1201;
text-align: left;
background: none;
border: 1px solid #8e1201;
outline: none;
}
#toggle .fa-bars {
margin-right: 10px;
margin-left: 10px;
line-height: 1.5;
font-size: 1.5rem;
vertical-align: middle;
}	
#toggle	.toggleText {
margin-right: 10px;
font-size: 0.8rem;
}
#gnav {
display: none;
position: relative;
top: 16px;
left: 0;
padding-bottom: 5em;
width: 100%;
height: 80vh;
color: #000000;
z-index: 1;
background: rgba(255,255,255,0.8);
}
#gnav #nav {
font-size: 0.9rem;
}
#gnav a {
color: #000000;
}
#navWrap {
margin: auto;
padding-top: 4em;
padding-bottom: 4em;
width: 90%;
background: rgba(255,255,255,0.8);
}
#gnav  #nav {
margin: auto;
width: 90%;
height: auto;
display: block;
-moz-transition: background-color .3s linear;
-webkit-transition: background-color .3s linear;
transition: background-color .3s linear;
}
#gnav li a {
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 1em;
height: auto;
display: block;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
#gnav .liLevel_1 {
border-top: 1px solid #ffffff;
}
#gnav li a:hover {
background: rgba(246,122,105,0.5);
text-decoration: none !important;
}
#gnav #nav li.current a {
}
#gnav #nav li.current a:hover {
background: rgba(246,122,105,0.5);
-webkit-transition: all .5s;
transition: all .5s;
}

#gnav #nav .subNav > ul:empty {
display: none;
} 
#gnav #nav .subNav {
margin-right: auto;
margin-left: auto;
}
#gnav #nav .subNav ul li {
border-top: 0;
position: relative;
}
#gnav #nav .subNav ul li a {
background: none;
text-indent: 1em;
}
#gnav #nav .subNav ul li a:hover {
background: rgba(246,122,105,0.5);
-webkit-transition: all .5s;
transition: all .5s;
}
#gnav #nav .subNav ul li::before {
content: '┣';
position: absolute;
top: 24%;
left: 1%;
color: #808080;
}
#gnav #nav .subNav ul li:last-of-type::before {
content: '┗';
position: absolute;
top: 24%;
left: 1%;
color: #808080;
}


#header #close {
margin-top: 0.5em;
padding-top: 0.5em;
width: 100%;
display: block;
background: none;
color: rgba(246,122,105,0.8);
font-size: 1.2rem;
font-weight: bold;
border: 0;
border-top: 1px solid #ffffff;
outline: none;
}





/* 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜	
mainImg
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
#mainImg {
display: inline-block;
}
.slick-slide .caption {
text-align: center;
}
.slick-slide .caption span {
margin-left: 2em;
width: 10%;
display: block;
font-size: 0.8rem;
}

/* 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜	
main Logo
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
#mainLogo p {
margin-bottom: 1em;
}
#mainLogo > span {
margin-bottom: 0.3em;
font-weight: bold;
font-size: 0.8rem;
word-break: keep-all;
}
#mainLogo ul {
position: relative;
}
#mainLogo ul li:nth-of-type(2) {
width: 90%;
}
#mainLogo ul li:nth-of-type(2) .incLogo {
margin-bottom: 1em;
}
#mainLogo .license {
width: 100%;
}
#mainLogo .chara img {
max-height: 70px;
display: inline-block;
}
#mainLogo ul li:first-of-type {
text-align: left;
position: absolute;
left: 3%;
bottom: 0;
}
#mainLogo ul li:last-of-type {
width: 95%;
text-align: right;
}

/* 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
footer
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
#footer header {
width: 96%;
}
#footer footer .wrap {
margin: 0 auto;
width: 96%;
}
#footer .footerHead .footerLogo img {
width: 230px;
}
#footer .footerWrap header > span {
font-size: 0.8rem;
}

#footer .detail li .tel,
#footer .detail li .mail {
padding: 1.5em 0;
}
#footer .detail li .tel {
font-size: 2.5rem;
}
#footer .detail li .mail {
font-size: 2.5rem;
}
#footer .footerHead .tel {
margin-top: 1em;
}
#footer .footerHead .tel .caption {
font-size: 0.9rem;
}
#footer .footerHead .tel .caption::before {
font-family: "FontAwesome";
content: '\f0dd';
top: -0.5em!important;
}
#footer .footerHead .tel .caption {
padding-left: 1.3em;
word-break: keep-all;
}	
#footer .footerHead .number {
display: block;
}

#footer footer .address dt {
font-weight: bold;
}
#footer footer .address dt:nth-child(n+2) {
padding-right: 1em;
padding-left: 1em;
background: #e1e8f0;
}

#footer footer .address dd {
margin-bottom: 0.5em;
}
#footer footer .address dd,
#footer footer .address dd span {
display: block;
text-align: justify;
}
#footer .address .line h2 {
background: #00B900;
color: #ffffff;
text-align: center;
word-break: keep-all;
}
#footer .address .line ul li .caption, 
#footer .address .line ul li .txt {
font-size: 1rem;
}
#footer .address .line ul li .caption br {
display: none;
}
#footer .address .line ul li .txt {
text-align: center;
}

#footer .address .line ul li:first-of-type {
margin-bottom: 1em;
}
#footer .address .line ul li:first-of-type figure {
width: 15%;
}
#footer .address .line ul li:last-of-type figure {
text-align: center;
}
#footer .address .line ul li:last-of-type img {
width: 150px;
}
#footer .copyright {
text-align: center;
}

}/* end */