@charset "UTF8";

/*----------------------------
縦向きの場合��Eスタイル
----------------------------*/

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

  #header{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 4px 8px -3px rgba(17, 17, 17, 0.6);
    position: fixed;
    top: 0;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 10000;
  }

  .head-animation {
    -webkit-transform: translateY(-150%);
    transform: translateY(-150%);
  }

  /*△△△△△△△△△△△△△△△△△
  mobile_headerエリア開始
  △△△△△△△△△△△△△△△△△*/

  .m-header-area{
    width: 100%;
    height: 5vh;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3100;
  }

  /*△△△△△△△△△△△△△△△△△
  mobile_headerエリア終了
  △△△△△△△△△△△△△△△△△*/

.header-rogo{
  width: 50%;
}

.header-navi{
  display: none;
}

.header-tel{
  width: 50%;
}

.header-rogo p{
  margin: 0;
  font-size: 3vw;
  text-indent: 1vw;
}

.header-tel p{
  margin: 0;
  font-size: 3vw;
}

.footer-navi-area{
  width: 100%;
  margin: 0 auto;
  margin-bottom: 5%;
}

.footer-navi-area ul{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.footer-navi-area li{
  width: 100%;
  border-bottom: 1px dashed #000;
  list-style: none;
  text-align: center;
}

.footer-navi-area li:first-child{
  width: 100%;
  border-top: 1px dashed #000;
}

.footer-navi-area li a{
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 4vw;
  margin: 4% 0;
}

.footer-navi-area li a:hover{
  display: block;
  color: #fff;
  background: #81C7D4;
}

.footer-contents-area{
  width: 100%;
  text-align: center;
  margin-bottom: 5%;
}

.footer-contents-area p{
  font-size: 4vw;
  margin: 2% 0;
  color: #fff;
}

.copy-right p{
  font-size: 1.5vw;
  text-align: center;
  color: #fff;
  margin: 0;
}


}


/*-----------------------
 横向きの場合スマホスタイル
-------------------------*/

@media screen and (min-width: 481px) and (max-width: 896px) {

  #header{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 4px 8px -3px rgba(17, 17, 17, 0.6);
    position: fixed;
    top: 0;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 10000;
  }

  .head-animation {
    -webkit-transform: translateY(-150%);
    transform: translateY(-150%);
  }

  /*△△△△△△△△△△△△△△△△△
  mobile_headerエリア開始
  △△△△△△△△△△△△△△△△△*/
  .m-header-area{
      display: none;
    }
  /*△△△△△△△△△△△△△△△△△
  mobile_headerエリア終了
  △△△△△△△△△△△△△△△△△*/

.header-rogo{
  width: 35%;
}

.header-navi{
  width: 40%;
}

.header-navi li{
  width: 40%;
  border-right: 1px dashed #000;
  list-style: none;
  text-align: center;
  font-size: 2vw;
}

.header-navi li:first-child{
  width: 40%;
  border-left: 1px dashed #000;
  font-size: 2vw;
}

.header-tel{
  width: 20%;
}

.header-rogo p{
  margin: 0;
  font-size: 2.5vw;
  text-indent: 1vw;
  text-align: right;
}

.header-tel p{
  margin: 0;
  font-size: 2vw;
}

.footer-navi-area{
  width: 100%;
  margin: 0 auto;
}

.footer-navi-area ul{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.footer-navi-area li{
  width: 50%;
  border-right: 1px dashed #000;
  border-bottom: 1px dashed #000;
  list-style: none;
  text-align: center;
}

.footer-navi-area li:first-child{
  width: 50%;
  border-left: 1px dashed #000;
  border-bottom: 1px dashed #000;
}

.footer-navi-area li a{
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 2vw;
  line-height: 5vw;
}

.footer-navi-area li a:hover{
  display: block;
  color: #fff;
  background: #81C7D4;
}

.footer-contents-area{
  width: 100%;
  text-align: center;
}

.footer-contents-area p{
  margin: 2% 0;
  color: #fff;
  font-size: 2vw;
}

.copy-right p{
  font-size: 1.5vw;
  text-align: center;
  color: #fff;
  margin: 0;
}


}


/*---------------------------------
PC用表示
---------------------------------*/

@media all and (min-width: 897px){

  #header{
    display: flex;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 4px 8px -3px rgba(17, 17, 17, 0.6);
    height: 50px;
    position: fixed;
    top: 0;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    width: 100%;
    z-index: 10000;
    -webkit-transform:
  }

  .head-animation {
    -webkit-transform: translateY(-150%);
    transform: translateY(-150%);
  }

  /*△△△△△△△△△△△△△△△△△
  mobile_headerエリア開始
  △△△△△△△△△△△△△△△△△*/
  .m-header-area{
      display: none;
    }
  /*△△△△△△△△△△△△△△△△△
  mobile_headerエリア終了
  △△△△△△△△△△△△△△△△△*/

.header-rogo{
  width: 20%;
}

.header-navi{
  width: 60%;
}

.header-navi li{
  width: 20%;
  border-right: 1px dashed #000;
  list-style: none;
  text-align: center;
}

.header-navi li:first-child{
  width: 20%;
  border-left: 1px dashed #000;
}

.header-tel{
  width: 20%;
}

.header-rogo p{
  margin: 0;
  font-size: 1.3vw;
  text-indent: 1vw;
}

.header-tel p{
  margin: 0;
  text-align: right;
  padding-right: 10%;
}

.footer-navi-area{
  width: 20%;
  margin: 0 auto;
}

