/*
Theme Name: bonbon-new
Author: AKINA
Description: カスタムテーマ「bonbon-new」の説明文です。
Version: 1.0
Text Domain: bonbon-new
*/

body {
  font-family: 'Sawarabi Gothic', sans-serif;
}

.fotterbefore>ul>li>span {
    font-weight: bold;
}
ul.wrap.footer-company {
    font-size: 0.75rem;
}.wrap.area-name.justify-content-around {
    padding: 0.5rem 1rem 0rem 1rem;
    z-index: 5;
}
.wrap.area-name a{
    color: white!important;
}
.kiziganai{
    height: 200px;
    padding-bottom: 5rem;
}
/* パンくず全体のスタイル */
.yoast-breadcrumbs {
  font-size: 0.85rem;
  color: #666;
  text-align: left;
  padding: 0.5rem 1rem;
  margin: 0 auto 1rem;
  max-width: 1100px; /* 本文幅とそろえる */
  border-left: 4px solid #ccc;
  background: #f9f9f9;
  border-radius: 4px;
  font-family: "Noto Sans JP", sans-serif;
  box-sizing: border-box;
}

/* 各リンクの基本スタイル */
.yoast-breadcrumbs a {
  color: #456391;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* ホバー時 */
.yoast-breadcrumbs a:hover {
  color: #2c3e50;
  text-decoration: underline;
}

/* 区切りの余白 */
.yoast-breadcrumbs span {
  margin: 0 0.3em;
}

/* 最後の項目（現在位置） */
.yoast-breadcrumbs .breadcrumb_last {
  color: #111;
  font-weight: 600;
}

/* ホームリンクにアイコン追加（テキストあり） */
.yoast-breadcrumbs span:first-child > a::before {
  content: '';
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background: url('https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/uploads/2025/07/ad9b65f1c9b6fdf57216ce9109d50355.png') no-repeat center center;
  background-size: contain;
  margin-right: 0.4em;
  vertical-align: text-bottom;
}

@font-face {
    src: url("https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/themes/reuse-bonbon/css/sawarabi-font.woff") format("woff");
    font-family: "Sawarabi+Gothic";
    font-style: normal;
    font-display: swap;
  }
  .simple-sitemap-wrap>h3.post-type {
    display: none;
}

ul.simple-sitemap-page.main {
    margin: auto;
    width: 80%;
}

li.sitemap-item.page_item.page_item_has_children>a {
    font-size: 1.5rem;
    position: relative;
    padding-left: 1.5rem;
}
li.sitemap-item.page_item.page_item_has_children>a:before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    background-color: #051e3f;
    top: 30%;
    left: 5px;
}
li.sitemap-item.page_item.page_item_has_children {
    margin: 1rem 0;
}
div#simple-sitemap-container-645daa28c8f3c {
    padding-bottom: 10rem;
}


a.hover{
    color: black;
}
section.not-found{
    width: 100%;
    height: 100%;
}



figure{
   
        display: inline-block;
        margin: 0!important;
   
}
.pt-8{
    padding-top: 5rem!important;
}
.mt-8{
    margin-top: 5rem!important;
}
h1,h2,h3{
    text-align: center;
    font-family: 'Sawarabi+Gothic', sans-serif;
}
h1{
    font-size: 1.5rem;
}
/***事前に用意していた固定ページでｗｐ特有のh1を非表示にするため。今後のメンテナンスではh1が表示されるよう 固定ページテンプレートは#page-mainbodyを使う*/ 
#pagemainbody>h1{
    display: none;
}
.f-big{
    font-size: 1.25rem;
}
.opa-1.big {
    height: 150px;
}
#pagemainbody {
    padding-top:80px;
    position: relative;
    margin: 0;
   
}


#page-mainbody h1 {
    /* margin-top: 5rem; */
    font-weight: 600;
    position: relative;
    width: 100%;
    text-align: center;
    /* margin: 5rem auto; */
    /* background-color: #274c77; */
    color: #160a36;
    padding: 2rem 0;
   /** background-image: url(https://reuse-bonbon.stripper.jp/reuse-bonbon/wp-content/themes/reuse-bonbon/img/logoback.png);
    background-size: contain;*/
    font-family: sans-serif;
    text-shadow: 1px 3px 1px #6c757d85;
    margin: 0;
}


.balloon{
    position: relative;
    padding: 20px;
   
  }
  
  /* beforeで三角を表現 */
  .balloon::before{
    content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #fff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  }
  .balloon2{
    position: relative;
    padding: 20px;
    background-color:white;
    border-radius: 30px;
    width: fit-content;
  }
  /* 大きい丸 */
  .balloon2::before{
    content: '';
    position: absolute;
    display: block;
    border-radius: 50%;
    background-color: white;
    right: -35px;
    bottom: 15px;
    width: 30px;
    height: 30px;
  }
  /* 小さい丸 */
  .balloon2::after{
    content: '';
    position: absolute;
    display: block;
    border-radius: 50%;
    background-color:white;
    right:  -55px;
    bottom: 10px;
    width: 15px;
    height: 15px;
  }
 
    h3.houzin {
        font-size: 1.25rem;
        font-weight: bold;
        padding: 6px 0 1rem 0px;
        margin-bottom: 15px;
        color: #fff;
        position: relative;
        background-color: #292c30;
        margin-top: 0;
        font-family:serif;
        border-radius: 8px 8px 0px 0px;
    }
    h3.houzin.mini {
        padding: 0.5rem;
        margin-bottom: 0;
        font-family: Arial, Helvetica, sans-serif;
        border-radius: 0px;
        background-color: white;
        color: #1e1c1c;
    }
h3.houzin::before {
	content: attr(data-number);
	display: block;
	margin-bottom: 30px;
	color: #ffc107;
	font-size: 30px;
}
ul.houzinitem{
    background-color: #8080803b;
    padding: 1rem;
}
p.houzin {
    position: relative;
  
    padding: 0.1rem 0;
}


h3.houzin::after {
	content: '';
	position: absolute;
	top: 2rem;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 20px;
	background-color:#ffc107;
}
h3.houzin.mini::before {
    content: attr(data-number);
    display: block;
    /* margin-bottom: 30px; */
    color: #adada2;
    font-size: 0.75rem;
    position: absolute;
    top: -1rem;
    left: 0;
    right: 0;
    margin: auto;
}
li.torihiki>h3.houzin.mini {
    background-color: black;
    color: white;
    padding: 2rem 1rem 0.5rem 1rem;
    font-size: 0.75rem;
}
li.torihiki>h3.houzin.mini::before {
    content: attr(data-number);
    display: block;
    /* margin-bottom: 30px; */
    color: #ffc107;
    font-size: 1rem;
    position: absolute;
    top: 0rem;
    left: 0;
    right: 0;
    margin: auto;
    padding-top: 0.5rem;

    background-color: black;
}
figure.houzin{
    position: relative;
    justify-content: space-around;
}
figure.houzin>figcaption {
    position: absolute;
    bottom: -1rem;
    left: 0;
    right: 0;
    margin: auto;
}
h3.houzin.mini::after {
	display: none;
}
p.howtouse-number.width.black {
    background-color: black;
}
.b-b-3 {
    border: 3px solid #414448;
}
.b-box {
    border: black 1px solid;
    border-radius: 16px;
}
a.houzin-otoiawase {
    background-color: black;
    padding: 1rem;
    color: #ffbb04;
    transition: all 0.2s;
}

a.houzin-otoiawase:hover{
    opacity: 0.8;
}

.hov-op:hover{
    opacity: 0.8;
}
.opa-1 {
    opacity: 0.3;
    position: relative;
    top: 30%;
    left: 0;
    right: 0;
    margin: auto;
    height: 100px;
    width: auto;
    padding: 0.5rem;
}
ul>li{
    list-style: none;
}
li{
    list-style: none;
}
ul{
    padding-left: 0;
    margin-bottom: 0;
}
section{
    margin: 0 auto;
    position: relative;
  
}
p{
    display: inline-block;
    margin-bottom: 0;
}
.BonBoncopy {
    position: absolute;
    top: -1rem;
    left: 4rem;
    right: 0;
    margin: auto;
    width:auto;
}
p.BonBoncopy.sp-only.pc-none.tab-none {
    left: 0;
    margin-top: 1rem;
}
.howto-b.red{
    color:red
}
.red{
    color: red;
}
.button-Box {
    position: relative;
    top:-10rem;
}
button.link.fromtop {
    padding: 0.5rem;
    background-color: white;
    border-radius: 16px;
    color: black;
    box-shadow: #8d9fb1 0px 2px 0px;
    position: absolute;
    top: 0rem;
    left: 0;
    right: 0;
    margin: auto;
    width: 10rem;
}
ul.pc-footer>li>a>span {
    color: #ffc107;
    font-size: 1rem;
    position: relative;
    
}
ul.pc-footer>li>a>span:after {
    position: absolute;
    width: 100%;
    background-color: #0000001f;
    content:"";
}
button.link.fromtop:hover {
    -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow:0 5px 0 #090a0ad9;
  box-shadow: 0 2px 0 #0f0e0f;

  }
  li.col-12 {
    list-style: none;
    align-self: center;
}
.hidden{
    background-color: #04befe;
}
main#mainbody {
    margin-top: 0rem;
    width: 100%;
    position: relative;
}
/*TOPページ以外*/
figure.footer-icon {
    position: absolute;
    /* top: 0; */
    /* width: 100px; */
    right: 20px;
    top: 0rem;
    height: 50px;
    width: 50px;
}
.t-white{
    color: white;}

main#singlepage {
     position: relative;
     top:0rem;
	padding-top:80px;

    padding-bottom: 5rem;
    background-color: #4d4b4b0c;
    max-width: 1200px;
    margin: auto;
}
   

main#singlepage h1 {
    padding: 1rem 3rem 1rem 3rem;
    /* background-color: #061e3f; */
    color: #060606;
    border-radius: 16px;
    width: fit-content;
    margin: auto;
    top: 2rem;
    font-weight: bold;
}
.single_content {
    margin-top: 5rem;
}

main#singlepage h1 >span{
    font-size: 0.5rem;
}
h1.single_title {
    padding: 3rem 0;
}

.single_thumbnail {
    text-align: center;
}
h3.page.aria {
    /* background-color: #274c77; */
    /* color: white; */
    /* border-radius: 0px; */
    font-weight: 700;
    border-bottom: 3px solid black;
    padding: 0.5rem;
}
 /**投稿ページ*/
 h2.list-box, h3.list-box {
    font-size: 1rem;
    font-weight: bold;
    width: 100%;
    padding: 2rem 2rem 1rem 2rem;
}
.list-box-right {
    text-align: center;
    height: auto;
}

.list-box-300{
    text-align: center;
    height: 300px;
}
article.wrap.archive{
margin-top: 5rem;
margin-bottom: 3rem;}

ul.arcive>li>a {
    color: black;
    border: 1px solid black;
    border-radius: 16px;
    /* height: 3rem; */
    padding: 0.3rem 0.5rem;
    margin: 0.5rem 0.5rem;
    display: inline-block;
}
.list-box-right>a,.boxshadow-c>a {
    color: black;
}
h3.list-box, h3.list-box {
    font-weight: bold;
    width: 100%;
    background-color: #80808057;
    height: 20%;
}
.single_content>h2,.single_content>h3 {
    width: 100%;
    color: #051e3f;
    font-weight: bold;
}


h2.ariapage {
    font-weight: 600;
    border-bottom: 2px solid #160a36;
    color: #160a36;
}
@media screen and (max-width: 820px) {
main{
   top:0rem;
  
}
.kiziganai{
    height: 200px;
    padding-bottom: 10rem;
}

main#mainbody {
    margin-top: 0rem;
}

}

.sticky-top{
    
transition: 0.5s;}

.title-dispriction{
    position: absolute;
    top: 3rem;
    left:0;
}

/* スクロールして「scroll-navクラス」がついたときのヘッダーデザイン */
.contact.sticky-top.scroll-nav {
   
    border-bottom: none;
    /* 背景を白にする */
  
    /* コンテンツの背景が白でもナビゲーションだと分かりやすいように影をつける */
  
  }
  
  /* 「scroll-navクラス」がヘッダーについたときに、ロゴとナビゲーションの文字を黒にする */
  .scroll-nav .logo,
 .scroll-nav ul li a {
    
  }

