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

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 896px) {
	#page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

.EN {font-family: 'Raleway', sans-serif;}
.mincho {font-family: 'Noto Serif JP', serif;}

.bgWH {background-color: #FFF;}
.bgBR {background-color: #D88D00;}
.bgBE {background-color: #FBF3E5;}
.bgGR {background-color: #08985B;}
.bgGRY {background-color: #EEEEEE;}
.txtWH {color: #FFF;}
.txtBL {color: #015FAD;}
.txtBR {color: #D88D00;}
.txtGR {color: #4A8308;}
.bBR {border-color: #BF9D63;}
.bDBL {border-color: #2F3B49;}

.clone-nav {position: fixed;top: 0;left: 0;z-index: 2; width: 100%; transition: .3s; transform: translateY(-100%);}
.is-show {transform: translateY(0);}
.clone-nav {text-align: center; width: 100%; background: #FFF;}

.ratioBox {position: relative;width: 100%;height: auto;}
.ratio1-1:before {content: "";display: block;padding-top: 100%; /* 1:1 */}
.ratio2-1:before {content: "";display: block;padding-top: 50%; /* 2:1 */}
.ratio3-2:before {content: "";display: block;padding-top: 66%; /* 3:2 */}
.ratio4-3:before {content: "";display: block;padding-top: 75%; /* 4:3 */}
.ratioInner {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}

main {min-height: 2000px;}
#header {position: relative; width: 100%;}
#header h1 {padding: 10px;}
.logo {height: 71px;}
#header .logo a {padding: 33px 30px; background: #FFF; display: block;}
.menu:hover > a {background: #E1F4C4;}
.child_menu > li > a:hover {background: #FFF;}
.child_menu {width: 100%; left: 0; color: #222; background: #E1F4C4;}
.menu:hover .child_menu {visibility: visible;}
.child_menu a:hover {color: #222; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
#hanburger {display: none;}
.menu_button {width: 55px; height: 55px; position: fixed; top: 0; right: 0; background: #25B19E; z-index: 15;}
#hanburger:checked ~ .menu_button {top: 0;}
#hanburger:checked ~ .span2 {display: none;}
#hanburger:checked ~ .span1 {width: 34px; transform: rotate(45deg); top: 27px; right: 11px;}
#hanburger:checked ~ .span3 {width: 34px; transform: rotate(-45deg); top: 27px; right: 11px;}
.global_menu {visibility: hidden; width: 100%; height: 100%; position: fixed; top: 0; left: 0; color: #222; overflow-y: scroll; text-align: center; background: #FFF;}
#hanburger:checked ~ .global_menu {visibility: visible;}
.global_menu a {display: block; width: 100%; padding: 10px 15px; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.global_menu a:hover {background: #B9E278;}
.menu {font-size: 20px; line-height: 40px; font-weight: bold; white-space: nowrap; display: inline-block;}
.menu .pd {display: none;}
.menu:last-child {margin-right: 0px;}
.child_menu > li > a {padding: 10px 20px; text-align: left;}
#hanburger,.spOnly {display: none;}
@media screen and (min-width: 896px) {
  .menu_button {display: none;}
  .global_menu {position: inherit; padding: 0; color: #fff; visibility: visible; overflow-y: visible; height: auto; width: auto;}
  .menu:hover > a {background: #B9E278;}
  .child_menu {width: 100%; position: absolute; top: 0; left: 0; padding: 10px; color: #222; background: #B9E278; visibility: hidden; opacity: 0; transition: .5s top, .5s opacity; z-index: 10;}
  .menu:hover .child_menu {visibility: visible; top: 109px; opacity: 1;}
  .child_menu > li {display: inline-block;}
  .child_menu > li > ul > li a {padding: 10px; position: relative; padding: 10px;}
}
@media screen and (max-width: 896px) {
  #header .spOnly {display: block;}
  span.span1,span.span2,span.span3 {width: 29px; height: 1px; background-color: #FFF; position: absolute; right: 13px; transition: .3s; z-index: 100; position: fixed;}
  .span1 {top: 17px;}
  .span2 {top: 27px;}
  .span3 {top: 37px;}
  .menu {display: block;}
  .menu > a {padding: 10px 15px; text-align: left; border-bottom: 1px solid #CCC;}
  .menu > a span {margin-right: 10px; width: 30px!important;}
  .menu > a span img {width: 100%;}
  .global_menu {z-index: 10;}
  .global_menu a {border-top-left-radius: 0; border-top-right-radius: 0;}
  .child_menu > li > a,.child_menu > li > ul > li a {padding: 10px 15px; color: #222; text-align: left; border-bottom: 1px dotted #999;}
  .child_menu > li > ul > li a {padding: 15px 20px 15px 35px; position: relative;}
  .child_menu > li > ul > li:last-child a {border-bottom: 1px solid #CCC;}
  .child_menu > li > ul > li a::before {border-top: solid 1px #222; content: ''; left: 20px; position: absolute; top: 50%; width: 10px;}
  .menu .pd {display: inline-block; width: 100%; position: absolute; top: 0; left: 0; height: 100%;}
  .menu_wrap {display: none;}
  #hanburger:checked ~ * .menu_wrap {display: block; opacity: 1; min-height: 100vh; background: rgba(255,255,255,.8); /*position: fixed;*/ top: 0; z-index: 5;}
  #hanburger:checked ~ * .menu {max-height: inherit; overflow-y: visible; padding: 0; margin-left: 0; position: relative;}
  #hanburger:checked ~ * .child_menu {max-height: 0; overflow-y: hidden; visibility: hidden; text-align: left;}
  .menu .child_menu {border-top: 1px solid #DDD; position: relative; opacity: 1; top: 0; margin-left: auto; left: auto; width: auto;}
  .child_menu li {display: block;}
  .menu > label:hover {cursor: pointer; cursor: hand;}
  .menu input[type="checkbox"]:checked ~ .child_menu {max-height: inherit!important; overflow-y: visible; visibility: visible!important;}
  /*
  .angletoggle:before {content: "\f107";}
  #nav input[type="checkbox"]:checked ~ * .angletoggle:before {content: "\f106";}
  */
}

footer {padding: 40px 0; border-top: 5px solid #FF0000; background-color: #015FAD;}
/* footer #fnavi ul {letter-spacing: -.4em; margin: 0 0 5px;}
footer #fnavi ul > li {margin: 0 20px 10px; letter-spacing: normal; display: inline-block; position:relative;}
footer #fnavi ul > li a:hover {text-decoration: underline;}
footer #fnavi ul > li::after {content: ""; display: inline-block; width: 1px; height: 20px; background-color: #999999; position: absolute; top: 0; right: -20px;}
footer #fnavi ul > li:first-child {margin: 0 20px 10px 0;}
footer #fnavi ul > li:last-child {margin: 0 0 10px 20px;}
footer #fnavi ul > li:last-child::after {background-color: #FFF; width: 0; right: 0;} */
.footCopy {text-align: center; color: #fff;}
.footCopy small {font-size: 14px;}
#ftNavi {display: none;}
@media screen and (max-width: 950px) {
  footer .logo {width: 300px;}
}
@media screen and (max-width: 896px) {
	footer {margin-bottom: 0px; padding: 40px 0;}
  footer #fnavi {width: 100%;}
	#ftNavi {display: block; background: #4A8308; letter-spacing: -.4em; position: fixed; z-index: 5; bottom: 0; border-top: 1px solid #FFF; width: 100%;}
	#ftNavi ul {text-align: center; font-size: 10px; font-weight: bold;}
	#ftNavi li {letter-spacing: normal; display: inline-block; width: 25%;}
	#ftNavi li a {display: block; padding: 5px 0; color: #FFF; border-left: 1px solid #5CA20B; border-right: 1px solid #3C6C04;}
	#ftNavi li:first-child a {border-left: none;}
	#ftNavi li:last-child a {border-right: none;}
	#ftNavi li span {width: 24px; margin: 0 auto 5px; display: block;}
}
@media screen and (max-width: 530px) {
  footer #fnavi ul > li,footer #fnavi ul > li:last-child {margin: 0 10px 10px 10px;}
  footer #fnavi ul > li:first-child {margin: 0 0 10px 0; display: block;}
  footer #fnavi ul > li::after {right: -10px;}
  footer #fnavi ul > li:first-child::after {background-color: #FFF; width: 0; right: 0;}
}

.w1300 {width: 100%; max-width: 1332px; padding-left: 0; padding-right: 0;}
.w1500 {width: 100%; max-width: 1520px; padding-left: 0; padding-right: 0;}
.container {width: 100%; max-width: 1280px; padding-left: 0; padding-right: 0;}
.containers {width: calc(100% - 40px); max-width: 888px; padding-left: 0; padding-right: 0;}
.mlr,.container,.containers {margin-left: auto; margin-right: auto;}
.mlr5 {margin-left: 5px; margin-right: 5px;}
.mlr20,.col1,.col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {margin-left: 20px; margin-right: 20px;}
.col1 {width: calc(16.6666% - 40px);}
.col2,.box3 {width: calc(33.3333% - 40px);}
.col3 {width: calc(50% - 40px);}
.col4 {width: calc(66.6666% - 40px);}
.col5 {width: calc(83.3333% - 40px);}
.col6 {width: calc(100% - 40px);}
.box4 {width: calc(25% - 40px); margin-left: 20px; margin-right: 20px;}
.w300 {max-width: 300px; width: 100%;}
.w100 {width: 100%;}
.w50 {width: 50%;}
.w46 {width: calc(46% - 50px);}
.w54 {width: calc(54% - 50px);}
@media screen and (max-width: 896px) {
  .containers {width: calc(100% - 30px);}
  .mlr20,.col1,.col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {margin-left: 15px; margin-right: 15px;}
  .mlr5 {margin-left: 0; margin-right: 0;}
  .col1 {width: calc(16.6666% - 30px);}
  .col2,.box3 {width: calc(33.3333% - 30px);}
  .col3 {width: calc(50% - 30px);}
  .col4 {width: calc(66.6666% - 30px);}
  .col5 {width: calc(83.3333% - 30px);}
  .col6 {width: calc(100% - 30px);}
  .w46 {width: calc(46% - 30px);}
  .w54 {width: calc(54% - 30px);}
  .box4 {width: calc(50% - 30px); margin-left: 15px; margin-right: 15px;}
}
@media screen and (max-width: 568px) {
  .col1 {width: calc(33.3333% - 30px);}
  .col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {width: calc(100% - 30px);}
  /* .box4 {width: calc(50% - 7.5px); margin-left: 0; margin-right: 0;} */
}

ul.dot {list-style: disc; margin-left: 1.5em;}
ul.num {list-style: decimal; margin-left: 1.5em;}

table {width: 100%;}
table tr:nth-child(odd) {background-color: #FFF;}
table tr:nth-child(even) {background-color: #EEEEEE;}
table th,table td {padding: 10px 20px; line-height: 1.7; text-align: center; border: 1px solid #CCCCCC;}
table.tblGR th {width: 25%; background: #4A8308; color: #FFF;}
table.tblGR2 th {width: 280px; background: #4A8308; color: #FFF;}
table.tblGR2 td {text-align: left; width: calc(100% - 250px);}
@media screen and (max-width: 568px) {
  table.tblGR th,table.tblGR td {padding: 10px 5px;}
  table.tblGR2 th,table.tblGR2 td {width: 100%; display: block;}
  table.tblGR2 td {border-top: none;}
}




/*  */
/*====================================================================================================

    library

====================================================================================================*/


/* Header
--------------------------------------------------------------------------------------------------- */
#gheader {position: relative;margin: 0 auto;background: #fbc114;z-index: 2000;}

#gheader .logo {margin: 0;}

#gheader .unav {margin: 0;padding: 0;white-space: nowrap;}

#gheader .unav>li {display: inline-block;vertical-align: middle;}

#gheader .unav>li:nth-child(n+2) {margin-left: 10px;}

@media screen and (min-width: 897px) {#gheader {  position: fixed;  top: 0;  right: 0;  left: 0;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;  padding: 0 45px;}
}

@media screen and (max-width: 896px) {#gheader .logo {  position: relative;  padding: 15px 0 15px 15px;  width: 106px;  z-index: 100;}

  #gheader .logo img {  width: 106px;  height: auto;}

  .is_jsrun #gheader {  position: fixed;  top: 0;  right: 0;  left: 0;}

  .is_jsrun #gheader .logo {  margin-bottom: 0;}
}

/* GlobalNavigation
--------------------------------------------------------------------------------------------------- */
/* #gnav ul {margin: 0;font-family: "Roboto Condensed", sans-serif;} */

#gnav ul>li a {color: #ffffff;text-decoration: none;}

#gnav .nav>li>a>span {color: rgba(255, 255, 255, 0.8); padding: 0;}

#gnav .nav>li>a>span::before {content: attr(data-en-text);color: #ffffff;white-space: nowrap;}

#gnav .social {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}

#gnav .social>li span {position: relative;background-image: url("../../images/common/mod_img_sprite.png");overflow: hidden;display: inline-block;text-indent: 200%;white-space: nowrap;vertical-align: middle;line-height: 1;}

#gnav .social>li.twitter span {width: 24px;height: 24px;background-position: -29px -68px;background-size: 154px 92px;}

#gnav .social>li.facebook span {width: 11px;height: 21px;background-position: -109px -51px;background-size: 154px 92px;}

#gnav .social>li.instagram span {width: 24px;height: 24px;background-position: -60px -38px;background-size: 154px 92px;}

#gnav .social>li:nth-of-type(n+2) {margin-left: 30px;}

@media screen and (min-width: 897px) {#gnav {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-flex: 1;  -ms-flex-positive: 1;  flex-grow: 1;}

  #gnav .menu {  display: none;}

  #gnav .wrap,
  #gnav .inner {  width: 100%;}

  #gnav .inner {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-flex: 1;  -ms-flex-positive: 1;  flex-grow: 1;}

  #gnav .nav {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center;  -webkit-box-flex: 1;  -ms-flex-positive: 1;  flex-grow: 1;  font-size: 1rem;}

  #gnav .nav>li>a {  display: block;}

  #gnav .nav>li>a>span {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;  -ms-flex-direction: column;  flex-direction: column;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;  -webkit-box-sizing: border-box;  box-sizing: border-box;  padding: 18px 0;  height: 80px;  text-align: center;  -webkit-transition: color .3s linear;  transition: color .3s linear;}


  #gnav .nav>li>a:hover>span {  color: rgba(164, 36, 37, 0.8);}

  #gnav .nav>li>a:hover>span::before {  color: #a42425;}

  #gnav .nav>li.is_current>a>span,
  #gnav .nav>li.is_current>a>span::before {  color: #a42425;}

  #gnav .nav>li .subnav {  position: absolute;  top: 80px;  right: 0;  left: 0;  overflow: hidden;  height: 0;  background: rgba(255, 252, 243, 0.95); text-align: center;  z-index: 1000;  -webkit-transition: height .3s ease;  transition: height .3s ease;  font-size: 1.4rem;  line-height: 1.57143;}

  #gnav .nav>li .subnav ul {  display: -webkit-inline-box;  display: -ms-inline-flexbox;  display: inline-flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-align: start;  -ms-flex-align: start;  align-items: flex-start;  margin: 0 auto;  padding: 107px 0 30px 0;  min-height: 300px;}

  #gnav .nav>li .subnav ul>li {  position: relative;  margin: 0 40px 50px 0;}

  #gnav .nav>li .subnav ul>li figure {  display: block;  -webkit-transition: opacity .3s ease;  transition: opacity .3s ease;}

  #gnav .nav>li .subnav ul>li a {  display: block;  -webkit-box-sizing: border-box;  box-sizing: border-box;  margin-top: 10px;  padding: 0 20px 0 0;  width: 190px;  color: #333333;  text-decoration: none;  -webkit-transition: color .3s ease;  transition: color .3s ease;}

  #gnav .nav>li .subnav ul>li a::after {  font-family: "icon";  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  font-style: normal;  font-variant: normal;  font-weight: normal;  text-decoration: none;  text-transform: none;  font-size: 10px;  vertical-align: middle;  content: "";}

  #gnav .nav>li .subnav ul>li a::before {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  content: "";}

  #gnav .nav>li .subnav ul>li a::after {  position: absolute;  top: calc(50% + 78px);  right: 0;  display: inline-block;  -webkit-transform: translateY(-50%) scale(0.5);  transform: translateY(-50%) scale(0.5);  -webkit-transform-origin: 100% 50%;  transform-origin: 100% 50%;}

  #gnav .nav>li .subnav ul>li a[href*="/cmt/product/"]::after {  top: calc(50% + 88px);}

  #gnav .nav>li .subnav ul>li:first-child {  display: none;}

  #gnav .nav>li .subnav ul>li:hover figure {  opacity: .6;}

  #gnav .nav>li .subnav ul>li:hover a {  color: #fbc114;}

  #gnav .nav>li.sub>a {  position: relative;}

  #gnav .nav>li.sub>a::after {  position: absolute;  bottom: 0;  left: 50%;  display: none;  -webkit-transform: translateX(-50%);  transform: translateX(-50%);  content: "";  border: solid #fffcf3;  border-color: transparent transparent #fffcf3;  border-width: 0 10px 20px;  width: 0;  line-height: 1;}

  #gnav .nav>li.sub:hover>a>span::after {  display: block;}

  #gnav .nav>li:nth-of-type(n+2) {  margin-left: 2.5vw;}

  #gnav .social>li a span::before {  position: absolute;  top: 0;  left: 0;  content: "";  opacity: 0;  -webkit-transition: opacity .3s linear;  transition: opacity .3s linear;  background-image: url("../../images/common/mod_img_sprite.png");  overflow: hidden;  display: inline-block;  text-indent: 200%;  white-space: nowrap;  vertical-align: middle;  line-height: 1;}

  #gnav .social>li a:hover span::before {  opacity: 1;}

  #gnav .social>li.twitter a span::before {  width: 24px;  height: 24px;  background-position: -58px -68px;  background-size: 154px 92px;}

  #gnav .social>li.facebook a span::before {  width: 11px;  height: 21px;  background-position: -125px -51px;  background-size: 154px 92px;}

  #gnav .social>li.instagram a span::before {  width: 24px;  height: 24px;  background-position: 0px -68px;  background-size: 154px 92px;}
}

@media screen and (max-width: 896px) {#gnav {  top: 0;  right: 0;  left: 0;  z-index: 10;}

  #gnav .menu {  position: absolute;  top: 20px;  right: 15px;  overflow: hidden;  width: 20px;  height: 20px;  z-index: 10;}

  #gnav .menu span {  display: block;  overflow: hidden;  width: 20px;  height: 20px;  text-indent: 200%;  white-space: nowrap;}

  #gnav .menu span::before,
  #gnav .menu span::after {  position: absolute;  left: 0;  content: "";  -webkit-transition: top .3s linear;  transition: top .3s linear;  background-image: url("../../images/common/mod_img_sprite.png");  overflow: hidden;  display: inline-block;  text-indent: 200%;  white-space: nowrap;  vertical-align: middle;  line-height: 1;}

  #gnav .menu span::before {  top: 0;  width: 20px;  height: 20px;  background-position: -134px -13px;  background-size: 154px 92px;}

  #gnav .menu span::after {  top: -20px;  width: 20px;  height: 20px;  background-position: -109px -13px;  background-size: 154px 92px;}

  #gnav .menu.is_open span::before {  top: 20px;}

  #gnav .menu.is_open span::after {  top: 0;}

  #gnav .wrap {  -webkit-box-sizing: border-box;  box-sizing: border-box;  padding: 100px 0 50px;  background: #fbc114;}

  #gnav .inner {  overflow: auto;  padding: 0 50px;  height: 100%;  z-index: 5;}

  #gnav .inner .nav {  margin-bottom: 55px;  font-family: "Roboto Condensed", sans-serif;  font-size: 1.1rem;}

  #gnav .inner .nav>li figure {  display: none;}

  #gnav .inner .nav>li a {  position: relative;  display: block;  text-decoration: none;}

  #gnav .inner .nav>li a[class*="is_"]::before,
  #gnav .inner .nav>li a[class*="is_"]::after {  position: absolute;  content: "";}

  #gnav .inner .nav>li a>span[data-en-text] {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;}

  #gnav .inner .nav>li a>span[data-en-text]::before {  margin-right: 20px;  letter-spacing: .7px;  font-size: 18px;  line-height: 3.15789;}

  #gnav .inner .nav li:nth-of-type(n+2) {  border-top: 1px solid #ffffff;}

  #gnav .inner .subnav {  margin-bottom: 10px;  border-top: 1px solid #ffffff;  font-size: 1.4rem;  line-height: 1.78571;}

  #gnav .inner .subnav ul>li a {  padding: 10px 0 10px 15px;}

  .is_jsrun #gnav {  position: absolute;}

  .is_jsrun #gnav .wrap,
  .is_jsrun #gnav .subnav {  display: none;}

  .is_jsrun #gnav .wrap {  position: absolute;  top: 0;  right: 0;  left: 0;  height: 100vh;}

  .is_jsrun #gnav li.sub>a {  position: relative;}

  .is_jsrun #gnav li.sub>a::before,
  .is_jsrun #gnav li.sub>a::after {  position: absolute;  top: 50%;  right: 0;  border-bottom: 2px solid #ffffff;  width: 14px;  content: "";  -webkit-transition: -webkit-transform .3s ease;  transition: -webkit-transform .3s ease;  transition: transform .3s ease;  transition: transform .3s ease, -webkit-transform .3s ease;  -webkit-transform: translateY(-50%);  transform: translateY(-50%);}

  .is_jsrun #gnav li.sub>a::before {  -webkit-transform: translateY(-50%) rotate(90deg);  transform: translateY(-50%) rotate(90deg);}

  .is_jsrun #gnav li.sub>a.is_open::before {  -webkit-transform: translateY(-50%) rotate(0deg);  transform: translateY(-50%) rotate(0deg);}
}


@media screen and (max-width: 896px) {#gfooter>.inner .message img {  width: 100%;  height: auto;}

  #gfooter>.inner .content {  padding: 40px 0;}

  #gfooter>.inner .content .unav {  width: 250px;  text-align: center;}

  #gfooter>.inner .content .unav>li {  width: 108px;}

  #gfooter>.inner .content .unav>li:nth-of-type(even) {  margin-left: 34px;}

  #gfooter>.inner .content .unav>li:nth-of-type(n+3) {  margin-top: 30px;}

  #gfooter>.inner .content .unav>li .en {  font-size: 1.4rem;}

  #gfooter>.inner .content .social {  margin: 35px auto 0;}

  #gfooter .spBnr {  padding: 22px 0 0;  background: #ffffff;}

  #gfooter .spBnr img {  width: 100%;}

  #gfooter .otsuka {  background: #ffffff;}

  #gfooter .otsuka>.inner {  padding: 22px 0 0 22px;}

  #gfooter .otsuka>.inner .logo {  margin: 0 0 20px;}

  #gfooter .otsuka>.inner .logo img {  width: 165px;  height: auto;}

  #gfooter .otsuka>.inner .unav {  display: none;}

  #gfooter .otsuka>.inner02 {  text-align: center;  font-size: 1rem;}

  #gfooter .otsuka>.inner02 .unav02 {  margin: 0 43px 30px;}

  #gfooter .otsuka>.inner02 .unav02>li {  -webkit-box-sizing: border-box;  box-sizing: border-box;  width: 49%;  line-height: 1;  text-align: left;  white-space: nowrap;  display: inline-block;  vertical-align: middle;}

  #gfooter .otsuka>.inner02 .unav02>li:nth-of-type(2n) {  border-left: 1px solid #000000;  padding-left: 35px;}

  #gfooter .otsuka>.inner02 .unav02>li:nth-of-type(n+3) {  margin-top: 15px;}

  #gfooter .otsuka>.inner02 a {  color: #333333;  text-decoration: none;}

  #gfooter .otsuka>.inner02 .copyright {  background: #000000;  line-height: 30px;}

  #gfooter .otsuka>.inner02 .copyright a {  color: #ffffff;}
}



/* ※※ module
--------------------------------------------------------------------------------------------------- */
/*====================================================================================================

    unique

====================================================================================================*/
/* home
--------------------------------------------------------------------------------------------------- */
#document.home>.bg {position: absolute;top: 0;left: 0;background-color: #FF0000;z-index: -1;}

@media screen and (min-width: 897px) {
  /* #document.home {  min-width: 1200px;} */

  #document.home>.bg {  bottom: 0;  max-width: 594px; width: calc(33vw + 5px);  height: calc(((100vw - 280px) * (1060 / 1220)) + 80px);  min-height: 1010px;  -webkit-transition: height .8s linear .6s;  transition: height .8s linear .6s;}
}

@media screen and (max-width: 896px) {
  #document.home>.bg {  width: 105px;  height: calc(((100vw - 35px) * (960 / 680)) + 450px);}
}

#document.home #container,
#document.home #mainContents {padding: 0;}

@media screen and (min-width: 897px) {
  #document.home .m_section {  margin: 0 auto;  width: 980px;}
}

@media screen and (min-width: 897px) {
  #document.home #gheader.is_static {  position: absolute;  top: 0;  right: auto;  left: 0;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;  -ms-flex-direction: column;  flex-direction: column;  -webkit-box-sizing: border-box;  box-sizing: border-box;  padding: 171px 40px 45px 135px;  width: 280px;  height: calc(100vh - 85px);  min-height: 726px;  max-height: 1010px;  background: none;}

  #document.home #gheader.is_static .logo {  text-align: center;}

  #document.home #gheader.is_static .logo img {  width: 173px;  height: auto;}
}

@media screen and (max-width: 896px) {
  #document.home #gheader.is_static {  position: absolute;  background: none;}
}

@media screen and (min-width: 897px) {
  #document.home #gheader.is_static #gnav {  -webkit-box-orient: vertical;  -webkit-box-direction: normal;  -ms-flex-direction: column;  flex-direction: column;}

  #document.home #gheader.is_static #gnav .wrap {  height: 100%;}

  #document.home #gheader.is_static #gnav .inner,
  #document.home #gheader.is_static #gnav .nav {  -webkit-box-orient: vertical;  -webkit-box-direction: normal;  -ms-flex-direction: column;  flex-direction: column;  -webkit-box-pack: start;  -ms-flex-pack: start;  justify-content: flex-start;  height: auto;}

  #document.home #gheader.is_static #gnav .nav {  margin-top: 10px;  margin-bottom: 90px;  width: 200px;  text-align: left;}

  #document.home #gheader.is_static #gnav .nav>li>a>span {  -webkit-box-align: start;  -ms-flex-align: start;  align-items: flex-start;  padding: 0;  height: auto;  text-align: left;}

  #document.home #gheader.is_static #gnav .nav>li .subnav {  top: 0;  right: auto;  left: 240px;  width: 0;  height: auto;  z-index: 1000;  -webkit-transition: width .3s ease;  transition: width .3s ease;}

  #document.home #gheader.is_static #gnav .nav>li .subnav ul {  padding: 107px 50px 80px 80px;  width: calc(100vw - 330px);}

  #document.home #gheader.is_static #gnav .nav>li.sub>a {  position: relative;}

  #document.home #gheader.is_static #gnav .nav>li.sub>a::after {  top: 50%;  right: 0;  bottom: auto;  left: auto;  opacity: .95;  -webkit-transform: translateY(-50%);  transform: translateY(-50%);  content: "";  border: solid #fffcf3;  border-color: transparent #fffcf3 transparent transparent;  border-width: 10px 20px 10px 0;  width: 0;  line-height: 1;}

  #document.home #gheader.is_static #gnav .nav>li.sub:hover .subnav {  width: calc(100vw - 240px);}

  #document.home #gheader.is_static #gnav .nav>li.sub:hover>a::after {  display: block;}

  #document.home #gheader.is_static #gnav .nav>li.--img {margin-top: 0px;}
  #document.home #gheader.is_static #gnav .nav>li:nth-of-type(n+2) {  margin-left: 0;}

  #document.home #gheader.is_static #gnav .nav>li:nth-of-type(n+2)>a>span {  margin-top: 20px;}
}

@media screen and (min-width: 897px) {
  #document.home #container {  padding-top: 0;  width: auto;}
}

#document.home #mainvisual {position: relative;}

#document.home #mainvisual img {width: 100%;height: auto;}







/* カスタマイズ */
@keyframes blink {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

#document{overflow: hidden;}
#gnav .nav>li>a>span::before {  display: block;  letter-spacing: 1px;  -webkit-transition: color .3s linear;  transition: color .3s linear;  font-size: 26px;  line-height: 1.33333; font-weight: 700;}

#mainHeader{background-color: white; padding: 25px 40px; position: relative; z-index: 0;}
#mainvisual{position: relative; z-index: 100;}
#document.home #mainvisual {  margin: -60px 0 0 370px;}
#document.home > .bg .op-logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 120px;}
#document.home > .bg .op-logo.loading {animation: blink 1.5s ease-in-out infinite;}
#document.home > .bg {transition: width 0.5s ease-out; overflow: hidden;}
#document.home #gheader.is_static #gnav .nav>li>a{position: relative;}
#document.home #gheader.is_static #gnav .nav>li>a::before{position: absolute; height: 1px; content: ""; background-color: white; width: 111px; bottom: -10px;}
#document.home #gheader.is_static #gnav .nav>li>a.--img::before{display: none;}

.bgSky{background-size: cover; background-repeat: no-repeat; background-position: center; padding: 60px 0; position: relative; z-index: 0; overflow: hidden;}
.bgSky::after{background-image: url(../img/top/01-06.webp); content: ""; position: absolute; background-position: center; background-size: cover; width: 100%; height: 100%; background-repeat: no-repeat; z-index: -1;}
.bgSky::before{position: absolute; content: ""; background-color: #F7F6EA; width: 100vw; height: calc(50% + 60px); bottom: -60px; left: 50%; transform: translateX(-50%); z-index: -2; }
.bgSky>.inner{width: calc(100% - 200px);}


#contact{border-top: 2px solid #08985B; border-bottom: 2px solid #08985B; background-color: #F7F6EA; padding: 40px; position: relative; z-index: 3;}
#contact .bgGR{color: #ffffff; padding: 8px 40px; border-radius: 11px;}
#contact .bgWH{background-color: white; padding: 4px 40px; border-radius: 11px; border: 2px solid #08985B; gap: 40px;}
#contact .bgWH .txt40{margin-left: 20px;}
#contact .bgWH .img img{max-width: 100px;}
/* #contact .contact_tel{} */


.paralax{position: relative; z-index: 0;}
.paralax::before{position: absolute; z-index: -1; content: ""; top: 0; width: var(--before-width); height: var(--before-height); background-color: #00a2e6; min-height: 375px; overflow-x: hidden;}
.paralax.--right::before{left: 0;}
.paralax.--left::before{right: 0}
.paralax.--right .title{width: 185px; margin-right: 20px; color: white;}
.paralax.--left .title{width: 185px; margin-left: 20px; color: white;}
.paralax.--left .title{writing-mode: vertical-lr; }
.paralax.--right .title{writing-mode: vertical-rl; }
.paralax .title span{writing-mode: initial;}
.paralax .textContent{width: calc(100% - 205px); background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative;}
.paralax .textContent .inner{max-width: 791px; padding: 50px 20px 50px 5vw; background-color: rgba(247, 255, 185, 0.9);}

#shogaku.paralax::before,
#chugaku.paralax::before,
#koukou.paralax::before{background-color: #FF0000;}
#kobetsu.paralax::before{background-color: #005EAD; width: 100%;}
#bijutsu.paralax::before{background-color: #7100AD; width: 100%;}
#kobetsu.paralax .textContent .inner,#bijutsu.paralax .textContent .inner{background-color: rgba(188, 255, 255, 0.6);}
/* #koukou.paralax::before{background-color: ;} */


.flow{background-color: #F7F6EA;}
.flow .box4{background-color: #3FAAF6; padding: 84px 32px 40px; color: #fff; position: relative;}
.flow .box4 .num{color: #3FAAF6; background-color: #fff; font-size: 80px; border-radius: 50%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; max-width: 120px; max-height: 120px; width: 100%; height: 100%; border: 2px solid #3FAAF6; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%);}



/* ────────────────
Responsive Overrides
───────────────── */
@media screen and (max-width: 1200px) {
  /* #document.home #gheader.is_static{width: calc();} */
  #document.home #mainvisual{margin: -60px 0 0 280px; width: calc(100% - 280px);}
  #document.home #gheader.is_static{padding: 171px 40px 45px 45px;}
  #contact .flex.jcSb{justify-content: center; gap: 0px;}
  .paralax .textContent .inner{max-width: 640px;}
  .flow .box4{padding: 84px 22px 40px;}
}
@media screen and (max-width: 1024px) {
  .paralax.--right .title,
  .paralax.--left .title{width: 100px;}
  .paralax.--left .title{margin-left: 30px;}
  .paralax.--right .title{margin-right: 30px;}
  .paralax .textContent{width: calc(100% - 130px);}
  .paralax::before{width: 76%;}

}
@media screen and (max-width: 896px) {
  #gheader{display: none;}
  #mainHeader{padding: 10px 20px 20px;}
  #mainHeader .logo{height: 40px;}
  #mainHeader .logo img{height: 100%;}
  #document.home #mainvisual {width: calc(100% - 35px); margin: -10px 0 0 35px;}
  #contact {padding: 20px;}
  #contact .bgGR{padding: 5px 18px;}
  #contact .bgWH {padding: 10px 20px; gap: 10px;}
  #contact .bgWH .img img{max-width: 40px;}
  #contact .bgWH .txt40{margin-left: 10px;}
  #contact .contact_tel,#contact .txt36.txtCent{width: 100%;}
  
  #mainContents .col4{width: calc(100% - 30px);}
  .--spNone{display: none;}
  /* #document.home #mainvisual .mask {  margin: 0;  opacity: 0;} */

  .paralax::before{width: 80%;}
  .paralax .title{font-size: 30px;}
  .paralax .title span{font-size: 20px;}
  .paralax.--right .title,
  .paralax.--left .title{width: 40px;}
  .paralax.--left .title{margin-left: 5px;}
  .paralax.--right .title{margin-right: 5px;}
  .paralax .textContent{width: calc(100% - 45px);}
  .paralax .textContent .inner{background-color: rgba(247, 255, 185, 0.7); 
    /* position: relative; top: 30px; left: -30px; */
  }
  .paralax .txt24{font-size: 18px;}
  .bgSky{padding: 30px 0;}
  .bgSky>.inner{width: calc(100% - 60px);}
  .flow .box4{padding: 40px 20px 20px; margin-bottom: 60px;}
  .flow .box4 .num{font-size: 26px; max-width: 56px; max-height: 56px;}
  .flow .box4 .txt30{font-size: 18px;}
  .flow .box4 .mb30{margin-bottom: 18px;}

}

/* body{overflow-x:hidden;} */
/* * { outline: 1px solid rgba(255,0,0,0.5); } */


/* animation */
.parallax-ready::before {
  transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform: scaleX(0);
  transform-origin: left center;
}

.parallax-ready.--right::before {
  transform-origin: right center;
}

.parallax-visible::before {
  transform: scaleX(1);
}

/* #contactのフェードイン */
/* #contact {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#contact.fade-in-visible {
  opacity: 1;
  transform: translateY(0);
} */

/* 各セクションの遅延アニメーション */
#shogaku .textContent { transition-delay: 0.1s; }
#shogaku .title { transition-delay: 0.3s; }

#chugaku .textContent { transition-delay: 0.1s; }
#chugaku .title { transition-delay: 0.3s; }

#koukou .textContent { transition-delay: 0.1s; }
#koukou .title { transition-delay: 0.3s; }

#kobetsu .textContent { transition-delay: 0.1s; }
#kobetsu .title { transition-delay: 0.3s; }

#bijutsu .textContent { transition-delay: 0.1s; }
#bijutsu .title { transition-delay: 0.3s; }

/* モバイル対応 */
@media screen and (max-width: 896px) {
  #document.home #gheader.is_static #gnav .nav>li>a::before{display: none;}
  /* モバイルでは視差効果を軽減 */
  #document.home > .bg{
      transform: none !important;
  }
  
  .paralax .textContent {
      transform: translateX(50px);
  }
  
  .paralax .title {
      transform: translateY(30px);
  }
}

/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

/* パフォーマンス最適化 */
.paralax .textContent,
.paralax .title,
#document.home > .bg,
#document.home > .bg .op-logo {
  will-change: transform, opacity;
}



.mobile-menu{display: none;}
@media screen and (max-width: 896px) {
  #gheader {position: fixed; top: 0; left: 0; width: 100%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1000; transition: all 0.3s ease;}

  #gnav .wrap {max-width: 1200px; margin: 0 auto; padding: 0 20px;}
  
  #gnav .inner {height: 70px; display: flex; align-items: center; justify-content: center;}
  
  /* ナビゲーションメニュー */
  .nav {display: flex; list-style: none; gap: 30px; align-items: center;}
  .nav li a {text-decoration: none; color: #333; font-size: 16px; font-weight: 500; transition: color 0.3s ease; position: relative;}
  .nav li a:hover {color: #0066cc;}
  .nav li a::after {content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: #0066cc; transition: width 0.3s ease;}
  .nav li a:hover::after {width: 100%;}
  .nav li a span[data-en-text] {
    position: relative;
}

/* ホバー時に英語表記を表示する例 */
.nav li a span[data-en-text]::before {
    content: attr(data-en-text);
    position: absolute;
    top: -25px;
    left: 0;
    /* transform: translateX(-50%); */
    /* background: #333;
    color: white; */
    padding: 4px 0;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    /* opacity: 0; */
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.nav li a:hover span[data-en-text]::before {
    opacity: 1;
}
/* 画像付きボタンスタイル */
.nav li.--img a {display: inline-flex; align-items: center; padding: 8px 20px; border-radius: 24px; transition: all 0.3s ease;}
/* .nav li.--img a:hover {transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2);} */
.nav li.--img a::after {display: none;}


/* ハンバーガーメニューボタン */
.hamburger {display: none; position: fixed; top: 20px; right: 20px; width: 30px; height: 30px; cursor: pointer; z-index: 1002; transition: all 0.3s ease;}
.hamburger span {display: block; position: absolute; width: 100%; height: 3px; background: #333; border-radius: 3px; transition: all 0.3s ease;}
.hamburger span:nth-child(1) {top: 0;}
.hamburger span:nth-child(2) {top: 13px;}
.hamburger span:nth-child(3) {bottom: 0;}

/* ハンバーガーメニュー開いた時のアニメーション */
.hamburger.active span:nth-child(1) {transform: translateY(13px) rotate(45deg);}
.hamburger.active span:nth-child(2) {opacity: 0;}
.hamburger.active span:nth-child(3) {transform: translateY(-13px) rotate(-45deg);}

/* モバイルメニュー */
.mobile-menu {display: none; position: fixed; top: 0; right: -100%; width: 100%; max-width: 400px; height: 100vh; background: #fff; box-shadow: -2px 0 10px rgba(0,0,0,0.1); transition: right 0.3s ease; z-index: 1001; overflow-y: auto;}
.mobile-menu.active {right: 0;}
.mobile-menu .nav {flex-direction: column; padding: 80px 20px 20px; gap: 20px; align-items: flex-start;}
.mobile-menu .nav li {width: 100%;}
.mobile-menu .nav li a {display: block; padding: 15px 20px; border-bottom: 1px solid #eee; font-size: 18px;}
.mobile-menu .nav li a::after {display: none;}
.mobile-menu .nav li.--img a {width: 100%; justify-content: center; padding: 0; border: none;}

/* オーバーレイ */
.overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); z-index: 999; opacity: 0; transition: opacity 0.3s ease;}
.overlay.active {display: block; opacity: 1;}

/* レスポンシブ対応 */

@media (max-width: 968px) {.hamburger { display: block; }
 #gnav .nav { display: none; }
 .mobile-menu { display: block; }
}

/* コンテンツサンプル */
.content {max-width: 1200px; margin: 0 auto; padding: 40px 20px;}
.content h1 {font-size: 32px; margin-bottom: 20px; color: #333;}
.content p {line-height: 1.8; color: #666; margin-bottom: 20px;}

}

@media screen and (min-width: 896px) {
  .nav>li>a{padding: 0;}
}
.nav>li>a:focus, .nav>li>a:hover{background-color: none!important; text-decoration: none;}