@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);


/* ---------------------- */
/* Layout */
html {
	width: 100%;
	color: #000;
	overflow-x: hidden;
	font-size: 10px;
	background: #FFF;
}
body {
	background-color: #FFF;
	font-size: 1.6rem;
	line-height: 1.8;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
}

body.fixed {
	position: fixed !important;
}

#l-header,
#l-footer {
	font-size: 16px;
}
.footer__sitemap {
	letter-spacing: -0.01em;
	line-height: 1.67;
}
@supports (-webkit-appearance:none) {
	.footer__sitemap {
		letter-spacing: -0.02em;
	}
}
@media only screen and (max-width: 959px){
	#l-header,
	#l-footer {
		font-size: 12px;
	}
}


.btn_shr {
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
	text-decoration: none;
	color: #000;
	opacity: 1;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

section,
section.about,
.exbtn,
section.topics h2,
section.news h2,
section.topics ul li .cap,
section.news ul li a .txt,
aside,
#probo {
	font-family: "ヒラギノ角ゴ W3 JIS2004", 'Noto Sans Japanese',"Hiragino Kaku Gothic W3 JIS2004","Hiragino Kaku Gothic W3 JIS2004 W3","メイリオ", Meiryo, sans-serif;
}
div.inline {
	display: inline-block;
	color: #888;
}

.sp_br{
	display:none;
}
.right {
    text-align: inherit!important;
}


.linkbtn {
	opacity: 1;
}
.linkbtn:hover {
	opacity: 0.6;
}

.searchBox {
	position:absolute;
	bottom: -52px;
	left:0;
}
.searchBox input.keywordinput {
	width:300px;
	padding: 10px 50px 10px 15px;
	height: 46px;
	line-height: 26px;
	font-size: 1.4rem;
	border: solid 1px #DDD;
	background: transparent;
}
.searchBox input.keywordbtn {
	position: absolute;
	width: 48px;
	top: 1px;
	right: 1px;
	padding: 0;
	line-height: 44px;
	font-size: 0;
	cursor: pointer;
	text-indent: 100%;
	background: transparent;
}
.searchBox::before {
	content: '';
	position: absolute;
	right: 17px;
	top: 15px;
	margin-top: 2px;
	margin-left: 3px;
	width: 12px;
	height: 12px;
	border: solid 2px #888;
	border-radius: 100%;
	z-index: -1;
	transition:all 0.3s;
	cursor: pointer;
}
.searchBox::after {
	content: '';
	position: absolute;
	top: 26px;
	right: 16px;
	height: 6px;
	width: 2px;
	background-color: currentColor;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	background-color: #888;
	transition:all 0.3s;
	cursor: pointer;
	z-index: -1;
}
.searchBox:hover::before {
	border: solid 2px #CCC;
}
.searchBox:hover::after {
	background-color: #CCC;
}
.sp .searchBox input.keywordinput {
	width: 78%;
    float: left;
	border: 2px solid rgba(255,255,255,0.5);
	box-sizing:border-box;
}
.sp .searchBox input.keywordbtn {
  width: 20%;
  /* float: right; */
  text-align: center;
  padding: 0px;
  border: none;
  box-sizing:border-box;
  /* background:#AAA; */
}

.searchBox input::before {
  color: #888;
  content: '';
  position: absolute;
  right: 20px;
  top: 16px;
  margin-top: 2px;
  margin-left: 3px;
  width: 12px;
  height: 12px;
  border: solid 2px currentColor;
  border-radius: 100%;
}
.searchBox input::after {
    content: '';
    position: absolute;
    top: 27px;
    right: 20px;
    height: 6px;
    width: 2px;
    background-color: currentColor;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-color:#888;
}

/* アンカー用 */
.anchor {
	padding-top: 130px;
	margin-top: -130px;
}

.exbtn {
	position: relative;
	z-index: 2;
	border: 1px solid #000;
	line-height: 46px;
	display: block;
	width:100%;
	height:100%;
	font-size:1.8rem;
}
.exbtn span {
	display: block;
	position: absolute;
	width: 196px;
	height: 46px;
}
.exbtn:hover {
	background-color: #000;
	color: #FFF;
}
.exbtn::before,
.exbtn::after {
	top: 0;
	width: 50%;
	height: 100%;
	background-color: #333;
}
.exbtn::before {
	right: 0;
}
.exbtn::after {
	left: 0;
}
.exbtn:hover::before,
.exbtn:hover::after {
	width: 0;
	background-color: #59b1eb;
}