/***改行*/

.br-sp {
    display: none;
  }

 /** header{
    position: relative;
    top: 40px;
    height: 60px;
    background-color:white;
}
*/

  
 





  
  .navbar{
    padding-top: 0;
  }

  .navbar-collapse {

    z-index: 100;
}


.contactaria-wrap {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

button.navbutton {
    background-color: transparent;
    border-color: transparent;
    z-index: 1023;
    width: 100%;
    height: 10vh;
    padding: 1rem;
   
}
button.navbutton span {
    width: 2rem;
    height: 1px;
    background-color: #000;
    position: relative;
    transition: ease .4s;
    display: block;
}
button.navbutton.active span:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
}
button.navbutton span:nth-child(1) {
    top: 0;
  }
  
  button.navbutton span:nth-child(2) {
    margin: 8px 0;
  }
  
  button.navbutton span:nth-child(3) {
    top: 0;
  }

  button.navbutton.active {
    transform: translateX(0);
    position: relative;
    left: -16px;
    bottom: -34px;
    z-index: 1200;
}
  
  button.navbutton.active span:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
  }
  
  button.navbutton.active span:nth-child(2) {
    opacity: 0;
  }
  
  button.navbutton.active span:nth-child(3) {
    top: -13px;
    transform: rotate(-45deg);
  }
  nav.navbar.navbar-light.navbar-expand-lg.color-Black.pc-none.sp-on.tab-on.mx-auto {
    height: 100%;
}
.gnavi__wrap.hiddenpart {
    opacity: 0;
    height: auto;
    position: relative;
    left: -100%;
    top: -49px;
    transition: all 0.5s;
}
    .contact.sticky-top{
    flex-wrap: wrap;
    list-style: none;
    top: 0rem;
}
.gnavi__wrap.hiddenpart.active {
    opacity: 1;
    left: 0;
    top: -49px;
    width: 100%;
}
p.telefone {
    position: absolute;
    top: -1rem;
}
nav.navbar.navbar-light.navbar-expand-sm.mb-3 {
    width: 100%;
}
.contact.sticky-top {
    top: 0rem;
    display: flex;
    justify-content: end;
    border-bottom: 1px solid #80808029;
    background-color: rgba(255, 255, 255, 0);
}
.shoprogo-button {
    display: flex;
    flex-wrap: wrap;
   
    margin: auto;
   
}
a.kizi,p.kizi,h2.kizi {
    background-color: #456391;
    color: white;
    padding: 0.5rem 0;
}
span.list-box-date {
    font-size: 0.75rem;
}
p.list-box-right-text{
    padding-bottom: 1rem;
    padding-top: 1rem;
    font-weight: bold;
}
div>.houzin:hover figure.houzin>img{
    opacity: 0.8;
    transition: all 0.3s;
}
ul.houzin-top {
    background-image: url(https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/themes/reuse-bonbon/img/houzin.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 30vw;
}
.logoback{
    background-image: url(https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/themes/reuse-bonbon/img/logoback.png);
    background-size: inherit;

}
.logoback-container{
    background-image: url(https://reuse-bonbon.stripper.jp/reusebonbon/wp-content/themes/reuse-bonbon/img/logoback.png);
    background-size: contain;

}
ul.wrap>ul>li.nav-item>a{
    opacity: 0;
}

ul.wrap>ul>p:hover + ul.wrap>ul>li.nav-item>a{
    opacity: 1;
}
.gnavi__lists {
    display: flex;
    justify-content: start;
    padding-left: 2rem;
}
.gnavi__list {
   
    position: relative;
    transition: all .3s;
    padding: 0.5rem 1rem 1rem 1rem;
    top: 0rem;
}

.gnavi__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #0c0d0e;
    font-size: 15px;
    letter-spacing: 0.05em;
    font-weight: 600;
    transition: all .3s;
    
}
.gnavi__list:hover.gnavi__list a.hov{
    color: white!important;
}
.gnavi__list:hover {
    background-color: #061e3f;
    color: white;
}
.gnavi__list:hover.gnavi__list {
    color:white;
}
.dropdown__list:hover.dropdown__list a{
    color: yellow;
}


.dropdown__lists {
    display: none;
    width: 100%;
    position: absolute;
    top: 2.5rem;
    left: 0;
    
}

.dropdown__list>img {
    border-style: none;
    position: absolute;
    height: 100%;
    width: auto;
    top: 0;
    right: 0;
}


ul.nav-inner {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    top: -2rem;
    left: -1rem;
    width: 200%;
}
.dropdown__lists.double{
    width: 200%;
}
.gnavi__list:hover .dropdown__lists {
    display: block;/*Gナビメニューにホバーしたら表示*/
    color: white;
    z-index: 10;
}


.dropdown__list {
    background-color: #061e3f;
    height: 3rem;
    transition: all .3s;
    position: relative;
}
.dropdown__list:not(:first-child)::before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #1d1d1e38;
    position: absolute;
    top: 0;
    left: 0;
}

ul.dropdown__lists.list2 {
    position: absolute;
    width: 100%;
    left: 100%;
}

.dropdown__list:hover .dropdown__list>a{
    color: white;
}
.dropdown__list>a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    position: relative;
}
.dropdown__list a::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(135deg);
    position: absolute;
    left:1rem;
    top: calc(50% - 5px);
}
.dropdown__list>a:hover{
    color: white;
}

a.nav-link.color-Black>span {
    position: relative;
    width: 100%;
    display: block;
    
   
    top: 0.5rem;
    left: 0;
    text-align: center;
  
    font-family: cursive;
   
}

a.nav-link.color-Black>span:hover{
    opacity: 1;
}

li.nav-item.flex-fill{
    transition: all 0.3s;
}
li.nav-item.flex-fill:hover {
  
    transform: scale(1.2);
    overflow: hidden;
    text-align: center;
}
li.nav-item.flex-fill:hover p.left{
    color: #051f3e;
}

.navbar-collapse.show {
    top:10rem;
}

  /**Spハンバーガー*/
  .navbar-light .navbar-toggler {
   z-index: 1026;
    border-color: rgba(0,0,0,.1);
    position: absolute;
    right: 14px;
    top: 1rem;
    background-color: beige;
}


      .tellink:hover, .maillink:hover, .linelink:hover {
        background-position: 100% 0;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
      }
      
      .tellink:focus, .maillink:focus,.linelink:focus {
        outline: none;
      }
      
   
      
      
      
      p.tellink-text, p.maillink-text {
        position: absolute;
        width: 10rem;
        left: 0;
        right: 0;
        top: 0;
    }

    /***
    li.nav-item.flex-fill>ul>li {
        list-style: none;
        opacity: 0;
    }

    li.nav-item.flex-fill:hover  li.nav-item.flex-fill>ul>li {
    list-style: none;
    opacity: 1;
      }
    **/
 
    span.tellink-text {
        position: absolute;
        top: 0rem;
        left: 0;
        right: 0;
        margin: auto;
        line-height: 4rem;
    }
    span.linkinner {
        background-color: #000000b5;
    }
    .link-text.tel{
        color:black;
    }go
    p.tellink-text.mobilefooter,p.maillink-text.mobilefooter{
        top:0;
    }
    .btn-primary {
        background-color:#ffffff00;
        color: black;
        border-color: rgba(255, 255, 255, 0);
       
    }
    p.align-self-center.dispcri {
        padding: 1rem;
        color: #080707;
        z-index: 12;
        background-color: white;
      
        height: fit-content;
        position: relative;
        right: 0;
        bottom: 0;
    }

    ul.houzinitem>li{
        position: relative;
        align-self: center;
    }
    ul.houzinitem>li:before{

        position: absolute;
        content:"";
        top:0;
    }

    div.contact.col-3{
        display: flex;
    }
    a.btn.btn-primary.tellink.mobile,a.btn.btn-primary.maillink.mobile {
        top: calc((7rem - 3rem ) *1/2);
        margin: 0;
    }
    .menudelate>a.navbar-brand.titlelogo {
        position: relative;
        top: 0rem;
        left: 0rem;
        width: 20%;
        height: 60px;
        padding-left: 1rem;}

    .navbar-brand{
        margin-right: 0;
    }
    ul.menudelate>.wrap {
        width: 30%;
        justify-content: end;
       
    justify-content: end;
    height: 70px
    }
    .navbar-brand.titlelogo.delate{
        opacity: 0;
    }
    .wrap.footer-contact{

        position: fixed;
        right: 0%;
        bottom: 0;
        opacity: 0;
        transition: all 0.3s;
    }

    .wrap.footer-contact.appear{

        position: fixed;
        right: 0%;
        bottom: 0rem;
        opacity: 1;
        padding: 1rem;
        margin-bottom: 0rem;
z-index:10;

    }
    /****法人ページ等でフッターを非表示にする*/
#pagemainbody-nofooter>.wrap.footer-contact.appear{
    opacity: 0;

    }
    #pagemainbody-nofooter >h1{
        display: none;
        
    }
   

    ul.menudelate {
        display: flex;
        flex-wrap: wrap;
       
    }
    ul.navbar-nav {
        position: relative;
        top: 0rem;
        text-align: center;
    }
   

    .contactaria-parts {
        text-align: center;
        position: relative;
        
        line-height: 2rem;
      width: 8rem;
      align-self: center;
      
    }
   .contactaria-parts.footer{
    width: 45%;
    line-height: auto;
   }
    .contactaria-parts>a{
        width: 8rem;
    }
    .contactaria-parts.footer>a{
        width: 100%;
    }
    section.mainaria.company-information.container {
        padding-bottom: 4rem;
    }
    a.line-link.footer>img,a.link-button.footer>img{
        width: 100%;
        height: auto;
        padding: 0 1rem;
    }
    .gnavi__wrap {
        position: relative;
        /* top: 80px; */
        /* left: 300px; */
        width: 50%;
        align-self: center;
    }

    a.navbar-brand.titlelogo>img {
        width: 100%;
        height: auto;
    }
    ul.wrap.arcive {
        padding-bottom: 5rem;
    }
    /**ヘッダー、フッターの調整SP用**/

   
  
    @media screen and (max-width: 767px)
       {
        .sp-none{
            display: none!important;
        }
        main#singlepage h1 {
            padding: 1rem 2rem;
        }
        ul.wrap.arcive {
            padding-bottom: 10rem;
        }
        .contact.sticky-top{
            top:0;
        }
        section#mainbody{
            top:0;
        }
        section.mainaria.company-information.container {
            padding-bottom: 1rem;
        }
        .navbar-light .navbar-toggler{
            top:0rem;
            z-index: 101;
        }
        .dropdown__list a::before {
          display: none;
        }
        .scroll-nav{
            display: none;
        }
        .balloon::before {
            content: '';
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            left: 0;
            bottom: -19px;
            border-top: 15px solid white;
            border-right: 15px solid transparent;
            border-left: 15px solid transparent;
            right: 0;
            top: 75px;
            margin: auto;
        }
        ul.houzin-top{
            height: 250px;
        }
        .balloon2::before,.balloon2::after{
            display:none ;
        }
		   #pagemainbody
		   {
			   padding-top:20px;
		   } 
main#singlepage {
    
	padding-top:20px;
}}

    @media screen and (min-width: 768px) {
        nav.navbar.navbar-light.navbar-expand-sm.color-Black {
            top: -1px;
        }
        .pc-none{
            display: none;
        }
        .navbar-collapse.show{
            height: 80vw;
        }
    }
  


