@charset "utf-8";

html { scroll-behavior: smooth; }
#globalMain, #globalContents{ overflow: visible; }
#globalWrapper { box-sizing: border-box; }

#globalMain{
  padding-bottom: 0;
}

/* Variables & Setup -------------------- */
:root {
  scroll-padding: 100px;
}

.chooseviolin-container-wrapper {
  container-type: inline-size;
  container-name: chooseviolin-container-wrapper;
}

.chooseviolin-container * { box-sizing: border-box; }

:root .chooseviolin-container {
  --color-black: #000;
  --color-white: #fff;
  --color-base: #FDFBF8;
  --color-primary: #C45400;
  --color-accent: #421C00;
  --color-subaccent: #2E52A5;
  --color-highlight: #E50000;
  --border-radius-small: 3px;
  --border-radius-medium: 1rem;
  --border-radius-full: 100vmax;
  --hover-opacity: 0.7;
  --box-shadow: 2px 2px .25rem #C4540040;
  --box-shadow-b: 2px 2px 0 #00000020;
}

/* common -------------------- */ 
.chooseviolin-container {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  max-width: 1120px;
  margin-inline: auto;
  background-color: var(--color-base);
  color: var(--color-black);
  font-size: 16px;
  line-height: 1.4;
@container chooseviolin-container-wrapper (max-width: 768px) {
  font-size: 14px;  
}
@container chooseviolin-container-wrapper (max-width: 350px) {
  font-size: 13px;  
}
  & section{
    padding-block: 1.5rem;
  }

  & .inner{
    padding-inline: 2.5rem;
  }

  & figure{ 
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }

  & img{
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  & a{
    color: inherit;
    text-decoration: none;
  }

  & span{
    color: inherit;
    font-weight: inherit;
  }
@container chooseviolin-container-wrapper (max-width: 414px) {
  & .inner{
    padding-inline: 2rem;
  }
}
}

/* element -------------------- */
/* 見出し */
.chooseviolin-container .el-heading-g{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  & > h2{
    font-size: 150%;
    font-weight: bold;
  }
@container chooseviolin-container-wrapper (max-width: 414px) {
  & > h2{
    font-size: 125%;
  }
}
}

/* CTAボタン */
.chooseviolin-container .el-btn-cta{
	display: grid;
  place-items: center;
	width: fit-content;
  min-width: fit-content;
  padding-block: .5rem;
  padding-inline: 1.5rem;
  border-radius: var(--border-radius-full);
  background-color: var(--color-primary);
  color: var(--color-white);
  &:hover{
    opacity: var(--hover-opacity);
  }
}

/* 小サイズ文字 */
.chooseviolin-container .t-small{
  font-size: 85%;
}

/* 文章 */
.chooseviolin-container .paragraph{
  line-height: 1.7;
  & + .paragraph{
    margin-top: .5rem;
  }
}

/* 折り返しなしテキスト */
.chooseviolin-container .nowrap{
  display: inline-block;
}

/* 強調色 */
.chooseviolin-container .tc-accent{
  color: var(--color-primary);
}

/* Section-by-section -------------------- */
/* FV --------------------*/
.chooseviolin-container .sec-hero{
  padding-top: 0;
}

.sec-hero .unit-box{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 350px;
  &::after{
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: url("../img/fv-bg.png") no-repeat right center / cover;
  }
@container chooseviolin-container-wrapper (max-width: 880px) {
  &::before{
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    background-color: #ffffffcc;
    background-size: cover;
  }
}
}

.sec-hero .text-wrapper{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: calc(100% - 400px);
  padding-block: 2rem;
@container chooseviolin-container-wrapper (max-width: 880px) {
  width: 100%;
  & br{
    display: none;
  }
}
}

.sec-hero .heading-g{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  & > p{
    width: fit-content;
    padding: .5rem 2rem;
    background-color: var(--color-primary);
    color: var(--color-white);
    text-align: center;
    font-size: 112%;
  }
  & > h2{
    font-size: 220%;
    font-weight: bold;
    letter-spacing: 0.03em;
  }
@container chooseviolin-container-wrapper (max-width: 600px) {
  align-items: center;
  & > p{
    width: 100%;
    font-size: 100%;
  }
  & > h2{
    font-size: 175%;
  }
}
}

.sec-hero .text-block{
  & > h2{
    margin-bottom: .5rem;
    font-size: 125%;
  }
  & .paragraph{
    font-size: 90%;
  }
}

/* バイオリン選びの5つのポイント -------------------- */
.sec-points .el-heading-g{
  & .tc-accent{
    font-size: 175%;
  }
}

.sec-points .point-list{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-inline: auto;
  & > li{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 230px ;
    gap: 1rem 1.5rem;
    align-items: start;
    padding-block: 1rem;
    padding-inline: 2rem 1rem;  
    border-radius: var(--border-radius-medium);
    background-color: var(--color-white);
    box-shadow: var(--box-shadow);
  }
@container chooseviolin-container-wrapper (max-width: 600px) {
  max-width: 450px;
  & > li{
    grid-template-columns: 100%;
    padding-inline: 1.5rem;  
  }
}
}

.sec-points .point-box{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "img title"
    "img text";
  gap: .5rem .75rem;
  align-items: center;
@container chooseviolin-container-wrapper (max-width: 600px) {
  grid-template-columns: 100%;
  grid-template-areas:
    "title"
    "text";
}
}

.sec-points .title-block{
  display: contents;
  & .point-number{
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 1.5em;
    aspect-ratio: 1/1;
    margin: 1rem;
    border-radius: var(--border-radius-full);
    background-color: var(--color-accent);
    color: var(--color-white);
  }
  & .ttl{
    grid-area: title;
    font-size: 112%;
    font-weight: bold;
    white-space: nowrap;
  }
  & .deco-img{
    grid-area: img;
    display: block;
    width: 5rem;
    aspect-ratio: 1/1;
  }
@container chooseviolin-container-wrapper (max-width: 600px) {
  display: flex;
  gap: 1rem;
  align-items: center;
  & .point-number{
    position: static;
    margin: 0;
    font-size: 112%;
  }
  & .ttl{
    font-size: 125%;
  }
  & .deco-img{
    width: 3rem;
  }
}
}

.sec-points .text-block{
  grid-area: text;
  & .criterion{
    font-size: 85%;
  }
}

.sec-points{
  & .link-list{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    margin-block: auto;
    & .el-btn-cta{
      width: 100%;
      padding-inline: 0;
      border-radius: var(--border-radius-small);
      font-size: 85%;
    }
  }
  & li.point-size .link-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    & .el-btn-cta{
      padding-block: .25rem;
    }
  }
@container chooseviolin-container-wrapper (max-width: 600px) {
  & .link-list{
    & .el-btn-cta{
      padding-block: .75rem;
    }
  }
  & li.point-size  .link-list{
    & .el-btn-cta{
      padding-block: .5rem;
    }
  }
}
} 

