@charset "utf-8";

:root {
    --font-s: 0.8rem;
}


ul.normal-list li{
    list-style: disc;
    margin-left:1em;
}

.cv a {
  position: fixed;
  top: 38vh;
  right: 0;
  display: inline-block;
  background: var(--color2);
  color: var(--white);
  padding: 1em;
  writing-mode: vertical-lr;
  letter-spacing: 0.2em;
  opacity: 1;                  /* 初期は表示 */
  transition: opacity 0.6s;    /* ふわっと効果 */
  pointer-events: auto;        /* 通常クリック可 */
}
.cv a.hidden {
  opacity: 0;
  pointer-events: none;        /* 消えてる間はクリックできない */
}

@media (max-width: 900px) {
.cv a{
    top:0;
    right:0;
    display: inline-block;
    padding: 1em 2em;
    writing-mode: horizontal-tb;
}

}

.pc-none{
    display: none;
}

@media (max-width: 900px) {
.pc-none{
    display: block;
}

.sp-none{
    display: none;
}

}

/*title*/

h2,h3,h4{
    font-family: var(--mincho);
}

.t-title{
    letter-spacing: 0.08em;
    font-style: normal;
    font-weight: 500;
}

.t-title::after{
    content: attr(data-title);
    font-family: var(--font1);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.75;
    color: var(--gray);
    font-size: var(--font-s);
    margin:0 0 0 1em;
}

.cap-d.t-title::after{
    display: block;
    margin:0;
}

@media (max-width: 900px) {
.t-title{
    text-align: center;
}

.t-title::after{
    display: block;
    margin:0;
}

}

/*ts-header*/

#ts-header{
    border:2em solid var(--white);
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    margin-bottom: 8em;
}

@media (max-width: 900px) {
#ts-header{
    border:1em solid var(--white);
}
}

#ts-header h1{
    position: absolute;
    left:50%;
    top:45%;
    transform: translate(-50%,-45%);
}

@media (max-width: 900px) {
#ts-header h1{
    max-width: 290px;
    width:100%;
}
}

#ts-header figure{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height: 100%;
    z-index: -1;
}

#ts-header figure img{
    width:100%;
    height: 100vh;
    object-fit: cover;
}

#ts-ban{
    position: absolute;
    right:2em;
    bottom: 5vh;
    background:rgba(255,255,255,0.8);
    display: block;
    max-width: 400px;
    width:100%;
    padding:1em;
}

  @media (max-width:767px){

#ts-ban{
    right:2%;
    bottom: 5vh;
    max-width: none;
    width:96%;
}

  }

#ts-ban dl{
    display: flex;
    align-items: flex-start;
    gap:1.5em;
    font-family: var(--mincho);
    border-bottom: 1px solid var(--gray);
    padding-bottom: 1em;
    font-weight: 800;
}


#ts-ban dt{
    background:var(--color1);
    color: var(--white);
    padding: 0.2em 1em;
}

#ts-ban dd{
    font-size: 1.2rem;
    line-height: 1.7;
}

#ts-ban p{
    margin-top:1em;
    text-align: center;
}

  @media (max-width:767px){
#ts-ban dd{
    font-size: 1rem;
}
  }

/*lead*/

#lead{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:0 5em;
    padding-bottom: 8em;
}

  @media (max-width:900px){
#lead{
    grid-template-columns: 1fr;
}
 }

#lead ul{
    position: relative;
}

#lead ul::after{
    content:'';
    position: absolute;
    left:0;
    top:0;
    background:var(--l-gray);
    width:60%;
    height:90%;
    z-index: -1;
}

#lead ul li:first-of-type{
    width:80%;
    margin-top:4em;
    margin-bottom:4em;
    margin-left:2em;
}
#lead ul li:nth-of-type(2){
    width:30%;
    margin-left:8em;
    margin-bottom:4em;
}

#lead ul li:nth-of-type(3){
    width:40%;
    position: absolute;
    right:3em;
    bottom:11em;
}


#lead ul li:nth-of-type(4){
    width:30%;
}


#lead .cap{
    border:1px solid var(--color2);
    display: inline-block;
    margin-bottom: 0!important;
    padding: 0.2em 1em;
}

#lead .btn{
    background:var(--color2);
}

  @media (max-width:900px){
#lead ul{
    margin-bottom:4em;
}
#lead ul::after{
    top: 9em;
    width:52%;
    height:70%;
    left:inherit;
    right:0;
}

#lead ul li:nth-of-type(2) {
    margin-left: 3em;
}

#lead ul li:nth-of-type(3){
    right:2em;
    bottom:9em;
}

#lead div{
    padding-right: 1rem;
    padding-left: 1rem;
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
    margin:0 auto;
}

.lead-btn{
   text-align: center;
}
}
/*tasting*/

#tasting{
    border-top:1px solid var(--gray);
    padding-top:4em;
}

#tasting .t-title::after{
    color: var(--color2);
}

.tasting-area{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 4em;
}