/***767>=**/
@media screen and (max-width: 767px) {

    .sp-only{
        display: block;
    }
    
    header {
        height: calc(10vw + 1rem);
        top: 0px;
    }

    .gnavi__list a{
        justify-content: flex-start;
    }
}
    
        
      
    @media screen and (max-width: 820px){
        header {
            position: relative;
            top: 0rem;
            margin: 0 ;
            height: fit-content;
            background-color: #051f3e00;
            z-index: 1022;
        }
        .br-sp {
          display: inline-block;
        }
        .contact.sticky-top{
            border-bottom: none;
        }
        .gnavi__list:hover{
            background-color: white;
        }
        .menudelate>a.navbar-brand.titlelogo {
            position: relative;
            top: 0rem;
            left: 0rem;
            width: auto;
            height: 80px;
            padding-left: 1rem;
        }
        ul.dropdown__lists {
            display: flex;
            flex-wrap: wrap;
            margin-top: 0.5rem;
        }
        .gnavi__list:hover .dropdown__lists{
            display: flex;
        }
        ul.dropdown__lists>li.dropdown__list {
            width: 50%;
            height: fit-content;
            background-color: #b2cee063;
           
        }

        p.align-self-center.dispcri {
            padding: 1rem;
            color: #080707;
            z-index: 12;
            background-color: #ffffffba;
            width: 100%;
            height: auto;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        li.gnavi__list:nth-child(3) {
           
        }
        li.gnavi__list:nth-child(1) {
            margin-top: 2rem;
        }
        ul.dropdown__lists>li.dropdown__list>a {
            font-size: 1rem;
            padding: 0.25rem 0;
            font-weight: normal;
            border-bottom: none;
            background-color: white;
            padding-left: 1rem;
            color: black;
        }
       

        .gnavi__list{
            padding: 0 1rem;
            
          
        }
        .dropdown__list:not(:first-child)::before {
            content: "";
            width: 0%;
            height: 0px;
            /* background-color: #3492d1; */
            position: absolute;
            top: 0;
            left: 0;
        }
        .dropdown__lists{
            display: block;
           
        position: relative;
        top: 0;
        padding-left: 0rem;
        }
        .tab-none{
            display: none;
        }
        .tab-on{
            display: block;
        }
        a.navbar-brand.titlelogo {
            position: absolute;
            top: 1rem;
            left: 0rem;
            width: fit-content;
        }
        a.navbar-brand.titlelogo>img {
            width: auto;
            height: 90%;

        }
        .gnavi__list a {
            font-size: 1rem;
            height: fit-content;
            padding: 0.5rem 0rem 0.5rem 0.5rem;
            /* border-bottom: 1px solid #061e3f; */
            font-weight: bold;
            background-color: #274c77;
            line-height: rem;
            width: auto;
            color: white;
        }
    
        
    li.nav-item.flex-fill {
        transition: all 0.3s;
        width: 100%;
    }
    ul.dropdown__lists>li.dropdown__list>a:hover{
        color: white;
        background-color: #0000001f;
    }
    
        .contact.sticky-top {
            top: 0rem;
            display: flex;
            /* justify-content: end; */
            /* height: 50px; */
            width: 100%;
            /* position: relative; */
        }
    
        .contactaria-parts.mx-3.sp-none {
            position: absolute;
            right: 7rem;
        }
            .navbar-light .navbar-toggler {
               
                border-color: rgba(0, 0, 0, 0.068);
                position: absolute;
                right: -7rem;
                top: 3rem;
            }
    
    
    
    .contactaria-parts.line.sp-none {
        position: absolute;
        right: 17rem;
    }
    
    
    .gnavi__lists {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: flex-start;
        background-color: white;
        border: 3px solid #6c757d;
        border-radius: 16px;
        z-index: 1031;
        position: relative;
        padding-bottom: 1rem;
        padding-left: 0;
    }
    ul.menudelate {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        height: 100%;
        background-color: white;
        margin-bottom: 0!important;   }
    
    .gnavi__wrap {
        width: 90%;
        margin: 0 auto;
        top: 0px;
        
    }
    
    
    
    ul.nav-inner {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        top: 0.5rem;
        width: 100%;
        left: 0;
        z-index: 10;
        right: 0;
        margin-bottom: 1rem;
    }
    
    
    
      .navbar-light .navbar-toggler{
        border-color: #04030300;
      }
      ul.nav-inner>ul.dropdown__lists.list2 {
        position: relative;
        left:0;
        
    }
    ul.nav-inner>.dropdown__lists>li>a{
    
        font-size: 1rem;
    }
    ul.nav-inner>.dropdown__lists {
        display: block;
        width: 50%;
        position: relative;
        top: 0rem;
        
    }
    
    ul.nav-inner>.dropdown__lists>li.dropdown__list {
        background-color: #b2cee063;
        width: 100%;
    }

    
    }
    
 

    .contactaria.sp-none{
        display: none;
    }

    .navbar-light .navbar-toggler {
       
        position: absolute;
        right: 2px;
        top: 1rem;
    }

    a.navbar-brand.title-logo.tel, a.navbar-brand.title-logo.mail {
        position: relative;
        top: 0rem;
        right: 0rem;
        width: 50%;
        align-self: center;
    }

    
    a.navbar-brand.title-logo.tel >img, a.navbar-brand.title-logo.mail>img {
        width: 100%;
        height: auto;
        padding: 0.3rem;
        border: #808080ba 1px;
        box-shadow: 4px 4px 6px #0000001f;
        background-color: #ffffff8c;
    }
a.navbar-brand.title-logo.tel >img:hover,a.navbar-brand.title-logo.mail>img:hover{
    transform: translate(0, 3px);
    background-color:#ffffffd6;
}
    

@media screen and (min-width:821px){
    ul.menudelate.delat{
        opacity: 0;
    }
  
    }
    @media screen and (max-width:768px)
    {
    .gnavi__lists
{
height: 90vh;
justify-content: space-around;
}}

 /***footer*/

 p.disp.col-12.col-md-12.text-center {
    font-size: 1rem;
    color: black;
}
 a.mobile-footer {
    position: relative;
  
    display: flex;
   
}
a.mobile-footer.line {
    width: 50%;
    background-color: #06c755;
    
}



a.mobile-footer.web {
    width: 50%;
    background-color: #6096ba;
    
}
.sp-footer-space {
  height: 8rem;
  display: block;
}
@media screen and (min-width: 768px) {
  .sp-footer-space {
    display: none;
  }
}

a.mobile-footer.line>img,a.mobile-footer.web>img{
    width: 100%;
    height: auto;
}
a.mobile-footer.tel>img{
    height: 100%;
    width: auto;
}
a.mobile-footer.tel {
   height: 3rem;
    background-color: white;
    margin: auto;
 
}
img.mobile-footer-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}
 .fixed-bottom {
    height: 12rem;
    /* background-image: linear-gradient( to right, #25aae1, #4481eb, #04befe, #3f86ed ); */
    background-color: #274c77;
    transition: all 0.5s ease-in;
    opacity: 0;
    z-index: 500!important;
}

 .fixed-bottom.contactaria {
    position: fixed;
    flex-wrap: wrap;
    margin: 0;
    text-align: center;
    justify-content: space-around;
    align-content: baseline;
    
   
}
.navbar-light .navbar-toggler{
    border: none!important;
}


button[aria-expanded="true"] > span {
    position: relative;
    display: none;
  }
   
  button[aria-expanded="true"]::after {
    position: absolute;
   
  border: none;
    font-size: 28px;
    content: "X";
    color:black!important;
  }
.fixed-bottom.appeal{
    opacity: 1;
}

.bg-color{
    background-color: #aaafb329;
}
div.houzin>dl.accordion{
    margin-bottom: 1rem;
}
.fixed-bottom.contactaria.pc-none>.contactaria-parts {
    text-align: center;
    width: 50%;
   
    align-self: center;
}
.fixed-bottom.contactaria.pc-none>.contactaria-parts.last{
    width: 100%;
   margin-bottom: 1rem;
} 


a.footer.nav-link.color-Black>span {
    color: white;
    top: 0;
    padding: 0rem;
}
ul.pc-footer>li>a:hover ul.pc-footer>li>a>span {
    background-color: aliceblue;
}
span.link-text {
    margin: auto;
    padding: 0.8rem 0rem;
    /* background-color: white; */
    border-radius: 12px;
    color: white;
    height: 0rem;
}
ul.pc-footer {
    border: none;
    font-size: 0.75rem;
    
}


article.mainaria-disp.footer.mx-auto {
  padding: 3rem 0;
    background-color: white;
}
span.list-box-tag {
    padding: 0.5rem 0;
}
li.nav-item.flex-fill.footer>a {
 
    padding: 1rem;
}
.description {
    text-align: center;
    padding: 3rem 1rem;
}
img.full {
    width: 100%;
    height: auto;
}


.width-90 {
    width: 90%;
    margin: auto;
}
/****サービス*/

img.svganimation {
    position: absolute;
    top: 0;
    right: 1rem;
    height: 4rem;
    bottom: 0;
    padding-top: 1rem;
    animation: righttoleft 3s ease-in-out 0s 1 normal both;
    opacity: 0;
}

img.svganimation.shake {
    position: absolute;
    top: 0;
    right: 1rem;
    height: 4rem;
    bottom: 0;
    padding-top: 1rem;
    animation: shake 3s ease-in-out 0s 1 normal both;
}
i.fa-solid.fa-truck-moving.fa-3x.pt-3.mb-3.mb-md-0{
    animation: righttoleft 3s ease-in-out 0s 1 normal both;
    position: relative;
}


@keyframes righttoleft {
    0% {
      top: 0%;
      opacity: 1;
      left: -30%;
    }
   

    100% {
      top: 0%;
      opacity: 1;
      left:0%;
    }
  }

  @keyframes shake {
    0%,50%,100% {
      top: 0%;
      opacity: 1;
      transform: rotate(10deg);
    }
   

    25%,75% {
      top: 0%;
      transform: rotate(-10deg);
      
    }
  }
section.mainaria.service.container.maincontent {
    position: relative;
   
}
.service.row.col-md-6 {
    position: relative;
}
.maincontainer.service {
    position: relative;
    display: flex;
    flex-wrap: wrap;
   
    margin: 0 auto;
   
    
}


figure.backgroundbox {
    width: 100%;
    overflow: hidden;
    margin: 0;

    margin-top: 0rem;
    text-align: center;
    /* margin-top: 8rem; */
    height: 300px;
    overflow: hidden;
   
    right: 0;
    position:absolute;
}


figure.backgroundbox>figcaption {
    position: absolute;
    top: 32%;
    color: #f9fafb26;
    right: 0;
    font-family: fantasy;
    font-size: 5rem;
    left: 0;
}

p.info-text {
    padding: 1rem;
    text-align: center;
    width: 100%;
}
img.object{
  object-position: 0px -70px;
    /* width: fit-content; */
    height: auto;
    width: 100%;
    transition:1s all
}

figure.backgroundbox:hover img.object{
    transform:scale(1.2,1.2);
    transition: all 1s;
}
img.object.top {
    object-position: 0px 0px;
}



.ourbusiness.textcontent {
    width: 100%;
    position: absolute;
    bottom: 0%;
    background-color: #ffffffc2;
}
button.btn.btn-primary.overray {
    position: absolute;
    bottom: 2rem;
    width: 10rem;
    left: calc((100% - 10rem) * 1/2);
}
.disp-undertext {
    margin: 2rem auto;
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    font-family: 'Sawarabi+Gothic';
}
.disp-undertext.note>p {
    font-size: 1rem;
}

.contentwrappaer {
   
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    margin: 0rem auto;
    justify-content: center;
}



@media screen and (max-width: 767px)  {
    .contentwrappaer {
        width: 100%;
    }
    .maincontainer.service{
        width: 100%;
    }
    article.mainaria-disp{
        width: 100%;
    }
    .fixed-bottom{
        height: 8rem;
    }
   
}
.card-body.pari:hover .card-body.pari>img{
    opacity: 0.8;
}
/**品目リスト*/
.card-body.pari {
   
    padding: 0rem 1rem;
    text-decoration: none;
    color: black;
    
    text-align: center;
   flex: 0 0 auto;
   position: relative;
   display: flex;
   flex-wrap: wrap;
   opacity: 1;
   height: 400px;
   transition: all 0.3s;
}
.maincontainer.service a {
    color: black;
}
.card-body {
   
    padding: 0rem 1rem;
    text-decoration: none;
    color: black;
    
    text-align: center;
   flex: 0 0 auto;
   position: relative;
   display: flex;
   flex-wrap: wrap;
   opacity: 1;
  flex-direction: column-reverse;
   transition: all 1s;
}

a.card-body:hover .card-img-top{
    transform: scale(1.1);
    padding: 0rem;
}

a.card-body.pari>img {
    width: 100%;
    height: auto;
}



