@charset "UTF-8";

/* ================================================================================
KV
================================================================================ */
@media print, screen
{

#KV
{

    background-image: url('../../asset/image/main_mov.gif');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
#KV > .inner
{
    padding: calc(240 * var(--u)) 0 calc(50 * var(--u));
}
#KV .title
{
	color: white;
	font-size: var(--fzu50);
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.1em;
	margin-bottom: calc(40 * var(--u));
}

#KV .subtitle
{
	color: white;
	font-size: var(--fzu24);
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.1em;
   	margin-bottom: calc(150 * var(--u));
}

#KV .news-box
{
    background-color: white;
    width: calc(475 * var(--u));
    padding: calc(25 * var(--u)) calc(25 * var(--u)) calc(30 * var(--u));
    border-radius: calc(5 * var(--u));
	margin-left: calc(750 * var(--u));

}

#KV .news-label
{
    color: #826d39;
	font-size: var(--fzu29);
	font-weight: bold;
    margin-bottom: calc(15 * var(--u));
    font-family: "Optima", "Segoe UI", "Gill Sans", "Helvetica Neue", sans-serif;
}

#KV .news-content
{
display: flex;
font-size: var(--fzu17);
line-height: 1.5;
gap: calc(12 * var(--u));
}

#KV .news-date
{

line-height: 1.5;
}


#KV .news-text
{

line-height: 1.5;
}

#KV .news-text span
{

    font-weight: bold;
}

}
@media screen and (max-width: 767px)
{
    #KV > .inner
    {
        padding: 45vw 0 5vw;
    }

    #KV .title
    {
	color: white;
	font-size: var(--fzu50);
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.1em;
	margin-bottom: calc(40 * var(--u));
    }

    #KV .subtitle
    {
	color: white;
	font-size: var(--fzu24);
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.1em;
       	margin-bottom: calc(200 * var(--u));
    }


    #KV .news-box
    {
        background-color: white;
        width: 90vw;
        padding: calc(25 * var(--u)) calc(25 * var(--u)) calc(30 * var(--u));
        border-radius: calc(5 * var(--u));
	margin-left: calc(0 * var(--u));

    }



}

/* ================================================================================
lead
================================================================================ */
@media print, screen
{

#lead
{
    background-image: url('../../asset/image/s1_bg.png');
    background-size: auto 100%; /* 縦を100%、横は縦に合わせて自動 */
    background-position: center;
    background-repeat: no-repeat;
    }

#lead > .inner{
    padding: calc(210 * var(--u)) 0;

    }


#lead .box
{
margin-left: calc(600 * var(--u));
}

#lead .title
{
    font-size: var(--fzu42);
    font-weight: 600;
	line-height: 1.5;
	margin-bottom: calc(30 * var(--u));
}

#lead .text
{
    font-size: var(--fzu18);
	line-height: 2;
}


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


    #lead
    {
        background-image: url('../../asset/image/s1_bg_sp.png');
        background-size: 100% auto; /* 縦を100%、横は縦に合わせて自動 */
        background-position: top;
        background-repeat: no-repeat;
        }


    #lead > .inner{
        padding: 75vw 5vw 20vw;

        }


    #lead .box
    {

    margin-left: calc(0 * var(--u));
    }

    #lead .title
    {
        font-size: 7vw;
        font-weight: 600;
	line-height: 1.5;
	margin-bottom: calc(30 * var(--u));
    }


    #lead .text
    {
    font-size: 4vw;
	line-height: 2;
    }

}

/* ================================================================================
work
================================================================================ */
@media print, screen
{

#work
{
    background: linear-gradient(to right,
       white 0%,
       white 2%,
       #f5f5f2 2%,
       #f5f5f2 98%,
       white 98%,
       white 100%);

 }

#work > .inner{
    padding: calc(110 * var(--u))  calc(20 * var(--u)) 0;
    background-color: #f5f5f2;
    margin: 0 auto;
    }

#work .boxes
{
    display: flex;
    gap: calc(65 * var(--u));
    margin-bottom: calc(150 * var(--v));
}

#work .pbox
{
width: calc(550 * var(--u));
margin: calc(-180 * var(--u)) 0 0 calc(-20 * var(--u));;

}

#work .pbox picture
{
width: calc(550 * var(--u));
}

#work .title
{
font-size: var(--fzu32);
font-weight: 600;
line-height: 1.5;
margin-bottom: calc(30 * var(--u));
}

#work .text
{
font-size: var(--fzu16);
line-height: 2;
}

#work h3
{
font-size: var(--fzv34);
font-weight: 600;
text-align: center;
line-height: 2;
margin-bottom: calc(80 * var(--v));
}

#work .boxes2
{
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(150 * var(--v));
}


#work .box2
{
width: calc(327 * var(--u));

}

#work .pbox2
{
width: calc(327 * var(--u));
margin-bottom: calc(30 * var(--v));

}

#work .pbox2 picture
{
    width: calc(327 * var(--u));
}

#work h4
{
font-size: var(--fzu24);
font-weight: bold;
color: #65542c;
text-align: center;
margin-bottom: calc(20 * var(--v));

}

#work .text2
{
font-size: var(--fzv17);
line-height: 2;
}

#work .text3
{
font-size: var(--fzv17);
text-align: center;
line-height: 2;
}

#work .box3
{
width: calc(237 * var(--u));
}

#work .pbox3
{
width: calc(237 * var(--u));
margin-bottom: calc(30 * var(--v));

}

#work .pbox3 picture
{
    width: calc(237 * var(--u));
}


#work .box3 h4
{
font-size: var(--fzu19);
line-height: 1.5;

}


#work .detail
{
    position: relative;
    background-color: white;
    padding: calc(45 * var(--u)) calc(30 * var(--u));
    width: calc(1100 * var(--u));
    margin: 0 auto;
}

.detail,
.detailopen .open {
  transition: opacity 0.6s ease;
}

.detail.hidden,
.detailopen .open.hidden {
  opacity: 0;
  pointer-events: none;
}

#work h5
{
font-size: var(--fzu27);
text-align: center;

}

#work .close
{
position: absolute;
top: calc(35 * var(--u));
right: calc(50 * var(--u));
width: calc(50 * var(--u));

}

#work .detailopen
{
    position: relative;
    background-color: #efeee9;
    padding: calc(45 * var(--u)) calc(30 * var(--u));
    margin: 0 auto;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);  /* 少し上からスライド */
    transition:
      max-height 1s cubic-bezier(0.25, 0.8, 0.25, 1),
      opacity 1s ease,
      transform 1s ease;
}

.detailopen.active {
    max-height: 2000px!important; /* 内容より大きめに */
    opacity: 1!important;
    transform: translateY(0);
}

#work .open
{
position: absolute;
top: calc(35 * var(--u));
right: calc(50 * var(--u));
width: calc(50 * var(--u));
transform: rotate(45deg);
}

#work h6
{
font-size: var(--fzu34);
text-align: center;
margin-bottom: calc(50 * var(--u));
}

#work .dlead
{
font-size: var(--fzu17);
line-height: 2;
text-align: center;
margin-bottom: calc(50 * var(--u));
}

#work .dbox
{
    width: calc(1100 * var(--u));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: calc(50 * var(--u));
    margin: 0 auto calc(50 * var(--u));
    background-color: white;
}

#work .dtitle
{
font-size: var(--fzu24);
color:  #65542c;
text-align: center;
margin-bottom: calc(50 * var(--u));
}

#work ul
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

#work li
{
width: calc(490 * var(--u));
padding: calc(35 * var(--u));
background-color: #f4f4f4;
margin-bottom: calc(30 * var(--u));
}

#work .mtitle
{
font-size: var(--fzu17);
color:  #4e4224;
text-align: center;
margin-bottom: calc(15 * var(--u));

}

#work .mtitle2
{
font-size: var(--fzu21);
font-weight: bold;
color:  #65542c;
text-align: center;
margin-bottom: calc(15 * var(--u));
}

#work .mtext
{
font-size: var(--fzu17);
line-height: 2;
}

#work .dbox2
{
    width: calc(1100 * var(--u));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: calc(50 * var(--u));
    margin: 0 auto calc(115 * var(--u));
    background-color: white;
}

#work .dimage
{
    width: calc(978 * var(--u));
    margin: 0 auto;
}

