@charset "UTF-8";

/***********************************
* 全ページ共通 *
***********************************/
/* リンク色 --------------------*/
.tel-link a{
	color:#4a4a4a;
}
.tel-link a:hover{
	text-decoration:none;
}

/* 色 --------------------*/
.c_red00{ color:#ff0000; }

.c_green01{ color:#30a300;}

/* フォント --------------------*/
body{
	font-family: "Noto Sans Japanese", "Meiryo UI", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#4a4a4a;
	font-weight: 400;
}
/* 英語フォント*/
@font-face {
    font-family: 'Didact Gothic';
    font-style: normal;
    font-weight: 400;
    src: local('Didact Gothic Regular'), local('DidactGothic-Regular'), url(https://fonts.gstatic.com/s/didactgothic/v10/v8_72sD3DYMKyM0dn3LtWk3vq9dAc3DuCNWjMJNKvGE.woff) format('woff');
}
.en{
	font-family: "Brandon Grotesque", "Didact Gothic", Helvetica, Arial, "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-style: italic;
    font-weight: normal;
    letter-spacing: 0.08em;
}

/***********************************
* header *
***********************************/
#header{
	position: fixed;
	width: 100%;
	margin: 0 auto;
	padding: 15px 0 0 0;
	line-height: 1;
	z-index: 999;
}
#header:after {
	content: "";
	display: block;
	height: 1px;
	background: #fff;
	width: 100%;
	margin: 5px auto 0;
}
#header .inner{
	position: relative;
}
#header h1{
	padding:0;
	margin:0px;
	text-align:center;
}
#header h1 img{
	width:230px;
}

#header #gnavi ul{
	text-align:center;
	padding:10px 0px 0px 0px;
	margin:0px;
}
#header #gnavi ul li{
	display:inline;
}
#header #gnavi ul li a{
	display:inline-block;
	padding:10px 4px;
	font-family: "Brandon Grotesque", "Didact Gothic", Helvetica, Arial, "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-style: italic;
	font-weight:bold;
	font-size:1rem;
	color: #4a4a4a;
}
#header #gnavi ul li a i{
	font-size: 80%;
	padding: 0 3px;
}
#header #gnavi ul li a:hover{
	text-decoration:none;
	color:#9a9a9a;
}
#header #gnavi ul li.active a{
	color: #c30d23;
}

	@media (min-width: 768px) {
		#header{
			padding: 40px 0 0;
		}
		#header:after {
			margin: 30px auto 0;
		}
		#header h1{
			text-align:left;
		}
		#header h1 img{
			width:100%;
			max-width:346px;
		}
		#header #gnavi ul{
			text-align:right;
			padding:0px 0px 0px 0px;
		}
		#header #gnavi ul li a{
			padding:10px 10px;
			font-size:1.2rem;
		}

	}

/* fixed */
#header.fixed{
	padding: 0px 0 0 0;
	background: #fff;
	background: rgba(255,255,255,.9);
}
#header.fixed:after {
	margin: 5px auto 0;
}
#header.fixed h1 img{
	width:150px;
}
#header.fixed #gnavi ul{
	padding:0px 0px 0px 0px;
}
#header.fixed #gnavi ul li a{
	padding:5px 5px;
	font-size:0.7rem;
}
	@media (min-width: 768px){
		#header.fixed h1 img{
			width:200px;
		}
		#header.fixed #gnavi ul{
			margin-top: -35px;
			padding:0px 0px 0px 0px;
		}
		#header.fixed #gnavi ul li a{
			padding:10px 10px;
			font-size:0.9rem;
		}
	}
/* transition */
#header,
#header:after,
#header img,
#header.fixed #gnavi ul,
#header.fixed #gnavi ul li a,
#header.fixed #gnavi ul li a i{
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

/***********************************
* contents *
***********************************/
#contents{
	padding-top:150px;
}
@media(min-width: 424px){
	#contents{
		padding-top:115px;
	}
}
@media (min-width: 768px) {
	#contents{
		padding-top:162px;
	}
}

