@charset "UTF-8";

/* base
------------------------------------------------------------------------------------------------- */

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body{
  box-sizing: border-box;
  font-family:
    'Noto Sans JP',
    'Hiragino Kaku Gothic ProN',
    'Hiragino Sans',
    'Yu Gothic',
    'Meiryo',
    sans-serif;
  font-size:1rem;
  font-weight: 400 !important;
  line-height: 1.5;
  color: #1A1A1A;
  height:auto !important;
  min-height:100vh;
  letter-spacing: 0.05rem;
  -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズに */
}

img, iframe {
  width: 100%;
  display: block;
}

.container{
  width: 100%;
  padding-right: .75rem;
  padding-left: .75rem;
  margin-right: auto;
  margin-left: auto;
}

section > div{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width:768px) {
section > div{
  padding-top: 4rem;
  padding-bottom: 4rem;
}
}
@media (min-width:1280px) {
section > div{
  padding-top: 5rem;
  padding-bottom: 5rem;
}
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#loader img {
  width: 70%;
  height: auto;
}

@media (min-width: 768px) {
  #loader img {
    width: auto;
    max-height: 200px;
  }
}

#main_content {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s;
}

#main_content.is-loaded {
  opacity: 1;
  visibility: visible;
}

.js-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.6s cubic-bezier(.4,0,.2,1),
              transform 1.6s cubic-bezier(.4,0,.2,1);
  /* scroll-padding-top: 30px; */
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


picture {
  transform: scaleX(1.0001);
}

/* header
-------------------------------------------------------------------------------------------------- */

#header{
  height: 60px;
}

.sp_Header{
  display: block;
  min-width: 320px;
}
header{
  position: relative;
}

header .sp_Header_navbar{
  flex-wrap:nowrap;
  background-color:#fff;
  width: 100%;
  height: 60px;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 50;
  box-shadow: 0 3px 3px rgba(124, 129, 128, 0.2);
}
header .sp_Header_logo img{
  width: 12rem;
  margin: 5px;
}

/* spボタン */
.sp_Btn{
  display: flex;
    width: 50%;
    max-width: 6rem;
    margin: 0.5rem;
    align-items: center;
    justify-content: space-around;
    flex-wrap: nowrap;
    padding-top: 5px;
}

.shopBtn p,.menuBtn p,.closeBtn p{
  font-size: 0.7rem;
   text-align: center;
}

.shopBtn{
  width: 28px;
}

.menuBtn{
  width: 25px;
}

.hamburger {
  width: 2rem;
  height: 21px;
  position: relative;
}

.hamburger_bar {
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  background: #000;
}

.hamburger_bar:nth-child(1) {
  top: 0;
}

.hamburger_bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger_bar:nth-child(3) {
  top: 100%;
  transform: translateY(-100%);
}

.close_btn {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0 auto;
}

.close_btn::before, .close_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 27px;
  background: #1A1A1A;
}

.close_btn::before {
  transform: translate(-50%,-50%) rotate(45deg);
}

.close_btn::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}


.sp_Header_inner{

  background: #fff;
  position: fixed;
  z-index: 15;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  transition: all 0s;
  overflow: auto;
}

.sp_Header_inner:active{
  display: block;
}


header .sp_Header_inner .closeBtn {
  width: 3.5rem;
  height: 3.5rem;
  position: fixed;
  top: 0;
  right: 0;
  margin: auto;
  z-index: 100;
  background: #F2F2F6;
  padding-top: 5px;
}

.sp_Header_nav{
  text-align: left;
  margin-top: 4rem;
  margin-bottom: 1.25rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0.62rem;
  max-width: 700px;

}
.sp_Header_nav li img{
  width: 60%;
}

.sp_Header_item{
  border-bottom: #B7B6B9 1px solid
}

.sp_Header_item a{
  display: block;
  padding: 0.78rem;
}

.sp_Header_item{
  font-size: 1rem;
  font-weight: 600;
}
.sp_Header_item:first-child{
  margin-bottom: 1rem;
  text-align: center;
  border: none;
}

.sp_Header_inner_btn{
  width: 70%;
  max-width: 300px;
  margin: 0 auto 1rem;
}

.sp_nav_sns{
  display: flex;
  justify-content: space-evenly;
  width: 50%;
  max-width: 200px;
  margin: 0 auto;
}

