@charset "utf-8";
/* CSS Document */
/* ---------------------------------------------------
	common
------------------------------------------------------ */
.logo a:hover {
  opacity: 1;
}
/*  common
------------------------------------*/
html {
/*    scroll-padding-top: 70px;*/
}
body {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 18px;
  line-height: 1;
  color: #1F1F1F;
  background: #fff;
  font-display: swap;
}

#wrapper {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.container:after {
  content: "";
  clear: both;
  display: block;
}

a {
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  transition: all ease 0.2s;
}

a:link, a:visited {
  color: #333;
  text-decoration: none;
}

a:hover, a:visited {
  color: #333;
  text-decoration: none;
}

a:hover {
  opacity: .7;
}


img {
  max-width: 100%;
  height: auto;
  line-height: 1;
  vertical-align: bottom;
}

img.max {
  width: 100%;
}

p {
  line-height: 2.0;
}

.flexbox {
  display: flex;
  flex-wrap: wrap;
  align-items: top;
  justify-content: space-between;
}

.flexbox.mid {
  align-items: center;
}

.flexbox.center {
  justify-content: center;
}

.flexbox.reverse {
  flex-direction: row-reverse;
}

.flL {
  float: left;
}

.flR {
  float: right;
}

.taL {
  text-align: left;
}

.taC {
  text-align: center;
}

.taR {
  text-align: right;
}

.rel {
  position: relative;
}