/* ゴーストボタン（背景あり用） */
.ghost_slide_left {
	position: relative;
	z-index: 2;
	display: block;
	width: 196px;
	height: 46px;
	margin: 0 auto;
}
.ghost_slide_left.content {
	width: 100%;
	height: auto;
}
.ghost_slide_left .animate_inner {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0;
}
.ghost_slide_left .animate_inner.init {
	-webkit-transition: width 1s;
	-moz-transition: width 1s;
	-ms-transition: width 1s;
	-o-transition: width 1s;
	transition: width 1s;
}
.ghost_slide_left.content .animate_inner {
	position: static;
}
.ghost_slide_left .animate_inner.btn_wrap {
	color: #FFF;
}
.ghost_slide_left .animate_inner.btn_wrap:hover {
	background: #FFF;
	color: #000;
}
.ghost_slide_left .animate_inner.on {
	width: 100% !important;
}
.ghost_slide_left .animate_inner.btn_wrap .ghost_btn {
	display: block;
	width: 196px;
	border: 1px solid #FFF;
}
.ghost_slide_left .animate_inner.btn_wrap .ghost_btn span {
	display: block;
	width: 100%;
	line-height: 44px;
	font-size: 1.8rem;
}

/* 画像を光ったようにさせる */
.glow_img_box .glow_img {
	opacity: 0;
}
.glow_img_box .glow_img.on {
	animation: glowImg 2s 1 forwards;
}

@keyframes glowImg {
  0% {
		opacity: 0;
    filter: blur(5px) brightness(1000%) brightness(300%);
  }
  100% {
		opacity: 1;
    filter: blur(0px) brightness(100%) brightness(100%);
  }
}

/* 要素を左からニュッと出す */
.slide_in_left {
	left: -100%;

	-webkit-transition: left 0.5s;
	-moz-transition: left 0.5s;
	-ms-transition: left 0.5s;
	-o-transition: left 0.5s;
	transition: left 0.5s;
}
.slide_in_left.on {
	left: 0;
}


/* Contents */
section {
	font-family: "ヒラギノ角ゴ W3 JIS2004", 'Noto Sans Japanese',"Hiragino Kaku Gothic W3 JIS2004","Hiragino Kaku Gothic W3 JIS2004 W3","メイリオ", Meiryo, sans-serif !important;
	font-size: 16px;
}
@media screen and (max-width: 640px){
	section {
		font-size: 14px;
	}
}