.card-body.hover-non:hover{
 opacity: 1;
}
.card-body.hover-non.item{
    text-align: left;
    font-size: 0.75rem;
}
.card-body.item {
    height: auto;
margin: 0;}
.bold-box{
border: 5px solid #274c77;}
.wrap.py-5.mt-5.col-11.col-md-7.mx-auto.boxshadow {
    font-family: 'Sawarabi+Gothic';
}
button.itemlisthover {
    opacity: 0;
    top: 50%;
    transition: 0.3s;
    position: absolute;

}

.card-body.top{
    background-color: white;
}
.card-body.top>.card-text:last-child {
    margin-bottom: 0;
    padding-bottom: 1rem;
    background-color: #ffffff1c;
    /* background-color: #b6b6b6; */
    color: white;
    z-index: 10;
    position: absolute;
    top: 63%;
}

ul.wrap.servicelist{
    position: relative;
}

ul.wrap.servicelist:hover .itemlisthover{
    opacity: 1;


}
.card-body>img {
    text-align: center;
   width: 100%;
   height: auto;
    object-fit: contain;
    transition: all 0.4s;
   
}

.card.servicelist{
    opacity: 0.8;
}
.card.servicelist:hover{
    opacity: 1;
    transition: all 0.5s;
}
figure.carditem {
    position: relative;
}
.card-text {
    margin-bottom: 0;
    padding-bottom: 1rem;
    /* background-color: #b6b6b6; */
    color: #1c1a1a;
    z-index: 10;
    position: absolute;
    bottom: 0%;
    padding-top: 5rem;
    display: inline-block;
}
.card-text.rel {
    position: relative;
    padding-top: 0;
}
.card-img, .card-img-top{
   }

@media screen and (max-width: 767px) {
    .card-img, .card-img-top{
        padding: 0rem;}

        .menudelate>a.navbar-brand.titlelogo {
            position: relative;
            top: 0rem;
            left: 0rem;
            width: 70%;
            /* height: 60px; */
            padding-left: 1rem;
        }
        

}

@media screen and (max-width: 821px)  {
    img.object {
        object-position: 0px -6px;}
    
        figure.backgroundbox {
            height: 250px;
        }
        .fixed-bottom{
            height: 8rem;
            background-color: white;
        }
        div.houzin>dl.accordion{
            margin-bottom: 3rem;
        }
        a.mobile-footer.line>,a.mobile-footer.web,a.mobile-footer.tel{
            width: 33%;
            
        }
        .card-body>img {
            text-align: center;
           
            object-fit: contain;
            /* padding-top: 1rem; */
            
        }
       
    div.houzin>.card-body{
        height: auto;
    }
    }
    
 img.linkicon {
    
        height: 2rem;
        position: relative;
        top:0rem;
        


 }
/***見出しタグ***/


h1.title {
 
    font-size: 1rem;
    position: absolute;

    display: inline-block;
   
    padding: 1rem;
}
h1{
    position: relative;
}
h2 {
    width: fit-content;
    color: #261f1f;
    position: relative;
    font-size: 1.25rem;
    padding-left: 1rem;
    padding: 1rem 1rem 1rem 1rem;
    
    /***
    border-style: solid;
    border-width: 0px 0px 2px 16px;
    /* display: inline-block; 
    border-color: #579bff;
    
    background-color: #a7d7e11a;*/
   
}
h2.circle:first-letter{
    color:white;
    background-color:#6096ba;
    border-radius: 50%;
    font-size: 2rem;
    width: 3rem;
    padding: 0.5rem 1rem;
  
}
article.mainaria-disp>h2>ruby:first-letter{
    color: #04befe;
}


.h2-sidebar {
    display: flex;
    /* flex-grow: 1; */
    align-items: center;
    justify-content: center;
}

.bar {
    border-top: #274c77 2px solid;
    /* width: auto; */
    flex-grow: 1;
    display: inline-block;
}

.h2-sidebar>h2 {
    margin-bottom: 0;
    padding-right: 1rem;
    margin-right: 1rem;
    margin-left: 2rem;
    font-size: 1.5rem;
}
h3 {
    position: relative;
    font-size: 1rem;
    line-height: 1.5rem;
    margin-top: 0.5rem;
   
}
h3.service {
    color: #274c77;
    display: inline-block;
    width: 100%;
    height: fit-content;
    padding-top: 1rem;
    /* background-color: #4d87df; */
    /* border-radius: 16px 16px 0 0; */
    font-size: 1rem;
    margin-bottom: 0;
    /* padding: 1rem; */
    /* padding-left: 2.5rem!important; */
    text-align: center;
    /* border: 1px solid #0000004f; */
}
span.h3innner {
    font-weight: bold;
    font-size: 1rem;
}

@media screen and (max-width: 767px) {
    span.h3innner{
font-size: 0.75rem;


    }
  }

/**
  h3.service::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.5rem;
    transform: translateY(-50%);
    border: 15px solid #0d6efd00;
    border-left: 20px solid #274c77;
}


**/
.width-100{
    width: 100%;
}


h3.service::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #fdfdfd;
    bottom: -1px;               
    transform: scale(0, 1);     
    transform-origin: left top; 
    transition: transform 0.3s; 
}
    
h3.service:hover::after {
    transform: scale(1, 1);    
    }

   .container.overray {
       
        top: 50%;
        display: inline-block;
        background-color: white;
        color: blue;
        line-height: 2rem;
        width: 90%;
    }
    div.houzin>.card-body{
        align-content: baseline;
    }
   
    .card-body.top>h3.card-title {
        border-radius: 0;
        position: relative;
        border-radius: 16px;
        display: inline-block;
        font-weight: bold;
        width: 100%;
        font-size: 1rem;
        /* bottom: 0; */
        z-index: 10;
        line-height: 1.5rem;
        /* padding: 0.3rem 1rem; */
        align-self: center;
        left: 0;
        right: 0;
        top: 0;
        margin: 0 auto;
        color: black;    }

    h3.card-title {
        border-radius: 0;
        position: relative;
        border-radius: 16px;
        display: inline-block;
        font-weight: bold;
        width: 100%;
        font-size: 1rem;
        /* bottom: 0; */
        z-index: 10;
        line-height: 2rem;
     
        align-self: center;
        left: 0;
        right: 0;
        top: 10%;
        margin: 0 auto;
        color:black;
        font-size: 1rem;
      
    }

   
    h3.card-title::after {
        position: absolute;
        content: "";
        width: 80%;
        height: 1px;
        background-color: #111111;
        bottom: 0;
        z-index: 11;
        left: 0;
        right: 0;
        margin: auto;
    }


    .card-body.pari.top>h3.card-title::before {
        position: absolute;
        content: "";
        width: 80%;
        height: 2px;
        background-color: #0f0f0f;
        top: 0;
        z-index: 11;
        left: 0;
        right: 0;
        margin: auto;
    }

    .card-body.pari.top>h3.card-title::after {
        position: absolute;
        content: "";
        width: 80%;
        height: 2px;
        background-color: #0f0f0f;
        bottom: 0;
        z-index: 11;
        left: 0;
        right: 0;
        margin: auto;
    }

    h3.card-title.width-none{

        width: 100%;
        font-size: 0.75rem;
    }  

    .navbar-collapse.show{
        background-color: white;
    }

    .navbar-collapse.show {
        background-color: #ffffffd4;
        border-radius: 16px;
        /* background-color: #cbc2c2cc; */
        border: 3px solid #274c777d;
        height: 70vh;
    }

      
 /****会社情報*/
 table.companyinformation {
    width: 90%;
    margin: 3rem auto;
}
a.hanyou-otoiawase {
    background-color: #061e3f;
    padding: 1rem;
    color: #fff;
    transition: all 0.2s;
}


table.companyinformation>tbody {}

table.companyinformation>tbody>tr>th {
    line-height: 2rem;
    
    
}

table.companyinformation>tbody>tr>th>td {
    padding: 0.5rem;
}      

/***SWIPER**/    
 
        
    
      @keyframes delate {
        0% {
         opacity: 0.8;
         transform: scale(1.15);
        }
        100% {
       
       opacity: 0;
       transform: scale(1.15);
        }
      }
     

      @keyframes zoomUp {
        0% {
          transform: scale(1);
        }
        100% {
          transform: scale(1.15);
        }
      }
    

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

    /***SPは100％*/
    @media screen and (max-width: 767px){
        .swiper-container,.slide-img {
            height: 250px;
        }
    
        .card-body.top>h3.card-title{
            font-size: 0.75rem;
        }

    p.left {
       
        width: fit-content;
        display: inline-block;
        /* left: 3.5rem; */
        /* right: 10rem; */
        padding-top: 0.5rem;
        position: relative;
    }
}
  /* 前へ次への矢印カスタマイズ */
.swiper-button-prev:after,
.swiper-button-next:after {
  bottom: 0;
  content: "";
  height: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 0;
}
/* 前への矢印カスタマイズ */
.swiper-button-prev:after {
  border-bottom: 20px solid transparent;
  border-right:30px solid #0d6efd87;
  border-top: 20px solid transparent;
}
/* 次への矢印カスタマイズ */
.swiper-button-next:after {
  border-bottom: 20px solid transparent;
  border-left:30px solid #0d6efd87;
  border-top: 20px solid transparent;
}
/* 画像サイズ調整 */

@keyframes fromBottom {
    0% {
      top: 0%;
      opacity: 0;
      left: 100%;
    }
    100% {
      top: 0%;
      opacity: 1;
      left:50%;
    }
  }
  .swiper-slide-active span
 {  position: absolute;
    animation: fromBottom 1s ease-in-out 0s 1 normal both;
    font-size: 2rem;

  }
  section.openingslide {
    width: 100%;
    margin: 0;
    /* margin-top: 5rem; */
    position: relative;
    height: calc(40vw - 80px);
    overflow: hidden;
    font-family: 'Sawarabi+Gothic', sans-serif;
    top: 0;
  /**animation: fade 3s ease-in 0s 1 normal forwards;
    background-image: url("https://reuse-bonbon.stripper.jp/reuse-bonbon/wp-content/themes/reuse-bonbon/img/homeback.webp");
    background-size:cover;*/
}
section.openingslide.short {
    height: 30vw;
    top:0;
}
section.openingslide.aria {
    width: 100%;
    height: 300px;
}

section.openingslide.aria>.splide {
    width: auto;
    margin: 0;
    /* margin-top: 5rem; */
    position: relative;
    height: 300px;
    overflow: hidden;
    font-family: 'Sawarabi+Gothic', sans-serif;
    top: 0;
}

.splide__pagination__page {
    background: #274c77;
    border: 0;
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    margin: 3px;
    opacity: .7;
    padding: 0;
    position: relative;
    transition: transform .2s linear;
    width: 10px;
}
.splide__track--nav>.splide__list>.splide__slide.is-active {
    border: 1px solid #274c778c;
}
.aria>.splide__list

{
    height: 300px;
}


.splide__slide {
    opacity: 0.8;
  }
  /* 選択されているサムネイルだけ透過しない */
  .splide__slide.is-active {
    opacity: 1;}

li.splide__slide.aria>img {
        height: auto;
        width: 100%;
    }
    #minislide {
        height: auto;
        width:100%;
        margin: auto;
    }
    #minislide >.splide__slide img{
        width: 100%;
        height: auto;
        object-fit: cover;
    }
#h30{
    height: 300px;
    width: auto;
}
section#thumbnail-carousel {
    
    margin: auto;
}
.opening-wrap {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    flex-direction: column;
    height: fit-content;
    right: 0;
    /* bottom: 5rem; */
    padding: 1rem 0;
    /* top: 20%; */
    left: 50%;
    /* right: 50%; */
    /* margin: auto; */
    /* width: 100%; */
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.945);
}

.opening-wrap.short {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    height: fit-content;
    right: 0;
    background-color: rgba(255, 255, 255, 0);
    /* bottom: 5rem; */
    top: 70%;
    left: 0;
}
.back-g{
    background-color: #209791;
    color: white;
}
.color-g{
    color: #0c8982
}
.top-80{
    top:-80px;
}
.splide.mainsplide{
    width: 100%;
    margin: 0;
    /* margin-top: 5rem; */
    position: relative;
    height: calc(50vw - 80px);
    overflow: hidden;
    font-family: 'Sawarabi+Gothic', sans-serif;
    top: 0;
}
.splide.splide2{
    height: 300px;
}
.splide2.splide__slide{
    height: 100%;
}
.mainsplide.splide__arrows.splide__arrows--ltr {
    position: absolute;
    bottom: 15%;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 10;
}
@media screen and (min-width: 768px) {
  .splide__slide {
    width: 100% !important;
    margin-right: 0 !important;
  }
}
.mainsplide.splide__pagination {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    margin: auto;
    pointer-events: none;
    position: absolute;
    bottom: 00%;
    right: 0;
    left: 0;
}

