@charset "UTF-8";

/** **********************************

UPDATE:2020.10.10

SETTINGS

濃い青　　　　　　：#0052a5
水色　　　　　　　：#00a0e8
青っぽいグレー　　：#e4eaf2
青っぽいグレー2　 ：#f0f4f7

********************************** **/

*{
	background-repeat:no-repeat;
	line-height:140%;
	margin:0;
	padding:0;
	outline: none
}

*, *:before, *:after {-webkit-box-sizing: border-box; box-sizing: border-box;}
 
a {
	text-decoration:none; 
	overflow:hidden; 
	color:#333;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
a:hover {opacity:.8}

img {border: none; line-height:0; vertical-align:bottom; max-width: 100%; -webkit-backface-visibility: hidden}
img[data-echo]{ 
	min-width:50px; 
	min-height:50px; 
	background-image:url(https://www.kenko-tokina.co.jp/images/common/preloader-30-w.gif); 
	background-position:center center;
	border:solid 1px #ddd;
	border-radius:5px
}
img[data-echo].loaded{background-image:none}


.clear{clear:both; height:0; line-height:0; font-size:0}

/* boldがないfontをboldにする */
.entry .bold,
.entry strong{
	-webkit-text-stroke: 1.2px #333;
	text-stroke: 1.2px #333;
}

.space10 {height: 10px}
.space20 {height: 20px}
.space30 {height: 30px}
.space40 {height: 40px}
.space100 {height: 100px}

.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt40{margin-top:40px}
.mt50{margin-top:50px}

.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb40{margin-bottom:40px}
.mb50{margin-bottom:50px}

.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml40{margin-left:40px}
.ml50{margin-left:50px}

.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr40{margin-right:40px}
.mr50{margin-right:50px}


.font10{font-size:10px}
.font12{font-size:12px}
.font14{font-size:14px}

.txt-left{text-align:left}
.txt-center{text-align:center}
.txt-right{text-align:right}
.red{color:#C00}


.flex{display: flex;}
.flex .col{width:50%}

ul.no-list li{list-style: none}

.alpha{
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.alpha:hover{
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
}


.transition-01{ 
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.transition-02{ 
	-webkit-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
.transition-03{ 
	-webkit-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;
}


.arrow::before{content:"▶"; font-size: 10px; margin-right: 5px}


.bd-01{background: linear-gradient(transparent 60%, rgba(252,238,33,.6) 0%); font-weight: bold}
.bd-02{background: linear-gradient(transparent 60%, rgba(228,0,3,.4) 0%); font-weight: bold}
.bd-03{background: linear-gradient(transparent 60%, rgba(0,65,219,0.50)  0%); font-weight: bold}

.cursor{cursor:pointer; cursor:hand}


.forsk{clip:rect(1px,1px,1px,1px);height:1px;margin:0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;z-index:-1000}


th,td{text-align:left}

input[type="text"]:focus {outline: 0;}
button:focus {outline: 0;-webkit-appearance: none;border-radius: 0;}

#back-top {
	position: fixed;
	bottom: 0px;
	right:30px;
	z-index:999;
	width: 50px;
	height: 50px;
	opacity: 0
}
#back-top.on {opacity: 1; bottom:30px}

@media screen and (max-width: 500px) {
#back-top {bottom:-10px; right:10px}
#back-top.on {opacity: 1; bottom:10px}
}


.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
.clearfix{display: inline-table}


.link a{color:#0052a5}

#window-size{position: fixed; bottom:10px; left: 10px; width: 200px; background-color: #fff; font-size: 14px; font-weight: 700; z-index: 9999; text-align: center;padding: 10px; display: none}

#ie-notice{background-color: #fff; padding: 10px; text-align: center; font-size: 16px; font-weight: bold; color:red}


.reset{ font-size:0; letter-spacing:.5}
.reset li,
.reset div{font-size:14px; letter-spacing:normal}
.full{width:100%; height:auto}




/** ***********************************************

COMMON

*********************************************** **/



.cols-2{font-size:0; letter-spacing: -.5em; }
.cols-2 .col{font-size:14px; display: inline-block; vertical-align: top; width :50%; letter-spacing: normal}

.cols-3{font-size:0;letter-spacing: -.5em; }
.cols-3 .col{font-size:14px; display: inline-block; vertical-align: top; width :33.33333%; letter-spacing: normal}

.cols-4{font-size:0;letter-spacing: -.5em; }
.cols-4 .col{font-size:14px; display: inline-block; vertical-align: top; width :25%; letter-spacing: normal}

.cols-5{font-size:0;letter-spacing: -.5em; }
.cols-5 .col{font-size:14px; display: inline-block; vertical-align: top; width :20%; letter-spacing: normal}

.tr{display:table;table-layout: fixed;border-collapse: collapse;width: 100%}
.td{display: table-cell; vertical-align:top;word-wrap: break-word;overflow: hidden; word-break: break-all;}
.th{display: table-cell; vertical-align:top;word-wrap: break-word;overflow: hidden; word-break: break-all;font-weight:bold}


.reset{ font-size:0; letter-spacing:.5}
.reset li{font-size:14px; letter-spacing:normal}



.full{width:100%; height:auto}

.hr-list{letter-spacing: -0.5em}
.hr-list li{display:inline-block; vertical-align:top;letter-spacing: normal}

.wrap-youtube {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
}
 
.wrap-youtube iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

body{
	-webkit-text-size-adjust: 100%;
	font-family:"UD新ゴ R", "UD Shin Go Regular", "メイリオ", "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
	font-size: 100%;
}


.mincho{font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif"}


.inner{width:100%; max-width: 1200px; margin:0 auto; position:relative; padding: 0 10px}


/**  Slick Base  fadeする場合はslick.cssの読み込みが必要**/

.slick{overflow: hidden; width: 100%; position: relative;}
.slick li.slick-slide{display: inline-block; vertical-align: middle;overflow: hidden}
.slick li.slick-slide img{width: 100%; height: auto}
.slick-arrow{position: absolute; top:50%; font-size: 50px; margin-top: -50px; z-index: 2; color:#ddd}

.slick-prev{left:-30px}
.slick-next{right:-30px}
.slick:hover .slick-prev{left:10px}
.slick:hover .slick-next{right:10px}

.slick-dots{text-align: center; position: absolute; bottom:0px; left: 0 ;width: 100%}
.slick-dots li{display: inline-block; width: 10px; height: 10px; margin: 0 3px; border:solid 1px #ddd; border-radius: 100%; text-indent: -9999px}
.slick-dots li.slick-active{background-color:#ddd;border:solid 1px #ddd;}


/** ***********************************************

COMMON STYLE

*********************************************** **/

.bt{display: block;text-align: center}
.bt-1{color:#fff; padding: 3px; font-size: 12px; letter-spacing: 1px}
.bt-1:hover{background-color: #fff; color:#0052a5; opacity: 1}

.bt-2{font-size: 20px; ; color:#fff; display:block; padding:30px 10px; text-align:center; max-width:90%;margin: 30px auto;background:#0052a5}
.bt-2:hover{padding-left: 30px;}
.bt-2 i{margin-left: 10px; font-size: 18px}


.title-1{font-size: 24px; font-weight: 700; letter-spacing: 1px}


/** ***********************************************

HEADER 1

*********************************************** **/
#hd-1{background-color: #0052a5; color:#fff}
#hd-1 .col-1{width:70%; padding: 10px 0}
#hd-1 .col-2{width:30%; padding: 10px 0}



#hd-logo{width:200px; display: inline-block; vertical-align: middle;font-size: 14px}

#hd-menu{display: inline-block; margin-left: 50px; vertical-align: middle}
#hd-menu li{display: inline-block; margin: 0 15px}
#hd-menu a{color:#fff; font-size: 14px;letter-spacing: 2px}


#hd-search{background-color: #fff; max-width: 320px; position: absolute; top:10px; right: 10px; padding: 0 10px}
#hd-search input[type="text"]{font-size: 13px; padding: 5px 3px 2px; border:none; background-color: #fff; width: 280px}
#hd-search button{border:none; background-color: #fff}
#hd-search button:hover{opacity: .7}
#hd-search i{font-size: 14px}


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

#hd-menu li{margin: 0 10px}
#hd-menu a{font-size: 13px}
#hd-search{max-width: 250px}
#hd-search input[type="text"]{font-size: 12px; width: 210px}

} 



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

#hd-1 .col-1{width:100%}
#hd-menu{display: none}
#hd-1 .col-2{display: none}

} 


/** ***********************************************

SMARTPHONE MENU 

*********************************************** **/
#bt-nav,
#show-menu{display: none}

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

#bt-nav{position: absolute; top:0px; right: 10px; padding: 10px; border-radius: 3px; z-index: 99999; display: block}

#bt-nav .item-01{border-top:solid 2px #fff;width:30px; display:block}
#bt-nav .item-02{border-top:solid 2px #fff;width:30px; display:block; margin-top:8px}
#bt-nav .item-03{border-top:solid 2px #fff;width:30px; display:block; margin-top:8px}

#bt-nav.on .item-01{
	-webkit-transform: rotate(-40deg);
	transform: rotate(-40deg);
	transform-origin:right;
}
#bt-nav.on .item-02{width:0}
#bt-nav.on .item-03{width:30px;
	-webkit-transform: rotate(40deg);
	transform: rotate(40deg);
	transform-origin:right;
}


#show-menu{position: fixed; top:46px; left: 0; width:100%; height: 100%; z-index: 999; background-color: #fff;display: none}
#show-menu .search{padding: 10px; text-align: center; border-bottom:solid 1px #ddd;background-color: #f5f5f5}
#show-menu .search input[type="text"]{font-size: 14px; padding: 5px 3px 2px; border:none; background-color: #f5f5f5; width: 80%}
#show-menu .search button{border:none; background-color: #f5f5f5; font-size: 16px}
#show-menu li a{display: block; padding: 10px; border-bottom:solid 1px #ddd; ; font-size: 14px; position: relative}
#show-menu li i{position: absolute; top:50%; margin-top: -10px; right:10px; font-size: 20px}

}



/** ***********************************************

HEADER 2

*********************************************** **/
#hd-2{background-color: #e4eaf2}
#hd-2 .inner{padding: 10px; text-align: right}
#hd-2 li{display: inline-block; margin: 0 2px; font-size: 12px; vertical-align:middle}
#hd-2 li i{font-size: 15px; margin-right: 5px;}
#hd-2 li a{ display: block; padding: 5px 8px; background-color: #fff;letter-spacing: 1px; position: relative; z-index: 2}
#hd-2 li a.item-3{background-color:#e25a24; color:#fff}
#hd-2 li a.item-4{background-color:#009a8e; color:#fff}




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

#hd-2 li{font-size: 10px}

} 




/** ***********************************************

FOOTER MENU

*********************************************** **/

#sec-fmenu{background-color:#f5f5f5; padding:40px 0}
#sec-fmenu .box-01{text-align:center; width:100%}
#sec-fmenu .box-01 .div-01{width:100%; display:inline-block; vertical-align:top; text-align:left}
#sec-fmenu .box-01 .div-02{width:100%;  display:inline-block;vertical-align:top; text-align:left}

#sec-fmenu .p-title{margin-bottom:30px; color:#333;font-size:16px; letter-spacing: 1px; ; border-left:solid 3px #333; padding-left: 12px; font-weight: bold}

#sec-fmenu .box-01 .item{display:inline-block; vertical-align:top; padding:0 10px; width:25%; font-size: 14px}


#sec-fmenu li{list-style: none;margin-bottom:30px;position:relative}
#sec-fmenu .item > ul > li > a{font-weight: bold}
#sec-fmenu .item > ul > li > a::before{content:"− "}

.icon-window{width: 10px!important; height: auto!important;  margin-left: 4px; vertical-align: middle; display: inline!important}
#sec-fmenu .sub-menu{margin: 10px 0 0 10px}
#sec-fmenu .sub-menu li {margin-bottom:5px; margin-left:20px; list-style:outside disc}
#sec-fmenu .sub-menu li:first-child {margin-top:10px}

#sec-fmenu a{font-size:14px; color:#333; font-weight:500;letter-spacing: 1px}
#sec-fmenu a:hover{text-decoration:underline}
#sec-fmenu .sub-menu li a{font-weight:400; font-size:12px}


#sec-fmenu .bn-01,
#sec-fmenu .p-top{display:none}
#sec-fmenu i{display:none}



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

#sec-fmenu{padding:20px 0}
#sec-fmenu .p-title{margin-bottom:20px}

#sec-fmenu .box-01 .item{display:block; width:100%}
#sec-fmenu .box-01 .item li a{width: 49%;margin-right: 1%; float:left}
#sec-fmenu .item > ul > li > a::before{content:""}

#sec-fmenu i{display:block;position:absolute; top:10px; right: 5px; font-size: 20px}
#sec-fmenu li{margin-bottom:0;display:block}
#sec-fmenu a{display: block;border-bottom:solid 1px #999; padding: 10px}
#sec-fmenu .sub-menu{display: none}

#sec-fmenu .div-02{padding-top: 30px}
}


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

#sec-fmenu .box-01 .item li a{ font-size: 12px;width:100%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

}

/** ***********************************************

FOOTER

*********************************************** **/

#footer{background-color:#333}
#footer .inner{padding:30px 0; text-align:center}
#footer li{display:inline-block; vertical-align: middle}
#footer a{color:#ddd; font-size:14px;letter-spacing: 1px;border-left:solid 1px #666;padding:0 15px;  }
#footer li:first-child a{border-left:none}
#footer .nav-01{margin-bottom:30px}
#footer .nav-02 a{font-size:12px} 

#footer .bt-ab{position: absolute; bottom:20px; right:30px; display: block; border:solid 1px #fff; padding: 5px 10px; background-color: #000; font-size: 12px}

#copy{background-color:#000; text-align:center; letter-spacing:2px; font-size:10px; color:#999; padding:10px 0}
#copy i{font-style:normal; font-size:14px; vertical-align:middle}

/** Pop Language **/
#pop-lang{position:relative}
#list-lang{position:absolute; bottom:20px; right:0px; background-color:#fff; border:solid 1px #EEE; z-index:999; padding:20px; display:none}
#list-lang li{border-left:none; padding:0; display:block; width:150px; margin-bottom:4px; text-align:left}
#list-lang a{color:#333; font-weight:500; border-left:none; letter-spacing:1.5px; font-size:12px; padding: 0}
#list-lang a:hover{text-decoration:underline}
#list-lang li i{margin-right:5px; display:inline-block; text-align:center;}


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

#footer a{margin-bottom: 8px}

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

#footer .inner{padding: 10px}
#footer a{font-size:10px;margin-bottom: 5px; padding: 0 5px; border:none}
#copy{letter-spacing:1px}

#footer .bt-ab{position: inherit; bottom:0px; right:0px;  padding: 8px 10px; font-size: 10px}

}

.title-01{border-left:solid 3px #000; padding:10px 15px; border-bottom:solid 1px #ddd;font-size: 20px;letter-spacing: 1px}
.title-02{border:none; background-color: #eef5fa; border-top:solid 1px #000; font-weight: bold;  padding: 15px!important;font-size: 20px;letter-spacing: 1px}
.title-03{border-bottom:solid 1px #333; padding: 10px; font-weight: bold;font-size:20px;letter-spacing: 1px}
.title-04{border-top:solid 1px #333; border-bottom:solid 1px #ddd; padding: 10px; text-align: center;font-size:20px; font-weight: bold;letter-spacing: 1px}
.title-04:before{content:"− "}
.title-04:after{content:" −"}
.title-05{font-size:20px; font-weight: bold; background-color: #eee; padding: 10px; border-bottom:solid 1px #333}
.title-06{
padding: .5em .75em;
  background: -webkit-linear-gradient(top, #69b4e6 0%, #0071bc 100%);
  background: linear-gradient(to bottom, #69b4e6 0%, #0071bc 100%);
  color: #fff;
  border-bottom:solid 1px #333
}
.title-07{
padding: .75em 1em;
  border: 1px solid #ccc;
  border-top: 3px solid #3498db;
  background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
  
}

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; font-size:12px}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;overflow:visible}

#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}

#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; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

#cboxOverlay{background:#000;}
#colorbox{outline:none}
#cboxContent{margin:0px;background:#fff}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxTitle{position:absolute; bottom:-30px; left:0; color:#fff; font-size:14px; font-weight: bold;text-align: center; width: 100%}
#cboxCurrent{position:absolute; bottom:-30px; left:0px; color:#ccc; font-size: 12px}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:none;}
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}


#colorbox .slick-arrow{color:#fff; font-size: 40px}
#cboxPrevious .slick-arrow{margin-top: -25px; left: -40px}
#cboxNext .slick-arrow{margin-top: -35px; right: -40px}
#cboxClose{font-size:40px; color:#fff; position: absolute; top:-60px; right: 0}



#bnavi {background-color:#f5f5f5;position:relative}
#bnavi .inner{letter-spacing:.5; font-size:0;}
#bnavi .inner li{display:inline-block; color:#999; font-size:10px; letter-spacing:normal; padding:10px 0}
#bnavi .inner li:after{content:"/"; margin:0 5px}

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

#colorbox .slick-arrow{font-size: 30px}
#cboxPrevious .slick-arrow{margin-top: -25px; left: 10px}
#cboxNext .slick-arrow{margin-top: -25px; right: 10px}

}



.OF-fill {
	object-fit: fill;
	font-family: 'object-fit: fill';
}

.OF-contain {
	object-fit: contain;
	font-family: 'object-fit: contain';
}

.OF-cover {
	object-fit: cover;
	font-family: 'object-fit: cover';
}
.OF-cover-op {
	object-fit: cover;
	object-position: center 80%;
	font-family: 'object-fit: cover; object-position: center 80%';
}

.OF-none {
	object-fit: none;
	font-family: 'object-fit: none';
}

.OF-scaleDown {
	object-fit: scale-down;
	font-family: 'object-fit: scale-down';
}
.object-position {
	max-height: 33vw;
}
@media (max-width: 700px) {
	.xs--OF-cover {
		object-fit: cover;
		font-family: 'object-fit: cover';
	}
	.caption-cover {
		border-left: 5px solid green;
		padding-left: 5px;
	}
}
@media not all and (max-width: 700px) {
	.caption-contain {
		border-left: 5px solid green;
		padding-left: 5px;
	}
}