/***********************************
* section *
***********************************/
/* セクション背景 */
.sec{
	background-repeat: repeat-x;
	background-position: center top;
	background-size: 40px;
	padding-top: 1rem;
	margin-bottom: 2rem;
}
.sec .container{
	background-color: #fff;
}
.sec-blue{
	background-image: url(../img/bg_section-blue.gif);
}
.sec-red{
	background-image: url(../img/bg_section-red.gif);
}

/* セクションコンテンツ */
.sec-cont{
	padding-top: 2rem;
}
	@media (min-width: 768px){
		.sec{
			background-size: 80px;
			padding-top: 2.5rem;
			margin-bottom: 3rem;
		}
		.sec-cont{
			padding-top: 3rem;
		}
	}
	@media (min-width: 992px) {
		.sec{
			background-size: 128px;
			padding-top: 5rem;
			margin-bottom: 6rem;
		}
		.sec-cont{
			padding-top: 4rem;
		}
	}

/*  全ページ共通 フォント --------------------*/
.sec p,
.sec dl dt,
.sec dl dd{
	font-size: 0.7rem;
	line-height: 1.7;
}
.sec p.p-sub,
.txt-sub{
	font-size: 0.5rem;
}

	@media (min-width: 768px) {
		.sec p,
		.sec dl dt,
		.sec dl dd{
			font-size: 0.8rem;
		}
		.sec p.p-sub,
		.txt-sub{
			font-size: 0.6rem;
		}
	}
	@media (min-width: 992px) {
		.sec p,
		.sec dl dt,
		.sec dl dd{
			font-size: 0.9rem;
		}
		.sec p.p-sub,
		.txt-sub{
			font-size: 0.7rem;
		}
	}



/*  中ページ共通h2 h3 h4 --------------------*/
/* h2 */
.sec-article h2,
.sec-article02 h2{
	font-style: italic;
	text-align: center;
	font-size: 1.2rem;
	padding-top: 1.5rem;
	margin-bottom: 1.5rem;
	font-weight: 400;
}
.sec-article h2 .h2-en,
.sec-article02 h2 .h2-en{
	font-family: "Brandon Grotesque", "Didact Gothic", Helvetica, Arial, "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: normal;
	color: #9fa0a0;
	display: block;
	padding-top: 0.3rem;
	font-size: 0.7rem;
}
	@media (min-width: 768px) {
		.sec-article h2,
		.sec-article02 h2{
			font-size: 2rem;
			padding-top: 2.5rem;
			margin-bottom: 2.5rem;
		}
		.sec-article h2 .h2-en,
		.sec-article02 h2 .h2-en{
			padding-top: 0.8rem;
			font-size: 1rem;
		}
	}
	@media (min-width: 992px) {
		.sec-article h2,
		.sec-article02 h2{
			font-size: 2.7rem;
			padding-top: 4rem;
			margin-bottom: 4rem;
		}
		.sec-article h2 .h2-en,
		.sec-article02 h2 .h2-en{
			padding-top: 0.8rem;
			font-size: 1.3rem;
		}
	}

/* h3 */
.sec-blue .sec-article h3,
.sec-red .sec-article h3{
	padding-left: 0.3rem;
	border-left-style: solid;
	border-left-width: 0.5rem;
	font-size: 0.9rem;
	margin-bottom: 1rem;
	font-weight: 400;
}
.sec-blue .sec-article h3{
	border-left-color: #87cfd0;
}
.sec-red .sec-article h3{
	border-left-color: #d55565;
}
	@media (min-width: 768px){
		.sec-blue .sec-article h3,
		.sec-red .sec-article h3{
			font-size: 1.1rem;
			margin-bottom: 1.5rem;
		}
	}
	@media (min-width: 992px){
		.sec-blue .sec-article h3,
		.sec-red .sec-article h3{
			font-size: 1.3rem;
			margin-bottom: 2rem;
		}
	}