#work .dimage2
{
    width: calc(1100 * var(--u));
    margin: 0 auto calc(150 * var(--u));
}


}
@media screen and (max-width: 767px)
{
    #work
    {
 position: relative;

    }

    #work > .inner{
        padding: calc(400 * var(--u))  calc(20 * var(--u)) 0;
        background-color: #f5f5f2;
        margin: 0 auto;
        }

    #work .boxes
    {
        display: block;
        margin-bottom: calc(150 * var(--v));
    }

    #work .pbox
    {

    width: 90vw;
    margin: 0;
    position: absolute;
    z-index: 100;
    top: -10vw;
    left: calc(-20 * var(--u));

    }

    #work .pbox picture
    {
        width: 90vw;
    }

    #work h4
    {
    font-size: var(--fzu24);
    font-weight: bold;
    color: #65542c;
    text-align: center;
    margin-bottom: calc(20 * var(--v));

    }


    #work .text
    {
    font-size: 4vw;
    line-height: 2;
    }


    #work .text2
    {
    font-size: 4vw;
    line-height: 2;
    }

    #work .text3
    {
    font-size: var(--fzv17);
    text-align: center;
    line-height: 2;
    }

    #work .box3
    {
    width: calc(237 * var(--u));
    }

    #work .pbox3
    {
    width: calc(237 * var(--u));
    margin-bottom: calc(30 * var(--v));

    }

    #work .pbox3 picture
    {
        width: calc(237 * var(--u));
    }


    #work .box3 h4
    {
    font-size: var(--fzu19);
    line-height: 1.5;

    }

    #work .boxes2
    {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 5vw;
        margin-bottom: calc(150 * var(--v));
    }


    #work .box2
    {
    width: 70vw;

    }

    #work .pbox2
    {
    width: 70vw;
    margin-bottom: calc(30 * var(--v));

    }

    #work .pbox2 picture
    {
        width: 70vw;
    }




    #work .swiper
    {
        width: 90vw;
        position: relative; /* 基準を作る */


    }

    #work .swiper-wrapper
    {
        width: 70vw;
        margin: 0 auto 10vw;

    }

    #work .swiper-button-next,
    #work .swiper-button-prev {
      width: 5vw;
      height: 5vw;
      background-color: rgba(0, 0, 0, 0); /* 背景色 */
      color: #65542c;                          /* 矢印の色 */
      position: absolute;
      top: 27%;
      transform: translateY(-50%);
      z-index: 10; /* スライドより前面に表示 */
    }

    /* 左右位置を調整 */
    #work .swiper-button-prev {
      left: 0vw;   /* 左端からの距離 */
    }
    #work .swiper-button-next {
      right: 0vw;  /* 右端からの距離 */

    }

    /* 矢印の大きさを変更 */
    #work .swiper-button-next::after,
    #work .swiper-button-prev::after {
      font-size: 5vw; /* 矢印サイズ */
    }

    /* ページネーション全体の位置調整 */

    /* ドットの基本スタイル */
    #work .swiper-pagination{

      bottom: 0vw!important;
    }

    #work .swiper-pagination-bullet {
      width: 4vw;
      height: 4vw;
      background-color: #cecece;
      opacity: 1; /* デフォルトは0.2〜0.5 */
      border-radius: 50%; /* 丸にする */
      margin: 0 1vw!important;      /* ドット間の間隔 */
      transition: background-color 0.3s;
      bottom: 5vw;
    }

    /* 選択中のドット */
    #work .swiper-pagination-bullet-active {
      background-color: #65542c; /* アクティブ色 */
    }
    #work .box3
    {
    width: 35vw;
    }

    #work .pbox3
    {
        width: 35vw;
    margin-bottom: calc(30 * var(--v));

    }

    #work .pbox3 picture
    {
     width: 35vw;
    }


    #work .box3 h4
    {
    font-size: 3.5vw;
    line-height: 1.5;

    }

    #work .detail
    {

        padding: calc(45 * var(--u)) calc(30 * var(--u));
        width: 90vw;
    }

    #work h5
    {
    font-size: var(--fzu27);
    text-align: center;

    }

    #work .close
    {
    position: absolute;
    top: calc(45 * var(--u));
    right: calc(30 * var(--u));
    width: calc(35 * var(--u));

    }

    #work .detailopen
    {
        position: relative;
        background-color: #efeee9;
        padding: calc(45 * var(--u)) calc(30 * var(--u));
        margin: 0 auto;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-10px);  /* 少し上からスライド */
        transition:
          max-height 1s cubic-bezier(0.25, 0.8, 0.25, 1),
          opacity 1s ease,
          transform 1s ease;
    }

    .detailopen.active {
        max-height: 3000px!important; /* 内容より大きめに */
        opacity: 1!important;
        transform: translateY(0);
    }

    #work .open
    {
    position: absolute;
    top: calc(35 * var(--u));
    right: calc(50 * var(--u));
    width: calc(50 * var(--u));
    transform: rotate(45deg);
    }

    #work h6
    {
        line-height: 1.5;

    }

    #work .dlead
    {
    font-size: var(--fzu17);
    line-height: 2;
    text-align: center;
    margin-bottom: calc(50 * var(--u));
    }

    #work .dbox
    {
        width: 80vw;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: calc(50 * var(--u)) 0;
        margin: 0 auto calc(50 * var(--u));
        background-color: white;
    }

    #work .dtitle
    {
    font-size: var(--fzu24);
    color:  #65542c;
    text-align: center;
    margin-bottom: calc(50 * var(--u));
    }

    #work ul
    {
    display: block;

    }

    #work li
    {
    width: 70vw;
    margin: 0 auto;
    padding: calc(35 * var(--u));
    background-color: #f4f4f4;
    margin-bottom: calc(30 * var(--u));
    }

    #work .mtitle
    {
    font-size: var(--fzu17);
    color:  #4e4224;
    text-align: center;
    margin-bottom: calc(15 * var(--u));

    }

    #work .mtitle2
    {
    font-size: var(--fzu21);
    font-weight: bold;
    color:  #65542c;
    text-align: center;
    margin-bottom: calc(15 * var(--u));
    }

    #work .mtext
    {
    font-size: var(--fzu17);
    line-height: 2;
    }

    #work .dbox2
    {
        width: 80vw;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: calc(50 * var(--u)) 0 0;
        margin: 0 auto calc(115 * var(--u));
        background-color: white;
    }

    #work .dimage
    {
        width: 100％;
        padding: 0 5vw 10vw;
        margin: 0 auto;
        overflow-x: auto; /* 横スクロール可能に */
        overflow-y: hidden; /* 縦スクロールは不要なら非表示 */
        white-space: nowrap; /* 子要素を横に並べる */
        max-width: 100%; /* 表示領域を画面幅に収める */
    }


    #work .dimage picture
    {
        width:200vw;
        margin: 0 auto 0;
    }

    #work .dimage2
    {
        width: 100％;
        padding: 0 5vw 10vw;
        margin: 0 auto;
        overflow-x: auto; /* 横スクロール可能に */
        overflow-y: hidden; /* 縦スクロールは不要なら非表示 */
        white-space: nowrap; /* 子要素を横に並べる */
        max-width: 100%; /* 表示領域を画面幅に収める */
    }


    #work .dimage2 picture
    {
        width:200vw;
        margin: 0 auto 0;
    }


    #work .cbutton {
        width: 20vw;
        margin: 0 auto;
        position: relative
    }

    #work .ctext {
        font-size: 5vw;
        line-height: 1;
        margin-bottom: 0;
    }

    #work .button2 {
        width: calc(35 * var(--u));
        top : 0.5vw;
        right: calc(0 * var(--u));
        transform: rotate(45deg); /* 角度を変更 */
        position: absolute;
        transition: transform 0.3s ease;
    }




}

/* ================================================================================
reason
================================================================================ */
@media print, screen
{

#reason
{
    position: relative;
 }

 #reason .bg
 {
    position: absolute;
     width: 96%;
     left: 2%;
  }

#reason > .inner{
    padding: calc(280 * var(--u))  calc(20 * var(--u)) 0;
    margin: 0 auto;
    }

#reason ul
    {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    }

#reason li
    {
    width: calc(550 * var(--u));
    position: relative;
    margin-bottom: calc(300 * var(--u));
    }


#reason .image
    {
    width: calc(480 * var(--u));
    }

#reason .box
    {
    position: absolute;
    width: calc(460 * var(--u));
    padding: calc(50 * var(--u))  calc(30 * var(--u));
    background-color: white;
    top: calc(300 * var(--u));
    left: calc(60 * var(--u));
    }

    #reason h3
    {
    font-size: var(--fzu23);
    font-weight: bold;
    color: #65542c;
    line-height: 1.5;
    margin-bottom: calc(20 * var(--u));

    }

    #reason p
    {
    font-size: var(--fzu17);
    line-height: 1.7;
    }
}

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


    #reason > .inner{
        padding: 25vw calc(20 * var(--u)) 10vw;
        margin: 0 auto;
        }

        #reason h2
        {
        font-size: 5.5vw;
        line-height: 1.5;
        margin-bottom: 5vw;;


        }



    #reason li
        {
        width: 90vw;
        position: relative;
        margin-bottom: calc(300 * var(--u));
        }


    #reason .image
        {
        width: 90vw;
        }

    #reason .box
        {
        position: absolute;
        width: 70vw;
        padding: calc(50 * var(--u))  calc(30 * var(--u));
        background-color: white;
        top: 50vw;
        left: auto;
        right: 0;
    ;
        }




}

/* ================================================================================
building
================================================================================ */
@media print, screen
{

#building
{

 }

#building > .inner{
    padding: calc(110 * var(--u))  calc(20 * var(--u)) calc(110 * var(--u)) ;
    margin: 0 auto;
    }

    #building h2
    {
    margin: 0 auto calc(80 * var(--u));
    }

    #building h3 {
        font-size: var(--fzu32);
        text-align: center;
        font-weight: bold;
        color: block;
        margin:0 auto calc(80 * var(--u));
    }

    #building .boxes
    {
    display: flex;
    gap: calc(30 * var(--u));
    width: calc(1100 * var(--u));
    margin: 0 auto calc(30 * var(--u));
    }

    #building .image
    {
    width: calc(600 * var(--u));
    }
    #building picture
    {
    width: 100%;
    }

    #building .image2
    {
    width: calc(472 * var(--u));
    }



    #building .textb
    {

    }


    #building p {
        font-size: var(--fzu24);
        line-height: 1.5;
        text-align: center;
        font-weight: bold;
        color: block;
        margin:0 auto calc(80 * var(--u));
    }

    #building .text2 {
        font-size: var(--fzu16);
        text-align: center;
        font-weight: normal;
        color: block;
    }



}

@media screen and (max-width: 767px)
{
    #building .boxes
    {
    display: block;
    width: 90vw;
    }

    #building .image
    {
    width: 90vw;
    }
    #building picture
    {
    width: 100%;
    }

    #building .image2
    {
    width: 90vw;
    }

}
    /* ================================================================================
    voice
    ================================================================================ */
    @media print, screen
    {

    #voice
    {
        background: linear-gradient(to right,
           white 0%,
           white 2%,
           #f5f5f2 2%,
           #f5f5f2 98%,
           white 98%,
           white 100%);


     }

    #voice > .inner{
        padding: calc(110 * var(--u))  calc(20 * var(--u)) calc(110 * var(--u)) ;
        margin: 0 auto;
        }

        #voice h2
        {
        margin: 0 auto calc(80 * var(--u));
        }

    #voice ul
    {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    }

    #voice .l2box
    {
        width: calc(1100 * var(--u));
        margin: 0 auto ;
    }


    #voice .l2
    {
    width: calc(345 * var(--u));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: calc(25 * var(--u)) calc(20 * var(--u));
    background-color: white;
    }

    #voice .l2 p
    {
    font-size: var(--fzu17);
    line-height: 2;
    margin-bottom: calc(20 * var(--u));

    }

    #voice .l2 span
    {
    font-size: var(--fzu18);
    font-weight: bold;
    color: #65542c;
    line-height: 2;
    }

    #voice .fabox
    {
        display: flex;
    }

    #voice .fimage
    {
    width: calc(79 * var(--u));
    background-color: #f0f0f0;
    margin-right: calc(15 * var(--u));
    }

    #voice .fabox
    {
    background-color: #f0f0f0;
    padding: calc(20 * var(--u)) calc(15 * var(--u));

    }

    #voice .htext
    {
    line-height: 1.5!important;
    margin-bottom: calc(0 * var(--u))!important;

    }
}
@media (min-width: 768px) {
  .swiper { display: none; }
}

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



    #voice > .inner{
        padding: calc(110 * var(--u))  calc(20 * var(--u)) calc(110 * var(--u)) ;
        margin: 0 auto;
        }

        #voice h2
        {
        margin: 0 auto 5vw;
        }




    #voice .swiper
    {
        width: 70vw;
        position: relative; /* 基準を作る */

    }

    #voice .swiper-wrapper
    {
        width: 70vw;
        margin: 0 auto;

    }

    #voice .l2box
    {
        width: 70vw!important;
        margin: 0 auto ;
    }


    #voice .l2
    {
        width: 70vw!important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: calc(25 * var(--u)) calc(20 * var(--u));
    background-color: white;
    }

    #voice .l2 p
    {
    font-size: var(--fzu17);
    line-height: 2;
    margin-bottom: calc(20 * var(--u));

    }

    #voice .l2 span
    {
    font-size: var(--fzu18);
    font-weight: bold;
    color: #65542c;
    line-height: 2;
    }

    #voice .fabox
    {
        display: flex;
    }

    #voice .fimage
    {
    width: calc(79 * var(--u));
    background-color: #f0f0f0;
    margin-right: calc(15 * var(--u));
    }

    #voice .fabox
    {
    background-color: #f0f0f0;
    padding: calc(20 * var(--u)) calc(15 * var(--u));

    }

    #voice .htext
    {
    line-height: 1.5!important;
    margin-bottom: calc(0 * var(--u))!important;

    }


    #voice .swiper-button-next,
    #voice .swiper-button-prev {
      width: 5vw;
      height: 5vw;
      background-color: rgba(0, 0, 0, 0); /* 背景色 */
      color: #65542c;                          /* 矢印の色 */
      position: absolute;
      top: 60%;
      transform: translateY(-50%);
      z-index: 10; /* スライドより前面に表示 */
    }

    /* 左右位置を調整 */
    #voice .swiper-button-prev {
      left: 5vw;   /* 左端からの距離 */
    }
    #voice .swiper-button-next {
      right: 5vw;  /* 右端からの距離 */

    }

    /* 矢印の大きさを変更 */
    #voice .swiper-button-next::after,
    #voice .swiper-button-prev::after {
      font-size: 5vw; /* 矢印サイズ */
    }

    /* ページネーション全体の位置調整 */

    /* ドットの基本スタイル */
    #voice .swiper-pagination{

      bottom: 5vw!important;
    }

    #voice .swiper-pagination-bullet {
      width: 4vw;
      height: 4vw;
      background-color: #cecece;
      opacity: 1; /* デフォルトは0.2〜0.5 */
      border-radius: 50%; /* 丸にする */
      margin: 0 1vw!important;      /* ドット間の間隔 */
      transition: background-color 0.3s;
      bottom: 5vw;
    }

    /* 選択中のドット */
    #voice .swiper-pagination-bullet-active {
      background-color: #65542c; /* アクティブ色 */
    }

}
/* ================================================================================
qanda
================================================================================ */
@media print, screen
{

#qanda
{

}

#qanda > .inner
{
    padding: calc(110 * var(--u))  calc(0 * var(--u)) calc(110 * var(--u)) ;
    margin: 0 auto;
}

#qanda h2
{

margin-bottom: calc(70 * var(--u));

}

#qanda ul {
    width: calc(980 * var(--u));
    margin: 0 auto;
}