.splide__slide img {
    width: 100%;
    height: 100%;
}
figure.post>img {
    width: 100px;
    height: auto;
}
#main-carousel>div>ul>li>a>.splide__slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
.splide__track {
  height: auto !important; /* ← 自動で高さ調整させる */
  max-height: 400px;       /* ← 必要なら制限を加える */
  overflow: hidden;
}
#minislide>.splide__slide img {
   
}

div.bottom{
    width: 100%;
    height: 50%;
    top:50%;
    left:0;
    animation: opening-slide-r 3s ease-in 0s 1 normal forwards;
    background-color: rgba(255, 255, 255, 0);
}

@keyframes fade{
    0%{
       opacity: 0;
    width: 100%;
    }
   
   
   
   
    100%{
   
     width: 100%;
        opacity: 1;
     
    }
}
@keyframes opening-slide-l{
    0%{
        background-color: white;
    width: 100%;
    }
    
    25%{
      width: 75%;
    
    }
   
    50%{
     width: 50%;
     
        
       
    }
    75%{
   
     width: 25%;
       
       
    }
    100%{
   
     
      
        width: 0;
      
    }
}
@keyframes opening-left{
    0%{
        
  left:-100%;

    }
    
    25%{
    
    
    }
   
    50%{
     
     
        
       
    }
    75%{
   
     
       
    }
    100%{
   
     
      left:0;
        opacity: 1;
    }
}
  /**
  .background-ani{
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-image: url("https://reuse-bonbon.stripper.jp/reuse-bonbon/wp-content/themes/reuse-bonbon/img/background.png");
    animation: opening 2s ease-out 10s 1 normal forwards;
  }

  */
  img.openingicon {
    
}
figure.openingicon.col-3>img {
    width: 100%;
    height: auto;
    padding: 1rem;
}


.opening-container {
    position: absolute;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin: auto;
    left: 0;
    right: 0;
    text-align: center;
    /* top: 0; */
    /* bottom: 50%; */
    background-color: #ffffff00;
    height: 100%;
    font-family: 'Sawarabi+Gothic';
   
    z-index: 9;
}


    .opening-text-wrapper{
        position: absolute;
        justify-content: center;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: auto;
        left: 0;
        right: 0;
        text-align: center;
        /* top: 0; */
        /* bottom: 50%; */
        background-color: #ffffff00;
        height: 100%;
        font-family: 'Sawarabi+Gothic';
        animation: opening-text 2s ease-in 7s 1 normal forwards;
        z-index: 9;
        font-size: 1.25rem;
        
    }

    @keyframes opening-text{
        0%{
       
        
        }
        1%{
            opacity: 1;
          
        }
        40%{
          
        
        }
       
        100%{
       
         
            opacity: 0;
           
        }}

        

        @keyframes opening-text-mobile{
            0%{
           
            
            }
            1%{
                opacity: 1;
              
            }
            40%{
              
            
            }
            60%{
               
              
                
            }
            90%{
               
             
            }
            100%{
                height: 100%;
                width: 100%;
                left: 0;
                right:0;
              
               
            }
            }
            @keyframes opening-text-mobile-fade{
                0%{
               opacity: 1;
                
                }
               
                100%{
                   opacity: 0;
                   
                }
                }
.opening-text.vol1{
    animation: opening 2s ease-in 0s 1 normal backwards;
    opacity: 0;
    

}
.opening-text.vol2{
    animation: opening 2s ease-in 2s 1 normal backwards;
    opacity: 0;
    

}
.opening-text.vol3{
    animation: opening 2s ease-in 4s 1 normal backwards;
    opacity: 0;
 

}

.opening-text.final{
    animation: opening 2s ease-in 6s 1 normal forwards;
    opacity: 0;
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    bottom: 0;

}
div.openinglink {
    animation: opening 2s ease-out 8s 1 normal forwards;
    position: absolute;
    opacity: 0;
    text-align: center;
    width: 64%;
    height: 67%;
    background-color: white;
    clip-path: circle(50% at 50% 50%);
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    bottom:50%;}



div.openinglink>p {
    position: absolute;
    left: 0;
    right: 0;
    top: 30%;
    width: 100%;
    font-size: 1.5rem;
    font-weight: 800;
    border-bottom: aliceblue 3px solid;
}
div#main-carousel>div>ul>li>a>.splide__slide img{
    width: 100%;
    height: auto;
  }
  a>.h-o{
    width: 100%;
    height: auto;
    border-radius: 16px;
  }
.openinglink>span {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    width: 80%;
    margin: auto;
}

#innner-w1{
    background-image: url();
}
.first1 {
    position: absolute;
    top: 12rem;
    animation: opening 0.5s ease-in 0s 1 normal forwards;
    opacity: 0;
    z-index: 5;
    right: 0;
    margin: auto;
    width: 100%;
    height: fit-content;
    top: 20%;
    /* bottom: 50%; */
    
}
.first1>p.copy {
    font-size: 1.5rem;
    font-weight: 600;
    width: fit-content;
    padding: 1rem rem;
    text-shadow: 3px 2px 2px #6c757d3d;
   color: white;
    padding: 1rem 2rem;
}
.second2 {
   
    display: flex;
    flex-direction: column;
    /* text-align: center; */
    animation: opening 2s ease-out 2s 1 normal forwards;
    z-index: 5;
    opacity: 0;
    height: fit-content;
    font-family: 'Sawarabi+Gothic', sans-serif;
    padding: 1.5rem;
    background-color: #ffffff42;
    width: 100%;
    position: relative;
  
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);


}
.second2.short {
    flex-wrap: wrap;
    flex-flow: wrap;
    
        background-color: #0c0b0bb5;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 0%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        color: white;
        font-family: serif;
        padding: 0;
       animation: opening 2s ease-out 0s 1 normal forwards;
        
    
}
.second-innner{
    width: 100%;
    animation: opening-left 2s ease-out 2s 1 normal forwards;
}
.second>img {
   height: 100%;
    bottom: 0;
    width: auto;
   
}
.second>p {
    width: 100%;
    line-height: 2rem;
}


div.opening-slide-text{
    position:absolute;
    top: 0;
    z-index: 3;
    left: 0;
    width: 100%;
    background-size: contain;
    right: 0;
    margin: auto;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'Sawarabi+Gothic', sans-serif;
    font-weight: bold;
  
  
    height: 100%;
}
.openingimg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    left: 0;
    right: 0;
}
/***
.imgwrapper.wrapper1 {
    position: absolute;
    top: 0;
    left: 0%;
    width: 33.33333%;
    height: 100%;
}

.imgwrapper.wrapper2 {
    position: absolute;
    left: 33.4%;
    width: 33.3333%;
    height: 100%;
}


.imgwrapper.wrapper3 {
    position: absolute;
    left: 66.6666%;
    width: 33.3333%;
    height: 100%;
}

*/
.openingimg.wrap {
    background-color: #eaecef;
   
}/***
.openingimg.back{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(https://reuse-bonbon.stripper.jp/reuse-bonbon/wp-content/themes/reuse-bonbon/img/ope2.png);
    background-size: cover;
    background-position: top right;
    animation: opening 2s ease-in 7s 1 normal forwards;
    opacity: 0;
    background-repeat: no-repeat;
    filter: opacity(0.8);
}
/

/**
.wrapper1{
    background-color: #051f3e;
}**/

/**
.wrapper3{
    background-color: #051f3e;
}
*/
.imgwrapper{
    height: 100%;
    position:relative;
}
.imgwrapper.wrapper1 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    bottom: 50%;
}


.imgwrapper.wrapper1>img.openingdown1,
.imgwrapper.wrapper1>img.openingdown2,
.imgwrapper.wrapper1>img.openingdown3{
    opacity: 0;
    position: absolute;
    transition: all 0.5s;
    height: 50%;
    width: auto;
   
    
    top:25%;
}
.imgwrapper.wrapper1>img.openingdown1{
   animation: opening-r1 3s ease-out 0s 1 normal forwards;
  
}
.imgwrapper.wrapper1>img.openingdown2{
   
    animation: opening-r2 3s ease-out 1s 1 normal forwards;
 
}
.imgwrapper.wrapper1>img.openingdown3{
   
    animation: opening-r3 3s ease-out 2s 1 normal forwards;
   
}

.imgwrapper.wrapper1>img.openingup1,
.imgwrapper.wrapper1>img.openingup2,
.imgwrapper.wrapper1>img.openingup3{
    opacity: 0;
   
    position: absolute;
    transition: all 0.5s;
    width: auto;
    height: 50%;
  
   
    top:25%;
}
.imgwrapper.wrapper1>img.openingup1{
    animation: opening-r4 3s ease-out 2s 1 normal forwards;
  
}
.imgwrapper.wrapper1>img.openingup2{
   
    animation: opening-r5 3s ease-out 1s 1 normal forwards;
 
}
.imgwrapper.wrapper1>img.openingup3{
   
    animation: opening-r6 3s ease-out 0s 1 normal forwards;
}






.opening-background>img{
    position: absolute;
    width: 100%;
    height: auto;
   
    

}
.opening-slide-text>img{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 30%;
    top:50%;
    bottom: 50%;
    transition: all 0.3s;
  
}

p.opening-slide-text{
    position: absolute;
   

   
       
}


.opening-slide-text.text4{
    animation: openingcopy1 3s ease-out 3.5s 1 normal none;
    left:20%;
    bottom: 80%;
    opacity: 0;
}
.opening-slide-text.text5{
    animation: openingcopy1 3s ease-out 5s 1 normal none;
    left:10%;
    bottom:40%;
    opacity: 0;
}
.opening-slide-text.text6{
    animation: openingcopy1 4s ease-out 5.5s 1 normal both;
  
    left:30%;
    bottom: 10%;
   
  
   
    width: 100%;
    opacity: 0;
}

@keyframes opening-r1{
0%{
left :50%;
right: 0%;
}
1%{
    opacity: 1;
  

}
99%{opacity: 1;
    
}
100%{opacity: 1;
    left :0%;
   
}
}
@keyframes opening-r2{
    0%{
    left :50%;
    right: 0%;
    }
    1%{
        opacity: 1;
      
    
    }
    99%{opacity: 1;
        
    }
    100%{opacity: 1;
        left :14.6666%;
        
    }
    }

    @keyframes opening-r3{
        0%{
        left :50%;
        right: 0%;
        }
        1%{
            opacity: 1;
          
        
        }
        99%{opacity: 1;
            
        }
        100%{opacity: 1;
            left :30.33%;
               
        }
        }
        @keyframes opening-r4{
            0%{
            left :47.9999%;
            right: 0%;
            }
            1%{
                opacity: 1;
              
            
            }
            99%{opacity: 1;
                
            }
            100%{opacity: 1;
                left :47.99999%;
                
            }
            }
            @keyframes opening-r5{
                0%{
                left :47.9999%;
                right: 0%;
                }
                1%{
                    opacity: 1;
                  
                
                }
                99%{opacity: 1;
                    
                }
                100%{opacity: 1;
                    left :66.66666%;
                      
                }
                }
                @keyframes opening-r6{
                    0%{
                    left :47.9999%;
                    right: 0%;
                    }
                    1%{
                        opacity: 1;
                      
                    
                    }
                    99%{opacity: 1;
                        
                    }
                    100%{opacity: 1;
                        left :83.33333%;
                          
                    }
                    }
@keyframes openingup{
    0%{
    transform: translatey(100%) ;
   
    }
    1%{
        opacity: 1;
        
    }


    40%{
        transform:  translatey(0%) ;
        
     
     }
     60%{
         transform:    translatey(0%);
         opacity: 1;
        
         
     }
    90%{
        opacity: 0.5;
        
    }
    100%{opacity: 0;
        transform: translatey(-100%);
       
    }


}