.sec-article02 h3{
	font-size: 0.9rem;
}
.sec-article02 h3 span{
	font-size: 0.6rem;
}
	@media (min-width: 768px){
		.sec-article02 h3{
			font-size: 1.1rem;
			margin-bottom: 1.5rem;
		}
		.sec-article02 h3 span{
			font-size: 0.8rem;
		}
	}
	@media (min-width: 992px){
		.sec-article02 h3{
			font-size: 1.2rem;
			margin-bottom: 1.8rem;
		}
		.sec-article02 h3 span{
			font-size: 0.8rem;
		}
	}

/* h4 */
.sec-blue .sec-article h4,
.sec-red .sec-article h4{
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
	font-weight: 400;
}
.sec-blue .sec-article h4{
	color:#71c7c8;
}
.sec-red .sec-article h4{
	color: #c30d23;
}
	@media (min-width: 768px){
		.sec-blue .sec-article h4,
		.sec-red .sec-article h4{
			font-size: 1.1rem;
			margin-bottom: 0.8rem;
		}
	}
	@media (min-width: 992px){
		.sec-blue .sec-article h4,
		.sec-red .sec-article h4{
			font-size: 1.3rem;
		}
	}

/*  中ページ共通　リード --------------------*/
.lead{
	margin-bottom: 1rem;
}
.lead-pic-box{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
}
.lead-pic{
	background-repeat: no-repeat;
	background-position: center top;
	background-size:cover;
	display: block;
  height: 0;
  width: 100%;
  padding-bottom: 100%;
	position: relative;
}
.lead-pic-img{
	position: absolute;
  width: 90%;
  height: auto;
  padding-bottom: 20%;
  left: 50%;
  top: 60%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
.lead-pic-img img{
	width: 100%;
}

.sec-blue .lead-pic{
	background-image: url(../img/bg_pic-blue.jpg);
}
.sec-red .lead-pic{
	background-image: url(../img/bg_pic-red.jpg);
}

.sec .lead-en-txt{
	padding-top: 1rem;
}
.sec .lead-en-txt p{
	font-family: "Brandon Grotesque", "Didact Gothic", Helvetica, Arial, "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-style: italic;
	line-height: 1.5;
	color:#999;
}

@media (min-width: 576px) {
	.lead-pic-box{
		margin-left: 0;
	}
	.sec .lead-en-txt{
		padding-left: 5%;
	}
}

/*  中ページ共通　テキストボックス --------------------*/
.sec-blue .txt-box01,
.sec-blue .txt-box02{
	background-color: #f0f8f8;
}
.sec-red .txt-box01,
.sec-red .txt-box02{
	background-color: #f9eae4;
}

/* txt-box01 */
.sec-blue .txt-box01,
.sec-red .txt-box01{
	display: table;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 1rem;
	padding: 0.8rem ;
	padding-bottom: 0.2rem;
}

	@media (min-width: 768px){
		.sec-blue .txt-box01,
		.sec-red .txt-box01{
			margin-bottom: 1.5rem;
		}
	}
	@media (min-width: 992px){
		.sec-blue .txt-box01,
		.sec-red .txt-box01{
			padding: 1rem ;
			padding-bottom: 0.3rem;
			margin-bottom: 2rem;
		}
	}

/* txt-box02 */
.sec-blue .txt-box02,
.sec-red .txt-box02{
	display: table;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 1rem;
	padding: 0.8rem ;
	padding-bottom: 0.2rem;
}

	@media (min-width: 768px){
		.sec-blue .txt-box02,
		.sec-red .txt-box02{
			margin-bottom: 1.5rem;
		}
	}
	@media (min-width: 992px){
		.sec-blue .txt-box02,
		.sec-red .txt-box02{
			padding: 1rem ;
			padding-left: 3rem;
			padding-right: 3rem;
			padding-bottom: 0.3rem;
			margin-bottom: 4rem;
			text-align: center;
		}
	}

/***********************************
* 　footer  *
***********************************/
#footer{
	margin-bottom: 40px;
}
@media (min-width: 1110px) {
	#footer{
		margin-bottom: 0;
	}
}
/*  footer-cont --------------------*/
.footer-cont{
	background-image: url(../img/bg_footer-cont.gif);
	background-repeat: repeat;
	background-position: center top;
	background-size: 60px;
	padding: 2rem 0 1.5rem 0;
}
.footer-logo{
	text-align: center;
	margin-bottom: 1.5rem;
}
.footer-logo img{
	width: 60%;
	max-width:230px;
}
.footer-cont-jpn{
	margin-bottom: 1rem;
}
.footer-cont-jpn p{
	font-size: 0.7rem;
	margin-bottom: 0.4rem;
	line-height: 1.4;
}
.footer-cont-jpn p span{
	font-size: 0.6rem;
}
.footer-cont-en p{
	font-family: "Brandon Grotesque", "Didact Gothic", Helvetica, Arial, "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-style: italic;
	font-size: 0.7rem;
	margin-bottom: 0.4rem;
	line-height: 1.4;
}
.footer-cont-en p span{
	font-size: 0.6rem;
}
	@media (min-width: 768px){
		.footer-cont{
			background-size: 90px;
			padding: 3rem 0 2rem 0;
		}
		.footer-cont-jpn p{
			font-size: 0.8rem;
			margin-bottom: 0.4rem;
		}
		.footer-cont-jpn p span{
			font-size: 0.6rem;
		}
		.footer-cont-en p{
			font-size: 0.8rem;
			margin-bottom: 0.4rem;
		}
		.footer-cont-en p span{
			font-size: 0.6rem;
		}
	}
	@media (min-width: 992px){
		.footer-cont{
			background-size: 128px;
			padding: 4rem 0 3rem 0;
		}
		.footer-logo{
			margin-bottom: 2.5rem;
		}
		.footer-logo img{
			max-width: 364px;
		}
		.footer-cont-jpn{
			margin-bottom: 2rem;
		}
		.footer-cont-jpn p{
			font-size: 0.9rem;
			margin-bottom: 0.4rem;
		}
		.footer-cont-jpn p span{
			font-size: 0.7rem;
		}
		.footer-cont-en p{
			font-size: 0.9rem;
			margin-bottom: 0.4rem;
		}
		.footer-cont-en p span{
			font-size: 0.7rem;
		}
	}