/* バイオリンを始めるのに必要なアイテム -------------------- */
.sec-neededitems .item-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  & > li{    
    width: calc((100% - 1.5rem * 6)/7);
    border-radius: var(--border-radius-medium);
    border: 2px solid var(--color-primary);
    background-color: var(--color-white);
    box-shadow: var(--box-shadow);
  }

  & > li > a{
    display: block;
    height: 100%;
    padding-block: .5rem;
    padding-inline: .5rem;
    &:hover{
      opacity: var(--hover-opacity);
    }
  }
  & figure{
    display: grid;
    height: 100%;
    grid-template-rows: auto 1fr;
  }
  & figcaption{
    text-align: center;
  }
@container chooseviolin-container-wrapper (max-width: 768px) {
  max-width: 500px;
  gap: 1rem;
  & > li{    
    width: calc((100% - 1.5rem * 3)/4);
  }
}
@container chooseviolin-container-wrapper (max-width: 414px) {
  max-width: 220px;
  & > li{    
    width: calc((100% - 1.5rem * 1)/2);
  }
}
}

.sec-neededitems .image-block{
  & > figcaption{
    margin-top: .25rem;
    font-size: 85%;
  }
}

/* 長く使うためのポイント -------------------- */
.sec-maintenance .maintenance-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.5rem;
  max-width: 800px;
  margin-inline: auto;
  & > li{
    display: grid;
    align-items: center;
    gap: .5rem 1.5rem;
  }
@container chooseviolin-container-wrapper (max-width: 450px) {
  grid-template-columns: 100%;
  & > li{
    grid-template-columns: 100px auto;
  }
}
}

.sec-maintenance .desc {
  text-align: center;
  font-size: 112%;
@container chooseviolin-container-wrapper (max-width: 600px) {
  font-size: 100%;
}
@container chooseviolin-container-wrapper (max-width: 450px) {
  text-align: left;
  font-size: 112%;
  & br{
    display: none;
  }
}
}

/* ブランド紹介  -------------------- */
.sec-brand .el-heading-g{
  margin-bottom: 0;
}

.sec-brand .brand-list{
  & > li{
    display: grid;
    grid-template-columns: 1fr 260px;
    align-items: center;
    gap: 1rem 2rem;
    padding-block: 2rem;
    padding-inline: 1rem;
  }
  & > li:first-child{
    padding-top: 0;
  }
  & > li + li{
    border-top: 1px solid var(--color-primary);
  }
@container chooseviolin-container-wrapper (max-width: 768px) {
  & > li{
    grid-template-columns: 1fr 180px;
  }
}
@container chooseviolin-container-wrapper (max-width: 600px) {
  & > li{
    display: flex;
    flex-direction: column-reverse;
  }
  & > li:first-child{
    padding-top: 1rem;
  }
}
}

