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

* common.css

*********************************************************************
*/
/* =========================================================
body
========================================================= */
body {
  font-family: YakuHanJP, "Hiragino Sans", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", Osaka, sans-serif;
  font-weight: 500;
  background: #fff; }

@media only screen and (min-width: 769px), print {
  body {
    line-height: 2;
    font-size: 16px;
    font-size: 1.6rem; } }

@media only screen and (max-width: 768px) {
  body {
    line-height: 2.2;
    min-width: 320px;
    font-size: 12px;
    font-size: 1.2rem; }
    body.is-menuOpen {
      overflow: hidden;
      height: 100%;
      overscroll-behavior: none; } }

/* =========================================================
font
========================================================= */
.f-a1 {
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", Osaka, sans-serif;
  font-weight: bold; }

/* =========================================================
layout
========================================================= */
#Wrapper {
  position: relative;
  overflow: hidden;
  width: 100%; }

.inner {
  position: relative;
  margin: 0 auto; }

img {
  max-width: 100%;
  height: auto; }

@media only screen and (min-width: 769px), print {
  .inner {
    max-width: 1080px;
    padding: 0 20px; } }

@media only screen and (max-width: 768px) {
  .inner {
    padding: 0 20px; } }
  @media only screen and (max-width: 768px) and (max-width: 374px) {
    .inner {
      padding: 0 10px; } }

/* =========================================================
Pop
========================================================= */
#Overlay {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); }

/* =========================================================
#GHead
========================================================= */
#GHead {
  line-height: 1;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  display: none;
  width: 100%; }
  #GHead
img {
    vertical-align: top; }
  #GHead
.menuOpen {
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: .2s ease background;
    background-color: #fff; }
    #GHead
.menuOpen
span {
      position: absolute;
      top: 50%;
      left: 20%;
      display: block;
      width: 60%;
      height: 3px;
      margin-top: -3px;
      margin-left: -2px;
      transition: .3s ease all;
      border: 2px solid #fff;
      border-radius: 4px;
      background-color: #000; }
      #GHead
.menuOpen
span.m1 {
        top: 40%; }
      #GHead
.menuOpen
span.m2 {
        top: 60%; }
    .is-menuOpen #GHead
.menuOpen {
      background-color: transparent; }
      .is-menuOpen #GHead
.menuOpen
span {
        left: 10%;
        width: 80%;
        border-color: #323232;
        background-color: #fff; }
        .is-menuOpen #GHead
.menuOpen
span.m1 {
          top: 50%;
          transform: rotate(-225deg); }
        .is-menuOpen #GHead
.menuOpen
span.m2 {
          top: 50%;
          transform: rotate(225deg); }
  #GHead
.navBlock {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    color: #fff;
    background-color: rgba(50, 50, 50, 0.98); }
    #GHead
.navBlock
a {
      text-decoration: none;
      color: inherit; }
    .is-menuOpen #GHead
.navBlock {
      transform: translateX(0%);
      opacity: 1; }
    #GHead
.navBlock
.blockInner {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      min-height: 100vh;
      padding: 40px 40px;
      justify-content: center; }
    #GHead
.navBlock .itemList,
    #GHead
.navBlock
.otherList {
      font-size: 19px;
      font-size: 1.9rem; }
      #GHead
.navBlock .itemList
> li
,
      #GHead
.navBlock
.otherList
> li {
        margin-top: 35px; }
        @media only screen and (max-height: 499px) {
          #GHead
.navBlock .itemList
> li
,
          #GHead
.navBlock
.otherList
> li {
            margin-top: 6vh; } }
        #GHead
.navBlock .itemList
> li
:first-child
,
        #GHead
.navBlock
.otherList
> li:first-child {
          margin-top: 0; }
    #GHead
.navBlock
.itemList {
      text-align: center; }
    #GHead
.navBlock
.otherList {
      margin-top: 50px;
      padding-top: 50px;
      text-align: center;
      border-top: 1px solid  #fff; }
      .p-sustainable #GHead
.navBlock
.otherList {
        display: none; }
      @media only screen and (max-height: 499px) {
        #GHead
.navBlock
.otherList {
          margin-top: 6vh;
          padding-top: 6vh; } }

@media only screen and (min-width: 769px), print {
  #GHead {
    display: none; } }

@media only screen and (max-width: 768px) {
  #GHead {
    display: block; } }

/* =========================================================
#GFoot
========================================================= */
#GFoot {
  position: relative;
  color: #fff;
  background-color: #00a1ff; }
  .p-yao #GFoot {
    background: #EE7B36; }
  #GFoot
a {
    color: inherit; }
  #GFoot
img {
    vertical-align: top; }
  #GFoot
.totop {
    position: absolute;
    right: 50%;
    bottom: 100%; }
  #GFoot
.staffBlock {
    box-sizing: border-box; }
    #GFoot
.staffBlock
.blockTit {
      font-weight: bold; }
    #GFoot
.staffBlock
.blockMain
.itemList {
      font-weight: bold; }
      #GFoot
.staffBlock
.blockMain
.itemList:after {
        display: block;
        clear: both;
        content: ''; }
      #GFoot
.staffBlock
.blockMain
.itemList
dt {
        float: left;
        clear: both; }
        #GFoot
.staffBlock
.blockMain
.itemList
dt:after {
          margin: 0 0.5em;
          content: ':'; }
      #GFoot
.staffBlock
.blockMain
.itemList
dd {
        float: left; }
    #GFoot
.staffBlock
.blockMain
.logoList {
      display: flex; }
      #GFoot
.staffBlock
.blockMain
.logoList
> li:first-child {
        margin-left: 0; }
      #GFoot
.staffBlock
.blockMain
.logoList
img {
        width: auto; }
  #GFoot
.snsBlock
.copy {
    font-family: Arial; }

@media only screen and (min-width: 769px), print {
  #GFoot {
    margin-top: 150px; }
    #GFoot
.totop {
      width: 70px;
      margin-right: -470px;
      margin-bottom: 40px; } }
    @media only screen and (min-width: 769px) and (min-width: 769px) and (max-width: 959px), print {
      #GFoot
.totop {
        right: 0;
        margin-right: 20px; } }

@media only screen and (min-width: 769px), print {
    #GFoot
.footInner {
      display: flex;
      margin: 0 auto;
      padding: 75px 0; }
    #GFoot
.staffBlock {
      width: 50%;
      padding-left: 60px;
      font-size: 13px;
      font-size: 1.3rem; } }
    @media only screen and (min-width: 769px) and (min-width: 769px) and (max-width: 959px), print {
      #GFoot
.staffBlock {
        padding-left: 0; } }

@media only screen and (min-width: 769px), print {
      #GFoot
.staffBlock
.blockMain {
        margin-top: 10px; }
        #GFoot
.staffBlock
.blockMain
.logoList {
          margin-top: 40px; }
          #GFoot
.staffBlock
.blockMain
.logoList
> li {
            margin-left: 40px; }
          #GFoot
.staffBlock
.blockMain
.logoList
img {
            height: 45px; }
            .is-IE #GFoot
.staffBlock
.blockMain
.logoList
img {
              width: 120px; }
    #GFoot
.snsBlock {
      box-sizing: border-box;
      width: 50%;
      padding-left: 20px;
      text-align: right; }
      #GFoot
.snsBlock
.bnr
img {
        width: 445px; }
      #GFoot
.snsBlock
.copy {
        margin-top: 10px;
        font-size: 12px;
        font-size: 1.2rem; } }

@media only screen and (max-width: 768px) {
  #GFoot {
    margin-top: 80px; }
    #GFoot
.totop {
      width: 40px;
      margin-right: -20px;
      margin-bottom: 5px; }
    #GFoot
.footInner {
      padding: 55px 0; }
    #GFoot
.staffBlock {
      padding: 0 20px;
      font-size: 10px;
      font-size: 1rem; } }
    @media only screen and (max-width: 768px) and (max-width: 374px) {
      #GFoot
.staffBlock {
        padding: 0; } }

