@charset "UTF-8";
/* CSS Document */



/*----------------------------------------------------

  #reset

----------------------------------------------------*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}
section,div{
	box-sizing: border-box;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset, img {
	border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
caption, th {
	text-align: left;
}
img{
	width: 100%;vertical-align: top;
}
a {
	text-decoration: none;
}


/*----------------------------------------------------

  #tag

----------------------------------------------------*/

@media (max-width: 768px) {
  img {
    max-width: 100%;
  }
}
strong {
  font-weight: bold;
}
th,td {
  vertical-align: top;
}


/*----------------------------------------------------

  #共通設定

----------------------------------------------------*/
body {background-color:#fff; }


/* inline指定 ---------------------------------------*/
@media(min-width: 769px){ 
  .pc-inline { display:inline; }
  .sp-inline { display:none; }
}
@media(max-width: 768px){ 
  .pc-inline { display:none; }
  .sp-inline { display:inline; }
}
/*　表示指定 ---------------------------------------*/
@media(min-width: 769px){ 
  .pc-only { display:block; }
  .sp-only { display:none; }
}
@media(max-width: 768px){ 
  .pc-only { display:none; }
  .sp-only { display:block; }
}
/* 改行指定 ---------------------------------------*/
@media(min-width: 769px){ 
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media(max-width: 768px){ 
  .br-pc { display:none; }
  .br-sp { display:block; }
}
/* flex・order指定 ---------------------------------------*/
.flex{display: flex;justify-content: space-between;flex-wrap: wrap;}

.order1{order:1;}
.order2{order:2;}
@media(max-width: 768px){
	.order1{order:2;}
	.order2{order:1;}
}
/* float指定 ---------------------------------------*/
.float-l{float:left;}
.float-r{float:right;}
.flex-end{clear: both;}
@media(max-width: 768px){ 
	.float-l{float:none;}
	.float-r{float:none;}
}


/*----------------------------------------------------

  #font text設定

----------------------------------------------------*/
html {
	font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
}
body {
	font-family: "游ゴシック体 Medium", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.5;
	letter-spacing: 0.03em;
}

h1,h2,h3,h4{color:#4c585c;}
h2{}
h3{}
h4{}

p,a,ul li,th,td{color:#4c585c;}

p{font-size:1.6rem;}

@media(max-width:768px){
	p{font-size:1.4rem;}
}




.gfont{font-family: 'Cinzel', serif;font-weight: 400;}
.mincho{font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;}

.attention{font-size: 1.6rem;margin-top: 10px;}

.ta-left{text-align: left;}
.ta-center{text-align: center;}
.ta-right{text-align: right;}

/*----------------------------------------------------

  #inner_width

----------------------------------------------------*/
.inner-width{max-width: 900px;width: 90%;margin: 0 auto;}
.inner-width560{max-width: 560px;width: 90%;margin: 0 auto;}
.inner-width800{max-width: 800px;width: 90%;margin: 0 auto;}

/*----------------------------------------------------

  #attention

----------------------------------------------------*/
ul.attention li{text-align: left;font-size: 1.3rem;text-indent:-1em;padding-left:1em;}
ul.attention.indent-5 li{text-indent:-5em;padding-left:5em;}
@media(max-width: 768px){
  ul.attention li{font-size: 1.2rem;}
}

/*----------------------------------------------------

  #btn

----------------------------------------------------*/

.small_btn{display: block;margin:30px auto 30px;font-size: 1.6rem;position: relative;}
.small_btn{width: 31%;padding:10px 0;color:#fff;background: #95acb3;border:1px solid #95acb3;}
.small_btn span{display: block;font-size: 1.4rem;}

.small_btn .btn_arrow{width: 26px;height:20px;position: absolute;bottom:10px;right:10px;}
.small_btn .btn_arrow{background:url(../images/btn_arrow.png)center center no-repeat;background-size: contain;}

@media(max-width: 768px){
  .small_btn_ctn{margin: 20px auto 60px;}
  .small_btn{width: 100%;margin: 20px auto 0;font-size: 1.4rem;}
}




.btn{display: block;margin:30px auto;font-size: 1.6rem;position: relative;}
.btn{width: 100%;max-width: 480px;padding:20px 0;color:#fff;background: #95acb3;border:1px solid #95acb3;}

.btn.twoline{height: 66px;padding:8px 0 0 !important;box-sizing: border-box;}

.btn .btn_arrow{width: 38px;height:32px;position: absolute;top:calc(50% - 16px);right:10px;}
.btn .btn_arrow{background:url(../images/btn_arrow.png)center center no-repeat;background-size: contain;}

.btn:hover,.small_btn:hover{opacity: 0.7;}
.btn,.btn:hover,.small_btn,.small_btn:hover{transition: .3s;}

.btn.bg-color-dia{border: 1px solid #81B09A;}
.btn.bg-color-sky{border: 1px solid #79A8C1;}

@media(max-width: 768px){
  .btn{font-size: 1.4rem;margin:20px auto; }
  .btn.twoline{height: 66px;padding:12px 0 0 !important;box-sizing: border-box;}
  .btn .btn_arrow{width: 30px;}
}


/*----------------------------------------------------

  footer

----------------------------------------------------*/

footer{padding:40px 0;}
footer ul{text-align: left;font-size: 1.4rem;}

footer .logo{width: 200px;margin:50px auto; }
.copyright p{font-size: 1.2rem;margin-top: 2rem;color:#999;}


@media (max-width: 768px) {
	footer{display:block;padding:30px 0 30px;}
  footer ul{font-size: 1.2rem;}
  .footer_com_link:before{content:'|';display: inline-block;margin-right: 0.5em;}
}



/* ---------------------------------------------------

◆　ページトップへ

----------------------------------------------------*/

#pageTop {
    position: fixed;
    bottom: 37px;
    right: 32px;
    font-size: 1.8rem;
    z-index: 5000;
}
#pageTop a {
    display: block;
    z-index: 999;
    padding: 8px 14px;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    border:1px solid #4c585c;
    background: #4c585c;
    color:#fff;
    transition: all .3s ease;
}
#pageTop a:hover {
  opacity: 0.8;
}
@media(max-width: 768px){
  #pageTop{ bottom: 20px;right: 12px;}
  #pageTop a {padding: 8px 14px;}
  #pageTop a:hover{padding: 8px 14px;} 
}

/*----------------------------------------------------

　グローバルナビ

----------------------------------------------------*/
nav li a.active{}

header{
    width:100%;
    text-align: left;
}

.fix-header {
  height: 56px;
  background:rgba(255,255,255,0); 
  top: 0px;/* 上に隠す鷹さ */
  left: 0;
  text-align: left;
  width: 100%;
  margin: 0 auto;
  color: #000;
  position: fixed;
  opacity:1;/*  最初読み込んだときは透過 */
  z-index: 5;/*　他のアイテムに対して最上位のレイヤーになるように */
  /*  opacity: 0; */
  transition: 0.5s;
}

.fix-header-contents{
    width:580px;
    margin: 0 auto;
}


.fix-header li{margin-right:32px;}
@media(max-width:768px){
  .fix-header li{margin-right:16px;}
}

.fix-header li a{
  letter-spacing: 0.05em;
  font-size: 1.6rem;
  text-decoration: none;
  transition: .5s;
}

nav{width:100%;}
nav ul{padding:0;list-style: none;}
nav ul li{float:left;margin:17px 0 15px;}
nav ul li:nth-child(6){margin-right: 0;}
  
nav ul li a,nav ul li a:visited{
    color: #fff;
    text-decoration: none;
}

@media (max-width: 768px) {
  .fix-header li{float:none;width: 100%;text-align: left !important;padding-left:40px; }
  .fix-header li a{font-size: 1.8rem; }
  header{width:100%;text-align: left;}
} 

.menu li {float: left; height: 50px; line-height: 50px; text-align: center;}
.menu li a {display: block; color: #111;} 
.menu li :hover {color:#1e334d;font-weight: bold;}

ul.language{position: absolute;top:17px;right: 10px;}
ul.language li a{color:#fff;}

@media(max-width: 768px) {
  .menu {display:none;}
} 



/*----------------------------------------------------

　バーガーメニュー

----------------------------------------------------*/

@media (max-width: 768px) {
  header {display: block;height: 54px;top:0;left:0;}
  nav {
    margin-left: 0;
    height: auto;
    position: absolute;
    /* 開いてないときは画面外に配置 */
    top: 0;
    right:  -100vw;
    background: rgba(121,168,193,0.95);
    width: 100%;
    padding: 0 0 0;
    transition: .5s ease-in-out;
    z-index: 10;
    height: 100vh;
  }
  nav ul {display: block;right: 0;bottom: 0;top: 0;}
  nav ul li{padding-top:0px;}
  nav ul li:first-child{padding-top: 90px;}
  nav ul li a{text-align: left;width: 100%;padding: 8px 0;}
  nav ul li a img{max-width: 230px;width: 80%;}
  nav ul li.sp-only{padding-top:2.4rem;}
}
/* ----- トグルボタン ----- */

#nav-toggle {
  display: none;
  position: absolute;
  right: 23px;
  top: 25px;
  width: 30px;
  height: 34px;
  cursor: pointer;
  z-index: 9999;
}
@media (max-width: 768px) {
  #nav-toggle {display: block;}
}
#nav-toggle figure{
  padding: 10px;border-radius: 100%;background:#fff;} 
}

#nav-toggle div {
    position: relative;
}
#nav-toggle div:after {
    content:'';
    background:#fff;
    padding: 16px 26px 23px;
    border-radius: 100%;
    margin-left: -11px;
}


#nav-toggle span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    border-radius: 0;
    background: #4c585c;
    left: 0;
    transition: .3s ease-in-out;
}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 10px;}
#nav-toggle span:nth-child(3) {top: 20px;}

@media (max-width: 768px) {
  /* #nav-toggle 切り替えアニメーション */
  .open #nav-toggle span:nth-child(1) {top: 11px;transform: rotate(315deg);}
  .open #nav-toggle span:nth-child(2) {width: 0;left: 50%;}
  .open #nav-toggle span:nth-child(3) {top: 11px;transform: rotate(-315deg);}
  /* #global-nav スライドアニメーション */
  .open nav {
    /* #global-nav top + #mobile-head height */
    transform: translateX(-100vw);
  }
}