.footer-navi-area ul{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.footer-navi-area li{
  width: 50%;
  border-right: 1px dashed #000;
  list-style: none;
  text-align: center;
}

.footer-navi-area li:first-child{
  width: 50%;
  border-left: 1px dashed #000;
}

.footer-navi-area li a{
  display: block;
  color: #fff;
  text-decoration: none;
}

.footer-navi-area li a:hover{
  display: block;
  color: #fff;
  background: #81C7D4;
}

.footer-contents-area{
  width: 100%;
  text-align: center;
}

.footer-contents-area p{
  margin: 2% 0;
  color: #fff;
}

.copy-right p{
  font-size: 1vw;
  text-align: center;
  color: #fff;
  margin: 0;
}

}



  /*---------------------------------
  共通表示
  ---------------------------------*/

*,
*:before,
*:after {
  box-sizing: inherit;
}

a{
  text-decoration: none;
}

html {
  box-sizing: border-box;
}

  body{
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    font-size: 1vw;
    margin: 0;
  }

  .active-body{
    overflow-y: hidden;
  }

  /*header{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 100;
    background: #fff;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
  }*/

  .header {
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease;
  }

  /*△△△△△△△△△△△△△△△△△
  mobile_headerエリア開始
  △△△△△△△△△△△△△△△△△*/

  .modalArea {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
}

.modalArea.active {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  pointer-events: none;
}

.modalBg {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: rgba(30,30,30,0.9);
  z-index: 1200;
}

.modalWrapper {
  position: absolute;
  top: 0%;
  left: 0%;
  transform:translate(0%,0%);
  width: 100vw;
  height: 100vh;
  z-index: 1300;
}

.modalContents{
width: 100vw;
height: 120vh;
text-decoration: none;
}

.modal-title{
  width: 100%;
  height: 15vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modalContents h1{
  color: #fff;
  font-size: 7em;
  text-align: center;
  margin: 0;
  padding: 0;
}

.modalContents p{
font-size: 5vw;
color: #ffffff;
text-align: center;
margin: 10px 0px 10px 0px;
}

.closeModal {
  position: absolute;
  top: 0px;
  right: 1rem;
  cursor: pointer;
  font-size: 10vw;
  color: #ffffff;
  z-index: 1400;
}

button {
  padding: 5px;
  background-color: rgba(200,26,43,0.8);
  border: 1px solid #000000;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

#openModal {
  position: absolute;
  top: 50%;
  right: 0%;
  z-index: 1500;
  transform:translate(-10%,-50%);
}

.modal-navi-area{
width: 100%;
pointer-events: all;
display: flex;
flex-direction: column;
}

.modal-navi-box{
width: 100%;
display: flex;
align-items: center;
padding: 5%;
    background: rgba(225,107,140,0.5);
}

.modal-navi-text{
width: 80%;
padding: 2% 0;
}

.modal-navi-text p{
font-size: 5vw;
text-align: left;
}

.modal-navi-image{
  width: 20%;
}

.modal-navi-image img{
  width: 100%;
  vertical-align: bottom;
}

.modal-navi-area hr{
border-bottom: 1px solid #fff;
margin: 0;
}

.modal-navi-area ul{
width: 100%;
padding: 0;
}

.modal-navi-area li{
font-size: 5.5vw;
color: #fff;
list-style: none;
padding-left: 15px;
line-height: 12vw;
}

.modal-navi-area li a{
color: #fff;
}

.menu {
    max-width: 600px;
}

.modal-menu hr{
border: 1px solid #fff;
margin: 0;
}

/*.menu a {
    display: block;
    text-decoration: none;
    color: #fff;
}*/

label {
display: block;
margin: 0;
padding-left: 15px;
line-height: 12vw;
color: #fff;
cursor: pointer;
font-size: 5vw;
}

input {
    display: none;
}

.modal-menu ul {
    margin: 0;
    padding: 0;
    background :#A8D8B9;
    list-style: none;
}

.modal-menu li {
    height: 0;
    font-size: 5vw;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.modal-menu li a{
  color: #000;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
    height: 54px;
    opacity: 1;
    border-bottom: 1px dashed #fff;
}

.modal-contents-box{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: space-around;
}

.modal-contents-box-oblong{
  width: 90%;
  margin: 0 auto;
}

.modal-contents-box-item-oblong{
  width: 100%;
}

.modal-contents-box-item-oblong img{
  width: 100%;
}

.modal-contents-box-item{
  width: 40%;
}

.modal-contents-box-item img{
  width: 100%;
}

.modal-contents-box-item a{
  position: relative;
}

  .menu-trigger-wrapper{
    width: 100%;
    height: 10vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3200;
  }

  /*---------------------------
↓↓↓↓↓↓　menu-trigger　↓↓↓↓↓↓↓
---------------------------*/

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: fixed;
  top: 5px;
  right: 5px;
  width: 35px;
  height: 35px;
}

.menu-trigger-wrapper{
  width: 100%;
  height: 10vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3200;
}

.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 15px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

.menu-trigger::after {
  position: absolute;
  left: 0;
  bottom: -30px;
  display: block;
  width: 100%;
  font-size: 11px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: all .4s;
  color: #fff;
}
.menu-trigger.active::after {
  content: 'CLOSE';
  bottom: -25px;
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(20px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-12px) rotate(45deg);
  transform: translateY(-12px) rotate(45deg);
}



  /*△△△△△△△△△△△△△△△△△
  mobile_headerエリア終了
  △△△△△△△△△△△△△△△△△*/

  .header-navi ul{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
  }

  .header-navi li a{
    display: block;
    color: #000;
    text-decoration: none;
  }

  .header-navi li a:hover{
    display: block;
    color: #fff;
    background: #81C7D4;
  }

.wrapper-area{
  position: absolute;
  top: 50px;
  left: 0;
}

footer{
  width: 100%;
  background: #58a9d0;
}

.copy-right{
  width: 100%;
}