.mincho {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.gothic {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.w20 {
  width: 20%;
}
.w30 {
  width: 30%;
}
.w70 {
  width: 70%;
}
.w80 {
  width: 80%;
}


.mgb-15 {
  margin-bottom: 15px;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.pc-only {
	display: block;
}
.sp-only {
	display: none;
}

img.icon,
span.icon {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  top: -3px;
}
#content {
	padding-top: 100px;
}
.w1200 {
	max-width: 1200px;
}

@media screen and (max-width: 767px) {
	body {
		font-size: 16px;
	}
	p {
  		line-height: 1.5;
	}
	.w1200 {
		width: auto;
		padding: 0 20px;
	}
	.sp-header {
	 position: fixed; /*表示位置を固定*/
	 z-index: 2; /*重ね順を変更*/
	 top: 0; /*表示位置を指定*/
	 left: 0; /*表示位置を指定*/
	 background: #fff;/*背景を白にする*/
	 color: #000; /*文字色を黒にする*/
	 text-align: center; /*テキストを中央揃え*/
	 width: 100%; /*全幅表示*/
	 transform: translateY(-100%); /*ナビを上に隠す*/
	 transition: all 0.6s; /*アニメーションの時間を指定*/
	}

	.sp-header ul{
	 background: #ccc; /*背景をグレーにする*/
	 width: 100%;
	 margin: 0 auto;
	 padding: 0;
	}

	.sp-header ul li{
	 font-size: 1.1em;
	 list-style-type: none;
	 padding: 0;
	 width: 100%;
	 border-bottom: 1px dotted #333;
	}

	.sp-header ul li:last-child{
	 padding-bottom: 0;
	 border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
	}

	.sp-header ul li a{
	 display: block; /*クリックできる領域を広げる*/
	 color: #000;
	 padding: 1em 0;
	}
	.sp-header {
	 transform: translateY(0%);
	}
	/*トグルボタンのスタイルを指定*/
	.Toggle {
		display: block;
		position: fixed;    /* bodyに対しての絶対位置指定 */
		right: 13px;
		top: 12px;
		width: 42px;
		height: 42px;
		cursor: pointer;
		z-index: 3;
	}

	.Toggle span {
		display: block;
		position: absolute;
		width: 30px;
		border-bottom: solid 3px #000;
		-webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
		-moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
		transition: .35s ease-in-out;			/*変化の速度を指定*/
		left: 6px;
	}

	.Toggle span:nth-child(1) {
		top: 9px;
	}

	.Toggle span:nth-child(2) {
		top: 18px;
	}

	.Toggle span:nth-child(3) {
		top: 27px;
	}

	/* 最初のspanをマイナス45度に */
	.Toggle.active span:nth-child(1) {
		top: 18px;
		left: 6px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	/* 2番目と3番目のspanを45度に */
	.Toggle.active span:nth-child(2),
	.Toggle.active span:nth-child(3) {
		top: 18px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}

/*
@media screen and (max-width: 1240px) {
  body {
    font-size: 18px;
  }
}
@media screen and (max-width: 768px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  a:hover {
    opacity: 1;
  }

  img.icon,
  span.icon {
    top: -1px;
  }
}
*/

/* ---------------------------------------------------
	header
------------------------------------------------------ */
#header {width: 100%; height: 80px; display: flex; justify-content: space-between; flex-wrap: nowrap;}
#header .header-logo {width: 16%; min-width: 280px;}
#header .header-logo a {display: block; color: #222; padding: 10px;}
#header .header-logo a h1, #header .header-logo a p {display: inline-block; padding-top: 5px; color: #222; line-height: 1;}
#header .site-logo {width: 60px; height: 60px; float: left;}
#header .header-contents {display: flex; justify-content: space-between; align-items: center;}
#header .header-contents-box {display: flex; justify-content: space-between; align-items: center;}
#header .header-contents .header-sp-menu {display: none;}
#header .header-contents .header-set {display: flex; justify-content: space-between; align-items: center;}

#header .header-contents .header-set .jp {display: inline; font-weight: bold;}
#header .header-contents .header-set .en {display: none;}
.english #header .header-contents .header-set .jp {display: none;}
.english #header .header-contents .header-set .en {display: inline; font-weight: bold;}

#header .g-sp-nav {display: none;}

#header .header-contents .bgc {font-family: fot-tsukuardgothic-std, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: 700; margin-right: 30px;}
#header .header-contents .bgc ul {display: inline-block; vertical-align: sub; padding-top: 5px;}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #header .header-contents .bgc { margin-right: 20px;} /* IE11 */
  *::-ms-backdrop, #header .header-contents .bgc ul { width: 110px;} /* IE11 */
}
#header .header-contents .bgc ul li {margin-left: 10px; cursor: pointer;}
#header .header-contents .bgc ul li button {opacity: 0;}
#header .header-contents .bgc .bgc-white { background-color: #FFF; border: 5px solid #DDD; border-radius: 3px; display: inline-block; width: 24px; height: 24px;}
#header .header-contents .bgc .bgc-black { background-color: #222; border: 5px solid #DDD; border-radius: 3px; display: inline-block; width: 24px; height: 24px;}
#header .header-contents .bgc .bgc-blue { background-color: #0D5DCA; border: 5px solid #DDD; border-radius: 3px; display: inline-block; width: 24px; height: 24px;}

#header .header-contents .fsize {font-family: fot-tsukuardgothic-std, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: 700;}
#header .header-contents .fsize ul {display: inline-block;}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #header .header-contents .fsize ul { width: 160px;} /* IE11 */
  *::-ms-backdrop, #header .header-contents .fsize { width: 240px;} /* IE11 */
}
#header .header-contents .fsize li {display: inline-block;}
#header .header-contents .fsize li:first-child {border-right: 1px dotted #333;}
#header .header-contents .fsize button {font-size: 100%; font-family: fot-tsukuardgothic-std, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: 700; background-color: #DDD; border-radius: 5px; padding: 5px 10px; text-align: center; margin: 0 10px; border: none; line-height: 1.4;}
#header .header-contents .fsize button:focus {outline: none;}
#header .header-contents .fsize button.is-active {background-color: #FFF;}
#header .header-contents .fsize button.is-active:hover {opacity: 0.8;}

#header .header-contents .lang {font-family: fot-tsukuardgothic-std, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: 700; margin-left: 20px;}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #header .header-contents .lang { width: 200px;} /* IE11 */
}
#header .header-contents .lang a {display: block; border: 1px solid #DDD; border-radius: 5px; color: #222;}
#header .header-contents .lang a {border: 1px solid #DDD; border-radius: 5px; padding: 8px 20px 8px 35px; position: relative;}
#header .header-contents .lang a:before {content: ""; display: inline-block; position: absolute; top: 50%; left: 10px; width: 22px; height: 22px; margin-top: -11px; background: url(../images/header/ico-lang@2x.png) no-repeat top center; background-size: cover;}

#header .header-contents .search {width: 260px; margin: 0 20px;}
#header .header-contents .search input {height: 44px; border: none; box-shadow: none; border-radius: 5px 0 0 5px; background: #EEEEEE; font-family: inherit; font-size: 100%;}
#header .header-contents .search input:hover, #header .header-contents .search input:focus {background: #EEEEEE; box-shadow: none;}
#header .header-contents .search .btn-search {background: url(../images/header/ico-header-search@2x.png) no-repeat center #EEE; background-size: 20px 20px; border: none; border-radius: 0 5px 5px 0; height: 44px; padding: 12px 15px;}
#header .header-contents .search .btn-search:focus {border: none; box-shadow: none;}

.site-name-text {font-family: fot-tsukuardgothic-std, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 30px; font-weight: bold; white-space: nowrap;}
.site-name-entext {font-family: Arial, Helvetica, "sans-serif"; font-size: 12px; white-space: nowrap; letter-spacing: 0.07em; padding-left: 2px;}

/* bg-change02 */
.bg-change02 #header .header-contents .fsize button.is-active { background-color: #FFEE00; color: #000;}
.bg-change02 #header .header-contents .fsize button { background-color: unset; color: #FFEE00;}

/* bg-change03 */
.bg-change03 #header .header-contents .fsize button.is-active { background-color: #FFF; color: #000000;}
.bg-change03 #header .header-contents .fsize button { background-color: unset; color: #FFF;}


@media screen and (max-width: 767px) {
#header {height: 60px;}
#header .header-logo {width: 50%; min-width: 100px; max-width: 50%; padding: 0;}
#header .header-logo a {display: flex; justify-content: space-between; flex-wrap: nowrap; color: #222; padding: 10px;}
#header .header-logo a h1, #header .header-logo a p {display: inline-block; padding-top: 0; color: #222; line-height: 1;}
#header .site-logo {width: 40px; height: 40px; float: left; margin: 0;}
.site-name-text {font-size: 24px;}
.site-name-entext {font-size: 10px;}
#header .header-contents {}
#header .header-contents-box {display: block; position: absolute; top: 60px; left: 0; width: 100%; background: #0B878B; z-index: 9998;}
#header .header-contents .header-sp-menu {display: flex; justify-content: space-between; align-items: center;}
#header .header-contents .header-sp-menu .h-sp-search-btn {width: 44px; height: 44px; margin-right: 5px;}
#header .header-contents .header-sp-menu .h-sp-search-btn a {display: block; width: 100%; height: 100%; border: 1px solid #0B878B;}
#header .header-contents .header-sp-menu .h-sp-setting-btn {width: 44px; height: 44px; margin-right: 5px;}
#header .header-contents .header-sp-menu .h-sp-setting-btn a {display: block; width: 100%; height: 100%; border: 1px solid #0B878B;}

/* bg-change02 */
.bg-change02 #header .header-contents-box {background-color: rgba(20, 20, 20, 0.9);}
.bg-change02 #header .header-contents .header-sp-menu .h-sp-search-btn a { border: 1px solid #FFF;}
.bg-change02 #header .header-contents .header-sp-menu .h-sp-search-btn a img {filter: grayscale(100%) brightness(500%) contrast(500%);}
.bg-change02 #header .header-contents .header-sp-menu .h-sp-setting-btn a { border: 1px solid #FFF;}
.bg-change02 #header .header-contents .header-sp-menu .h-sp-setting-btn a img {filter: grayscale(100%) brightness(500%) contrast(500%);}

/* bg-change03 */
.bg-change03 #header .header-contents-box {background-color: rgba(35, 90, 255, 0.9);}
.bg-change03 #header .header-contents .header-sp-menu .h-sp-search-btn a { border: 1px solid #FFF;}
.bg-change03 #header .header-contents .header-sp-menu .h-sp-search-btn a img {filter: grayscale(100%) brightness(500%) contrast(500%);}
.bg-change03 #header .header-contents .header-sp-menu .h-sp-setting-btn a { border: 1px solid #FFF;}
.bg-change03 #header .header-contents .header-sp-menu .h-sp-setting-btn a img {filter: grayscale(100%) brightness(500%) contrast(500%);}

#header .header-contents .header-sp-menu .sp-menu { display: block; width: 44px; height: 44px; background-color: #0B878B; margin-right: 5px; position: relative;}
#header .header-contents .header-sp-menu .sp-menu .l-menu-trigger,
#header .header-contents .header-sp-menu .sp-menu .l-menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
#header .header-contents .header-sp-menu .sp-menu .l-menu-trigger {
  position: relative;
  width: 44px;
  height: 44px;
  color: #fff;
}
#header .header-contents .header-sp-menu .sp-menu .l-menu-trigger span {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 31px;
  height: 2px;
  background-color: #000;
  border-radius: 5px;
  background-color: #fff;
}
#header .header-contents .header-sp-menu .sp-menu .l-menu-trigger span:nth-of-type(1) {
  top: 10px;
}
#header .header-contents .header-sp-menu .sp-menu .l-menu-trigger span:nth-of-type(2) {
  top: 19px;
}
#header .header-contents .header-sp-menu .sp-menu .l-menu-trigger span:nth-of-type(3) {
  top: 28px;
}
#header .header-contents .header-sp-menu .sp-menu .l-menu-trigger small {
  font-size: 50%;
  position: absolute;
  bottom: 2px;
  font-weight: bold;
  display: block;
  letter-spacing: 0.1em;
  color: #fff !important;
  width: 44px;
  text-align: center;
}
#header .header-contents .header-sp-menu .sp-menu .l-menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(8px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
}
#header .header-contents .header-sp-menu .sp-menu .l-menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
#header .header-contents .header-sp-menu .sp-menu .l-menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}