#qanda li {
    width: calc(980 * var(--u));
    background-color: #f0f0f0;
    border-radius: calc(5 * var(--u));
    margin-bottom: calc(30 * var(--u));
    overflow: hidden; /* アニメーションで中身がはみ出ないように */
    transition: max-height 0.4s ease;
}

#qanda .close {
    padding: calc(35 * var(--u));
    position: relative;
    cursor: pointer;
}

#qanda h3 {
    font-size: var(--fzu19);
    font-weight: bold;
    color: #65542c;
    margin: 0;
}

#qanda .button {
    width: calc(25 * var(--u));
    top: calc(30 * var(--u));
    right: calc(35 * var(--u));
    position: absolute;
    transition: transform 0.3s ease;
}

/* ボタン回転 */
#qanda .rotated {
    transform: rotate(45deg);
}

#qanda .button picture {
    width: calc(25 * var(--u));
}

#qanda .open {
    padding: calc(0 * var(--u)) calc(35 * var(--u));
    max-height: 0;
    overflow: hidden;
    font-size: var(--fzu17);
    line-height: 1.5;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

#qanda .open.active {
max-height: calc(150 * var(--u)); /* コンテンツ高さに合わせて調整 */
padding: calc(35 * var(--u));
}

#qanda .open p
{
    font-size: var(--fzu17);
    line-height: 1.5;
}

/* スライドアニメーション */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
}

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

    #qanda
    {

    }

    #qanda > .inner
    {
        padding: calc(110 * var(--u))  calc(0 * var(--u)) calc(110 * var(--u)) ;
        margin: 0 auto;
    }

    #qanda h2
    {
        font-size: 5.5vw;
    margin-bottom: calc(70 * var(--u));

    }

    #qanda ul {
        width: 90vw;
        margin: 0 auto;
    }

    #qanda li {
        width: 90vw;
        background-color: #f0f0f0;
        border-radius: calc(5 * var(--u));
        margin-bottom: calc(30 * var(--u));
        overflow: hidden; /* アニメーションで中身がはみ出ないように */
        transition: max-height 0.4s ease;
    }

    #qanda .close {
        padding: calc(35 * var(--u)) 10vw calc(35 * var(--u)) calc(35 * var(--u));
        position: relative;
        cursor: pointer;
    }

    #qanda h3 {
        font-size: var(--fzu19);
        line-height: 1.5;
        font-weight: bold;
        color: #65542c;
        margin: 0;
    }

    #qanda .button {
        width: calc(25 * var(--u));
        top: 8vw;
        right: calc(35 * var(--u));
        position: absolute;
        transition: transform 0.3s ease;
    }


    #qanda .button2 {
        top: 6vw;

    }


    #qanda .open {

        line-height: 1.7;

    }

    #qanda .open.active {
    max-height: calc(450 * var(--u)); /* コンテンツ高さに合わせて調整 */
    padding: 0 calc(35 * var(--u)) calc(35 * var(--u));
    }


}


/* ================================================================================
banner
================================================================================ */
@media print, screen
{

#banner
{

}

#banner > .inner
{
    margin: 0 auto;
}

#banner .boxes
{
    display: flex;
}


#banner .lbox
{
    width: 50%
}

#banner .lbox picture
{
    width: 100%;
}

#banner .rbox
{
    width: 50%;
    background-color: #efeee9;
    padding: calc(75 * var(--u)) 0;
}

#banner h3
{
font-size: var(--fzu31);
font-weight: 600;
text-align: center;
line-height: 1.5;
margin-bottom: calc(50 * var(--u));
}

#banner .btn
{
    width: calc(373 * var(--u));
    margin: 0 auto;
}


}

@media screen and (max-width: 767px)
{
    #banner
    {
        padding: 0;
    }

    #banner > .inner
    {
        margin: 0 auto;
        padding: 0;
    }

    #banner .boxes
    {
        display: block;
    }


    #banner .lbox
    {
        width: 100vw;
    }

    #banner .lbox picture
    {
        width: 100%;
    }

    #banner .rbox
    {
        width: 100vw;
        padding: calc(75 * var(--u)) 0;
    }

    #banner h3
    {
    font-size: var(--fzu31);
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    margin-bottom: calc(50 * var(--u));
    }

    #banner .btn
    {
        width: 70vw;
        margin: 0 auto;
    }





}