.tasting-area figure{
    order:2;
}

.tasting-area figure img{
    width:100%;
}

  @media (max-width:900px){
.tasting-area,
.contents-area{
    grid-template-columns: 1fr;
}
.tasting-area figure{
    order:1;
}
.tasting-area div{
    order:2;
}

.tasting-area h3{
    text-align: center;
}

}

.outline-area{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 4em;
    align-items: center;
}

.outline-area div:first-of-type{
    border-right:1px solid var(--gray);
}


  @media (max-width:900px){
.outline-area{
    grid-template-columns: 1fr;
}

.outline-area div:first-of-type{
    border-right:none;
    border-bottom:1px solid var(--gray);
    padding-bottom: 4em;
    margin-bottom: 4em;
}

}


.outline-area div:first-of-type dl{
    display: flex;
    gap:1em;
}

.outline-area div:first-of-type dt{
    position: relative;
    padding-bottom: 1em;
    width:7em;
    flex-shrink: 0;
}

.outline-area div:first-of-type dt::after{
    content:'';
    position: absolute;
    left:0;
    bottom:1em;
    width:1.5em;
    height: 1px;
    background:var(--gray);
}

.outline-area div:last-of-type{
    text-align: center;
}

.outline-area div:last-of-type dt{
    display: inline-block;
    border:1px solid var(--color2);
    padding:0.2em 1em;
    margin-bottom: 1em;
}

.outline-area div:last-of-type dd a{
    font-size: 2rem;
}

.outline-area div:last-of-type .btn{
    background:var(--color2);
}


/*worry*/

#worry{
 background:var(--l-gray);
    padding:4em 0;
    margin-bottom: 8em;
}

#worry h3{
    margin-bottom: 2em;
    white-space: nowrap;
}

.worry-area{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:2em 4em;
}

  @media (max-width:900px){
.worry-area{
    grid-template-columns: 1fr;
  }
  .worry-area .text-center{
    text-align: left!important;
  }
}

/*solve*/

#solve{
    margin-bottom: 8em;
}

.solve-container{
    display: grid;
    grid-template-columns: 1.2fr 2fr;
}

  @media (max-width:900px){
.solve-container{
    grid-template-columns: 1fr;
  }
}

.solve-area{
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap:0 3em;
    margin-bottom: 2em;
    align-items: center;
}

.solve-area h4{
    margin-bottom: 1em;
}

.solve-img img{
    object-fit: cover;
    aspect-ratio: 1 / 1.1;
}


  @media (max-width:900px){
.solve-area{
    grid-template-columns: 1fr;
}

.solve-img{
    margin-bottom: 1em;
}

.solve-img img{
    aspect-ratio: 1.85 / 1;
}


  }

/*merit*/
#merit{
    background:var(--color1);
    color: var(--white);
    margin-bottom: 8em;
    padding:4em 0;
}

.merit-area{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:3em 5em;
    padding: 4em 2em;
    border-bottom: 1px solid var(--gray);
}

  @media (max-width:900px){
.merit-area{
    grid-template-columns: 1fr;
    padding:4em 0;
    gap:2em;
}

.merit-area:first-of-type{
    padding:0 0 4em 0;
}
}

.merit-area h3{
    margin-bottom: 1em;
}

.merit-area h3 span{
    color: var(--color2);
}

#merit .btn{
    margin-top:2em;
    background:var(--color2);
}

/*contents*/

#contents{
    margin-bottom: 8em;
}

#contents .t-title::after{
    color: var(--color2);
}

.contents-area{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:3em 5em;
    padding-bottom: 4em;
}

  @media (max-width:900px){
.contents-area{
    grid-template-columns: 1fr;
}

.contents-block{
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap:0 2em;
}

.contents-area h3{
    font-size: 1.2rem;
}
}

.contens-img{
    margin-bottom: 1em;
}

.contens-img img{
    object-fit: cover;
    aspect-ratio: 2 / 1.1;
}

  @media (max-width:900px){
.contens-img img{
    aspect-ratio: 1 / 1.1;
}

.contents-area .t-title{
    text-align: left;
}

  }

.contents-sub-area{
    background:var(--l-gray);
    padding:4em 0;
}

.contents-sub-area h3{
    position: relative;
    margin-bottom: 4em;
}

.contents-sub-area h3::after{
    content:'';
    position: absolute;
    left:50%;
    bottom:-0.7em;
    transform: translateX(-50%);
    width:3em;
    height: 1px;
    background:var(--color2);
}

.sub-contents-area{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:4em;
}

  @media (max-width:900px){
.sub-contents-area{
    grid-template-columns: 1fr 1fr;
    gap:2em;
}
}

/*faq*/

#faq{
    margin-bottom: 8em;
}

.faq-area{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap:0 5em;
}