#header .g-sp-nav {
  display: none;
  position: absolute;
   top: 60px;
    left: 0;
  width: 100%;
    height: 100vh;
  z-index: 9999;
     background: #0B878B;
}
#header .g-sp-nav.active {
  display: block;
}
#header .g-sp-nav ul {
  width: 100%;
  list-style-type: none;
  padding-bottom: 50px;
}
#header .g-sp-nav li {
  background: url(../img/common/bg_f_01.jpg) !important;
  border-bottom: 1px solid #FFF;
  position: relative;
}
#header .g-sp-nav li a {
  display: block;
  padding: 1px;
  text-decoration: none;
  width: 100%;
  padding: 15px 20px;
  font-size: 100%;
  font-weight: bold;
  color: #fff;
}
#header .g-sp-nav li a:hover {
  /*background: linear-gradient(#fe0000, #d90000);*/
}
#header .g-sp-nav .close {
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 10px 0;
    text-align: center;
    width: 95%;
    margin: 0 auto;
}

#header .header-contents .header-set {display: none; width: 100%; padding: 10px;}
#header .header-contents .header-set.active {display: flex!important;}

#header .header-contents .bgc {margin-right: 0; display: inline-block; color: #fff;}
#header .header-contents .bgc ul li {margin-left: 5px;}