/* ================================================================================
why
================================================================================ */
@media print, screen
{

#why
{
    background-image: url('../../asset/image/s4_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: calc(450 * var(--u)) 0 calc(50 * var(--u))
}

#why > .inner
{
    margin: 0 auto;
}

#why h3
{
    font-size: var(--fzu42);
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#why p
{
    font-size: var(--fzv17);
    text-align: center;
    line-height: 1.8;
}
}

/* ================================================================================
points
================================================================================ */
@media screen and (max-width: 767px)
{
#points
{
    padding: calc(50 * var(--u)) 0 calc(50 * var(--u))
}

#points > .inner
{
    margin: 0 auto;
}

#points h3
{
    font-size: var(--fzu42);
    color: #826d39;
    line-height: 1.5;
    text-align: center;
    font-family: "Optima", "Segoe UI", "Gill Sans", "Helvetica Neue", sans-serif;

}

#points h4
{
    font-size: var(--fzv17);
    text-align: center;
}
}


/* ================================================================================
detail
================================================================================ */
@media print, screen
{

#detail
{
    background: linear-gradient(to right,
       white 0%,
       white 2%,
       #f5f5f2 2%,
       #f5f5f2 98%,
       white 98%,
       white 100%);

}

#detail .inner
{
padding: calc(120 * var(--u)) 0 calc(50 * var(--u));
}

#detail h3
{
    font-size: var(--fzv42);
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#detail p
{
    font-size: var(--fzv17);
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#detail .image1
{
    width: calc(1004 * var(--u));
    margin: 0 auto calc(100 * var(--u));
}


#detail .image1 picture
{
    width: calc(1004 * var(--u));
}

#detail ul
{
    width: calc(1004 * var(--u));
    margin: 0 auto calc(100 * var(--u));
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#detail li
{
    position: relative;
    width: calc(477 * var(--u));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: calc(50 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u));
    background-color: white;
    margin: 0 auto calc(50 * var(--u));
}

#detail .tag
{
    position: absolute;
    top: calc(20 * var(--u));
    right: calc(30 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(20 * var(--u));
    font-size: var(--fzu12);
}

#detail .tag1
{
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
}

#detail .tag2
{
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
}

#detail .tag1 hr
{
    border: none;           /* デフォルトの線を消す */
    height: calc(10 * var(--u));           /* 高さ */
    background-color:#367149;
    width: calc(22 * var(--u));              /* 横幅 */
}

#detail .tag2 hr
{
    border: none;           /* デフォルトの線を消す */
    height: calc(10 * var(--u));           /* 高さ */
    background-color: #ba6622;  /* 色 */
    width: calc(22 * var(--u));
}

#detail h4
{
    font-size: var(--fzv24);
    color: #65542c;
    font-weight: bold;
    text-align: center;
    margin-bottom: calc(30 * var(--u));
}

#detail .point1
{
    background-color: #f0f0f0;
    color: #367149;
    padding: 0 calc(20 * var(--u)) calc(5 * var(--u));
    margin-bottom: calc(10 * var(--u));

}

#detail .point1 p
{
    font-size: var(--fzu20);
    color: #367149;
    margin-bottom: calc(25 * var(--u));
}

#detail .point1 .s1
{
    font-size: var(--fzu70);
    font-weight: bold;
    color: #367149;
    position: relative;
    top: calc(17 * var(--u));
}

#detail .s1a
{
    font-size: var(--fzu50);
    font-weight: bold;
    position: relative;
    top: calc(10 * var(--u));
}

#detail .s1ab
{
    font-size: var(--fzu50);
    line-height: 1.50;
    font-weight: bold;
    position: relative;
    top: calc(10 * var(--u));
}

#detail .point1 .s2
{
    font-size: var(--fzu20);
    color: #367149;
    position: relative;
    top: calc(10 * var(--u));
}

#detail .point1 .wbox
{
    background-color: white;
    font-size: var(--fzu17);
    text-align: center;
    color: #367149;
}


#detail .point1 .wbox p
{
    margin-bottom: calc(5 * var(--u));

}


#detail .point2
{
    background-color: #f0f0f0;
    color: #ba6622;
    padding: 0 calc(20 * var(--u)) calc(5 * var(--u));

}

#detail .point2 p
{
    font-size: var(--fzu20);
    color: #ba6622;
    vertical-align: middle;
    margin-bottom: calc(25 * var(--u));

}

#detail .point2 .s1
{
    font-size: var(--fzu70);
    font-weight: bold;
    color: #ba6622;
    position: relative;
    top: calc(17 * var(--u));
}

#detail .point2 .s2
{
    font-size: var(--fzu20);
    color: #ba6622;
    position: relative;
    top: calc(10 * var(--u));
}


#detail .point2 .wbox
{
    background-color: white;
    font-size: var(--fzu17);
    text-align: center;
    color: #367149;
}

#detail .point2 .wbox p
{
    margin-bottom: calc(5 * var(--u));

}

#detail .image3
{
    width: calc(1102 * var(--u));
    margin: 0 auto calc(100 * var(--u));
}

#detail .image3 picture
{
    width: calc(1102 * var(--u));
    margin: 0 auto calc(100 * var(--u));
}


}

@media screen and (max-width: 767px)
{
#detail
{
    background: white;
    margin-bottom: 5vw;


}
#detail .closeb
{
    position: relative;
}

#detail .open
{
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease;
}

#detail .active {
  max-height: 1000vw; /* 中身に応じて十分大きめに */
  transition: max-height 1s ease;

}

#detail .images1
{
   width: 90vw;
   margin: 0 auto 4vw;
}

#detail .btext
{
    font-size: 3.5vw;
    padding: 0 5vw;
    font-weight: bold;
    text-align: left;
}

#detail .button {
    width: calc(25 * var(--u));
    bottom: 5vw;
    right: calc(35 * var(--u));
    position: absolute;
    transition: transform 0.3s ease;
}

#detail .inner
{
    background: linear-gradient(to right,
       white 0%,
       white 2%,
       #f5f5f2 2%,
       #f5f5f2 98%,
       white 98%,
       white 100%);
       padding: 10vw 5vw;
       width: 95vw;
       margin: 0 auto;
}

#detail h3
{
    font-size: 6vw;
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#detail p
{
    font-size: var(--fzv17);
    text-align: left;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#detail .inner0
{
       padding: 10vw 2vw;
       width: 95vw;
       margin: 0 auto;
}

#detail .ttitle
{
    font-size: 7vw;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(30 * var(--u));
}

#detail .ttext
{
    font-size: 4vw;
    text-align: left;
    font-weight: normal;
    line-height: 1.7;
    margin-bottom: calc(0 * var(--u));
}


#detail .image1
{
    width: 80vw;
    margin: 0 auto calc(100 * var(--u));
}


#detail .image1 picture
{
    width: calc(1004 * var(--u));
}

#detail .image1
{
    width: 80vw;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: calc(50 * var(--u)) 0 0;
    margin: 0 auto calc(115 * var(--u));
    background-color: white;
}

#detail .image1
{
    width: 100％;
    padding: 5vw 5vw;
    margin: 0 auto 10vw;
    overflow-x: auto; /* 横スクロール可能に */
    overflow-y: hidden; /* 縦スクロールは不要なら非表示 */
    white-space: nowrap; /* 子要素を横に並べる */
    max-width: 100%; /* 表示領域を画面幅に収める */
}


#detail .pimage1
{
    width:50vw!important;
    margin: 0 auto 0;
}

#detail .pimage2
{
    width:150vw;
    margin: 0 auto 0;
}

#detail ul
{
    width: 80vw;
    margin: 0 auto calc(100 * var(--u));
    display: block;

}

#detail li
{
    position: relative;
    width: 80vw;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: calc(50 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u));
    background-color: white;
    margin: 0 auto calc(50 * var(--u));
}

#detail .tag
{
    position: absolute;
    top: 15vw;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: calc(20 * var(--u));
    font-size: var(--fzu12);
}

#detail .tag1
{
    display: flex;
    align-items: center;
    gap: calc(20 * var(--u));
}

#detail .tag2
{
    display: flex;
    align-items: center;
    gap: calc(20 * var(--u));
}

#detail .tag1 hr
{
    border: none;           /* デフォルトの線を消す */
    height: calc(15 * var(--u));           /* 高さ */
    background-color:#367149;
    width: calc(33 * var(--u));              /* 横幅 */
}

#detail .tag2 hr
{
    border: none;           /* デフォルトの線を消す */
    height: calc(15 * var(--u));           /* 高さ */
    background-color: #ba6622;  /* 色 */
    width: calc(33 * var(--u));
}

#detail h4
{
    font-size: var(--fzv24);
    font-weight: bold;
    text-align: center;
    margin-bottom: 10vw;
}

#detail .point1
{
    background-color: #f0f0f0;
    color: #367149;
    padding: 0 calc(20 * var(--u)) calc(5 * var(--u));
    margin-bottom: calc(10 * var(--u));

}

#detail .point1 p
{
    font-size: var(--fzu20);
    text-align: center;
    color: #367149;
    margin-bottom: calc(25 * var(--u));
}

#detail .point1 .s1
{
    font-size: 12vw;
    font-weight: bold;
    color: #367149;
    position: relative;
    top: calc(17 * var(--u));
}

#detail .s1a
{
    font-size: 8vw;
    font-weight: bold;
    position: relative;
    top: calc(10 * var(--u));
}

#detail .s1ab
{
    font-size: var(--fzu50);
    line-height: 1.50;
    font-weight: bold;
    position: relative;
    top: calc(10 * var(--u));
}

#detail .point1 .s2
{
    font-size: var(--fzu20);
    color: #367149;
    position: relative;
    top: calc(10 * var(--u));
}

#detail .point1 .wbox
{
    background-color: white;
    font-size: var(--fzu17);
    text-align: center;
    color: #367149;
}


#detail .point1 .wbox p
{
    margin-bottom: calc(5 * var(--u));

}


#detail .point2
{
    background-color: #f0f0f0;
    padding: 0 calc(20 * var(--u)) calc(5 * var(--u));

}

#detail .point2 p
{
    font-size: var(--fzu20);
    text-align: center;
    vertical-align: middle;
    margin-bottom: calc(25 * var(--u));

}

#detail .point2 .s1
{
    font-size: 12vw;
    font-weight: bold;
    position: relative;
    top: calc(17 * var(--u));
}

#detail .point2 .s2
{
    font-size: var(--fzu20);
    color: #65542c;
    position: relative;
    top: calc(10 * var(--u));
}


#detail .point2 .wbox
{
    background-color: white;
    font-size: var(--fzu17);
    text-align: center;
    color: #367149;
}

#detail .point2 .wbox p
{
    margin-bottom: calc(5 * var(--u));

}

#detail .image3
{
    width: 80vw;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: calc(50 * var(--u)) 0 0;
    margin: 0 auto;
    background-color: white;
}

#detail .image3
{
    width: 100％;
    padding: 5vw 5vw;
    margin: 0 auto 10vw;
    overflow-x: auto; /* 横スクロール可能に */
    overflow-y: hidden; /* 縦スクロールは不要なら非表示 */
    white-space: nowrap; /* 子要素を横に並べる */
    max-width: 100%; /* 表示領域を画面幅に収める */
}



#detail .image3 picture
{
    width: 200vw;
    margin: 0 auto;
}

#detail .cbutton {
    width: 20vw;
    margin: 0 auto;
    position: relative
}

#detail .ctext {
    font-size: 5vw;
    line-height: 1;
    margin-bottom: 0;
}

#detail .button2 {
    width: calc(35 * var(--u));
    top : 0.5vw;
    right: calc(0 * var(--u));
    transform: rotate(45deg); /* 角度を変更 */
    position: absolute;
    transition: transform 0.3s ease;
}

}
/* ================================================================================
world
================================================================================ */
@media print, screen
{

#world
{
    background-image: url('../../asset/image/s5_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: calc(350 * var(--u)) 0 calc(50 * var(--u))
}

#world > .inner
{
    margin: 0 auto;
}

#world h3
{
    font-size: var(--fzu42);
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#world p
{
    font-size: var(--fzv17);
    text-align: center;
    line-height: 1.8;
}
}

/* ================================================================================
choose
================================================================================ */
@media print, screen
{

#choose
{
    position: relative;
    background:
      /* 横方向（左右2%を白、残りは透過） */
      linear-gradient(to right,
        white 0%,
        white 2%,
        transparent 2%,
        transparent 98%,
        white 98%,
        white 100%
      ),
      /* 縦方向（上30%赤、残り黒） */
      linear-gradient(to bottom,
        #e4e0d8 0%,
        #e4e0d8 18%,
        #efeee9 18%,
        #efeee9 100%
      );
 }

 #choose .bg
 {
    position: absolute;
     width: 96%;
     top: calc(221 * var(--v));
     left: 2%;
  }

#choose .inner{
    padding: calc(100 * var(--u))  calc(0 * var(--u));
    margin: 0 auto;
}


#choose h3
{
font-size: var(--fzu34);
font-weight: 600;
line-height: 1.8;
font-weight: bold;
text-align: center;
margin: calc(40 * var(--u)) ;
}

#choose .tsub
{
font-size: var(--fzu17);
line-height: 2;
text-align: center;
}

#choose .boxes
{
    width: calc(980 * var(--u)) ;
    margin: 0 auto  calc(150 * var(--u)) ;
    display: flex;
    justify-content: space-between;
}

#choose .box
{
width: calc(315 * var(--u)) ;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: white;
padding: calc(35 * var(--u))  calc(10 * var(--u)) calc(30 * var(--u));
}

#choose h4
{
font-size: var(--fzu22);
color: #65542c;
font-weight: bold;
text-align: center;
/* margin-bottom: calc(5 * var(--u)) ; */
}

#choose .point
{
font-size: var(--fzu81);
line-height: 1.8;
color: #65542c;
font-weight: bold;
text-align: center;
/* margin-bottom: calc(5 * var(--u)) ; */
}

#choose .boxes span
{
font-size: var(--fzu32);
}

#choose .bbox
{
font-size: var(--fzu17);
line-height: 2;
border-radius: calc(5 * var(--u)) ;
color: white;
background-color: #65542c;
text-align: center;
}

#choose .boxa
{
width: calc(310 * var(--u))!important ;
}


#choose .boxes2
{
    width: calc(1102 * var(--u));
    margin: 0 auto  calc(150 * var(--u)) ;
    display: flex;
    justify-content: space-between;
}

#choose .boxes2 .box
{
width: calc(250 * var(--u)) ;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: white;
padding: calc(25 * var(--u))  calc(10 * var(--u));
}

#choose .point2
{
font-size: var(--fzu60);
line-height: 1.8;
color: #65542c;
font-weight: bold;
text-align: center;
/* margin-bottom: calc(5 * var(--u)) ; */
}

#choose .boxes2 span
{
font-size: var(--fzu25);
}

#choose .sub
{
font-size: var(--fzu15);
color: #65542c;
text-align: center;
/* margin-bottom: calc(5 * var(--u)) ; */
}

#choose .box3
{
width: calc(1102 * var(--u));
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: white;
padding: calc(50 * var(--u))  calc(30 * var(--u));
margin: 0 auto calc(80 * var(--u)) ;
;
}

#choose .boxes4
{
    width: calc(1000 * var(--u));
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

#choose .box
{
    width: calc(490 * var(--u));
    background-color: #f0f0f0;

}

#choose h5
{
font-size: var(--fzu24);
color: #65542c;
font-weight: bold;
text-align: center;
margin-bottom: calc(35 * var(--u)) ;
}

#choose .box3 p
{
font-size: var(--fzu17);
text-align: center;
line-height: 2;
margin-bottom: calc(35 * var(--u)) ;

}

#choose .boxes5
{
    width: calc(420 * var(--u));
    margin: 0 auto ;
    display: flex;
    justify-content: space-between;
}

#choose .box2
{
    width: calc(190 * var(--u));
}

#choose .box2 .image3
{
    width: calc(190 * var(--u));
    margin-bottom: calc(20 * var(--u)) ;

}

#choose .box2 .image3 picture
{
    width: calc(190 * var(--u));
}


#choose h6
{
font-size: var(--fzu19);
color: #65542c;
font-weight: bold;
text-align: center;
margin-bottom: calc(20 * var(--u)) ;
}

#choose .box2 p
{
font-size: var(--fzu17);
text-align: center;
}

#choose ul
{
    width: calc(980 * var(--u));
    margin: 0 auto calc(50 * var(--u));
    display: flex;
    justify-content: space-between;
}

#choose li
{
 width: calc(285 * var(--u));

}

#choose .image4
{
width: calc(235 * var(--u));
margin-bottom: calc(10 * var(--u)) ;


}

#choose .image4 picture
{
width: calc(235 * var(--u));
}

#choose .stitle
{
font-size: var(--fzu20);
color: #65542c;
font-weight: bold;
text-align: center;
}


}

@media screen and (max-width: 767px)
{
#choose
{
    background: white;
    margin-bottom: 5vw;

}

#choose .bg
{
   position: absolute;
    width: 96%;
    top: 220vw;
    left: 2%;
 }

#choose .closeb
{
    position: relative;
}

#choose .open
{
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease;
}

#choose .active {
  max-height: 1000vw; /* 中身に応じて十分大きめに */
  transition: max-height 1s ease;
}

#choose .images1
{
   width: 90vw;
   margin: 0 auto 4vw;
}

#choose .btext
{
    font-size: 3.5vw;
    padding: 0 5vw;
    line-height: 1.8;
    font-weight: bold;
    text-align: left;
    margin-bottom: calc(50 * var(--u));
}

#choose .button {
    width: calc(25 * var(--u));
    bottom: 5vw;
    right: calc(35 * var(--u));
    position: absolute;
    transition: transform 0.3s ease;
}

#choose .inner0
{
       padding: 10vw 2vw;
       width: 95vw;
       margin: 0 auto;
}

#choose .ttitle
{
    font-size: 7vw;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(30 * var(--u));
}

#choose .ttext
{
    font-size: 4vw;
    text-align: left;
    font-weight: normal;
    line-height: 1.7;
    margin-bottom: calc(0 * var(--u));
}

#choose .inner
{
    background: linear-gradient(to right,
       white 0%,
       white 2%,
       #f5f5f2 2%,
       #f5f5f2 98%,
       white 98%,
       white 100%);
       padding: 10vw 5vw;
       width: 95vw;
       margin: 0 auto;
}

#choose h3
{
    font-size: 6vw;
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}


#choose .boxes
{
    width: 84vw;
    margin: 0 auto 5vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#choose .box
{
width: 40vw!important;
margin: 0 auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: white!important;
padding: calc(35 * var(--u))  calc(10 * var(--u)) calc(30 * var(--u));
}

#choose h4
{
font-size: var(--fzu22);
color: #65542c;
font-weight: bold;
text-align: center;
/* margin-bottom: calc(5 * var(--u)) ; */
}

#choose .point
{
font-size: 12vw;
line-height: 1.5;
color: #65542c;
font-weight: bold;
text-align: center;
/* margin-bottom: calc(5 * var(--u)) ; */
}

#choose .boxes span
{
font-size: 6vw;
}

#choose .tsub
{
font-size: 4vw;
line-height: 2;
text-align: left;
}


#choose .bbox
{
font-size: var(--fzu17);
line-height: 2;
border-radius: calc(5 * var(--u)) ;
color: white;
background-color: #65542c;
text-align: center;
}



#choose .boxes2
{
    width: 84vw;
    margin: 0 auto  calc(150 * var(--u)) ;
    flex-wrap: wrap;
}

#choose .boxes2 .box
{
width: calc(250 * var(--u)) ;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: white;
padding: calc(25 * var(--u))  calc(10 * var(--u));
margin-bottom: 5vw;
}

#choose .point2
{
font-size: 10vw;
line-height: 1.5;
color: #65542c;
font-weight: bold;
text-align: center;
 margin-bottom: 0
}

#choose .boxes2 span
{
font-size: var(--fzu25);
}

#choose .sub
{
font-size: var(--fzu15);
color: #65542c;
text-align: center;
/* margin-bottom: calc(5 * var(--u)) ; */
}

#choose .box3
{
width: 84vw;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: white;
padding: calc(50 * var(--u))  calc(30 * var(--u));
margin: 0 auto calc(80 * var(--u)) ;
;
}

#choose .boxes4
{
    width: 75vw;
    margin: 0 auto;
    display: block;

}

#choose .box
{
    width: 84vw;
    background-color: #f0f0f0;

}

#choose h5
{
font-size: var(--fzu24);
color: #65542c;
font-weight: bold;
text-align: center;
margin-bottom: calc(35 * var(--u)) ;
}

#choose .box3 p
{
font-size: var(--fzu17);
text-align: left;
line-height: 2;
margin-bottom: calc(35 * var(--u)) ;

}

#choose .boxb
{
width: 75vw;
margin: 0 auto 5vw;
background-color: #f0f0f0!important;
padding: calc(35 * var(--u))  calc(10 * var(--u)) calc(30 * var(--u));
}


#choose .boxes5
{
    width: 60vw;
    margin: 0 auto ;
    display: flex;
    justify-content: space-between;
}

#choose .box2
{
    width: calc(190 * var(--u));
}

#choose .box2 .image3
{
    width: calc(190 * var(--u));
    margin-bottom: calc(20 * var(--u)) ;

}

#choose .box2 .image3 picture
{
    width: calc(190 * var(--u));
}


#choose h6
{
    font-size: 3.5vw;
    line-height: 1.5;
margin-bottom: calc(20 * var(--u)) ;
}

#choose .box2 p
{
font-size: 3vw;
line-height: 1.5;
text-align: center;
}

#choose ul
{
    width: 84vw;
    margin: 0 auto calc(50 * var(--u));
    flex-wrap: wrap;
}

#choose li
{
 width: 40vw;
margin-bottom: 5vw;
}

#choose .image4
{
width: 40vw;



}

#choose .image4 picture
{
width: 40vw;
}

#choose .stitle
{
font-size: var(--fzu20);
color: #65542c;
font-weight: bold;
text-align: center;
}

#choose .h32
{
font-size: 5vw;
}

#choose .cbutton {
    width: 20vw;
    margin: 0 auto;
    position: relative
}

#choose .ctext {
    font-size: 5vw;
    line-height: 1;
    margin-bottom: 0;
}

#choose .button2 {
    width: calc(35 * var(--u));
    top : 0.5vw;
    right: calc(0 * var(--u));
    transform: rotate(45deg); /* 角度を変更 */
    position: absolute;
    transition: transform 0.3s ease;
}

}