@keyframes opening {
    0% {
      
      opacity: 0;
    }

  50%{
    opacity: 0.5;
  }
     100%{
        opacity: 1;
     }
      }

@keyframes openingcopy {
    0% {
      
      opacity: 0;
    }

   50%{
    opacity: 1;
   }
    
    
  
     100%{
        opacity: 0;
     }
      }


      @keyframes openingcopy1 {
        0% {
        
          opacity: 0;
         
       
        }
        
          50% {
         
            opacity: 1;
          }
      
         90%{
            opacity: 1;
         }
         100%{
            opacity: 1;
         }
          }
    





          .slide-container {
            width: 100%;
           
            align-items: center;
            height: 100%;
            overflow: hidden;
            
          }
          .slide-wrapper {
         position: relative;
           height: 100%;
           width: 100%;
          }
          .slideshow {
            width: 100%;
            object-fit: cover;
            border: 1px solid #ddd;
            height: 100%;
            position: absolute;
            top:0;
            left: 0;
        }

        .slideshow.show1>a>img{
              position: absolute;
            animation: slide-flow  linear 5s 0s forwards;
            width: 100%;
            height: auto;
        }
        .slideshow.show2>a>img{
            animation: slide-flow  linear 5s 3s forwards;
position: absolute;
width: 100%;
height: auto;
        }
        .slideshow.show3>a>img{
            animation: slide-flow  linear 5s 6s forwards;
            position:absolute; width: 100%;
            height: auto;
        }
          @keyframes slide-flow {
            0% {transform: translateX(0);}
        100% {transform: translateX(-100%);}
       }

       @keyframes slide-fade{
        0% {
        opacity: 0;}
        50%{
            opacity: 1;
            
        }
    100% {
    opacity: 0;}
   }

@media screen and (max-width: 820px){
    section.openingslide {
        width: 100%;
       height: 400px;
        margin: 0 0 0 0 ;
        
    }
    section#thumbnail-carousel {
       
        margin: auto;
    }
    .list-tab {
   
        justify-content: center;
        transition: all 0.5s;
        align-items: flex-end;
    }
    
   #minislide {
    height: auto;
    width: 90%;
    margin: auto;
}
    .mainsplide.splide{
        height: calc(50vw - 80px);
    }
    .first1 {
        top: 0;
        width: 70%;
        height: 100%;
        left: 0;
        right: 100%;
    }
    .second2 {
        position: absolute;
        
        text-align: center;
        animation: opening 2s ease-out 2s 1 normal forwards;
        z-index: 5;
        opacity: 0;
    
        height: fit-content;
        padding: 2rem 1rem;
        top: 0%;
        background-color: #f0f8ff6b;
        position: absolute;
        top: 50%;
        left: 0%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }
    .openingimg.back{
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}
.second2>p.copy:first-child {
    position: absolute;
   bottom:20%;
    left: 0;
    right: 0;
    margin: auto;
}
.second2>p.copy:last-child {
    position: absolute;
    bottom: 10%;
    left: 0;
    right: 0;
    margin: auto;
}

.first1>p.copy {
    font-size: 1.25rem;
    font-weight: 600;
    width: 90%;
    padding: 0rem 0.5rem;
    text-align: left;
    position: absolute;
    left: 0;
    right: 0;
    top: 32%;
    /* bottom: 50%; */
    padding-left: 10%;
}

.opening-wrap {
  

}
.opening-wrap.short{
    top:80%;
}
}

@media screen and (max-width: 767px){
    .opening-text.vol1{
        animation: opening 2s ease-in 0s 1 normal forwards,opening-text-mobile-fade 2s ease-in 6s 1 normal forwards;
        opacity: 0;
        background-color: #ffffff65;
        
    
    }
    .wrap.col-12.title.mx-auto.justify-content-center.pb-1 {
      
    }
    
    .contact.sticky-top{
        border-bottom: none;
    }
    .splide__arrows.splide__arrows--ltr{
        bottom: 3%;
    }
    .splide.splide2{
        height: 300px;
    }
    .splide__pagination{
        bottom: -2%;
    }
   
    figure.openingicon.col-3>img {
        width: 100%;
        height: auto;
       padding: 0;
    }
    .opening-text.vol2{
        animation: opening 2s ease-in 2s 1 normal forwards,opening-text-mobile-fade 2s ease-in 6s 1 normal forwards;
        opacity: 0;
        background-color: #ffffff65;
        
    
    }
    .opening-text.vol3{
        animation: opening 2s ease-in 4s 1 normal forwards,opening-text-mobile-fade 2s ease-in 6s 1 normal forwards;
        opacity: 0;
        background-color: #ffffff65;
     
    
    }
    
    .opening-text.final{
        animation: opening 2s ease-in 6s 1 normal forwards;
        opacity: 0;
        font-size: 1.5rem;
    
    }
    div#simple-sitemap-container-645dd9f55261b {
        padding-bottom: 10rem;
    }

    .opening-text-wrapper{
        position: absolute;
        justify-content: start;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: auto;
        left: 0;
        right: 0;
        text-align: center;
        /* top: 0; */
        /* bottom: 50%; */
     
        height: 100%;
        font-family: 'Sawarabi+Gothic';
        animation: opening-text-mobile 2s ease-in 7s 1 normal forwards;
        z-index: 9;
        font-size: 1.25rem;
        top:0;
      
    }


    .slide-img.img2,.slide-img.img3 { 
        top:6rem;}
        div.openinglink{
            display: none;
        }  
        .openingimg{
            width: 100%;
        }  
        section.openingslide {
            width: 100%;
            margin-top: 0;
            height: auto;
            top: 0rem;
            overflow: visible;
            margin-bottom: 0rem;
        }
.splide{
  
        width: 100%;
        margin-top: 0;
       height: fit-content;
        top: 0rem;
        overflow: visible;
        

}

.opening-wrap {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    width: 100%;
    /* height: 100%; */
    /* right: 0; */
    /* top: 0rem; */
    bottom: 0%;
    left: 0;
    right: 0;
    margin: auto;
    line-height: 2rem;
    text-align: center;
}
.first1 {
    top: 8rem;
    width: 100%;
    height: fit-content;
    left: 0%;
    right: 50%;
    margin: auto;
}
.first1>p.copy {
    font-size: 1.25rem;
    font-weight: 600;
    width: 100%;
    padding: 0rem 0.5rem;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 32%;
    /* bottom: 50%; */
    background-color: #ffffff00;
    color: white;
    text-shadow:2px 1px 3px #272a2c;
}
.second2 {
    position: absolute;
    /* display: flex; */
    /* flex-wrap: wrap; */
    text-align: center;
    animation: opening 2s ease-out 2s 1 normal forwards;
    z-index: 5;
    opacity: 0;
    left: 0;
    /* right: 0; */
    /* bottom: 0; */
    height: fit-content;
    padding: 1rem 1rem;
    top: 82vw;
    background-color: #fff;
}
    .opening-slide-text>img{
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        width: 50%;
        top:50%;
        bottom: 50%;
      
    }
    p.opening-slide-text{
        position: absolute;
        font-size: 1.25rem
    
       
           
    }
    
    .wrapper2{
        background-color: rgba(255, 255, 255, 0);
    }
    .second {
        top: 80px;
        height: 270px;
        width: auto;

    }
    .openingimg.wrap {
       background-color: white;
    }
    .second>img {
        height: auto;
        bottom: 0;
        width: 100%;
        position: absolute;
        left: 0;
        padding: 1rem;
    }

    .wrapper1,.wrapper3{
    height: calc(100% - 100px);
    text-align: center;
    top: 100px;
    }

    .wrapper2{

        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
    }
    .imgwrapper.wrapper1>img.openingup1,
    .imgwrapper.wrapper1>img.openingup2,
    .imgwrapper.wrapper1>img.openingup3,
    .imgwrapper.wrapper1>img.openingdown1,
    .imgwrapper.wrapper1>img.openingdown2,
    .imgwrapper.wrapper1>img.openingdown3{
        opacity: 0;
        transform: scale(0.9);
        position: absolute;
        transition: all 0.5s;
        width: 33%;
    height: auto;
  
    top: 50%;
    bottom: 50%;
    }
    .imgwrapper.wrapper1>img.openingdown1{
        animation: opening-r1-m 3s ease-out 0s 1 normal forwards;
        top: 50%;
    bottom: 50%;
     }
     .imgwrapper.wrapper1>img.openingdown2{
        
         animation: opening-r2-m 3s ease-out 1s 1 normal forwards;
         top: 50%;
         bottom: 50%;
     }
     .imgwrapper.wrapper1>img.openingdown3{
        
         animation: opening-r3-m 3s ease-out 2s 1 normal forwards;
         top: 50%;
    bottom: 50%;
     }

    .imgwrapper.wrapper1>img.openingup1{
        animation: opening-r4-m 3s ease-out 0s 1 normal forwards;
        top: 0%;
        bottom: 0%;
    }
    .imgwrapper.wrapper1>img.openingup2{
       
        animation: opening-r5-m 3s ease-out 1s 1 normal forwards;
        top: 0%;
        bottom: 0%;
    }
    .imgwrapper.wrapper1>img.openingup3{
       
        animation: opening-r6-m 3s ease-out 2s 1 normal forwards;
        top: 0%;
        bottom: 0%;
    }
    
}
@keyframes opening-r1-m{
    0%{
    left :150%;
    right: 0%;
    }
    1%{
        opacity: 1;
      
    
    }
    99%{opacity: 1;
        
    }
    100%{opacity: 1;
        left :0%;
       
    }
    }
    @keyframes opening-r2-m{
        0%{
        left :150%;
        right: 0%;
        }
        1%{
            opacity: 1;
          
        
        }
        99%{opacity: 1;
            
        }
        100%{opacity: 1;
            left :33.333%;
            
        }
        }
    
        @keyframes opening-r3-m{
            0%{
            left :150%;
            right: 0%;
            }
            1%{
                opacity: 1;
              
            
            }
            99%{opacity: 1;
                
            }
            100%{opacity: 1;
                left :66.666666%;
                   
            }
            }
            @keyframes opening-r4-m{
                0%{
                left :150%;
                right: 0%;
                bottom:33%
                }
                1%{
                    opacity: 1;
                  
                
                }
                99%{opacity: 1;
                    
                }
                100%{opacity: 1;
                    left :0%;
                    
                }
                }
                @keyframes opening-r5-m{
                    0%{
                    left :150%;
                    right: 0%;
                    }
                    1%{
                        opacity: 1;
                      
                    
                    }
                    99%{opacity: 1;
                        
                    }
                    100%{opacity: 1;
                        left :33.33333333%;
                          
                    }
                    }
                    @keyframes opening-r6-m{
                        0%{
                        left :150%;
                        right: 0%;
                        }
                        1%{
                            opacity: 1;
                          
                        
                        }
                        99%{opacity: 1;
                            
                        }
                        100%{opacity: 1;
                            left :66.66666%;
                              
                        }
                        }
 p.dispri.bo{
    font-weight: bold;
 } 
/****JSanimation*/

.fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

/* JSが有効な場合にだけアニメーションさせる */
.js-enabled .fade {
  opacity: 0;
  transform: translateY(30px);
}

/* 表示開始状態 */
.fade.active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.fadein-left{

opacity:0;
transform:translateX(-200px);
transition:opacity 1s,transform 1s;
}

.fadein-left.is-show{
opacity: 1;
transform: translate(0);
}

.backbox.box1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f5f5dc7a;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
   
}

ul.company-information-list{
list-style: none;
}

p.coment {
    position: relative;
    top: -7rem;
    color: red;
    background-color: white;
}
section.mainaria.service.col-12.maincontent.mb-0.mb-md-5.mt-3.mt-md-0.py-0.py-md-0.text-center.pt-3.top-80{
    position: relative;
}

.list-tab {
    display: flex;
    margin: 0 -2px;
    padding-left: 0;
   
    flex-wrap: wrap;
    justify-content: center;
    transition: all 0.5s;
    align-items: flex-end;
   
}
.list-tab>li:hover .list-tab{
    border-bottom: 1px solid;
}