.sp_nav_sns li img{
  width: auto;
  height: 1.5rem;
  min-height: 29px;
}

/* コーディオンメニュー */

.dropdown_nav_list,
.dropdown_nav_panel {
  list-style: none;
  padding: 0;
}
.dropdown_nav_panel{
  border: none;
}

.dropdown_nav_link{
  display: block;
  text-decoration: none;
  padding: 0.78rem;
  position: relative;
   cursor: pointer;
   height: 100%;
}

.dropdown_nav_link::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #707070;
  border-bottom: 2px solid #707070;
  transform: translateY(-50%) rotate(45deg); /* 下向き */
  transition: transform 0.3s ease;
}

.dropdown_nav_link.active::after {
  transform: translateY(-50%) rotate(-135deg);
}

.dropdown_nav_panel {
  display: none;
}

/* アコーディオンメニュー中身 */
.dropdown_nav_sub-title{
  height: 100%;
  padding: 0.75rem 0;
  background: #E9F8FE;
}

.dropdown_nav_sub-title p{
  font-size: 0.875rem;
  text-align: center;
  text-decoration: underline #00BFFF 0.25rem;
  text-underline-offset: 0.25rem;
}

.dropdown_nav_sub-list{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.dropdown_nav_sub-list li a{
  height: 100%;
  display: block;
}

.dropdown_nav_sub-list li{
font-size: 0.8rem;
text-align: center;
width: calc(50% - 1px);
box-sizing: border-box;
border-top: #B7B6B9 dotted 2px;
}
.dropdown_nav_sub-list li:nth-child(odd) {
  border-right: #B7B6B9 dotted 2px;
}

.dropdown_nav_sub-list li.even{
  border-bottom: #B7B6B9 dotted 2px;
}

.dropdown_nav_sub-list li.empty{
  border-bottom: 1px solid transparent;
}

.pc_homeHeader_navWrap{
  display: none;
}

/* ipad */
@media (min-width: 768px) and (max-width: 991px) {
  .dropdown_nav_link{
    height: 100%;
  }
}

@media (min-width:992px) {
  .sp_Header,.f_btn_fixed{
    display: none;
  }

  /* pc_nav */
  .pc_homeHeader_navWrap{
    display: block;
    height: 70px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #ffffff;
    box-shadow: 0 3px 3px rgba(187, 190, 190, 0.2);
  }

  .pc_homeHeader_navInnerWrap{
    height: 100%;
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
  }

  .pc_homeHeader_nav {
    position: relative;
    top: 0;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
  }
  .pc_homeHeader_nav a{
    display: block;
    padding: 0 1.5rem;

  }

  .pc_homeHeader_navItem,.pc_homeHeader_btn{
    text-align: center;
    vertical-align: middle;
    position: relative;
    height: 100%;
  }

  .pc_homeHeader_navItem {
    position: relative;
    display: block;
    margin: 0 10px;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .pc_homeHeader_logo{
    width: 320px;
    padding: 0.75rem;
  }

    .pc_homeHeader_logo a{
      display: block;
    }

  .pc_homeHeader_navItem a span{
    word-break: normal;
    position: relative;
  }

  .pc_homeHeader_btn{
      display: block;
    text-align: center;
    height: 100%;
    position: relative;
        background-color: #00BFFF;
  }

  .pc_homeHeader_btn a{
    color: #ffffff;
    text-align: center;
    display: block;
    padding: 1.35rem 1.5rem;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

    .pc_homeHeader_btn span::after {
        content: "";
        display: inline-block;
        width: 30px;
        height: 30px;
        margin-left: 4px;
        background-image: url("../images/common/cart_icon_w.svg");
        background-size: contain;
        background-repeat: no-repeat;
        vertical-align: middle;
      }


.pc_homeHeader_navInnerWrap {
  position: relative;
  overflow: visible;
}

/* メガメニュー本体 */
.pc_submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  display: none;
  background: #ffffff;
  z-index: 99;
box-shadow: inset 0 5px 5px -5px rgba(60, 63, 63, 0.2);
}

/* 内部コンテンツの横並び */
.pc_submenu_inner{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center

}
.pc_submenu_inner p{
  width: 20%;
  text-align: center;
  text-decoration: underline #00BFFF 0.25rem;
  text-underline-offset: 0.25rem;
  border-right: #B7B6B9 dotted 1px;
}

.pc_submenu_list {

  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  /* padding: 0 20px; */
  /* width: 70%; */
  white-space: nowrap;
}

.pc_submenu_list li {

  font-size: 0.9rem;
  list-style: none;
  text-align: center;
  margin: 0 5px;
  border-radius: 6px;
}

.pc_submenu_list li a{
  position: relative;
  display: block;
  padding: 10px 20px;
}
.pc_homeHeader_navItem.has-mega{
    padding: 10px 20px;
}

.pc_homeHeader_navItem.has-mega > a {
  position: relative;
  padding-right: 15px;
}

/* 下向き矢印をafterで作る */
.pc_homeHeader_navItem.has-mega::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #707070;
  border-bottom: 2px solid #707070;
  transform: translateY(-50%) rotate(45deg); /* 下向き */
  transition: transform 0.3s ease;
}

/* 開いたときに上向き */
.pc_homeHeader_navItem.has-mega.open::after {
  transform: translateY(-50%) rotate(-135deg);
}

.pc_submenu_list li a::after,
  .pc_homeHeader_navItem a::after  {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #00BFFF;
    bottom: 10px;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform 0.3s;
    }

    .pc_submenu_list li a:hover::after,.pc_homeHeader_navItem a:hover::after {
    transform: scale(1, 1);
    }
    .pc_submenu_list li a::after{
      bottom: 5px;
    }
}
@media (min-width: 1024px) { /* PC向け */
  .pc_homeHeader_navItem.has-mega > a:hover + .pc_submenu,
  .pc_homeHeader_navItem.has-mega.open + .pc_submenu {
    display: block;
  }
}

/*
 footer
----------------------------------------------------------------------------------------------------------------------*/

footer{
  background: #0EA8DC;
  color: #fff;
  font-weight: 600;
}
.footer_wrap{
  overflow: hidden;
}
.section{
  margin: 0 0 -1px;
}
.section picture,
.section img {
  width: 100%;
  height: 100%;
}

.section img {
  object-fit: cover;
}

.footer_box{
  padding: 5% 3% 2%;
}

.footer_inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  max-width: 650px;
}