.sec-brand .desc-block{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sec-brand .logo-fig{
  width: fit-content;
  height: 50px;
  margin-bottom: 1rem;
&.thomas{
  height: 58px;
}
  & > img{
    width: auto;
    height: 100%;
  }
@container chooseviolin-container-wrapper (max-width: 600px) {
  height: 40px;
&.thomas{
  height: 45px;
}
}
}

.sec-brand .heading{
  margin-bottom: .5rem;
  &::before{
    content: "■";
    display: inline-block;
    margin-right: .25rem;
  }
}

.sec-brand .t-distributor{
  font-size: 112%;
  font-weight: bold;
  & strong{
    font-weight: bold;
  }
}

.sec-brand .el-btn-cta{
  margin-top: 1.5rem;
@container chooseviolin-container-wrapper (max-width: 600px) {
  margin-inline: auto;
  margin-top: 1rem;
}
}

/* （商品紹介）-------------------- */
.sec-recommend article + article{
  margin-top: 3rem;
}

.sec-recommend .product-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 880px;
  margin-inline: auto;
  & > li{
    position: relative;
    padding-bottom: 4rem;
    border-radius: 1rem;
    border: 1px solid var(--color-subaccent);
    background-color: var(--color-white);
    overflow: hidden;
  }
@container chooseviolin-container-wrapper (max-width: 600px) {
  max-width: 400px;
  grid-template-columns: 100%;
}
}

.sec-recommend .sub-heading{
  display: grid;
  place-items: center;
  padding-block: .5rem;
  background-color: var(--color-subaccent);
  color: var(--color-white);
}

.sec-recommend .content-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;  
  padding-block: 1rem;
  padding-inline: 1rem;
  & .oneword-comment{
    &::before{content: "＼";}
    &::after{content: "／";}
  }
}

.sec-recommend .image-block{
  max-width: 300px;
}

.sec-recommend .desc-block{
  width: 100%;
  & .ttl{
    font-size: 112%;
    font-weight: bold;
  }
  & .price{
    color: var(--color-highlight);
    font-size: 112%;
    font-weight: bold;
    & > .tax-in{
      font-size: 75%;
    }
  }
  & .benefit-list{
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-top: 1rem;
    font-size: 85%;
    & > li::before{
      content: "✓";
      display: inline-block;
      margin-right: .5rem;
    }
  }
}

.sec-recommend .el-btn-cta{
  width: 70%;
  min-width: fit-content;
}

.sec-recommend .product-list .el-btn-cta{
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-subaccent);
  white-space: nowrap;
}

/* バイオリン一覧 */
.sec-recommend .el-btn-cta.to-list{
  margin-inline: auto;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: 112%;
}

/* サウンドハウスが選ばれる理由 -------------------- */
.sec-reason .benefit-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  & > li{
    padding-block: .5rem;
    padding-inline: 1rem;
    border-radius: var(--border-radius-medium);
    background-color: var(--color-white);
    box-shadow: var(--box-shadow);
  }
@container chooseviolin-container-wrapper (max-width: 600px) {
  grid-template-columns: repeat(2, 1fr);
}
@container chooseviolin-container-wrapper (max-width: 414px) {
  grid-template-columns: 100%;
  gap: 1rem;
}
}

.sec-reason .catch-box{
  display: flex;
  justify-content: center;
  gap: .5rem;
  align-items: center;
  font-size: 112%;
  & > h3{
    text-align: center;
    font-weight: bold;
  }
  &::before{
    content: "";
    display: block;
    width: 2.5em;
    aspect-ratio: 1/1;
    background: no-repeat right center / contain;
  }  
  &.costperformance::before{ background-image: url(../img/icon/costperformance.png); }
  &.shipping::before{ background-image: url(../img/icon/shipping.png); }
  &.quality-assurance::before{ background-image: url(../img/icon/quality-assurance.png); }
  &.professional-staff::before{ background-image: url(../img/icon/professional-staff.png); }
  &.extensive-selection::before{ background-image: url(../img/icon/extensive-selection.png); }
  &.free-shipping::before{ background-image: url(../img/icon/free-shipping.png); }
@container chooseviolin-container-wrapper (max-width: 1024px) {
  font-size: 100%;
}
}

.sec-reason .desc{
  width: fit-content;
  margin-inline: auto;
  padding-block: .25rem;
  text-align: center;
  font-size: 85%;
@container chooseviolin-container-wrapper (max-width: 440px) {
  text-align: left;
  & br{
    display: none;
  }
  & .nowrap{
    display: contents;
  }
}
}

.sec-reason .disclaimer-text{
  width: fit-content;
  margin-inline: auto;
  margin-top: 1.5rem;
  font-size: 85%;
}

/* ページ内フッター（お問い合わせください） -------------------- */
.chooseviolin-container .inner-footer{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-block: 1rem;
  padding-inline: 2rem;
  background-color: var(--color-accent);
  color: var(--color-white);
@container chooseviolin-container-wrapper (max-width: 600px) {
  grid-template-columns: 100%;
  padding-block: 1.5rem;
}
}

.inner-footer .btn-to-contact{
  display: block;
  width: fit-content;
  padding-inline: 2rem;
  padding-block: 1rem;
  background-color: var(--color-white);
  color: var(--color-accent);
  text-align: center;
  font-weight: bold;
  &:hover{
    color: var(--color-primary);
  }
@container chooseviolin-container-wrapper (max-width: 600px) {
  width: 100%;
}
}