section h1 {
	position: relative;
	font-size: 3.0rem;
	line-height: 1;
	text-align: center;
	margin: 200px auto 65px;
}
.news_detail h1 {
	line-height:1.6;
}
section h1 span {
	display: block;
	opacity: 0;

	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

section h1::after {
	position: absolute;
	content: "";
	height: 0;
	width: 1px;
	top: calc(100% + 27px);
	left: 50%;
	background-color: #ff5400;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

@media screen and (max-width: 480px) {
	section h1 {
		font-size:2.4rem;
	}
}

section h1 span.on {
	opacity: 1;
}
section h1.on::after {
	height: 19px;
}

section .lead {
	text-align: center;
	font-size: 18px;
	line-height: 2.0;
	padding: 0 20px;
}
@media screen and (max-width: 640px) {
	section .lead {
		padding: 0 20px;
		font-size: 16px;
		text-align: left;
	}
}


.slide_left {
	position: relative;
}
.slide_left .animate_cover,
.slide_left_multi .animate_cover {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: #FFF;
	z-index: 10;

	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.slide_left .animate_cover.on,
.slide_left_multi .animate_cover.on {
	width: 0;
}

/* 上からスライド */
.slide_left.vertical .animate_cover {
	top: auto;
	bottom: 0;
}
.slide_left.vertical .animate_cover.on {
	height: 0;
	width: 100%;
}

.slide_left .fade_txt,
.slide_left_multi .fade_txt {
	opacity: 0;

	-webkit-transition: all 0.5s;
	-mo	z-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.slide_left .fade_txt.on,
.slide_left_multi .fade_txt.on {
	opacity: 1;
}
.slide_left_multi li {
	overflow:hidden;
}


/* flex要素の並び替えをクラスで制御したい場合 */
.is-order--1 {order: 1 !important;}
.is-order--2 {order: 2 !important;}
.is-order--3 {order: 3 !important;}
.is-order--4 {order: 4 !important;}
.is-order--5 {order: 5 !important;}
.is-order--6 {order: 6 !important;}
.is-order--7 {order: 7 !important;}
.is-order--8 {order: 8 !important;}
.is-order--9 {order: 9 !important;}
.is-order--10 {order: 10 !important;}
.is-order--11 {order: 11 !important;}
.is-order--12 {order: 12 !important;}
.is-order--13 {order: 13 !important;}
.is-order--14 {order: 14 !important;}
.is-order--15 {order: 15 !important;}
.is-order--16 {order: 16 !important;}
.is-order--17 {order: 17 !important;}
.is-order--18 {order: 18 !important;}
.is-order--19 {order: 19 !important;}
.is-order--20 {order: 20 !important;}
.is-order--hidden {display: none;}

@media screen and (max-width: 900px) {
	.is-order--lg-1 {order: 1 !important;}
	.is-order--lg-2 {order: 2 !important;}
	.is-order--lg-3 {order: 3 !important;}
	.is-order--lg-4 {order: 4 !important;}
	.is-order--lg-5 {order: 5 !important;}
	.is-order--lg-6 {order: 6 !important;}
	.is-order--lg-7 {order: 7 !important;}
	.is-order--lg-8 {order: 8 !important;}
	.is-order--lg-9 {order: 9 !important;}
	.is-order--lg-10 {order: 10 !important;}
	.is-order--lg-11 {order: 11 !important;}
	.is-order--lg-12 {order: 12 !important;}
	.is-order--lg-13 {order: 13 !important;}
	.is-order--lg-14 {order: 14 !important;}
	.is-order--lg-15 {order: 15 !important;}
	.is-order--lg-16 {order: 16 !important;}
	.is-order--lg-17 {order: 17 !important;}
	.is-order--lg-18 {order: 18 !important;}
	.is-order--lg-19 {order: 19 !important;}
	.is-order--lg-20 {order: 20 !important;}
	.is-order--hidden {display: block;}
	.is-order--lg-hidden {display: none;}
}

@media screen and (max-width: 740px) {
	.is-order--md-1 {order: 1 !important;}
	.is-order--md-2 {order: 2 !important;}
	.is-order--md-3 {order: 3 !important;}
	.is-order--md-4 {order: 4 !important;}
	.is-order--md-5 {order: 5 !important;}
	.is-order--md-6 {order: 6 !important;}
	.is-order--md-7 {order: 7 !important;}
	.is-order--md-8 {order: 8 !important;}
	.is-order--md-9 {order: 9 !important;}
	.is-order--md-10 {order: 10 !important;}
	.is-order--md-11 {order: 11 !important;}
	.is-order--md-12 {order: 12 !important;}
	.is-order--md-13 {order: 13 !important;}
	.is-order--md-14 {order: 14 !important;}
	.is-order--md-15 {order: 15 !important;}
	.is-order--md-16 {order: 16 !important;}
	.is-order--md-17 {order: 17 !important;}
	.is-order--md-18 {order: 18 !important;}
	.is-order--md-19 {order: 19 !important;}
	.is-order--md-20 {order: 20 !important;}
	.is-order--hidden {display: block;}
	.is-order--lg-hidden {display: block;}
	.is-order--md-hidden {display: none;}
}

@media screen and (max-width: 550px) {
	.is-order--sm-1 {order: 1 !important;}
	.is-order--sm-2 {order: 2 !important;}
	.is-order--sm-3 {order: 3 !important;}
	.is-order--sm-4 {order: 4 !important;}
	.is-order--sm-5 {order: 5 !important;}
	.is-order--sm-6 {order: 6 !important;}
	.is-order--sm-7 {order: 7 !important;}
	.is-order--sm-8 {order: 8 !important;}
	.is-order--sm-9 {order: 9 !important;}
	.is-order--sm-10 {order: 10 !important;}
	.is-order--sm-11 {order: 11 !important;}
	.is-order--sm-12 {order: 12 !important;}
	.is-order--sm-13 {order: 13 !important;}
	.is-order--sm-14 {order: 14 !important;}
	.is-order--sm-15 {order: 15 !important;}
	.is-order--sm-16 {order: 16 !important;}
	.is-order--sm-17 {order: 17 !important;}
	.is-order--sm-18 {order: 18 !important;}
	.is-order--sm-19 {order: 19 !important;}
	.is-order--sm-20 {order: 20 !important;}
	.is-order--hidden {display: block;}
	.is-order--lg-hidden {display: block;}
	.is-order--md-hidden {display: block;}
	.is-order--sm-hidden {display: none;}
}

@media screen and (max-width: 450px) {
	.is-order--xs-1 {order: 1 !important;}
	.is-order--xs-2 {order: 2 !important;}
	.is-order--xs-3 {order: 3 !important;}
	.is-order--xs-4 {order: 4 !important;}
	.is-order--xs-5 {order: 5 !important;}
	.is-order--xs-6 {order: 6 !important;}
	.is-order--xs-7 {order: 7 !important;}
	.is-order--xs-8 {order: 8 !important;}
	.is-order--xs-9 {order: 9 !important;}
	.is-order--xs-10 {order: 10 !important;}
	.is-order--xs-11 {order: 11 !important;}
	.is-order--xs-12 {order: 12 !important;}
	.is-order--xs-13 {order: 13 !important;}
	.is-order--xs-14 {order: 14 !important;}
	.is-order--xs-15 {order: 15 !important;}
	.is-order--xs-16 {order: 16 !important;}
	.is-order--xs-17 {order: 17 !important;}
	.is-order--xs-18 {order: 18 !important;}
	.is-order--xs-19 {order: 19 !important;}
	.is-order--xs-20 {order: 20 !important;}
	.is-order--hidden {display: block;}
	.is-order--lg-hidden {display: block;}
	.is-order--md-hidden {display: block;}
	.is-order--sm-hidden {display: block;}
	.is-order--xs-hidden {display: none;}
}
/* flex要素の並び替えをクラスで制御したい場合 */


@media screen and (min-width: 940px) and (max-width: 900px) {
	.sp_br{
		display:block;
	}
}