/* ================================================================================
strategy
================================================================================ */
@media print, screen
{

#strategy
{
    background-image: url('../../asset/image/s6_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: calc(390 * var(--u)) 0 calc(50 * var(--u));
}

#strategy > .inner
{
    margin: 0 auto;
}

#strategy h3
{
    font-size: var(--fzu42);
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#strategy p
{
    font-size: var(--fzv17);
    text-align: center;
    line-height: 1.8;
}

}

/* ================================================================================
growth
================================================================================ */
@media print, screen
{

#growth
{
    background: linear-gradient(to right,
       white 0%,
       white 2%,
       #efeee9 2%,
       #efeee9 98%,
       white 98%,
       white 100%);
       position: relative;
 }

 #growth .bg
 {
    position: absolute;
     width: 96%;
     top: calc(631 * var(--v));
     left: 2%;
  }


  #growth .bg2
  {
     position: absolute;
      width: 96%;
      top: calc(2631 * var(--v));
      left: 2%;
   }


   #growth .bg3
   {
      position: absolute;
       width: calc(350 * var(--u));
       top: calc(631 * var(--v));
       left: 2%;
    }

    #growth .bg4
    {
       position: absolute;
       width: calc(365 * var(--u));
        top: calc(1431 * var(--v));
        left: 2%;
     }




#growth > .inner
{
    padding: calc(100 * var(--u))  calc(0 * var(--u));
    margin: 0 auto;
}

#growth h3
{
    font-size: var(--fzv42);
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#growth p
{
    font-size: var(--fzv17);
    text-align: center;
    line-height: 2;
    margin-bottom: calc(50 * var(--u));
}

#growth .boxes
{
    width: calc(980 * var(--u));
    margin: 0 auto calc(50 * var(--u));
    display: flex;
    justify-content: space-between;
}

#growth .box
{
    width: calc(480 * var(--u));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: calc(50 * var(--u))  calc(30 * var(--u)) calc(35 * var(--u));
    background-color: white;

}

#growth h4
{
    font-size: var(--fzv24);
    font-weight: bold;
    color: #65542c;
    text-align: center;
    margin-bottom: calc(35 * var(--u));
}

#growth .imagea
{
    width: calc(350 * var(--u));

}

#growth .imageb
{
    width: calc(280 * var(--u));
    margin: 0 auto;

}


#growth .boxes2
{
    width: calc(1080 * var(--u));
    margin: 0 auto calc(300 * var(--u));
    display: flex;
    justify-content: space-between;
}

#growth .box2
{
    width: calc(360 * var(--u));
    padding: calc(00 * var(--u))  calc(35 * var(--u));
    border-right: 1px solid #8f8f8f;
}

#growth .box2:nth-last-child(1)
{

    border-right: none;
}

#growth .btitle
{
    font-size: var(--fzv17);
    font-weight: bold;
    color: #4e4224;
    text-align: center;
    margin-bottom: calc(20 * var(--u));
}

#growth h5
{
    font-size: var(--fzv24);
    font-weight: bold;
    color: #826d39;
    text-align: center;
    margin-bottom: calc(20 * var(--u));
}

#growth .text
{
    font-size: var(--fzv17);
    text-align: left;
    margin-bottom: calc(25 * var(--u));
}

#growth .boxes3
{
    width: calc(1080 * var(--u));
    margin: 0 auto calc(200 * var(--u));
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#growth .box3
{
    width: calc(525 * var(--u));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
    padding: calc(35 * var(--u));
    position: relative;
    margin-bottom: calc(25 * var(--u));

}

#growth .important
{
    position: absolute;
    top: calc(-10 * var(--u));
    left: calc(-10 * var(--u));
    width: calc(65 * var(--u));
    height: calc(65 * var(--u));
    font-size: var(--fzu17);
    text-align: center;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #826d39;
    border-radius: calc(40 * var(--u));
}

#growth .box3 .text2
{
    text-align: left;
    margin-bottom: 0;
}

#growth .boxes4
{
    width: calc(1080 * var(--u));
    margin: 0 auto calc(50 * var(--u));
    display: flex;
    justify-content: space-between;
}

#growth .box4
{
    width: calc(475 * var(--u));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
    padding: calc(35 * var(--u));
    position: relative;
    margin-bottom: calc(25 * var(--u));

}

#growth .image2
{
    width: calc(136 * var(--u));
    display: flex;
    align-items: center;
    margin: 0 auto;
}

#growth .image2 picture
{
    width: calc(136 * var(--u));

}

#growth .circle
{
    position: absolute;
    top: calc(-10 * var(--u));
    left: calc(-10 * var(--u));
    width: calc(65 * var(--u));
    height: calc(65 * var(--u));
    font-size: var(--fzu17);
    line-height: 1.2;
    text-align: center;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ba6622;
    border-radius: calc(40 * var(--u));
}

#growth .circle2
{
 background-color: #367149;
}

#growth .box4 h5
{
    margin-bottom: calc(40 * var(--u));

}

#growth ul
{
}

#growth li
{
background-color: #f0f0f0;
padding: calc(15 * var(--u)) calc(20 * var(--u));
margin-bottom: calc(10 * var(--u));

}

#growth li p
{
font-size: var(--fzu17);
line-height: 1;
text-align: left;
margin-bottom: 0;
}

#growth li span
{
    font-weight: bold;
}

#growth .orange
{
    color:  #ba6622;
}

#growth .green
{
    color:  #367149;
}


}

@media screen and (max-width: 800px) {
  #growth .bg
  {
      position: absolute;
      width: 96%;
      top: calc(331 * var(--u));
      left: 2%;
  }
}

@media screen and (max-width: 767px)
{
#growth
{
    background: white;
    margin-bottom: 5vw;

}

#growth .bg
{
   position: absolute;
    width: 96%;
    top: 453vw;
    left: 2%;
 }


 #growth .bg2
 {
    position: absolute;
     width: 96%;
     top: 940vw;
     left: 2%;
  }


  #growth .bg3
  {
     position: absolute;
      width: calc(350 * var(--u));
      top: 275vw;
      left: 2%;
   }

   #growth .bg4
   {
      position: absolute;
      width: calc(365 * var(--u));
       top: 494vw;
       left: 2%;
    }

#growth .closeb
{
    position: relative;
}

#growth .open
{
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease;

}

#growth .active {
  max-height: 1000vw; /* 中身に応じて十分大きめに */
  transition: max-height 1s ease;

}

#growth .images1
{
   width: 90vw;
   margin: 0 auto 4vw;
}

#growth .btext
{
    font-size: 3.5vw;
    padding: 0 5vw;
    line-height: 1.8;
    font-weight: bold;
    text-align: left;
    margin-bottom: calc(50 * var(--u));
}

#growth .button {
    width: calc(25 * var(--u));
    bottom: 5vw;
    right: calc(35 * var(--u));
    position: absolute;
    transition: transform 0.3s ease;
}

#growth .inner0
{
       padding: 10vw 2vw;
       width: 95vw;
       margin: 0 auto;
}

#growth .ttitle
{
    font-size: 7vw;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(30 * var(--u));
}

#growth .ttext
{
    font-size: 4vw;
    text-align: left;
    font-weight: normal;
    line-height: 1.7;
    margin-bottom: calc(0 * var(--u));
}

#growth .inner
{
    background: linear-gradient(to right,
       white 0%,
       white 2%,
       #f5f5f2 2%,
       #f5f5f2 98%,
       white 98%,
       white 100%);
       padding: 10vw 5vw;
       width: 95vw;
       margin: 0 auto;
}

#growth h3
{
    font-size: 6vw;
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#growth p
{
    font-size: var(--fzv17);
    text-align: center;
    line-height: 2;
    margin-bottom: calc(50 * var(--u));
}

#growth .boxes
{
    width: 80vw;
    margin: 0 auto 10vw;
    display: block;
}

#growth .box
{
    width: 80vw;
    margin-bottom: 5vw;

}


#growth .imagea
{
    width: calc(350 * var(--u));
    margin: 0 0 0 8.5vw;

}

#growth .imageb
{
    width: calc(280 * var(--u));
    margin: 0 auto;

}


#growth .boxes2
{
    width: 80vw;
    margin: 0 auto 10vw;
    display: block;
    justify-content: space-between;
}



#growth .boxes2mb
{
    margin: 0 auto 50vw;
}
#growth .box2
{
    width: 80vw;
    padding: 5vw  calc(35 * var(--u));
    border-right: none;
    border-bottom: 1px solid #8f8f8f;

}

#growth .box2:nth-child(1)
{

    border-top: 1px solid #8f8f8f;
}

#growth .btitle
{
    font-size: var(--fzv17);
    font-weight: bold;
    color: #4e4224;
    text-align: center;
    margin-bottom: calc(20 * var(--u));
}

#growth h5
{
    font-size: var(--fzv24);
    font-weight: bold;
    color: #826d39;
    text-align: center;
    margin-bottom: calc(20 * var(--u));
}

#growth .text
{
    font-size: var(--fzv17);
    text-align: left;
    margin-bottom: calc(25 * var(--u));
}

#growth .boxes3
{
    width: 80vw;
    margin: 0 auto calc(200 * var(--u));
    display: block;
}
#growth .box3text
{
    text-align: left;
}

#growth .box3
{
    width: 80vw;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
    padding: calc(35 * var(--u));
    position: relative;
    margin-bottom: calc(25 * var(--u));

}

#growth .important
{
    position: absolute;
    top: calc(-10 * var(--u));
    left: calc(-10 * var(--u));
    width: 14vw;
    height: 14vw;
    font-size: 3.5vw;
    border-radius: 7vw;
}

#growth .box3 .text2
{
    text-align: left;
    margin-bottom: 0;
}

#growth .boxes4
{
    width: 80vw;
    margin: 0 auto 10vw;
    display: block;
}

#growth .box4
{
    width: 80vw;
    padding: calc(35 * var(--u));
    margin-bottom: 0;

}

#growth .image2
{
    width: calc(136 * var(--u));
     transform: rotate(90deg);
    display: flex;
    align-items: center;
    margin: 0 auto;
}

#growth .image2 picture
{
    width: calc(136 * var(--u));

}

#growth .circle
{
    position: absolute;
    top: calc(-10 * var(--u));
    left: calc(-10 * var(--u));
    width: 14vw;
    height: 14vw;
    font-size: 3.5vw;
    border-radius: 7vw;
    align-items: center;
    justify-content: center;
    background-color: #ba6622;
    border-radius: 7vw;
}

#growth .circle2
{
 background-color: #367149;
}

#growth .cbutton {
    width: 20vw;
    margin: 0 auto;
    position: relative
}

#growth .ctext {
    font-size: 5vw;
    line-height: 1;
    margin-bottom: 0;
    text-align: left;
}

#growth .button2 {
    width: calc(35 * var(--u));
    top : 0.5vw;
    right: calc(0 * var(--u));
    transform: rotate(45deg); /* 角度を変更 */
    position: absolute;
    transition: transform 0.3s ease;
}


}