.list-tab > li {
    display: block;
    border: #261f1f 1px- solid;
    color: white;
    text-align: center;
    /* border-radius: 16px; */
    box-sizing: border-box;
    cursor: pointer;
    border: 1px 1px 1px 1px solid #f9fafb;
  
    background-color: #274c7775;
    transform: scale(0.8);
    width: 7rem;
    height: 7rem;
    border-radius: 50% 50%;
    line-height: 3.5rem;
}
img.list-tab-img {
    width: 48px;
    padding: 0.5rem 0.5rem 0rem 0.5rem;
}
.wrap-tab-content {
    margin-top: 1rem;
    border-top: none;
   
    
}
  .list-tab > ul >li
{  list-style: none;
    border: 1px solid black;
    border-radius: 16px 16px 0px 0px;
    transition: all 0.5s;
}

.list-tab .active {
    background-color: #160a36;
    color: #ffc107;
    transition: all 0.5s;
    /* clip-path: circle(50% at 50% 50%); */
    transform: scale(1);
}


.list-tab .active>h3.service {
    color: white;
}

  .tab-content{
    display: none;
    transition: all 0.3s;
 
   
  }
  .tab-content.active{
    display: block;
    transition: all 0.3s;
    
  }

  div#opening {
    height: 60vw;
    position: absolute;
    width: 100%;
   
    opacity: 1;
}
.b-r-l{
    border-radius:16px 0 0 0;
}
.b-r-r{
   border-radius: 0px 16px 0px 0px;
}
@media screen and (max-width: 767px) {
    section.mainaria.service.col-12.maincontent.mb-5.mt-5.pb-5.text-center.backgray.pt-3 {
        padding-bottom: 10rem!important;
    }
    .list-tab > li {
        border-bottom: none;
        width: 5rem;
        height: 5rem;
        line-height: 2.5rem;
        transform: scale(0.9);
    }
    
.list-tab .active{
transform:   scale (1);
}




}
.wrap-tab-content {
   
    border-top: none;
    transition: all 0.3s;
    height: auto;
}


div#opening>.child1{
    position:absolute;
    animation:opening1 5s ease-in-out 0s 1 normal both;
    
width: 100%;}

    div#opening>.child2{
        position: absolute;
        animation: opening2 5s ease-in-out 3s 1 normal both;}
    
        div#opening>.child3
        {position: absolute;
            animation: opening3 5s ease-in-out 4s 1 normal both;}
        
            
@keyframes opening1 {
    0% {
      top: 0%;
      opacity: 1;
      right: -10%;
   
    }
   
 50%{
    opacity: 1;
    right: 20%;
   
 }
    100% {
      top: 0%;
      opacity: 1;
      right:40%;
    
    }
}

            
@keyframes opening2 {
    0% {
      top: 0%;
      opacity: 1;
      right: -100%;
     
    }
   
 50%{
    right: 20%;
    opacity: 1;
   
 }
    100% {
      top: 0%;
      opacity: 1;
      right:50%;
    
    }
}

            
@keyframes opening3 {
    0% {
      top: 0%;
      opacity: 1;
      right: -100%;
    
    }
   
 50%{
    opacity: 1;
   right: 20;
 }
    100% {
      top: 0%;
      opacity: 1;
      right:60%;
    
    }
}
.accordion {
   
    padding: 0 ;
    margin: 0 auto;}

   
    
    .accordion_ttl {
      position: relative;
      background:  #6096ba;
      color: #fff;
      font-size: 16px;
      padding: 15px;
      border-bottom: 1px solid #fff;
      cursor: pointer;
   
    border-radius: 16px;
    }
   
    
       .accordion_ttl:before,
       .accordion_ttl:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translate(0, -50%);
        width: 14px;
        height: 2px;
        background-color: #fff;
        transition: 0.2s ease transform;
        color: black;
      }
      
      .accordion_ttl:after {
        transform: translate(0, -50%) rotate(-90deg);
      }
      
      .accordion_ttl.active:after {
          transform: translate(0, -50%) rotate(0deg);
        }
        .simple>.accordion_ttl:before,
        .simple>.accordion_ttl:after {
         content: "";
         display: block;
         position: absolute;
         top: 69%;
       left:1rem;
         transform: translate(0, -50%);
         width: 14px;
         height: 2px;
         background: #080808;
         transition: 0.2s ease transform;
       }
    .simple>.accordion_ttl:after {
        transform: translate(0, -50%) rotate(-90deg);
      }
      .simple>.accordion_ttl.active:after {
        transform: translate(0, -50%) rotate(0deg);
      }
      .simple>.accordion_cnt {
    
        transition: 0.2s ease max-height;
        border-radius: 0px;
      }   
      .simple>.accordion_ttl {
        position: relative;
        background: white;
        color:black;
    }
    .accordion_cnt {
      padding: 0 15px;
      line-height: 1.5;
      background: #f3f3f3;
      max-height: 0;
      overflow: hidden;
      transition: 0.2s ease max-height;
      border-radius: 16px;
    }

      .accordion_cnt p {
        margin: 15px 0;
      }


div.houzin>.accordion_ttl{
    background-color: white;
}

      div#wpcf7-f34-p35-o1 {
        width: 100%;
    }    
      table.CF7_table{
        width:80%;
        margin:0 auto;
        border: 3px solid #e5e5e5;
    }
    
    .CF7_table>tbody>tr>th>p{
        margin: 0.5rem 0;
    }

   table.CF7_table tr {
    border-top: 1px solid #e5e5e5;
    text-align: left;
}
    
    .single .entry-content table.CF7_table,
    .page .entry-content table.CF7_table{
        display:table;
    }
    
    /*入力欄*/
    .CF7_table input, .CF7_table textarea {
      
    }
    
    .CF7_table ::placeholder {
        color:#797979;
    }
    
    /*「必須」文字*/
    .CF7_req {
        font-size: 1rem;
        padding: 5px;
        background: #051f3e;
        color: #ffc107;
        border-radius: 3px;
        margin: 1em;
    }
  
    /*「任意」文字*/
    .CF7_unreq{
        font-size: 1rem;
    padding: 5px;
    background: gray;
    color: #fffffe;
    border-radius: 3px;
    margin:1em; 
    }
  .CF7_table tr{
        line-height:3rem;
        }
        .CF7_table td > p {
  width: 100%;
  margin: 0; 
  padding: 0; 
}
textarea.wpcf7-textarea {
  height: 120px !important;  
  resize: vertical;          
}
    /* タイトル列 */
    @media screen and (min-width: 768px){
        .CF7_table th{
        width:40%;/*横幅*/
        background-color:#ebedf5a1;
        }
    }
    
    /* レスポンシブ */
    @media screen and (max-width: 768px){
        table.CF7_table{
       
        }
        .CF7_table tr, .CF7_table td, .CF7_table th{
        display: inline-block;
        width: 100%;
        line-height:3em;
        }
        .CF7_table th{
        background-color:#ebedf5;
        }
    }
    
   .wpcf7 input.wpcf7-submit {
    background-color: #68635e;
    border: 0;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    padding: 0.5rem 2rem;
    margin: 2rem auto;
    display: block;
    width: auto;
    position: static; /* ← ここが重要 */
}
tr.submit-button td {
    text-align: center;
}
tr.submit-button td p {
    margin: 0;
    width: 50%;
}
    .CF7_btn{
        text-align:center;
        margin-top:20px;
    }
    
    .wpcf7-spinner{
        width:0;
        margin:0;
    }

  img.img-fluid.p-3.houzin {
    aspect-ratio: 16 / 9;
    padding-top: 0 !important;
}

 
    .gallery {
        display: grid;
        width: 160px;
        transform-style: preserve-3d;
        --_t: perspective(280px) rotateX(-90deg);
        animation: r 15s cubic-bezier(0.5, -0.2, 0.5, 1.2) 2 forwards;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
    }
  .wpcf7-form-control {
  width: calc(100% - 2em)!important;
  max-width: none !important;
  box-sizing: border-box; /* 念のため */
  margin:1em
}
      @keyframes r {
        0%, 3% {
          transform: var(--_t) rotate(0deg);
        }
        14.6666666667%, 19.6666666667% {
          transform: var(--_t) rotate(-60deg);
        }
        31.3333333333%, 36.3333333333% {
          transform: var(--_t) rotate(-120deg);
        }
        48%, 53% {
          transform: var(--_t) rotate(-180deg);
        }
        64.6666666667%, 69.6666666667% {
          transform: var(--_t) rotate(-240deg);
        }
        81.3333333333%, 86.3333333333% {
          transform: var(--_t) rotate(-300deg);
        }
        98%, 100% {
          transform: var(--_t) rotate(-360deg);
        }
      }
      .gallery > img {
        grid-area: 1/1;
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
      }
      
      .gallery > img:nth-child(1) {
        transform: rotate(0deg) translateY(86.6025403784%) rotateX(90deg);
      }
      
      .gallery > img:nth-child(2) {
        transform: rotate(60deg) translateY(86.6025403784%) rotateX(90deg);
      }
      
      .gallery > img:nth-child(3) {
        transform: rotate(120deg) translateY(86.6025403784%) rotateX(90deg);
      }
      
      .gallery > img:nth-child(4) {
        transform: rotate(180deg) translateY(86.6025403784%) rotateX(90deg);
      }
      
      .gallery > img:nth-child(5) {
        transform: rotate(240deg) translateY(86.6025403784%) rotateX(90deg);
      }
      
      .gallery > img:nth-child(6) {
        transform: rotate(300deg) translateY(86.6025403784%) rotateX(90deg);
      }
      
   
      @media screen and (max-width: 767px) {
      .gallery {
        display: grid;
        width: 80px;
        transform-style: preserve-3d;
        --_t: perspective(136px) rotateX(-90deg);
        animation: r 12s cubic-bezier(0.5, -0.2, 0.5, 1.2) 2 forwards;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
    }
}


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

.list-tab{
    justify-content: center;
}

section.openingslide.short{
    height: 40vw;
}
}




/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
    .inquiry th,.inquiry td {
     display:block!important;
     width:100%!important;
     border-top:none!important;
     -webkit-box-sizing:border-box!important;
     -moz-box-sizing:border-box!important;
     box-sizing:border-box!important;
    }
    .inquiry tr:first-child th{
     border-top:1px solid #d7d7d7!important;
    }
    /* 必須・任意のサイズ調整 */	
    .inquiry .haveto,.inquiry .any {	
    font-size:10px;
    }}
    /*見出し欄*/
    .inquiry th{
     text-align:left;
     font-size:14px;
     color:#444;
     padding-right:5px;
     width:30%;
     background:#f7f7f7;
     border:solid 1px #d7d7d7;
    }
    /*通常欄*/
    .inquiry td{
     font-size:13px;
     border:solid 1px #d7d7d7;	
    }
    /*横の行とテーブル全体*/
    .entry-content .inquiry tr,.entry-content table{
     border:solid 1px #d7d7d7;	
    }
    /*必須の調整*/
    .haveto{
     font-size:7px;
     padding:5px;
     background:#274c77;
     color:#fff;
     border-radius:2px;
     margin-right:5px;
     position:relative;
     bottom:1px;
    }
    /*任意の調整*/
    .any{
     font-size:7px;
     padding:5px;
     background:#93c9ff;
     color:#fff;
     border-radius:2px;
     margin-right:5px;
     position:relative;
     bottom:1px;
    }
    /*ラジオボタンを縦並び指定*/
    .verticallist .wpcf7-list-item{
     display:block;
    }
    /*送信ボタンのデザイン変更*/
    #formbtn{
    
     margin-top:30px;
    
    }
    /*送信ボタンマウスホバー時*/
    #formbtn:hover{
     background:#fff;
     color:#ffaa56;
    }
    form.wpcf7-form.init {
       
        margin: auto;
    }
    section.text-center.contactform {
        padding-bottom: 10rem;
        padding-top: 10rem;
    }

    figure.post>img:hover {
        opacity: 0.8;
        transition: all 0.5s;
    }

/* ========================
   共通（PC含む）
======================== */

/* PC */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  z-index: 999;
  border-bottom: 1px solid #ccc;
}

/* スマホ */
@media (max-width: 768px) {
  .site-header {
    position: sticky;
    top: 0;
  }
}

.header-inner {
  display: flex;
  justify-content: space-between; /* ロゴとナビを左右に配置 */
  align-items: center;
width: 100%;
  margin: 0;
  padding: 1rem 1rem;
}

.header-left {
  flex-shrink: 0;
}