#header .header-contents .fsize {display: inline-block; color: #fff;}
#header .header-contents .fsize button {padding: 4px 8px; margin: 0 5px;}
#header .header-contents .fsize button.is-active:hover {opacity: 0.8;}


#header .header-contents .search {display: none; width: 100%; margin: 0; padding: 10px;}
#header .header-contents .search.active {display: block;}

}

@media screen and (max-width: 320px)/*android*/ {
#header .header-logo a h1, #header .header-logo a p { margin-top: 5px;}
.site-name-text {font-size: 19px;}
.site-name-entext {font-size: 7.5px; margin-top: 4px; display: block;}
}

@media print {
    #header .header-contents .header-set {display: none;}
    #header .header-contents .bgc {margin-right: 0;}
    #header .header-contents .bgc ul li {margin-left: 5px;}
    #header .header-contents .bgc .bgc-white {border: 4px solid #DDD; border-radius: 3px; width: 18px; height: 18px;}
    #header .header-contents .bgc .bgc-black {border: 4px solid #DDD; border-radius: 3px; width: 18px; height: 18px;}
    #header .header-contents .bgc .bgc-blue {border: 4px solid #DDD; border-radius: 3px; width: 18px; height: 18px;}
    #header .header-contents .fsize button {margin: 0 5px;}
    #header .header-contents .lang { margin-left: 0;}
    #header .header-contents .search {width: 200px; margin: 0 0 0 10px;}
}