/* ================================================================================
alocation
================================================================================ */
@media print, screen
{

#alocation
{
    background-image: url('../../asset/image/s7_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: calc(390 * var(--u)) 0 calc(50 * var(--u));
}

#alocation > .inner
{
    margin: 0 auto;
}

#alocation h3
{
    font-size: var(--fzu42);
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#alocation p
{
    font-size: var(--fzv17);
    text-align: center;
    line-height: 1.8;
}

}

/* ================================================================================
percentage
================================================================================ */
@media print, screen
{

#percentage
{
    background: linear-gradient(to right,
       white 0%,
       white 2%,
       #f5f5f2 2%,
       #f5f5f2 98%,
       white 98%,
       white 100%);

 }

#percentage > .inner
{
    padding: calc(100 * var(--u))  calc(0 * var(--u));
    margin: 0 auto;
}

#percentage h3
{
    font-size: var(--fzv42);
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#percentage p
{
    font-size: var(--fzv17);
    text-align: center;
    line-height: 2;
    margin-bottom: calc(50 * var(--u));
}

#percentage .boxes
{
    width: calc(1085 * var(--u));
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(90 * var(--u));

}


#percentage .box
{
    width: calc(530 * var(--u));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    background-color: white;
    padding: calc(45 * var(--u))  calc(50 * var(--u)) calc(40 * var(--u));
}


#percentage h4
{
    font-size: var(--fzu24);
    font-weight: bold;
    color: #65542c;

    text-align: center;
    margin-bottom: calc(20 * var(--u));
}

#percentage .image
{
    width: calc(377 * var(--u));
}

#percentage .image picture
{
    width: calc(377 * var(--u));
}

#percentage .boxa
{
    width: calc(530 * var(--u));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
    padding: calc(45 * var(--u))  calc(50 * var(--u)) calc(50 * var(--u)) ;
}

#percentage .box2 p
{
    font-size: var(--fzv17);
    text-align: left;
    line-height: 2;
    margin-bottom: calc(0 * var(--u));
}

#percentage ul
{
    width: calc(980 * var(--u));
    margin: 0 auto calc(50 * var(--u));
    display: flex;
    justify-content: space-between;
}

#percentage li
{
 width: calc(235 * var(--u));

}

#percentage .image2
{
width: calc(235 * var(--u));


}

}

@media screen and (max-width: 767px)
{
#percentage
{
    background: white;
    margin-bottom: 5vw;

}


#percentage .closeb
{
    position: relative;
}

#percentage .open
{
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease;

}

#percentage .active {
  max-height: 1000vw; /* 中身に応じて十分大きめに */
  transition: max-height 1s ease;

}

#percentage .images1
{
   width: 90vw;
   margin: 0 auto 4vw;
}

#percentage .btext
{
    font-size: 3.5vw;
    padding: 0 5vw;
    line-height: 1.8;
    font-weight: bold;
    text-align: left;
    margin-bottom: calc(50 * var(--u));
}

#percentage .button {
    width: calc(25 * var(--u));
    bottom: 5vw;
    right: calc(35 * var(--u));
    position: absolute;
    transition: transform 0.3s ease;
}

#percentage .inner0
{
       padding: 10vw 2vw;
       width: 95vw;
       margin: 0 auto;
}

#percentage .ttitle
{
    font-size: 7vw;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(30 * var(--u));
}

#percentage .ttext
{
    font-size: 4vw;
    text-align: left;
    font-weight: normal;
    line-height: 1.7;
    margin-bottom: calc(0 * var(--u));
}


#percentage .inner
{
    background: linear-gradient(to right,
       white 0%,
       white 2%,
       #f5f5f2 2%,
       #f5f5f2 98%,
       white 98%,
       white 100%);
       padding: 10vw 5vw;
       width: 95vw;
       margin: 0 auto;
}

#percentage h3
{
    font-size: 6vw;
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#percentage p
{
    font-size: var(--fzv17);
    text-align: left;
    line-height: 2;
    margin-bottom: calc(50 * var(--u));
}

#percentage .boxes
{
    width: 80vw;
    margin: 0 auto;
    display: block;
    margin-bottom: 5vw;

}


#percentage .box
{
    width: 80vw;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 3vw;
    background-color: white;
    padding: calc(45 * var(--u))  calc(50 * var(--u)) calc(40 * var(--u));
}


#percentage h4
{
    font-size: var(--fzu24);
    font-weight: bold;
    color: #65542c;

    text-align: center;
    margin-bottom:3vw;
}

#percentage .image
{
    width: 65vw;
}

#percentage .image picture
{
    width: 65vw;
}

#percentage .boxa
{
    width: 80vw;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
    margin-bottom: 3vw;
    padding: calc(45 * var(--u))  calc(50 * var(--u)) calc(50 * var(--u)) ;
}

#percentage .box2 p
{
    font-size: var(--fzv17);
    text-align: left;
    line-height: 2;
    margin-bottom: calc(0 * var(--u));
}

#percentage ul
{
    width: 80vw;
    margin: 0 auto calc(50 * var(--u));
    flex-wrap: wrap;
}

#percentage li
{
 width: 39vw;

}

#percentage .image2
{
    width: 39vw;


}

#percentage .h32
{
    font-size: 5vw!important;

}

#percentage .cbutton {
    width: 20vw;
    margin: 0 auto;
    position: relative
}

#percentage .ctext {
    font-size: 5vw;
    line-height: 1;
    margin-bottom: 0;
    text-align: left;
}

#percentage .button2 {
    width: calc(35 * var(--u));
    top : 0.5vw;
    right: calc(0 * var(--u));
    transform: rotate(45deg); /* 角度を変更 */
    position: absolute;
    transition: transform 0.3s ease;
}

}

