@charset "utf-8";
*{ box-sizing: border-box;word-break : break-word;}

/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	color: #646a6e;
	font-family:'Noto Sans JP', sans-serif;
	font-size: 14px;
	line-height: 1.5em;
	height: 100%;
	background-color:#fefbf7;
	font-feature-settings : "palt";letter-spacing: 0.08em;

}

html { height:100%;}

a {color: #007ea7;text-decoration: none; outline:none;}
a:hover {color: #008cba;text-decoration:none;}

a:hover img{opacity:0.8;filter: alpha(opacity=80);}

.pc_only{ display: inherit!important;}
.sp_only{ display: none!important;}


@media only screen and (max-width: 768px){
body { }
.pc_only{ display:none!important;}
.sp_only{ display: inherit!important;}
}



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

header { text-align:left; position:fixed; z-index:99; width:100%;  background-color:#000; color:#fff;transition: 1s; letter-spacing: 0.06em; }

header img{ width:100%;}
header .head_logo{ float: left; line-height:0; padding:10px 0 0 0;transition: all 0.3s ease; margin-left:1%; }
header .head_logo img{max-width:220px; float:left; transition: 0.3s;}

header::after,
header ul::after { content: ""; clear: both; display: block; }

@media only screen and (max-width: 1200px){
header .head_logo{ width:40px; overflow:hidden; margin-left:15px;}
header .head_logo img{ width:500%; max-width:inherit;}
}

@media only screen and (max-width: 1000px){
header { padding-bottom:0; height: 41px; top:0;}
.head_wrap{  padding: 0 0;height:41px;}

/*
header h1{ max-width: inherit; width:auto; padding:9px 0 0 2%; margin-left:0;}
header h1 img{max-width:190px;margin-right:0px;}
*/
}

/* =global nav
------------------------------------------------------------------------------------------*/

.toggle_nav{ float:right; }

.nav{  font-weight:bold;}
.nav .global{ line-height:0;}
.nav a{ color:#fff;}
.nav .pages{ display: inline-block; padding-right:5px; float:left;}
.nav .pages ul{ width: 100%;  }
.nav .pages li {display:inline-block;  float: left;position:relative;margin-right:1px;}
.nav .pages li a{ display:block; line-height:1em; font-size:12px; text-align:center;  padding:17px 0.8em 17px; position:relative; transition: 0.3s;}


/* sub nav */
.nav .pages li ul{  position:absolute; top:46px; background-color:#007ea7; width:200px; display:block;}
.nav .pages li ul li{ float:none; display:inherit;  }
.nav .pages li ul li a{ transition:0.25s; overflow:hidden; line-height:0; padding:0 1em;text-align:left;}
.nav .pages li ul li a:hover{ background-color:#178eb4;}
.nav .pages li:hover ul li a{ overflow:visible; padding:15px 1em; line-height:1.4em;}

.nav .pages li ul li:before{ display:none;}

.nav_trigger{display: none;}

.nav aside{ display: inline-block; padding-right:10px; float:right;}
.nav aside li{ display:inline-block; float:left; padding:11px 3px 0px; transition: 0.3s; margin:0;}
.nav aside a{ display:block; width:24px; line-height:0; padding:0;}
.nav aside a img{ width:100%;}

.nav li a span.btm{ position: absolute; bottom: 0; left:0px; width: 0%; height: 4px; background: #007ea7;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}
/*.nav li a:hover span.btm,*/
.nav li a.active span.btm{ width: 100%;}
.nav_trigger{display: none;}

.nav .pages li::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; content: ''; background: #007ea7; transform-origin: left bottom; transform: scale(1, 0); transition: transform .3s;}
.nav .pages li:hover::before { transform-origin: left bottom; transform: scale(1, 1);}

nav.lang{ float:right; width:85px; font-size:12px; line-height:1em; text-align:center; background-color:#007ea7; height:46px;}
nav.lang p{ margin:0; line-height:46px; position:relative; padding-left:5px;}
nav.lang p:hover{ cursor:pointer;}
nav.lang p:after{ position: absolute; top: calc(50% - 4px); left:10px; margin: auto; content: ""; vertical-align: middle; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
nav.lang ul{ display:none;}
nav.lang ul li a{ background-color:#007ea7; color:#fff; display:block; padding:10px 0;}
nav.lang ul li a:hover{ background-color: #008bb9;}

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


@media only screen and (max-width: 1000px){
.global{width:100%; position:fixed; z-index:10; top:0; left:0; overflow-y: hidden; padding-top:0; height:0; background-color:rgba(0,0,0,0.7); box-sizing: border-box;
 -webkit-transition: 1s ease;  -moz-transition: 0.5s ease;  -o-transition: 0.5s ease;  -ms-transition: 0.5s ease;  transition:0.5s ease;}
.global li{width: 100%; display:inherit; background-color:#007ea7;}
.nav-active .global{ height:100vh;padding-top:40px;overflow-y: scroll;}

.toggle_nav{ -webkit-transition: 0.2s ease;  -moz-transition: 0.2s ease;  -o-transition: 0.2s ease;  -ms-transition: 0.2s ease;  transition: 0.2s ease;}
.nav{ margin-bottom:0; width:100%; height:inherit;}
.nav li{ border-bottom:1px solid #007ea7;  padding-right: 0;}
.nav li a{ width:100%; max-width:inherit; text-align:center; padding:6vw 0; color:#fff; height:auto; line-height:1em; font-size:16px; border-top:1px solid #007ea7;}

.nav .pages{ width:100%; margin:0; display:block; padding:0;}
.nav .pages li{ margin-right:0;}
.nav .pages li::before{ display:none;}
.nav .pages li a{ width:auto; font-size:14px;padding:4.5vw 0;}
.nav .pages li a.toggle_btn{}
.nav .pages li a.toggle_btn:after{ position: absolute; top: calc(50% - 6px); right: 19px; margin: auto; content: ""; vertical-align: middle; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
.nav .pages li ul{ width:100%; position:inherit; top:0; display: none; background:none;}
.nav .pages li ul li{ background-color:#007ea7; border-top: 1px solid #007ea7; border-bottom:none;}
.nav .pages li ul li a{ overflow:visible; line-height:1em;padding:5vw 0; text-align:center;border-top: 1px solid #007ea7;}

.nav aside{ width:100%; display:block; background-color:#007ea7; padding:0; float:none;}
.nav aside ul{ display:table; width:100%; margin:0 auto; padding:0 3%;}
.nav aside li{ display:table-cell; width:20%; margin:0; padding:0;}
.nav aside li a{ height:inherit; line-height:1em; padding:4vw 0;}
.nav aside li a img{ width:45%;}

nav.lang{float:none;width:4.4em;font-size:12px;height:41px;position:absolute;right: calc(3vw + 38px);}
nav.lang p{ height:41px; padding-left:0; line-height:36px; }
nav.lang p:after{top: inherit;left: 50%; bottom: 7px; margin-left:-3px; width:4px; height:4px; }
nav.lang ul{position:absolute;top:41px;/* right: 0; */width:calc(4.4em + 38px);}
nav.lang ul li a{ padding:4vw 0; border-bottom:1px solid #007ea7; border-top:1px solid #007ea7;}

/* Default navigation icon */
.nav_trigger {display: block;position: fixed;width: 28px;height: 25px;right:3vw;top: 6px;z-index: 200;}
.nav-active .nav_trigger { opacity: 0.7;}
.nav_icon { display: inline-block; position: relative; width: 28px; height: 2px; background-color: #fff; -webkit-transition-property: background-color, -webkit-transform; transition-property: background-color, -webkit-transform; transition-property: background-color, transform; transition-property: background-color, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms;}
.nav_icon:before,
.nav_icon:after { content: ''; display: block; width: 28px; height: 2px; position: absolute; background: #fff; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms;}
.nav_icon:before { margin-top: -9px;}
.nav_icon:after { margin-top: 9px;}
.nav-active .nav_icon { background: rgba(0, 0, 0, 0);}
.nav-active .nav_icon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); background:#fff;}
.nav-active .nav_icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background:#fff;}

.nav li a span.btm,
.nav li a:hover span.btm,
.nav li a.active span.btm{ display:none;}
.nav li a span.jp{ font-size:3vw;}
}

/* =page parts
-----------------------------------------------------------------------------------------*/

main{ text-align:left; padding-top: 46px;}
.content_wrap{ width:94%; max-width:1400px; margin:0 auto;}

.linkbtn a{ display:block; color:#007ea7; font-weight:bold; padding:20px 0; line-height:1em; font-size:16px; position:relative; border:2px solid #007ea7; text-align:center;}
.linkbtn a::after { border: 1px solid; border-color: transparent #007ea7 #007ea7 transparent; content: ""; position: absolute; top: calc(50% - 4px); right: 1em; width: 5px; height: 5px; transform: rotate(-45deg); }
.linkbtn a:hover{ background-color:#007ea7; color:#fff;}
.linkbtn a:hover::after{border-color: transparent #fff #fff transparent;}

.youtube{position:relative;width:100%; margin:0 auto;padding-top:56.25%;}
.youtube iframe{position:absolute;top:0;right:0;width:100%;height:100%;}

@media only screen and (max-width: 1000px){
main{ padding-top:41px;}
}

@media only screen and (max-width: 768px){
.linkbtn a{padding:15px 0; line-height:1em; font-size:12px; }
}



/* =foot
-----------------------------------------------------------------------------------------*/
#footer { font-size:13px;
  padding: 60px 0;
  background-color: #1f2f4e;
  z-index: 10
}
#footer .footer_inner { width: 94%; max-width:1400px; margin: 0 auto; text-align: left }
#footer .footer_inner .foot_logo {
  width: 25%;
  float: left;
  color: #FFF;
}
#footer .footer_inner .foot_logo img { margin: 0 0 12px; width:80%;}
#footer .footer_inner ul { width: 24%; margin: 0 0 0 1%; float: left }
#footer .footer_inner ul li { line-height: 2 }
#footer .footer_inner ul li a {
  display: block;
  color: #FFF;
}
#footer .footer_inner ul li ul { width: auto; margin: 0 0 0 15px; float: none }
#footer a:link, #footer a:visited { color: #fff; text-decoration: none }
#footer a:hover { color: #999; text-decoration: none }
#footer a:active { color: #fff; text-decoration: none }

#footer .footer_inner ul.sns_btn { width: auto; margin: 10px 0 0; }
#footer .footer_inner ul.sns_btn li { float: left; padding: 3px }
#footer .copyright {
  color: #FFF;
  margin: 70px 0 0 ; text-align:center;
}



@media only screen and (max-width: 768px){
#foot_pic { display: none }

#footer { padding: 20px 0 }
#footer .footer_inner { width: auto; padding: 0 10px }
#footer .footer_inner .foot_logo { display: none }
#footer .footer_inner ul { width: auto; margin: 0; float: none }
#footer .footer_inner ul li a { margin: 0 0 5px }
#footer .footer_inner ul li { margin: 0 0 10px }
#footer .footer_inner ul li ul { display: none }
#footer .footer_inner ul li li a { margin: 0 }
#footer .footer_inner ul li.current ul { display: block }

#footer .footer_inner ul.sns_btn {
  display: block;
}
#footer .footer_inner ul.sns_btn li a img {
  width: 40px;
  margin-right: 5px;
}

#footer .copyright { margin: 30px 0 0; font-size: 10px; }
}

/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{text-align: right;margin: 0;  width:80px;  text-align:center;position:fixed; right:30px; bottom:40px;  z-index:10}
.page_top a{background-color:#007ea7; display:block;border-radius: 50%;height:80px; width:80px; line-height:80px; color:#fff;font-size:11px; font-weight:bold;}
.page_top a:hover{background-color:#008bb9; text-decoration:none;}

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



/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}
.cfix { /zoom : 1; }
.cfix:after { content : ''; display : block; clear : both; }



/* =slick
------------------------------------------------------------------------------------------*/
/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list{position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus {outline: none; }
.slick-list.dragging {cursor: pointer; cursor: hand; }
.slick-slider .slick-track,
.slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:before,
.slick-track:after {display: table; content: ''; }
.slick-track:after {clear: both; }
.slick-loading .slick-track {visibility: hidden; }
.slick-slide {display: none; float: left; outline: none; height: 100%; min-height: 1px; opacity: .9; margin: 0; max-height:95vh; overflow:hidden; }
.slick-active { opacity: 1; }
[dir='rtl'] .slick-slide {float: right; }
.slick-slide img {display: block; }
.slick-slide.slick-loading img {display: none; }
.slick-slide.dragging img {pointer-events: none; }
.slick-initialized .slick-slide {display: block; }
.slick-loading .slick-slide {visibility: hidden; }
.slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden {display: none; }

/* =slick-theme
------------------------------------------------------------------------------------------*/
/* Slider */
.slick-loading .slick-list {background: #fff url('../images/loading.gif') center center no-repeat; }

/* Icons */
@font-face {font-family: 'slick'; font-weight: normal; font-style: normal; src: url('./fonts/slick.eot'); src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); }
/* Arrows */
.slick-prev,
.slick-next {font-size: 0; line-height: 0; position: absolute; display: block;  padding:40px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; top:50%; z-index:20; transition:0.3s;}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {color: transparent; outline: none; background: transparent; }
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {opacity: 1; }
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {display:none; }
.slick-prev:before,
.slick-next:before {line-height: 1; opacity: .75; content: ""; height: 34px; width: 20px; display: block;}
.slick-prev {left: 2%;  }
.slick-prev:before { background-image:url(../images/arw_left.png); }
.slick-next {right: 2%;}
.slick-next:before {background-image:url(../images/arw_right.png); }
.slick-prev:hover{ left:1.5%;}
.slick-next:hover{ right:1.5%;}

/* Dots */
.slick-dotted.slick-slider {margin-bottom: 30px; }
.slick-dots {position: inherit; bottom: 12px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.slick-dots li {position: relative; display: inline-block; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button {font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; }
.slick-dots li button:hover,
.slick-dots li button:focus {outline: none; }
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {opacity: 1; }
.slick-dots li button:before {font-family: 'slick'; font-size: 6px; line-height: 20px; position: inherit; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: #cccc33; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before {opacity: .75; color: #cccc33; }


/*lightbox*/

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background: rgb(6 88 117);}
#colorbox{outline:none;}
   /* #cboxContent{margin-bottom:60px; overflow:visible;}*/
    #cboxContent{margin-right:60px; overflow:visible; margin-bottom:0;}
        .cboxIframe{background:#000;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:inherit;}
        #cboxLoadingGraphic{background:url(../images/loading_b.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxClose{text-indent:-9999px; width:40px; height:100%; position:absolute; top:0;background:url(../images/controls2.png) no-repeat 0 0;}
		
        #cboxClose{background-position:7px 0; right:-50px; border:0; outline:none;}
        #cboxClose:hover{background-position:-40px 0;}


@media screen and (max-width: 768px) {
#cboxContent{ margin-right:0; margin-bottom:50px;}
#cboxClose{ right:0; top:inherit; bottom:-35px; height: 22px;}

.slick-prev,
.slick-next { padding:0;}
}