@charset "UTF-8";

.dist_article_img div{
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.6s;
}
.dist_article_img div.is-inview{
  clip-path: inset(0);
}


@media screen and (min-width : 768px){

  /*---------
  kv
  ---------*/
  .news[data-count1="0"][data-count2="0"] + .kv{
    padding: var(--px-78) 0 0 0;
  }
  .kv span{
    display: block;
    height: var(--px-600);
    margin: 0 0 var(--px-135) 0;
    background-image: url("/distilleries/miyagikyo/img//kv_pc.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
  }


  /*---------
  lead
  ---------*/
  .lead{
    margin: 0 0 var(--px-125) 0;
  }

  .lead_copy{
    min-width: var(--px-400);
  }
  .lead_copy + .lead_txt{
    white-space: nowrap;
  }

  .lead .anchor_btn{
    margin: var(--px-45) 0 0 0;
    padding: 0 0 0 var(--px-36);
    width: var(--px-400);
    height: var(--px-100);
  }
  .lead .anchor_btn p{
    display: flex;
    flex-direction: column;
    gap: var(--px-14);
    position: static;
    z-index: 1;
  }
  .lead .anchor_btn::after{
    content: "";
    aspect-ratio: 1/1;
    display: block;
    position: absolute;
    bottom: var(--px-12);
    right: var(--px-12);
    width: var(--px-12);
    height: var(--px-12);
    background-image: url("/common/img/icon_arrow.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    transform: rotate(135deg);
  }
  .lead .anchor_btn:hover::after{
    background-image: url("/common/img/icon_arrow_white.svg");
  }

  .lead .anchor_btn p span[data-type="jp"]{
    font-size: var(--px-22);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1;
  }
  .lead .anchor_btn p span[data-type="en"]{
    font-family: "Vollkorn", serif;
    font-size: var(--px-12);
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 0.9;
  }







  /*---------
  dist_article
  ---------*/
  .dist_article{
    display: flex;
    justify-content: center;
    gap: var(--px-210);
    padding: var(--px-150) 0 var(--px-240) 0;
  }
  .dist_article[data-clm="2"]{
    gap: var(--px-160);
  }
  
  .dist_article_item{
    display: flex;
    justify-content: center;
    gap: var(--px-100);
    max-width: 100%;
  }
  .dist_article[data-clm="2"] .dist_article_item{
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--px-48);
    width: var(--px-500);
    min-width: 40%;
  }
  .dist_article_img{
    aspect-ratio: 500 / 450;
    width: var(--px-500);
    position: relative;
  }
  .dist_article[data-clm="2"] .dist_article_img{
    width: 100%;
  }

  .dist_article_img div[data-num="2"]{
    aspect-ratio: 306 / 230;
    position: absolute;
    left: var(--px-110-);
    bottom: var(--px-120-);
    width: var(--px-300);
  }

  .dist_article_img img{
    width: 100%;
    height: auto;
  }


  .dist_article:not([data-clm="2"]) .dist_article_desc{
    box-sizing: border-box;
    width: var(--px-400);
    padding: var(--px-135) 0 0 0;
  }

  .dist_article_ttl{
    display: flex;
    flex-direction: column;
    gap: var(--px-22);
    position: relative;
  }
  .dist_article_ttl span{
    font-size: clamp(2.61vw, 52px, 3vw);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1;
    white-space: nowrap;
  }
  .dist_article[data-clm="2"] .dist_article_ttl span{
    font-size: var(--px-28);
  }

  .dist_article_desc{
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .dist_article_txt{
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    line-height: 2.33;
    margin: var(--px-70) 0 0 0;
  }
  .dist_article[data-clm="2"] .dist_article_txt{
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    line-height: 2.33;
    margin: var(--px-40) 0 0 0;
    flex-grow: 1;
    display: flex;
  }

  .dist_article_link{
    margin: var(--px-24) 0 0 0;
  }
  .dist_article[data-clm="2"] .dist_article_link{
    display: flex;
    gap: var(--px-16);
  }
  .dist_article_link .more_link{
    width: var(--px-195);
  }



  .x_link{
    text-align: center;
    margin: 0 0 var(--px-140) 0;
  }
  .x_link p{
    font-size: var(--px-20);
    line-height: 2.35;
    margin: 0 0 var(--px-30) 0;
  }
  .x_link .more_link{
    color: #ffffff;
    display: flex;
    width: var(--px-520);
    height: var(--px-80);
    margin: 0 auto;
    transition: opacity 0.6s;
  }
  .x_link .more_link:hover{
    opacity: 0.7;
  }
  body[data-page="miyagikyo"] .x_link .more_link::before{
    background-color: #000000;
    transform: scaleX(1);
  }
  .x_link .more_link::after{
    background-image: url("/common/img/icon_blank_white.svg");
  }
  .x_btn_icon{
    width: var(--px-90);
    height: 100%;
    background-image: url("/common/img/icon_x_white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--px-18) auto;
    border-right: 1px solid #ffffff;
  }
  .x_btn_txt{
    flex: 1;
  }

  /*---------
  news
  ---------*/
  .news[data-name="news"]{
    margin: 0 0 var(--px-140) 0;
  }


  /*---------
  infoArea
  ---------*/
  .infoArea{
    background-color: #d2d2d2;
    width:74%;
    margin:var(--px-120) auto var(--px-150) auto;
  }
  .infoArea .box{
    display:flex;
    width: 100%;
    font-size: var(--px-22);
    letter-spacing: 0.18em;
  }
  .infoArea .box > div{
    display:flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
    height:var(--px-150);
  }
  .infoArea .ttlBox{
    width:33%;
  }
  .infoArea .detailBox{
    border-left: 1px solid #e9e9e9;
    width:67%;
  }
  .infoArea .detailBox .txt{
    text-align: left;
  }
  .infoArea .detailBox .cap{
    font-size: var(--px-13);
    margin-top:var(--px-14);
    display: block;
  }


  /*---------
  about
  ---------*/
  .about{
    padding: var(--px-140) 0 var(--px-250) 0;
  }

  .about article{
    display: flex;
    justify-content: flex-end;
  }
  .about article:nth-of-type(odd){
    flex-direction: row-reverse;
  }
  .about article[data-num="0"]{
    align-items: center;
  }
  .about article[data-num="1"]{
    margin: var(--px-125) 0 0 0;
  }
  .about article[data-num="2"]{
    margin: var(--px-150) 0 0 0;
  }
  .about article[data-num="3"]{
    margin: var(--px-190) 0 0 0;
  }
  .about article[data-num="4"]{
    margin: var(--px-170) 0 0 0;
  }

  .about .about_img{
    aspect-ratio: 470 / 295;
    width: var(--px-470);
    position: relative;
  }
  .about article[data-num="0"] .about_img{
    aspect-ratio: 700 / 527;
    width: var(--px-700);
  }
  .about article[data-num="1"] .about_img{
    margin: var(--px-82) 0 0 0;
  }
  .about article[data-num="2"] .about_img{
    margin: var(--px-110) 0 0 0;
  }
  .about article[data-num="3"] .about_img{
    margin: var(--px-26) 0 0 0;
  }
  .about article[data-num="4"] .about_img{
    margin: var(--px-40) 0 0 0;
  }

  .about .about_img div[data-num="1"]{
    width: 100%;
    height: auto;
  }
  .about article .about_img div[data-num="2"]{
    position: absolute;
  }
  .about article[data-num="1"] .about_img div[data-num="2"]{
    aspect-ratio: 225 / 248;
    width: var(--px-220);
    top: var(--px-330);
    right: var(--px-17-);
  }
  .about article[data-num="2"] .about_img div[data-num="2"]{
    aspect-ratio: 252 / 190;
    width: var(--px-250);
    top: var(--px-330);
    left: var(--px-62-);
  }
  .about article[data-num="3"] .about_img div[data-num="2"]{
    aspect-ratio: 230 / 252;
    width: var(--px-230);
    top: var(--px-330);
    right: var(--px-68-);
  }
  .about article[data-num="4"] .about_img div[data-num="1"]{
    aspect-ratio: 370 / 410;
    width: var(--px-370);
    margin: var(--px-6) auto 0 0;
  }
  .about article[data-num="4"] .about_img div[data-num="2"]{
    aspect-ratio: 250 / 190;
    width: var(--px-250);
    top: var(--px-450);
    left: var(--px-260);
  }
  .about .about_img img{
    width: 100%;
    height: auto;
  }

  .about article[data-num="0"] .about_desc{
    padding: var(--px-48) var(--px-48) 0 0;
    width: calc(100% - var(--px-700));
    min-width: var(--px-420);
  }
  .about article:not([data-num="0"]) .about_desc{
    width: calc(100% - var(--px-470));
    min-width: 480px;
    box-sizing: border-box;
  }
  .about article[data-num="1"] .about_desc{
    padding: 0 0 0 var(--px-120);
  }
  .about article[data-num="2"] .about_desc{
    padding: 0 var(--px-160) 0 0;
  }
  .about article[data-num="3"] .about_desc{
    padding: 0 0 0 var(--px-115);
  }
  .about article[data-num="4"] .about_desc{
    padding: 0 var(--px-120) 0 0;
  }

  .about h3{
    display: flex;
    flex-direction: column;
    gap: var(--px-40);
    margin: 0 0 var(--px-74) 0;
  }
  .about article[data-num="0"] h3{
    gap: var(--px-32);
  }
  .about h3 span[data-type="num"]{
    font-family: "Lato", serif;
    font-size: var(--px-70);
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1;
  }
  .about h3 span:not([data-type="num"]){
    font-size: var(--px-38);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1;
  }
  .about article:not([data-num="0"]) h3 span:not([data-type="num"]){
    white-space: nowrap;
  }
  .about .about_lead{
    font-size: var(--px-21);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.81;
    margin: 0 0 var(--px-36) 0;
  }
  .about .about_txt{
    display: flex;
    flex-direction: column;
    gap: var(--px-30);
  }
  .about .about_txt p{
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.11;
  }





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

  /*---------
  kv
  ---------*/
  .news[data-count1="0"][data-count2="0"] + .kv{
    padding: var(--px-52) 0 0 0;
  }
  .kv span{
    display: block;
    height: var(--px-410);
    margin: 0 0 var(--px-74) 0;
    background-image: url("/distilleries/miyagikyo/img//kv_sp.webp");
    background-repeat: no-repeat;
    background-size: cover;
  }


  /*---------
  lead
  ---------*/
  .lead{
    margin: 0 0 var(--px-125) 0;
  }

  .lead .anchor_btn{
    margin: var(--px-36) 0 0 0;
    padding: 0 0 0 var(--px-22);
    width: var(--px-270);
    height: var(--px-84);
  }
  .lead .anchor_btn p{
    display: flex;
    flex-direction: column;
    gap: var(--px-12);
    position: static;
    z-index: 1;
  }
  .lead .anchor_btn::after{
    content: "";
    aspect-ratio: 1/1;
    display: block;
    position: absolute;
    bottom: var(--px-12);
    right: var(--px-12);
    width: var(--px-12);
    height: var(--px-12);
    background-image: url("/common/img/icon_arrow.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    transform: rotate(135deg);
  }
  .lead .anchor_btn:hover::after{
    background-image: url("/common/img/icon_arrow_white.svg");
  }

  .lead .anchor_btn p span[data-type="jp"]{
    font-size: var(--px-19);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1;
  }
  .lead .anchor_btn p span[data-type="en"]{
    font-family: "Vollkorn", serif;
    font-size: var(--px-11);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
  }




  /*---------
  dist_article
  ---------*/
  .dist_article{
    padding: var(--px-80) 0 var(--px-60) 0;
  }
  .dist_article[data-clm="2"]{
    display: flex;
    flex-direction: column;
    gap: var(--px-68);
  }
  .dist_article#event{
    padding: var(--px-80) var(--px-20) var(--px-72) var(--px-20);
  }
  
  .dist_article_img{
    aspect-ratio: 500 / 450;
    width: 100%;
    position: relative;
  }
  .dist_article#visit .dist_article_img{
    margin: 0 -6.5%;
  }

  .dist_article#visit .dist_article_img div[data-num="1"]{
    aspect-ratio: 267 / 295;
    width: var(--px-270);
    margin: 0 0 0 var(--px-10-);
  }
  .dist_article#visit .dist_article_img div[data-num="2"]{
    aspect-ratio: 188 / 140;
    position: absolute;
    left: var(--px-170);
    top: var(--px-240);
    width: var(--px-190);
  }
  .dist_article_img img{
    width: 100%;
    height: auto;
  }

  .dist_article_desc{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
  .dist_article#visit .dist_article_desc{
    margin: var(--px-125) 0 0 0;
    padding: 0 var(--px-20);
  }
  .dist_article#event .dist_article_desc{
    margin: var(--px-32) 0 0 0;
  }

  .dist_article_ttl{
    display: flex;
    flex-direction: column;
    gap: var(--px-14);
    position: relative;
    margin: 0 0 2.4em 0;
  }
  .dist_article[data-clm="2"] .dist_article_ttl{
    margin: var(--px-36) 0 var(--px-30) 0;
  }

  .dist_article_ttl span{
    font-size: var(--px-24);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1;
    white-space: nowrap;
  }

  .dist_article_txt{
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    line-height: 2.33;
  }
  .dist_article_link{
    margin: var(--px-30) 0 0 0;
  }
  .dist_article[data-clm="2"] .dist_article_link{
    display: flex;
    flex-direction: column;
    gap: var(--px-15);
  }






  .x_link{
    text-align: center;
    margin: 0 0 var(--px-72) 0;
  }
  .x_link p{
    font-size: var(--px-15);
    line-height: 2.125;
    margin: 0 0 var(--px-20) 0;
  }
  .x_link .more_link{
    background-color: #000000;
    color: #ffffff;
    display: flex;
    width: 100%;
    height: var(--px-80);
    margin: 0 auto;
    transition: opacity 0.6s;
  }
  .x_link .more_link:hover{
    opacity: 0.8;
  }
  body[data-page="miyagikyo"] .x_link .more_link::before{
    background-color: #000000;
    transform: scaleX(1);
  }
  .x_link .more_link::after{
    background-image: url("/common/img/icon_blank_white.svg");
  }
  .x_btn_icon{
    width: var(--px-80);
    height: 100%;
    background-image: url("/common/img/icon_x_white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--px-18) auto;
    border-right: 1px solid #ffffff;
    transition: background-image 0.6s, border-right 0.6s;
  }
  .x_link .more_link .x_btn_txt{
    flex: 1;
    font-size: var(--px-15);
    line-height: 1.4;
    text-align: left;
    padding: 0 0 0 var(--px-29);
  }


  /*---------
  news
  ---------*/
  .news[data-name="news"]{
    margin-bottom: var(--px-72);
  }

  /*---------
  infoArea
  ---------*/
  .infoArea{
    background-color: #d2d2d2;
    width:100%;
    margin:var(--px-100) auto;
  }
  .infoArea .box{
    font-size: var(--px-18);
    letter-spacing: 0.18em;
    text-align: center;
  }
  .infoArea .box > div{
    vertical-align: middle;
    line-height: 1.88;
    padding: 20px 15px;
    border-bottom: 1px solid #e9e9e9;
  }
  .infoArea .detailBox .cap{
    font-size: var(--px-13);
    margin-top: 5px;
    display: block;
    line-height: 1.53;
  }




  /*---------
  about
  ---------*/
  .about{
    padding: var(--px-70) 0 var(--px-220) 0;
  }
  .about .headline_ttl{
    gap: var(--px-18);
    margin: 0 0 var(--px-78) 0;
  }
  .about .headline_ttl span[data-type="jp"]:nth-child(1){
    line-height: 1.4;
    width: 8em;
  }

  .about article{
    display: flex;
    flex-direction: column;
    gap: var(--px-16);
    padding: 0 var(--px-20);
  }
  .about article[data-num="0"]{
    align-items: center;
    /* margin:  var(--px-30-) 0 0 0; */
  }
  .about article:not([data-num="0"]){
    flex-direction: column-reverse;
    margin: var(--px-72) 0 0 0;
  }

  .about .about_img{
    aspect-ratio: 470 / 295;
    width: 100%;
    position: relative;
  }
  .about article[data-num="0"] .about_img{
    aspect-ratio: 700 / 527;
    width: 100%;
  }

  .about .about_img div[data-num="1"]{
    width: 100%;
    height: auto;
  }
  .about article .about_img div[data-num="2"]{
  }
  .about article[data-num="1"] .about_img div[data-num="2"]{
    aspect-ratio: 225 / 248;
    width: var(--px-140);
    margin: var(--px-26) 0 0 auto;
  }
  .about article[data-num="2"] .about_img div[data-num="2"]{
    aspect-ratio: 252 / 190;
    width: var(--px-155);
    margin: var(--px-26) var(--px-24) 0 auto;
  }
  .about article[data-num="3"] .about_img div[data-num="2"]{
    aspect-ratio: 230 / 252;
    width: var(--px-140);
    margin: var(--px-26) auto 0 var(--px-40);
  }
  .about article[data-num="4"] .about_img div[data-num="1"]{
    aspect-ratio: 370 / 410;
    width: var(--px-220);
    margin: var(--px-26) auto 0 0;
  }
  .about article[data-num="4"] .about_img div[data-num="2"]{
    aspect-ratio: 272 / 205;
    width: var(--px-170);
    margin: var(--px-26) var(--px-18) 0 auto;
  }
  .about .about_img img{
    width: 100%;
    height: auto;
  }

  .about h3{
    display: flex;
    flex-direction: column;
    gap: var(--px-20);
    margin: 0 0 var(--px-48) 0;
  }
  .about article[data-num="0"] h3{
    gap: var(--px-20);
    margin: 0 0 var(--px-32) 0;
  }
  .about h3 span[data-type="num"]{
    font-family: "Lato", serif;
    font-size: var(--px-44);
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1;
  }
  .about h3 span:not([data-type="num"]){
    font-size: var(--px-28);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1;
  }
  .about article:not([data-num="0"]) h3 span:not([data-type="num"]){
    white-space: nowrap;
  }
  .about .about_lead{
    font-size: var(--px-18);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.81;
    margin: 0 0 var(--px-36) 0;
  }
  .about .about_txt{
    display: flex;
    flex-direction: column;
    gap: var(--px-30);
  }
  .about .about_txt p{
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
  }

}


@media screen and (min-width: 768px) and (max-width: 1199px){
  .lead_copy + .lead_txt{
    white-space: normal;
  }

  .dist_article_item{
    gap: var(--px-60);
  }
  .dist_article:not([data-clm="2"]) .dist_article_img{
    max-width: calc(100% - var(--px-460));
  }

}

@media screen and (min-width: 768px) and (max-width: 1024px){
  body[data-type="RN2024"] main #about .inner{
    min-width: 100%;
  }
}