/*  コピーライト--------------------*/
.footer-copy{
	background-color: #9fa0a0;
	background-image: url(../img/bg_footer-copy.gif);
	background-repeat: repeat;
	padding: 0.5rem 0;
}
.footer-copy p{
	font-family: "Brandon Grotesque", "Didact Gothic", Helvetica, Arial, "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-style: italic;
	text-align: center;
	padding: 0;
	margin: 0;
	color: #ffffff;
	font-size: 0.6rem;
}
	@media (min-width: 992px){
		.footer-copy{
			padding: 0.8rem 0;
		}
		.footer-copy p{
			font-size: 0.8rem;
		}
	}
/* pagetop --------------------*/
#pagetop {
	font-family: "Brandon Grotesque", "Didact Gothic", Helvetica, Arial, "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	display:none;
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 40px;
	 line-height: 40px;
	 background: rgba(113, 199, 200, 0.8);
	 color: #fff;
	 text-decoration: none;
	 text-align: center;
	 font-weight: bold;
	 font-size: 1rem;
}
#pagetop i{ padding-right:3px;}
#pagetop:hover{
	 background: rgba(113, 199, 200, 1);
}

	@media (min-width: 1110px) {
		#pagetop {
			bottom: 50px;
			right: 50px;
			width: 100px;
			height: 100px;
			line-height: 100px;
			border-radius: 100px;
		}
	}