@media only screen and (max-width: 768px) {
      #GFoot
.staffBlock
.blockMain {
        margin-top: 10px; }
        #GFoot
.staffBlock
.blockMain
.logoList {
          margin-top: 20px; }
          #GFoot
.staffBlock
.blockMain
.logoList
> li {
            margin-left: 30px; }
          #GFoot
.staffBlock
.blockMain
.logoList
img {
            height: 40px; }
    #GFoot
.snsBlock {
      margin-top: 55px; }
      #GFoot
.snsBlock
.bnr {
        margin-right: -2.5%;
        text-align: center; }
        #GFoot
.snsBlock
.bnr
img {
          width: 100%;
          max-width: 480px; }
      #GFoot
.snsBlock
.copy {
        margin-top: 20px;
        text-align: center;
        font-size: 10px;
        font-size: 1rem; } }

/* =========================================================
pop
========================================================= */
#PopWrap
.moviePop {
  box-sizing: border-box;
  width: 1064px;
  max-width: 100%;
  margin: auto; }
  #PopWrap
.moviePop
iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 150px); }

#PopWrap.has-movie
.popInner {
  max-width: 1024px;
  padding: 35px 0; }
  @media only screen and (max-width: 768px) {
    #PopWrap.has-movie
.popInner {
      padding: 35px 0; } }

#PopWrap
.closeBtn {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 10px;
  cursor: pointer; }
  #PopWrap
.closeBtn:hover {
    opacity: 0.75; }
  #PopWrap
.closeBtn:before,
  #PopWrap
.closeBtn:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    content: '';
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 2px;
    margin: -1px 0 0 -25%;
    border-radius: 2px;
    background-color: #fff; }
  #PopWrap
.closeBtn:before {
    transform: rotate(45deg); }
  #PopWrap
.closeBtn:after {
    transform: rotate(-45deg); }

@media only screen and (min-width: 769px), print {
  #PopWrap {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    margin-top: 10px; }
    #PopWrap
.closeWrap {
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    #PopWrap
.closeBtn {
      width: 30px;
      height: 30px; }
    #PopWrap
.popInner {
      position: relative;
      z-index: 1;
      box-sizing: border-box;
      max-width: 700px;
      margin: 0 auto; } }

@media only screen and (max-width: 768px) {
  #PopWrap {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    display: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0 15px; }
    #PopWrap
.inner {
      padding: 0; }
    #PopWrap.moviePlay {
      text-align: center; }
    #PopWrap
.closeWrap {
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    #PopWrap
.closeBtn {
      width: 35px;
      height: 35px; }
    #PopWrap
.popInner {
      position: relative;
      z-index: 1;
      box-sizing: border-box;
      max-width: 480px;
      margin: 0 auto; }
    #PopWrap
.popBox
.photoPop {
      text-align: center; }
      #PopWrap
.popBox
.photoPop
img {
        width: 100%;
        max-width: 100%;
        height: auto; } }

#PopOverlay {
  position: fixed;
  z-index: 12;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85); }

.moviePop {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px; }
  .moviePop
.iframeWrap {
    position: relative;
    padding-top: 56.25%; }
    .moviePop
.iframeWrap
iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

.m-popBox01 {
  display: none; }

#PopWrap .m-popBox01 {
  display: block; }