/* ---------------------------------------------------
	gnavi
------------------------------------------------------ */
.on-gnavi {position: relative;}
.gnavi {width: 100%; height: 70px; background-color: rgba(14, 172, 135, 0.9); position: absolute; top: 0; left: 0; z-index: 3999;}
.gnavi.fixed {position: fixed;}
.gnavi > ul {max-width: 1200px; height: 100%; display: flex; justify-content: space-between; flex-wrap: nowrap; margin: 0 auto; font-family: fot-tsukuardgothic-std, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.gnavi > ul li {position: relative;}
.gnavi > ul li a {display: flex; align-items: center; height: 100%; font-weight: bold; color: #fff;}
.gnavi > ul li a:hover { text-decoration: none;}
.gnavi > ul li a:before { }
.gnavi > ul li.gnavi01 a {padding-left: 38px;}
.gnavi > ul li.gnavi01 a:before {content: ""; width: 34px; height: 31px; display: inline-block; background: url(../images/header/ico-gnavi01@2x.png) no-repeat top center; background-size: cover; position: absolute; top: 50%; left: 0; margin-top: -15px;}
.gnavi > ul li.gnavi02 a {padding-left: 38px;}
.gnavi > ul li.gnavi02 a:before {content: ""; width: 24px; height: 31px; display: inline-block; background: url(../images/header/ico-gnavi02@2x.png) no-repeat top center; background-size: cover; position: absolute; top: 50%; left: 0; margin-top: -15px;}
.gnavi > ul li.gnavi03 a {padding-left: 38px;}
.gnavi > ul li.gnavi03 a:before {content: ""; width: 19px; height: 30px; display: inline-block; background: url(../images/header/ico-gnavi03@2x.png) no-repeat top center; background-size: cover; position: absolute; top: 50%; left: 0; margin-top: -15px;}
.gnavi > ul li.gnavi04 a {padding-left: 38px;}
.gnavi > ul li.gnavi04 a:before {content: ""; width: 30px; height: 30px; display: inline-block; background: url(../images/header/ico-gnavi04@2x.png) no-repeat top center; background-size: cover; position: absolute; top: 50%; left: 0; margin-top: -15px;}
.gnavi > ul li.gnavi05 a {padding-left: 38px;}
.gnavi > ul li.gnavi05 a:before {content: ""; width: 25px; height: 31px; display: inline-block; background: url(../images/header/ico-gnavi05@2x.png) no-repeat top center; background-size: cover; position: absolute; top: 50%; left: 0; margin-top: -15px;}
.gnavi > ul li.gnavi06 a {padding-left: 38px;}
.gnavi > ul li.gnavi06 a:before {content: ""; width: 25px; height: 31px; display: inline-block; background: url(../images/header/ico-gnavi06@2x.png) no-repeat top center; background-size: cover; position: absolute; top: 50%; left: 0; margin-top: -15px;}
.gnavi > ul li.gnavi07 a {padding-left: 38px;}
.gnavi > ul li.gnavi07 a:before {content: ""; width: 24px; height: 30px; display: inline-block; background: url(../images/header/ico-gnavi07@2x.png) no-repeat top center; background-size: cover; position: absolute; top: 50%; left: 0; margin-top: -15px;}

.english .gnavi {display: none;}

/* bg-change02 */
.bg-change02 .gnavi { background-color: rgba(20, 20, 20, 0.9);}
.bg-change02 .gnavi > ul li a { color: #FFEE00;}

/* bg-change03 */
.bg-change03 .gnavi { background-color: rgba(35, 90, 255, 0.9);}
.bg-change03 .gnavi > ul li a { color: #FFF;}


@media screen and (max-width: 767px) {
    .gnavi { display: none;}
}
@media print {
    .gnavi {height: 50px;}
    .gnavi.fixed {position: absolute;}
    .gnavi > ul li.gnavi01 a {padding-left: 31px;}
    .gnavi > ul li.gnavi01 a:before {width: 26px; height: 20px; background-size: cover; margin-top: -10px;}
    .gnavi > ul li.gnavi02 a {padding-left: 20px;}
    .gnavi > ul li.gnavi02 a:before {width: 15px; height: 20px; background-size: cover; margin-top: -10px;}
    .gnavi > ul li.gnavi03 a {padding-left: 17px;}
    .gnavi > ul li.gnavi03 a:before {width: 12px; height: 20px; background-size: cover; margin-top: -10px;}
    .gnavi > ul li.gnavi04 a {padding-left: 25px;}
    .gnavi > ul li.gnavi04 a:before {width: 20px; height: 20px; background-size: cover; margin-top: -10px;}
    .gnavi > ul li.gnavi05 a {padding-left: 21px;}
    .gnavi > ul li.gnavi05 a:before {width: 16px; height: 20px; background-size: cover; margin-top: -10px;}
    .gnavi > ul li.gnavi06 a {padding-left: 22px;}
    .gnavi > ul li.gnavi06 a:before {width: 17px; height: 20px; background-size: cover; margin-top: -10px;}
    .gnavi > ul li.gnavi07 a {padding-left: 21px;}
    .gnavi > ul li.gnavi07 a:before {width: 16px; height: 20px; background-size: cover; margin-top: -10px;}
    .gnavi > ul:before, .gnavi > ul:after {content:""; display: inline-block;}
}

/* ---------------------------------------------------
	side-contact
------------------------------------------------------ */
#side-contact { position: fixed; right: 30px; top: 120px; z-index: 3000;}
#side-contact a { margin-bottom: 10px;}

@media screen and (max-width: 767px) {
	#side-contact { display: none;}
}

/* ---------------------------------------------------
	下層ページタイトル
------------------------------------------------------ */
.pagetit {width: 100%; height: 195px; position: relative; background: url(../images/header/bg-pagetit01.png) no-repeat bottom left,url(../images/header/bg-pagetit02.png) no-repeat bottom right; background-size: 360px 320px; background-color: #E6F6F7; background-position: 0 49.5%,100% 49.5%;}
.pagetit .page-title {margin: 0; font-size: 200%; line-height: 1.4; font-family: fot-tsukuardgothic-std, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: center; padding-top: 105px;}

.english .pagetit .page-title {padding-top: 70px;}

/* bg-change02 */
.bg-change02 .pagetit { background-color: #222222;}
.bg-change02 .pagetit .page-title { color: #FFEE00;}

/* bg-change03 */
.bg-change03 .pagetit { background-color: #0846ff;}
.bg-change03 .pagetit .page-title { color: #FFF;}

@media screen and (max-width: 767px) {
.pagetit {height: 120px; display: table; background: url(../images/header/bg-pagetit01.png) no-repeat bottom left,url(../images/header/bg-pagetit02.png) no-repeat bottom right; background-size: contain; background-color: #E6F6F7; background-position: 0 49.5%,100% 49.5%;}
.pagetit .page-title { display: table-cell; vertical-align: middle; margin: 0; font-size: 160%; line-height: 1.4; padding-top: 0;}
}

/* ---------------------------------------------------
	パンくず
------------------------------------------------------ */
.topicpath { background: none; font-size: 83%;}
.topicpath-list { max-width: 1200px; padding: 0; text-align: left;}
.topicpath-item { float: none; display: inline-block; background: none; padding: 0; }
.topicpath-item:first-child { padding: 0;}
.topicpath-item:before { display: inline-block; content: "/"; padding: 0 10px;}
.topicpath-item:first-child:before { display: inline-block; content: ""; padding: 0;}
.topicpath-link { font-size: 100%;}

@media screen and (max-width: 767px) {
.topicpath-list {padding: 0 10px;}
.topicpath-item {padding: 0 0 5px 0; }
}

/* bg-change02 */
.bg-change02 .topicpath {color: #FFEE00;}
.bg-change02 .topicpath-link:active, .bg-change02 .topicpath-link:focus, .bg-change02 .topicpath-link:visited {color: #FFEE00;}
.bg-change02 .topicpath-item:before {color: #FFEE00;}
.bg-change02 .topicpath-item a { color: #FFEE00;}

/* bg-change03 */
.bg-change03 .topicpath {color: #FFF;}
.bg-change03 .topicpath-link:active, .bg-change03 .topicpath-link:focus, .bg-change03 .topicpath-link:visited {color: #FFF;}
.bg-change03 .topicpath-item:before {color: #FFF;}
.bg-change03 .topicpath-item a { color: #fff;}

/*  content
------------------------------------*/


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


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

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

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

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

}
/* ---------------------------------------------------
	suggest
------------------------------------------------------ */
.suggest-box {background: rgba(14,167,172,0.1); padding: 50px 0 30px 0; margin-top: 50px;}
.suggest-box .tel-box {width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: nowrap;}
.suggest-box .tel-box span {font-family: fot-tsukuardgothic-std, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: 700;}
.suggest-box .tel-box .icon {margin-right: 20px;}
.suggest-box .tel-reserve {width: 55%; border: 1px solid #0B878B; display: flex; justify-content: space-between; align-items: center; padding: 30px; max-height: 100px; color: #0B878B; font-size: 20px;}
.suggest-box .tel-emergency {width: 45%; background-color: #0B878B; border: 1px solid #0B878B; display: flex; justify-content: space-between; align-items: center; padding: 30px; max-height: 100px; color: #FFF; font-size: 20px;}
.suggest-box .tel-txt {font-size: 36px;}

.suggest-box .f-address {width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: nowrap; align-items: center; padding-top: 30px;}
.suggest-box .logo {}
.suggest-box .logo .site-logo {width: 60px; height: 60px; float: left;}
.suggest-box .logo a {display: block; color: #222;}
.suggest-box .logo a h2 {display: inline-block; padding-top: 5px; margin-right: 30px;}
.suggest-box .f-accessbtn {margin-left: 20px;}
.suggest-box .f-accessbtn a {display: block; background-color: #0EA7AC; color: #FFF; border-radius: 5px; padding: 10px 20px; text-align: center;}
.suggest-box .f-accessbtn a:hover { text-decoration: none;}

/* 210608 */
.suggest-box .tel-attention {text-align: center; max-width: 1200px; margin: 10px auto 0; color: #C41134; font-size: 20px; font-weight: 700; line-height: 1.2;}
.bg-change02 .suggest-box .tel-attention {color: #FFEE00;}
.bg-change03 .suggest-box .tel-attention {color: #FFFFFF;}


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

.suggest-box {padding: 25px 0 15px 0; margin-top: 30px;}
.suggest-box .tel-box {display: block; padding: 0 10px;}
.suggest-box .tel-box .icon {margin-right: 0;}
.suggest-box .tel-reserve {width: 100%; padding: 10px; font-size: 14px;}
.suggest-box .tel-reserve span a { color: #0B878B; font-weight: 700;}
.suggest-box .tel-emergency {width: 100%; padding: 10px; font-size: 14px;}
.suggest-box .tel-emergency span a { color: #FFF; font-weight: 700;}
.suggest-box .tel-txt {font-size: 16px;}

.suggest-box .f-address {display: block; padding-top: 30px;}
.suggest-box .logo { margin: 0 20px 10px;}
.suggest-box p { margin: 0 20px 10px;}
.suggest-box .f-accessbtn { margin: 0 20px;}
}
@media print {
    .suggest-box .tel-reserve {font-size: 15px; padding: 20px;}
    .suggest-box .tel-emergency {font-size: 15px; padding: 20px;}
    .suggest-box .tel-txt {font-size: 15px;}
}

/* ---------------------------------------------------
	footer
------------------------------------------------------ */
#footer {position: relative; width: 100%; padding: 60px 0 10px; background-color: #085356;}
#footer .fnavi {display: flex; justify-content: space-between; width: 100%; max-width: 1200px; margin: 0 auto 60px;}
#footer .fnavi-list {max-width: 240px;}
#footer .fnavi-item {}
#footer .fnavi-item h2 {font-size: 100%; font-weight: bold; margin-bottom: 10px; color: #FFF;}
#footer .fnavi-item ul {margin-bottom: 40px;}
#footer .fnavi-item ul li {padding: 10px 0 10px 20px; position: relative; color: #FFF; font-size: 0.8334em; line-height: 1.4;}
#footer .fnavi-item ul li:before {content: ""; display: block; position: absolute; top: 50%; left: 10px; margin-top: -3px; width: 6px; height: 6px; background: url(../images/footer/icon-arrow.png) no-repeat top left; background-size: cover;}
#footer .fnavi-item ul li a {color: #FFF;}
#footer .f-copy { text-align: center; font-size: 12px; color: #FFF;}

#footer .f-contact .mail { margin-right: 30px;}
#footer .f-contact .mail a { display: block; border: 2px solid #37230E; background: rgba(255, 255, 255, 0.5); color: #37230E; letter-spacing: 0.1em; padding: 15px 20px;}
#footer .f-contact .mail img { margin-right: 10px;}
#footer .f-contact .tel { font-size: 40px; padding-top: 10px; color: #37230E;}
#footer .f-contact .tel img { display: inline-block; vertical-align: baseline; margin-right: 10px;}
#footer .f-contact .tel span { font-family: Arial; font-weight: bold; letter-spacing: 0.05em;}
#footer .f-info { display: flex; justify-content: center; width: 100%; margin: 0 auto 30px;}
#footer .f-info .f-logo { margin-top: 10px;}
#footer .map { text-decoration: underline;}
#footer address { margin-top: 25px; margin-left: 2%; font-size: 18px; line-height: 1.6; text-align: left;}
#footer address .number { display: flex;}
#footer address .tel { margin-right: 20px;}
#footer .f-txt { margin-bottom: 60px;}
#footer .pagetop { position: fixed; right: 0; bottom: 0; z-index: 2000; opacity: 0; transition: opacity .2s ease-out;}
#footer .pagetop a { display: block;}
#footer .pagetop.pagetop-on {opacity: 1;}

/* bg-change02 */
.bg-change02 #footer { background-color: #222;}
.bg-change02 #footer .fnavi-item h2 {color: #FFEE00;}
.bg-change02 #footer .fnavi-item ul li a {color: #FFEE00;}

/* bg-change03 */
.bg-change03 #footer { background-color: #03C;}

@media screen and (max-width: 767px) {
#footer {padding: 30px 0 50px;}
#footer .fnavi {display: block; margin: 0 auto 30px;}
#footer .fnavi-list {max-width: 100%;}
#footer .fnavi-item {padding: 0 10px;}
#footer .fnavi-item h2 {font-size: 100%; font-weight: bold; margin-bottom: 10px; color: #FFF; padding-bottom: 10px; border-bottom: 1px dotted #FFF; display: flex; justify-content: space-between;}
#footer .fnavi-item h2:after {content: "▼"; display: inline-block; color: #FFF; font-size: 10px; margin-right: 10px; line-height: 1rem;}
#footer .fnavi-item h2.fnavi-acd:after {content: "▲";}
#footer .fnavi-item ul {margin-bottom: 20px; display: none;}
#footer .f-copy {margin-bottom: 20px;}

#footer .f-contact .mail { margin-right: 30px;}
#footer .f-contact .mail a { display: block; border: 2px solid #37230E; background: rgba(255, 255, 255, 0.5); color: #37230E; letter-spacing: 0.1em; padding: 15px 20px;}
#footer .f-contact .mail img { margin-right: 10px;}
#footer .f-contact .tel { font-size: 40px; padding-top: 10px; color: #37230E;}
#footer .f-contact .tel img { display: inline-block; vertical-align: baseline; margin-right: 10px;}
#footer .f-contact .tel span { font-family: Arial; font-weight: bold; letter-spacing: 0.05em;}
#footer .f-info { display: flex; justify-content: center; width: 100%; margin: 0 auto 30px;}
#footer .f-info .f-logo { margin-top: 10px;}
#footer .map { text-decoration: underline;}
#footer address { margin-top: 25px; margin-left: 2%; font-size: 18px; line-height: 1.6; text-align: left;}
#footer address .number { display: flex;}
#footer address .tel { margin-right: 20px;}
#footer .f-txt { margin-bottom: 60px;}

#footer .pagetop {width: 60px; height: 60px;}
#footer .pagetop.pagetop-on {opacity: 1;}

	.pc-only { display: none!important;}
	.sp-only { display: block;}
}


@media print {
    #footer {display: none;}
}


/* common */
.pc_block {
  display: block;
}

.sp_block {
  display: none;
}

.pc_inline {
  display: inline;
}

.sp_inline {
  display: none;
}

.pc_hidden {
  display: none !important;
}


@media screen and (max-width: 767px) {
  .pc_block {
    display: none;
  }

  .sp_block {
    display: block;
  }

  .pc_inline {
    display: none;
  }

  .sp_inline {
    display: inline;
  }

  .sp_hidden {
    display: none !important;
  }

  .pc_hidden {
    display: block !important;
  }
}

/*
@media screen and (max-width: 768px) {
  #footer .f-contact {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
	.sp_tel a {
		text-decoration: none;
	}
	.sp_tel a:hover {
		opacity: 1;
	}
	#content {
		padding-top: 70px;
	}
	#header {
		height: auto;
		padding: 10px 0;
	}
	#header .btn_menu {
	  display: none;
	  position: fixed;
	  right: 15px;
	  padding-top: 8px;
	  text-align: center;
	  z-index: 9999;
	}
	#header .btn_menu .btn_menu_close {
	  display: none;
	}
	#header #gnav {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		margin: 0 auto;
		background: rgba(255, 255, 255, 0.95);
		z-index: 9998;
		-webkit-overflow-scrolling: touch;
	  }
	  #header #gnav > ul {
		display: block;
		padding-top: 60px;
		  text-align: center;
	  }
	  #header #gnav > ul > li {
		margin: 0;
		  padding: 20px 0;
	  }
	  #header #gnav > ul > li a {
		  font-size: 20px;
		  font-weight: bold;
	  }
	  #header #gnav > ul > li a:hover {
		background: none;
	  }
	  #header #gnav > ul > li a.current {
		background: none;
	  }
	  #header .btn_menu {
		display: block;
	  }
	#header .scr_header {
		display: none!important;
	}
	#header .h-left {
		width: 40%;
		margin-left: 27%;
	}

	#footer {
		padding-bottom: 80px;
	}
	#footer .f-contact {
		display: block;
		width: 100%;
		margin: 0 auto 50px;
	}
	#footer .mail {
		margin: 0 auto 50px;
    width: 100%;
	}
	#footer .f-contact .tel {
    width: 100%;
    padding-left: 5%;
	}
	#footer .f-contact .tel .sp_tel a {
		font-weight: bold;
		letter-spacing: 0.025em;
	}
	#footer .f-contact .tel .sp_tel a:hover {

		opacity: 1;
	}
  #footer .f-logo {
    width: 100%;
  }
	#footer .f-info {
		display: block;
		width: 100%;
	}
	#footer .f-logo img {
		width: 50%;
	}
	#footer address {
		margin-left: 0;
		text-align: center;
    width: 100%;
	}
	#footer address .number {
		display: block;
	}
	#footer address .number .tel {
		margin-right: 0;
	}

	#footer .sp-footer {
	  display: flex;
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  z-index: 3000;
	}
	#footer .sp-footer a {
	  flex-grow: 1;
	  display: block;
	  width: calc(50% - 30px);
	  height: 60px;
	  background: #E7C008;
	  padding: 5px 5px;
	  line-height: 50px;
	  text-align: center;
	}
	#footer .sp-footer a:nth-of-type(2) {
	  background: #5E9303;
	}
	#footer .sp-footer a:nth-of-type(3) {
	  width: 60px;
	  background: #1F1F1F;
	}
	#footer .sp-footer a img {
	  vertical-align: middle;
	}
	#footer .sp-footer a:hover {
		opacity: 1;
	}
}
*/

/* ---------------------------------------------------
	bg-change 背景色変更用
------------------------------------------------------ */

.bg-change01 { background-color: #FFF;}
.bg-change02 { background-color: #000;}
.bg-change03 { background-color: #03C;}

.bg-change02 #header {color: #FFEE00;}
.bg-change02 #header .header-logo a h1, .bg-change02 #header .header-logo a p {color: #FFEE00;}
.bg-change02 #header a:link, .bg-change02 #header a:visited {color: #FFEE00;}
/*.bg-change02 .nav-btn-pc img { filter: brightness(500%) contrast(500%);}*/
/*.bg-change02 a:link, .bg-change02 a:visited {color: #fff;}*/
.bg-change02 .suggest-box .f-address p {color: #FFEE00;}
.bg-change02 .suggest-box .logo a {color: #FFEE00;}
.bg-change02 .suggest-box .tel-reserve {color: #FFEE00;}
.bg-change02 .suggest-box .tel-reserve img {filter: grayscale(100%) brightness(500%) contrast(500%);}

.bg-change03 #header {color: #FFFFFF;}
.bg-change03 #header .header-logo a h1, .bg-change03 #header .header-logo a p {color: #FFFFFF;}
.bg-change03 #header a:link, .bg-change03 #header a:visited {color: #FFFFFF;}
.bg-change03 .suggest-box .f-address p {color: #FFFFFF;}
.bg-change03 .suggest-box .logo a {color: #FFFFFF;}
.bg-change03 .suggest-box .tel-reserve {color: #FFFFFF;}
.bg-change03 .suggest-box .tel-reserve img {filter: grayscale(100%) brightness(500%) contrast(500%);}


/* ---------------------------------------------------
	font-size-change
------------------------------------------------------ */

.is-fs-m {font-size: 125%;}
.is-fs-l {font-size: 140%;}