.footer_inner_list01{
  order: 3;
  flex-basis: 100%;
}

.footer_inner_list02{
  order: 1;
  flex-basis: calc(50% - 5px);
  font-size: 0.875rem;
}
.footer_inner_list03{
  order: 2;
  flex-basis: calc(50% - 5px);
}

.footer_inner_list04{
  order: 4;
  flex-basis: 100%;
}

.footer_inner_list02 li a,.footer_inner_list03 li a{
  display: block;
}

.sp_nav_sns02{
  display: flex;
  justify-content: space-evenly;
  width: 50%;
  margin: 0 auto;
  max-width: 200px;
}

.pc_nav_sns{
  display: none;
}

.sp_nav_sns02 li a {
  display: inline-block;
}
.sp_nav_sns02 li img{
  width: auto;
  height: 29px;
  min-height: 29px;

}

.footer_contact p:last-child{
  margin-bottom: 3rem;
}
.footer_contact p.large{
  font-size: 130%;
  padding: 10px 0;

}

.footer_contact p{
  font-size: 0.9375rem;
}

.footer_inner_list02 li{
  margin-bottom: 0.25rem;
}

.footer_inner_list03 ul{
  margin-bottom: 1.5rem;
}

.footer_inner_list03 li{
  font-size: 0.75rem;
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.15rem;
}

.footer_inner_list03 li ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.75rem;
  height: 2px;
  background: #fff;
  transform: translateY(-50%);
}

.footer_inner_list03 p{
  font-size: 0.875rem;
}

.copy{
  text-align: center;
  font-size: 80%;
  padding-bottom: 3%;
}


@media (min-width:992px){
  .footer_inner{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 70%;
  max-width: 1100px;
}
  .footer_inner_list01{
  order: 1;
  flex: 2;
}

.footer_inner_list02{
  order: 2;
   flex: 1;
}

.footer_inner_list03{
  order: 3;
   flex: 1;
}

.footer_inner_list04{
display: none;
}

.pc_nav_sns{
  display: block;
  display: flex;
  justify-content: space-evenly;
  width: 50%;
  max-width: 200px;
}

.pc_nav_sns li a{
  display: inline-block;
}

.pc_nav_sns li img{
  width: auto;
  height: 29px;
  min-height: 29px;
}

}