details summary {
    position: relative;
    display: block;
    padding: 1em 3.5em 1em 5.5em;
    cursor: pointer;
    border: 1px solid var(--gray);
    margin-bottom: 1em;
    font-size: 1.2rem;
  }

  details summary::-webkit-details-marker {
    display: none;
  }
  
  details summary::before {
    content: "Q";
    position: absolute;
    top: 0.4em;
    left: 1em;
    font-family:var(--mincho);
    color: var(--color2);
    font-size: 1.7rem;  
  }
  
  details summary::after{
    content:'';
    position: absolute;
    top: 0;
    right: 1.5em;
    bottom: 0;
    display: block;
    width: 1em;
    height: 0.6em;
    margin: auto;
    clip-path: polygon(100% 13%, 50% 100%, 0 13%, 8% 0, 50% 73%, 92% 0);
    transition: transform 0.5s;
    background:var(--gray);
  }
  
  details[open] summary::after {
    transform: rotate(180deg);
  }
  
  details .faq-content{
    position: relative;
    padding: 0.5em 1.5em 1.5em 5.5em;
    margin-bottom: 1em;
    }

  details .faq-content::before {
    content: "A";
    position: absolute;
    top: 0.1em;
    left: 1em;
    font-family:var(--mincho);
    font-size: 1.7rem;  
  }

  @media (max-width:900px){
    .faq-area{
    grid-template-columns: 1fr;
}

    details summary {
      padding: 1em 2.8em 1em 3.8em;
      font-size: 1rem;
    }

    details .faq-content {
      padding: 1em 1.2em 1em 3.8em;
    }

  }

/*info*/

#info{
    background:var(--color1-h);
    padding: 4em 0;
    margin-bottom: 8em;
    color: var(--l-gray);
}

.info-area{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:2em 5em;
}

.info-img img{
    aspect-ratio:1/1.1;
    object-fit: cover;
}

@media (max-width: 900px) {
.info-area{
    grid-template-columns: 1fr;
}

.info-img img{
    aspect-ratio:2/1;
    object-fit: cover;
}


}

/*access*/

#access{
    padding-bottom: 4em;
}

.access-area{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:2em 5em;
}


@media (max-width: 900px) {
.access-area{
    grid-template-columns: 1fr;
}

}

/*form*/

#contact{
    border-top:1px solid var(--gray);
    padding-top:8em;
}

.confirm-area{
    background:var(--l-gray);
    margin:0 0 5em;
    padding:2em 0 5em 0;
    text-align: center;
}

.confirm-area ol{
    display: flex;
   justify-content: center;
}

.confirm-area ol li{
    position: relative;
    margin:0 2em;
}

.confirm-area ol li span{
    background:var(--gray);
    padding:1em 4em;
    color: var(--white);
}

.mw_wp_form_confirm .confirm-area ol li:nth-of-type(2) span,
.mw_wp_form_complete .confirm-area ol li:nth-of-type(3) span,
.confirm-area ol li:first-of-type span{
    background:var(--color2);
}

.mw_wp_form_confirm .confirm-area ol li:first-of-type span,
.mw_wp_form_complete .confirm-area ol li:first-of-type span{
    background:var(--gray);
}

.confirm-area ol li:not(:last-of-type):after{
    content: "";
    position: absolute;
    top: 0;
    right: -2.6em;
    bottom: 0px;
    display: block;
    width: 1em;
    height: 1em;
    clip-path: polygon(0px 7%, 7% 0px, 57% 50%, 7% 100%, 0px 93%, 43% 50%, 0px 7%);
    margin: auto;
    background-color: var(--gray);
}

@media (max-width: 900px) {
.confirm-area{
    margin-left:-1.5em;
    margin-right:-1.5em;
}
.confirm-area ol li{
    margin:0 1em;
}

.confirm-area ol li span{
    padding:1em 2em;
}

.confirm-area ol li:not(:last-of-type):after{
    right: -1.6em;
}
}

@media (max-width: 380px) {
.confirm-area ol li span{
    padding:1em;
}

}

/*footer*/
#footer{
    background:var(--color1);
    color: var(--white);
}

#footer p img{
    width:8em;
}

#footer p{
    margin-top:0;
    margin-bottom: inherit;
    width:fit-content;
}

#footer .t-row{
    display: flex;
    justify-content: space-between;
    width:80%;
    margin:0 auto;
    padding:10em 0;
}

#footer ul{
    display: flex;
    margin-bottom: 1em;
}

#footer ul li:not(:last-of-type):after{
    content:'|';
    padding:0 1em;
}


@media (max-width: 900px) {
    #footer .t-row{
    flex-direction: column;
    justify-content: center;
    width:90%;
    padding:5em 0;
    text-align: center;
}

#footer p img{
    width:80px;
    margin-bottom: 20px;
}

#footer p{
    width:auto;
    margin-bottom: 2em;
}

#footer ul{
    justify-content: center;
    font-size: 12px;
    margin-bottom: 2em;
}

#footer ul li:not(:last-of-type):after{
    padding:0 0.5em;
}

#footer .copyright{
    font-size: 12px;

}

}