.site-logo img,a.tellbunner.p-0 {
  height: 50px;
  max-width: 100%;
  object-fit: contain;
}

.site-nav {
  margin-left: auto; /* ロゴとの間にスペース */
  display: flex;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  align-items: center;
}


.nav-item {
  position: relative;
}

.nav-item > a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #0c0d0e;
  font-size: 16px;
  font-weight: 600;
  padding: 0.75rem 1rem;
  transition: background 0.3s ease, color 0.3s ease;
  border-radius: 4px;
}

.nav-item > a:hover {
  background-color: #f0f4f8;
  color: #003060;
}

/* ========================
   ドロップダウン（PCのみ）
======================== */
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #f9fbfd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  min-width: 240px;
  padding: 0.5rem;
  transition: all 0.3s ease;
  font-weight: 500;
}

.nav-item:hover > .dropdown {
  display: grid;
}

.dropdown.two-columns {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.dropdown li {
  list-style: none;
}

.dropdown li a {
  display: block;
  padding: 0.5rem 0.25rem;
  background-color: #f6f9fc;
  color: #333;
  text-align: center;
  font-size: 15px;
  border-radius: 4px;
  transition: background 0.3s ease, color 0.3s ease;
  font-weight: 500;
}

.dropdown li a:hover {
  background-color: #e2ecf4;
  color: #0e61b4;
}

/* ========================
   CTAアイコン（任意）
======================== */
.cta-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cta-inline .cta-icon {
  width: 32px;
  height: 32px;
  background-size: cover;
  display: block;
}

.cta-icon.tel {
  background-image: url('/wp-content/themes/reuse-bonbon/img/telbunner.webp');
}

.cta-icon.mail {
  background-image: url('/wp-content/themes/reuse-bonbon/img/mailbunner.webp');
}
/* ========================
   モバイル対応
======================== */
@media (max-width: 768px) {
  html, body {
    height: 100%;
    overflow-x: hidden;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 75%;
    height: 100vh;
    background: #f6f9fc;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav.active {
    transform: translateX(0);
  }

  .nav-list {
    flex-direction: column;
    gap: 0rem;
    margin-top: 3.5rem;
  }

  .nav-item a {
    color: #3b6caf;
    font-size: 1.2rem;
    padding: 0.5rem 0;
    display: block;
    text-decoration: none;
    text-align: center;
  }

  .nav-item.home-icon {
    font-weight: bold;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    margin-top: 0;
  }

  .nav-item.home-icon .icon {
    font-size: 1.6rem;
    margin-right: 0.5rem;
  }

  /* モバイル用ドロップダウン */
  .nav-item.has-dropdown .dropdown {
    display: grid !important;
    gap: 0.5rem;
    margin-bottom: 1rem;
    background-color: transparent;
    padding: 0;
    position: static !important;
    box-shadow: none;
  }
.nav-item {
    position: relative;
    text-align: left;
    width: 100%;
}
  .dropdown li a {
    display: block;
    padding: 0.75rem 1rem;
    background-color: #f6f9fc;
    color: #222;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, color 0.3s ease;
    font-weight: 500;
  }

  .dropdown li a:hover {
    background-color: #e2ecf4;
    color:#0e61b4;
    font-weight: 500;
  }
button#menuToggle {
    border: 1px solid #6096ba;
    border-radius: 6px;
}
  .menu-toggle {
    position: absolute;
    top: 0rem;
bottom:0;
    right: 1rem;
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: none;
    z-index: 1100;
margin:auto;
  }

  .menu-toggle .bar {
    width: 28px;
    height: 2px;
    background: #6096ba;
    margin: 3px 0;
    border-radius: 2px;
  }

  .menu-toggle .close-text {
    display: none !important;
            font-size: 0.5rem;
        color: #9bbdd3;
        margin-top: 5px;
        font-weight: bold;
    
  }

  .menu-toggle.active .bar {
    display: none !important;
  }

  .menu-toggle.active .close-text {
    display: block !important;
  }

  .mobile-close {
    align-self: flex-end;
    font-size: 1.5rem;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 0.5rem;
  }

  .cta-inline {
    justify-content: center;
    margin-top: 1rem;
  }
  body.nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
}


@media (min-width: 769px) {
  .menu-toggle,
  .menu-toggle .close-text,
  .nav-item.home-icon {
    display: none !important;
  }
}

/* 品目補足スタイル */
.item-detail {
  font-size: 14px;
  color: #555;
  text-align: center;
  margin-top: 0.5em;
  line-height: 1.5;
  font-family: 'Sawarabi Gothic', sans-serif;
}

/* カテゴリ名とセットの調整 */
.custom-alt-title {
  font-size: 16px;
  margin-bottom: 0.2em;
  font-family: 'Sawarabi Gothic', sans-serif;
}
.hove {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}
.hove:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

@media (min-width: 769px) {
  .slider3 .splide__slide {
    width: calc(100% / 3) !important;
    flex: 0 0 auto;
  }
}
.item-four-blocks .wp-block-image {
  width: 100%;
  aspect-ratio: 1 / 1; /* 強制的に正方形に */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px; /* 任意：角丸 */
  background-color: #f9f9f9; /* 任意：背景色 */
}

/* 中の画像をトリミングしてフィット */
.item-four-blocks .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 中央を切り抜いて拡大縮小 */
  display: block;
}

@media (max-width: 768px) {
.item-four-blocks .wp-block-image {
  width: 50%;
  aspect-ratio: 1 / 1; /* 強制的に正方形に */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px; /* 任意：角丸 */
  background-color: #f9f9f9; /* 任意：背景色 */
  margin: auto;
}
.hove{
    padding: 4px;
}}
section#item h3.custom-alt-titl{
    text-align: center;
}
/*新ビジュアル*/

.pickup-slider-wrap {
  max-width: 100%;
  overflow: hidden;
  position: relative;
  margin: 0 auto 2rem;
}

/* スライド全体を包む要素に高さを確保 */
.pickup-slider-track {
  position: relative;
  width: 100%;
  height: 500px; /* PCでは固定高さ */
}

@media screen and (max-width: 767px) {
  .pickup-slider-track {
    height: auto; /* スマホでは自動 */
    min-height: 300px;
  }
}

/* 各スライド（フェード切り替え） */
.pickup-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  z-index: 0;
}

.pickup-slide.active {
  opacity: 1;
  z-index: 1;
}

.pickup-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 4rem;
  letter-spacing: 0.1em;
  font-family: 'Helvetica Neue', sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  text-align: center;
  white-space: nowrap;
  transition: opacity 2.5s ease-in-out;
}

.pickup-slide.active .pickup-caption {
  opacity: 1;
}

/* カラーバリエーション */
.pickup-caption.color1 { color: #ffffffee; }
.pickup-caption.color2 { color: #ffe0b3; }
.pickup-caption.color3 { color: #cceeff; }

@media screen and (max-width: 767px) {
  .pickup-caption {
    font-size: 2rem;
  }
}

/* スライド内画像 */
.pickup-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


@media screen and (max-width: 767px) {
  .pickup-caption {
    font-size: 2rem;
  }
}

/* メイン見出し（日本語） */
.pickup-lead-text {
  margin-top: 2rem;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  color: #333;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .pickup-lead-text {
    font-size: 1.5rem;
  }
}

/* 小見出し（本文） */
.pickup-text2 {
  padding: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
  text-align: center;
  margin: 0 auto;
}

/* ==== 基本スライダー構造 ==== */
.bonbon-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 500px;
}

.bonbon-slide {
  position: relative;       
  width: 100%;
  height: 100%;
  opacity: 1;               
  z-index: 1;
}
.bonbon-slide::before {
  z-index: 0 !important;   /* ← これで画像やテキストより下に固定 */
}

/* 画像レイヤーはその上に（JSの切替もこの範囲内で前後入替） */
.bonbon-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;             
}

/* テキストは常に最前面 */
.bonbon-lead-animated,
.bonbon-logo-animated {
  position: absolute;      /* 既存どおり */
  z-index: 10;             /* ロゴは必要なら 11+ に */
}
.bonbon-slider {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}





/* ==== 旧スタイル（残すが独立させる） ==== */
.bonbon-lead {
  position: absolute;
  top: 50%;
  left: 5%;
  color: white;
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  margin: 0;
  z-index: 2;
  width: 90%;
  animation: bonbonFadeIn 1.6s ease forwards 0.4s;
}

@keyframes bonbonFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スマホ用（旧スタイル） */
@media screen and (max-width: 767px) {
  .bonbon-slider {
    height: 300px;
  }

  .bonbon-lead {
    top: auto;
    bottom: 5%;
    left: 0%;
    transform: translateX(-50%);
    font-size: 1.4rem;
    text-align: left;
    padding: 0.2rem 1rem;
    border-radius: 4px;
    max-width: 90%;
    word-break: break-word;
    line-height: 1.4;
  }
}

/* ==== 新スタイル：アニメ付きテキスト ==== */
.bonbon-lead-animated {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  color: white;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  z-index: 2;
  width: 90%;
  line-height: 1.4;
  font-size: 2rem;
}

.bonbon-line1-animated,
.bonbon-line2-animated,
.bonbon-logo-animated {
  display: block;
  opacity: 0;
  animation-fill-mode: forwards;
}

/* 各アニメーションタイミング */
.bonbon-line1-animated {
  animation: fadeInText 1s ease forwards 0.3s,
             fadeOutText 1s ease forwards 3.5s;
}

.bonbon-line2-animated {
  font-size: 2.5rem;
  animation: fadeInText 1s ease forwards 1.8s,
             fadeOutText 1s ease forwards 3.5s;
}

.bonbon-logo-animated {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
  opacity: 0;
  animation: fadeInLogo 1.2s ease forwards 5s;
  z-index: 3;
  white-space: nowrap;      /* ← これで折り返し防止 */
  max-width: 90vw;          /* ← 画面幅の90%までに制限 */
  text-align: center;
}



/* アニメーション定義 */
@keyframes fadeInText {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutText {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes fadeInLogo {
  from {
    opacity: 0;
    transform: translate(-50%, -30%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* スマホ対応（新スタイル） */
@media screen and (max-width: 767px) {
  .bonbon-lead-animated {
    top: auto;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    font-size: 1.4rem;
  }

  .bonbon-line2-animated {
    font-size: 1.8rem;
  }

  .bonbon-logo-animated {
    font-size: 2rem;
  }

}
.bonbon-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
 


  /* パン＋ズームアニメーション */
}

@keyframes bonbonPanZoom {
  0%   { transform: scale(1.05) translateX(20px); }
  100% { transform: scale(1) translateX(0); }
opacty:0;
}


.bonbon-item-card {
  background: #fff;
  border: 1px solid #ccc;
  padding: 1rem;
  text-align: center;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.bonbon-item-card:hover {
  transform: scale(1.02);
}

.bonbon-item-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}

.bonbon-item-card h3 {
  margin-top: 0.5rem;
  font-size: 1.1rem;
}

.bonbon-item-detail {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  color: #333;
}

.bonbon-itemlist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ← PCは4列に固定 */
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
  .bonbon-itemlist-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .bonbon-itemlist-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.dropdown.two-columns li.full-width {
  grid-column: span 2;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: transparent;
    width: fit-content;
    margin: auto;
    text-align: center;
    background-color: #ffb347;
    border-radius: 16px;
}

.wpcf7 form.sent .wpcf7-response-output{ border-color: transparent;
    width: fit-content;
    margin: auto;
    text-align: center;
   

      background-color: #274c77;
    border-radius: 16px;
    color: #ffb347;
    border-color: transparent;

}
/* オーバーレイは必ず最背面に */
.bonbon-slide::before { z-index: 0 !important; }



/* 背景画像でクロスフェードする2レイヤー */
.bonbon-bg-layer {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .45s ease;
  will-change: opacity, transform;
  z-index: 1; /* JSで片方を2に昇格 */
}

/* テキストは最前面（位置は既存absoluteのまま） */
.bonbon-lead-animated { z-index: 10; }
.bonbon-logo-animated { z-index: 11; }

/* パン／ズームは transform のみ（opacityは触らない） */
@keyframes bonbonPanZoom {
  0%   { transform: scale(1.05) translateX(20px); }
  100% { transform: scale(1) translateX(0); }
}