@media (min-width:1280px) {
  .footer_inner{
    width: 90%;
  }
.footer_inner_list02{
  font-size: 1.125rem;
  line-height: 1.8;
}
.footer_inner_list03{
  line-height: 1.8;
}
.footer_inner_list03 li{
  font-size: 1rem;
}

.footer_inner_list03 p{
  font-size: 1.125rem;
}

.footer_contact p{
  font-size: 1.125rem;
}

.footer_box{
  padding-bottom: 5%;
}

}


/* トップに戻る
----------------------------------------------------------------------------------------------------------------------*/
#page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  display: none;
  cursor: pointer;
  z-index: 30;
}

#page-top img {
  width: 70px;
  height: auto;
}
@media (min-width:768px) {
  #page-top {
      right: 20px;
  }
#page-top img {
  width: 90px;
}
}

@media (min-width:992px) {
#page-top img {
  width: 110px;
}
}

/*
 parts
----------------------------------------------------------------------------------------------------------------------*/
h2{text-align:center; padding: 2rem 0; font-size: clamp(30px, calc(1.18vw + 25.4px), 48px); font-weight: 500;}
h2 img{display: inline-block; margin: 0 auto; width: 80%; max-width: 160px;}
h3{text-align:center; padding: 2rem; font-size: clamp(18px, 0.915vw + 14.43px, 32px); font-weight: 500;}
h3 img{display: inline-block; margin: 0 auto; width: 80%; max-width: 150px;}
h4{text-align:center; padding: 2rem 0; font-size: clamp(18px, 1.622vw + 6.84px, 32px); font-weight: 500;}

span.heading_decoration{
  display: inline-block;
  font-size: 150%;
  color: #00BFFF;
}

.decoration_rotated{
  transform: rotate(-20deg);
}

@media (min-width:768px) {
h2{padding:3rem 0;}
h2 img{max-width: 250px;}
h3{padding:3rem 0;}
h3 img{max-width: 200px;}
}

@media (min-width:1280px) {
h2 img{max-width: 300px;}
h3 img{max-width: 280px;}
}

.text-size_01{font-size: clamp(15px, 0.523vw + 12.96px, 23px);}
.text-size_02{font-size: clamp(12px, 0.392vw + 10.47px, 18px);}
.text-size_03{font-size: clamp(14px, 0.392vw + 12.47px, 20px);}
.text-size_04{font-size: clamp(13px, calc(13px + 0.1307vw), 15px);}
.text-size_05{font-size: clamp(10px, 9.24px + 0.196vw, 13px)}
.text-size_06{font-size: clamp(13px, calc(13px + 0.1307vw), 15px);}


.text-center{
  text-align: center;
}


/* container */
.container_m {max-width: 1100px; margin:0 auto;}
.container_s {max-width: 1000px; margin:0 auto;}
.container_ss {max-width: 800px; margin:0 auto;}
.container_xl {max-width:1400px; margin:0 auto;}

/* img-hover */
a .img-hover{ -webkit-transition: all .3s; transition: all .3s;}
a:hover .img-hover{opacity: 0.7;}

/* button */
.button{

  max-width: 250px;
  margin: 1rem auto;
}

.button ul{
  margin: 0 auto;
}

.button ul li{
  margin: 1rem auto;
}


@media (min-width:768px) {
.button{
  max-width: 300px;
}
}

@media (min-width:992px) {
.button{
  max-width: 390px;
}
}

/* color */
.color_cool{
  background: #EDF9FE;
}
.color_warm{
  background: #FEFDF2;
}

/* main_contents */

.main_contents{
  min-width: 300px;
}

.hr{
  border-bottom: #00BFFF 2px dashed;
  max-width: 1200px;
  margin: 0 2%;
}

.pc_br{
  display: none;
}

.sp_br{
  display: block;
}

@media (min-width:768px) {
.pc_br{
  display: block;
}

.sp_br{
  display: none;
}

}

@media (min-width:1280px) {
.hr{
  margin: 0 auto;
}
}

.lp_section{
  padding-top: 0;
}