/* ================================================================================
tax
================================================================================ */
@media print, screen
{

#tax
{
    background-image: url('../../asset/image/s8_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: calc(390 * var(--u)) 0 calc(50 * var(--u));
}

#tax > .inner
{
    margin: 0 auto;
}

#tax h3
{
    font-size: var(--fzu42);
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#tax p
{
    font-size: var(--fzv17);
    text-align: center;
    line-height: 1.8;
}

}

/* ================================================================================
measures
================================================================================ */
@media print, screen
{

#measures
{
    background: linear-gradient(to right,
       white 0%,
       white 2%,
       #f5f5f2 2%,
       #f5f5f2 98%,
       white 98%,
       white 100%);
       position: relative;
 }

 #measures .bg
 {
    position: absolute;
     width: 96%;
     top: calc(2031 * var(--v));
     left: 2%;
  }

#measures .inner
{
    padding: calc(100 * var(--u))  calc(0 * var(--u));
    margin: 0 auto;
}

#measures h3
{
    font-size: var(--fzv42);
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#measures p
{
    font-size: var(--fzv17);
    text-align: center;
    line-height: 2;
    margin-bottom: calc(50 * var(--u));
}

#measures .boxes
{
    width: calc(1085 * var(--u));
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(90 * var(--u));

}


#measures .box
{
    width: calc(530 * var(--u));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    background-color: white;
    padding: calc(45 * var(--u))  calc(50 * var(--u)) calc(40 * var(--u));
}


#measures h4
{
    font-size: var(--fzu24);
    font-weight: bold;
    color: #65542c;

    text-align: center;
    margin-bottom: calc(50 * var(--u));
}

#measures .boxes2
{
    width: calc(460 * var(--u));
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

}

#measures .box2
{
    width: calc(217 * var(--u));
}

#measures h5
{
    font-size: var(--fzu19);
    font-weight: bold;
    color: #65542c;

    text-align: center;
    margin-bottom: calc(15 * var(--u));
}

#measures .btitle
{
    font-size: var(--fzu17);
    text-align: left;
    margin-bottom: calc(15 * var(--u));
}

#measures .btitle2
{
    font-size: var(--fzu17);
    font-weight: bold;
    text-align: left;
    margin-bottom: calc(5 * var(--u));
}


#measures ul
{
}

#measures .box li
{
background-color: #f0f0f0;
padding: calc(15 * var(--u)) calc(20 * var(--u));
margin-bottom: calc(10 * var(--u));

}

#measures .box li p
{
font-size: var(--fzu17);
line-height: 1;
text-align: left;
margin-bottom: 0;
}

#measures .box li span
{
    font-weight: bold;
}

#measures .box .orange
{
    color:  #ba6622;
}

#measures .box .green
{
    color:  #367149;
}

#measures .boxes3
{
    width: calc(815 * var(--u));
    padding: calc(80 * var(--u)) calc(60 * var(--u)) calc(0 * var(--u)) ;
    background-color: white;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(90 * var(--u));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#measures .box3
{
    width: calc(284 * var(--u));
    margin: 0 auto;
    margin-bottom: calc(0 * var(--u));

}

#measures .image2
{
    width: calc(284 * var(--u));
    margin: 0 auto;
    margin-bottom: calc(20 * var(--u));

}

#measures .text
{
font-size: var(--fzu20);
line-height: 1;
text-align: center;
}

#measures .s1
{
font-size: var(--fzu80);
line-height: 1.2;
font-weight: bold;
color: #826d39;
}


#measures .s2
{
font-size: var(--fzu30);
color: #826d39;
}

#measures .boxes4
{
    width: calc(1085 * var(--u));
    padding: calc(80 * var(--u)) calc(0 * var(--u)) ;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(120 * var(--u));

}

#measures .box4
{
    width: calc(345 * var(--u));
    background-color: white;
    padding: calc(35 * var(--u)) calc(35 * var(--u)) calc(15 * var(--u));
    margin-bottom: calc(0 * var(--u));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#measures .box4 p
{
text-align: left;
 font-size: var(--fzu17);
margin-bottom: 0;
}

#measures .box4 .ltitle
{
    font-weight: bold;
}

#measures .box4 li
{
    background-color: #f0f0f0;
    margin-bottom: calc(5 * var(--u));
}

#measures .box4 li p
{
    font-size: var(--fzu17);
    line-height: 1;
    padding: calc(15 * var(--u)) 0;
    background-color: #f0f0f0;
    text-align: center!important;
    margin-bottom: calc(5 * var(--u));
}

#measures .imagel
{
    width: calc(31 * var(--u));
    margin: 0 auto;
}

#measures .imagel picture
{
    width: calc(31 * var(--u));

}

#measures .lowbox
{
padding: calc(15 * var(--u)) calc(25 * var(--u)) ;
background-color: #f0f0f0;

}

#measures .lowbox p
{
    font-size: var(--fzu17);
    line-height: 1.5;
    text-align: left;
    margin-bottom: calc(5 * var(--u));
}

#measures .box5
{
    width: calc(980 * var(--u));
    margin: 0 auto;
    background-color: white;
    padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(15 * var(--u));
    margin-bottom: calc(0 * var(--u));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


#measures .boxes5
{
    width: calc(895 * var(--u));
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(90 * var(--u));

}

#measures .image3
{
    width: calc(380 * var(--u));
    margin: 0 auto;
}

#measures .image3 picture
{
    width: calc(380 * var(--u));
}

#measures .box6
{
    width: calc(485 * var(--u));
    background-color: white;
    padding: calc(20 * var(--u)) calc(0 * var(--u)) calc(15 * var(--u));
    margin-bottom: calc(0 * var(--u));
}

#measures .box6 h5
{
    text-align: left;
}

#measures .box6 h5 span
{
background-color: #65542c;
padding: calc(10 * var(--u)) calc(15 * var(--u));
font-size: var(--fzu15);
line-height: 1;
color: white;
margin-right: calc(5 * var(--u));
}



#measures .box6 li
{
line-height: 2;
display: flex;
}

#measures .box6 li p
{
    text-align: left;
    line-height: 3;

    margin-bottom: 0;
}

#measures .box6 .ltext1
{
width: calc(115 * var(--u));
font-size: var(--fzu17);
font-weight: bold;
}

#measures .box6 .ltext2
{

font-size: var(--fzu17);

}

#measures hr
{
    background-color:  #cecece;
    border: none;
}

#measures .box7
{
    width: calc(895 * var(--u));
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    padding: calc(20 * var(--u)) calc(40 * var(--u)) calc(15 * var(--u));
    margin-bottom: calc(10 * var(--u));
}

#measures .image4
{
    width: calc(19 * var(--u));
}

#measures .image4 picture
{
    width: calc(19 * var(--u));
}


#measures .ltitle2
{
    width: calc(190 * var(--u));
    font-size: var(--fzu20);
    color: #65542c;
    font-weight: bold;
    text-align: left;
    margin-left: calc(10 * var(--u));
    margin-bottom: calc(0 * var(--u));
}

#measures .ltext3
{
    font-size: var(--fzu20);
    text-align: left;
    margin-bottom: calc(0 * var(--u));
}


}

@media screen and (max-width: 767px)
{
#measures
{
    background: white;
    margin-bottom: 5vw;
}


#measures .closeb
{
    position: relative;
}

#measures .open
{
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease;

}

#measures .active {
  max-height: 1000vw; /* 中身に応じて十分大きめに */
  transition: max-height 1s ease;

}

#measures .images1
{
   width: 90vw;
   margin: 0 auto 4vw;
}

#measures .btext
{
    font-size: 3.5vw;
    padding: 0 5vw;
    line-height: 1.8;
    font-weight: bold;
    text-align: left;
    margin-bottom: calc(50 * var(--u));
}

#measures .button {
    width: calc(25 * var(--u));
    bottom: 5vw;
    right: calc(35 * var(--u));
    position: absolute;
    transition: transform 0.3s ease;
}

#measures .inner0
{
       padding: 10vw 2vw;
       width: 95vw;
       margin: 0 auto;
}

#measures .ttitle
{
    font-size: 7vw;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(30 * var(--u));
}

#measures .ttext
{
    font-size: 4vw;
    text-align: left;
    font-weight: normal;
    line-height: 1.7;
    margin-bottom: calc(0 * var(--u));
}

#measures .bg
{
   position: absolute;
    width: 96%;
    top: calc(2031 * var(--v));
    left: 2%;
 }

 #measures .inner
 {
     background: linear-gradient(to right,
        white 0%,
        white 2%,
        #f5f5f2 2%,
        #f5f5f2 98%,
        white 98%,
        white 100%);
        padding: 10vw 5vw;
        width: 95vw;
        margin: 0 auto;
 }

 #measures h3
 {
     font-size: 6vw;
     font-weight: 600;
     text-align: center;
     line-height: 1.8;
     margin-bottom: calc(50 * var(--u));
 }


#measures p
{
   font-size: var(--fzv17);
   text-align: left;
   line-height: 2;
   margin-bottom: calc(50 * var(--u));
}

#measures .boxes
{
   width: 80vw;
   margin: 0 auto;
   display: block;
   justify-content: space-between;
   margin-bottom: 5vw;

}


#measures .box
{
    width: 80vw;
    margin-bottom: 5vw;
   padding: calc(45 * var(--u))  calc(20 * var(--u)) calc(40 * var(--u));
}


#measures h4
{
   font-size: var(--fzu24);
   font-weight: bold;
   color: #65542c;

   text-align: center;
   margin-bottom: calc(50 * var(--u));
}

#measures .boxes2
{
   width: 76vw;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;

}

#measures .box2
{
   width: 35vw;
}

#measures .box2 .image
{
   width: 35vw;
}

#measures .box2 .image picture
{
   width: 35vw;
}

#measures h5
{
   font-size: var(--fzu19);
   font-weight: bold;
   color: #65542c;

   text-align: center;
   margin-bottom: 3vw;
}

#measures .btitle
{
   font-size: var(--fzu17);
   text-align: left;
   margin-bottom: calc(15 * var(--u));
}

#measures .btitle2
{
   font-size: var(--fzu17);
   font-weight: bold;
   text-align: left;
   margin-bottom: calc(5 * var(--u));
}




#measures .boxes3
{
   width: 80vw;
   padding: calc(80 * var(--u)) calc(20 * var(--u)) calc(0 * var(--u)) ;
   background-color: white;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   margin-bottom: 5vw;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#measures .box3
{
   width: 34vw;
   margin: 0 auto;
   margin-bottom: calc(0 * var(--u));

}

#measures .image2
{
width: 34vw;
   margin: 0 auto;
   margin-bottom: 5vw;

}

#measures .text
{
font-size: var(--fzu20);
line-height: 1;
text-align: center;
}

#measures .s1
{
font-size: var(--fzu80);
line-height: 1.2;
font-weight: bold;
color: #826d39;
}


#measures .s2
{
font-size: var(--fzu30);
color: #826d39;
}

#measures .boxes4
{
   width: 80vw;
   padding: calc(80 * var(--u)) calc(0 * var(--u)) ;
   margin: 0 auto;
   display: block;
   justify-content: space-between;
   margin-bottom: 5vw;

}

#measures .box4
{
width: 80vw;
   background-color: white;
   padding: calc(35 * var(--u)) calc(35 * var(--u)) calc(15 * var(--u));
   margin-bottom: 5vw;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#measures .box4 p
{
text-align: left;
font-size: var(--fzu17);
margin-bottom: 0;
}

#measures .box4 .ltitle
{
   font-weight: bold;
}

#measures .box4 li
{
   background-color: #f0f0f0;
   padding: 0 5vw;
   margin-bottom: 1vw;
}

#measures .box4 li p
{
   font-size: var(--fzu17);
   line-height: 1;
   padding: calc(15 * var(--u)) 0;
   background-color: #f0f0f0;
   text-align: left!important;
   margin-bottom: calc(5 * var(--u));
}

#measures .imagel
{
   width: calc(31 * var(--u));
   margin: 0 auto 1vw;
}

#measures .imagel picture
{
   width: calc(31 * var(--u));

}

#measures .lowbox
{
padding: calc(15 * var(--u)) calc(25 * var(--u)) ;
background-color: #f0f0f0;

}

#measures .lowbox p
{
   font-size: var(--fzu17);
   line-height: 1.5;
   text-align: left;
   margin-bottom: calc(5 * var(--u));
}

#measures .h32
{
   font-size: 5.5vw;
}

#measures .box5
{
   width: 80vw;
   margin: 0 auto 10vw;
   background-color: white;
   padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(15 * var(--u));
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


#measures .boxes5
{
    width: 70vw;
   margin: 0 auto;
   display: block;
   margin-bottom: 5vw;

}

#measures .image3
{
   width: 50vw;
   margin: 0 auto 5vw;
}

#measures .image3 picture
{
    width: 50vw;

}

#measures .box6
{
   width: 70vw;
   background-color: white;
   padding: calc(20 * var(--u)) calc(0 * var(--u)) calc(15 * var(--u));
   margin:0 auto;
}

#measures .box6 h5
{
   text-align: left;
   margin-bottom: 7vw;
}

#measures .box6 h5 span
{
background-color: #65542c;
padding: calc(10 * var(--u)) calc(15 * var(--u));
font-size: var(--fzu15);
line-height: 1;
color: white;
margin-right: calc(5 * var(--u));
}



#measures .box6 li
{
line-height: 1;
display: block;
}

#measures .box6 li p
{
   text-align: left;
   line-height: 1.5;

   margin-bottom: 0;
}

#measures .box6 .ltext1
{
width: auto;
font-size: var(--fzu17);
font-weight: bold;
}

#measures .box6 .ltext2
{

font-size: var(--fzu17);
margin-bottom: 3vw;;

}

#measures hr
{
   background-color:  #cecece;
   border: none;
   margin-bottom: 2vw;
}

#measures .box7
{
   width: 70vw;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   background-color: #f0f0f0;
   padding: calc(20 * var(--u)) calc(40 * var(--u)) calc(15 * var(--u));
   margin: 0 auto 5vw;
}

#measures .image4
{
   width: 4vw;
}

#measures .image4 picture
{
   width: 4vw;
}


#measures .ltitle2
{
   width: auto;
   font-size: var(--fzu20);
   color: #65542c;
   font-weight: bold;
   text-align: left;
   margin-left: calc(10 * var(--u));
   margin-bottom: calc(0 * var(--u));
}

#measures .ltext3
{
   font-size: var(--fzu20);
   text-align: left;
   margin-bottom: calc(0 * var(--u));
}

#measures .cbutton {
    width: 20vw;
    margin: 0 auto;
    position: relative
}

#measures .ctext {
    font-size: 5vw;
    line-height: 1;
    margin-bottom: 0;
    text-align: left;
}

#measures .button2 {
    width: calc(35 * var(--u));
    top : 0.5vw;
    right: calc(0 * var(--u));
    transform: rotate(45deg); /* 角度を変更 */
    position: absolute;
    transition: transform 0.3s ease;
}


}
/* ================================================================================
center
================================================================================ */
@media print, screen
{

#center
{
    background-image: url('../../asset/image/s9_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: calc(110 * var(--u)) 0 calc(400 * var(--u));
}

#center > .inner
{
    margin: 0 auto;
}

#center h3
{
    font-size: var(--fzu42);
    font-weight: 600;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(50 * var(--u));
}

#center p
{
    font-size: var(--fzv23);
    text-align: center;
    line-height: 1.8;
}

}

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

    #center
    {
        background-image: url('../../asset/image/s9_bg_sp.jpg');
        background-size: 100% auto;
        background-position: bottom;
        padding: calc(110 * var(--u)) 0 38vw;

    }

    #center h3
    {
        font-size: 7vw;
        font-weight: 600;
        text-align: center;
        line-height: 1.8;
        margin-bottom: calc(50 * var(--u));
    }

    #center p
    {
        font-size: var(--fzv23);
        text-align: center;
        line-height: 1.8;
    }



}
/* ================================================================================
company
================================================================================ */
@media print, screen
{

#company
{
padding: calc(130 * var(--u)) 0 calc(130 * var(--u));
}

#company > .inner
{
margin: 0 auto;
width: calc(815 * var(--u));
}

#company h3
{
    font-size: var(--fzu34);
    font-weight: bold;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(100 * var(--u));
}

#company table
{
width: calc(815 * var(--u));
margin: 0 auto;
 border-collapse: collapse;
}

#company tr
{
padding: calc(25 * var(--u)) 0;
border-bottom: 1px solid #cecece;
}


#company th
{
font-size: var(--fzv17);
text-align: left;
font-weight: bold;
}

#company td
{
font-size: var(--fzv17);
text-align: left;
}

#company table th,
#company table td {
    padding: calc(25 * var(--u)) 0;
    border-bottom: 1px solid #cecece;
}
}

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

    #company
    {
    padding: 10vw 0vw;
    }

    #company > .inner
    {
    margin: 0 auto;
    width: 96vw;
    }

    #company h3
    {
        font-size: 5.5vw;

        margin-bottom: 5vw;
    }


    #company table
    {
    width: 100%;
    margin: 0 auto;
     border-collapse: collapse;
    }


    #company tr
    {
    padding: calc(15 * var(--u)) 0;
    border-bottom: 1px solid #cecece;
    display: flex;        /* 横並びからflexboxに切り替え */
     flex-direction: column; /* 縦並びに */
     align-items: flex-start;
    }




    #company table th,
    #company table td {
        padding: 2vw 0;
        border-bottom: none!important;
    }
}

/* ================================================================================
contact
================================================================================ */
@media print, screen
{

#contact
{
padding: calc(130 * var(--u)) 0 calc(130 * var(--u));
background-color: #efeee9;
}

#contact > .inner
{
margin: 0 auto;
width: calc(980 * var(--u));
}

#contact h3
{
    font-size: var(--fzu42);
    font-weight: bold;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(60 * var(--u));
}

#contact p
{
    font-size: var(--fzv17);
    text-align: center;
    line-height: 2;
    margin-bottom: calc(50 * var(--u));
}

#contact .boxes
{
    width: calc(980 * var(--u));
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(80 * var(--u));
}

#contact .box
{
    width: calc(475 * var(--u));
    padding: calc(45 * var(--u)) calc(30 * var(--u));
    background-color: white;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}


#contact .picon
{
    position: absolute;
    width: calc(60 * var(--u));
}

#contact .phone_icon picture
{
    width: calc(60 * var(--u));
}



#contact .pnumber
{
    font-size: var(--fzu50);
    color: #826d39;
    text-align: center;
    line-height: 1;
    margin-left: calc(50 * var(--u));
    margin-bottom: calc(10 * var(--u));
}

#contact .ptime
{
    font-size: var(--fzu17);
    text-align: center;
    line-height: 1;
    margin-bottom: calc(0 * var(--u));

}

#contact .box2
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(45 * var(--u)) calc(70 * var(--u));

}

#contact .micon
{
    width: calc(76 * var(--u));
}

#contact .pmail
{
    font-size: var(--fzu21);
    font-weight: bold;
    color: #826d39;
    margin-bottom: calc(0 * var(--u));

}

#contact h4
{
    font-size: var(--fzu34);
    font-weight: bold;
    text-align: center;
    line-height: 1.8;
    margin-bottom: calc(60 * var(--u));
}

#contact .contact-form {
    background-color: white;
    padding: calc(85 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) calc(50 * var(--u)) ;
}

#contact .form-group p {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u)); /* ラベルと必須の間隔 */
}

#contact .form-group label {
    display: inline-block;
    font-size: var(--fzu17);
    width: calc(135 * var(--u)); /* ラベルの固定幅 */
    flex-shrink: 0;
    text-align: left;
}

#contact .form-group .required {
    display: inline-block;
    width: calc(70 * var(--u));  /* 必須ラベルの固定幅 */
    font-size: var(--fzu17);
    text-align: center;


}

#contact .r2
{
    display: inline-block;
    font-size: var(--fzu17);
    text-align: center;
    color: white;
    background-color: #a44646;
    padding: calc(5 * var(--u)) calc(15 * var(--u));
    border-radius: calc(25 * var(--u));
}

#contact input,
#contact textarea {
    width: calc(590 * var(--u));
}

#contact textarea {
    min-height: calc(120 * var(--u));
}

#contact .submit-btn{
    background-color: #826d39;
    width: calc(290 * var(--u));
    border-radius: calc(100 * var(--u));
    margin: calc(100 * var(--u)) auto 0;
}




}

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

    #contact
    {
    padding: 10vw 0 15vw ;
    background-color: #efeee9;
    }

    #contact > .inner
    {
    margin: 0 auto;
    width: 96vw;
    }

    #contact h3
    {
        font-size: 5.5vw;
        font-weight: bold;
        text-align: center;
        line-height: 1.8;
        margin-bottom: calc(60 * var(--u));
    }

    #contact p
    {
        text-align: left;
    }

    #contact .boxes
    {
        width: 96vw;
        display: flex;
        justify-content: space-between;
        margin-bottom: calc(80 * var(--u));
    }

    #contact .box
    {
        width: calc(475 * var(--u));
        padding: calc(45 * var(--u)) calc(30 * var(--u));
        background-color: white;
        position: relative;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    }


    #contact .picon
    {
        position: absolute;
        width: calc(60 * var(--u));
    }

    #contact .phone_icon picture
    {
        width: calc(60 * var(--u));
    }



    #contact .pnumber
    {
        font-size: var(--fzu50);
        color: #826d39;
        text-align: center;
        line-height: 1;
        margin-left: calc(50 * var(--u));
        margin-bottom: calc(10 * var(--u));
    }

    #contact .ptime
    {
        font-size: var(--fzu17);
        text-align: center;
        line-height: 1;
        margin-bottom: calc(0 * var(--u));

    }

    #contact .box2
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: calc(45 * var(--u)) calc(70 * var(--u));

    }

    #contact .micon
    {
        width: calc(76 * var(--u));
    }

    #contact .pmail
    {
        font-size: var(--fzu21);
        font-weight: bold;
        color: #826d39;
        margin-bottom: calc(0 * var(--u));

    }


    #contact .contact-form {
        padding: calc(60 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) calc(50 * var(--u)) ;
    }

    #contact .form-group p {
        flex-wrap: wrap;
    }

    #contact .form-group label {

        width: auto;
    }

    #contact .form-group .required {
        display: inline-block;
        width: auto; /* 必須ラベルの固定幅 */
        font-size: var(--fzu17);
        text-align: center;


    }

}

/* ======================================== end ======================================== */