@charset "UTF-8";

/*
Theme Name: 碁石工芸
Theme URI: https://goishikogei.co.jp/
Description: 碁石工芸 WordPress Theme
Author: 碁石工芸
Version: 2025_09
Tested up to: 6.7
Requires PHP: 8.3.0
*/

/* basic style setting in utility.css */

/* 変数 */
:root {
  --main_color : #000000; 
  --key_color : #E7370D; 
  --bg_color : #fbf5e9;   
}



/*---------------------------------------------------------------------
 共通レイアウト
---------------------------------------------------------------------*/
#main {
width: 100%; background: white;
} /* #main */

.inner {width: min(1000px, 100%); margin: auto; padding: 0 20px}

/* ヘッダーまわり */
header {
  position: sticky; top: env(safe-area-inset-top, 0); width: 100%; z-index: 100; background: rgba(255, 255, 255, 0.95);
  .inner {width: min(1500px, 100%); padding: 50px 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap:20px; align-items: center}
  .title {display: flex; flex-wrap: wrap; gap: 6px 80px; align-items: center}
  .title h2 {font-size: clamp(1.4rem, 0.91rem + 2.09vw, 3rem); letter-spacing: .01em}
  .info {font-family: "Sawarabi Gothic", sans-serif; font-weight: 400}
  .info dt {text-align: center; margin-bottom: 4px; font-size: clamp(1.4rem, 0.727rem + 2.87vw, 3.6rem); letter-spacing: .01em}
  .info dd {text-align: center}
  .info dd a {background: var(--key_color); color: white; border-radius: 6px; padding: 10px 20px ;font-size: clamp(0.8rem, 0.433rem + 1.57vw, 2rem); letter-spacing: .01em}
  .info dd a:hover {opacity: .8}
} /* header */


/* Loading */
#loading {position: fixed; width: 100%; height: 100%; z-index: 999; background: var(--bg_color); text-align:center; color: #fff;}
#loading_logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.fadeUp {animation-name: fadeUpAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity: 0;}
@keyframes fadeUpAnime{
  from {opacity: 0;transform: translateY(15px);}
  to {opacity: 1; transform: translateY(0);}
}

/* common */
h2.h_title {font-size: clamp(2.4rem, 1.298rem + 4.7vw, 6rem); text-align: center; margin-bottom: 40px; line-height: 1.3}


/*---------------------------------------------------------------------
 トップページ
---------------------------------------------------------------------*/
.home {
  #hero {
    margin-bottom: 110px;
    .inner {width: min(100%);padding: 0}
    .swiper-hero {overflow: hidden;}
    .swiper-slide {text-align: center}
  }
  
  
  #lead {
    padding-bottom: 100px;
    .inner {width: min(1140px, 100%); display: flex; justify-content: space-between; gap:30px}
    h2 {writing-mode: vertical-rl; font-size: clamp(3rem, 1.867rem + 4.83vw, 6.7rem); order: 2; line-height: 1.8; letter-spacing: .14em}
    h2 span {margin-top: -28px}
    .text {order: 1}
    .text p {margin-bottom: 50px; font-size: clamp(1.6rem, 1.355rem + 1.04vw, 2.4rem); line-height: 2.4}
  }
  
  
  #concept {
    background: #FCF0DC url(img/home/concept_bg.png) repeat center top; padding: 140px 0 140px; margin-bottom: 140px;
    .inner {width: min(1220px, 100%); }
    .wrap {margin-bottom: 140px}
    .wrap:last-of-type {margin-bottom: 0}
    .wrap:first-of-type h4 {margin-left: -22px}
    h2 {margin-bottom: 160px}
    h3 {text-align: center; margin-bottom: 60px}
    dl {display: grid; grid-template-columns: 1fr 41%; gap: 10px 20px; align-items: center;}
    dl:last-of-type {margin-bottom: 0}
    dt {order: 2}
    dd {order: 1}
    dd p {font-size: clamp(1.8rem, 1.616rem + 0.78vw, 2.4rem); line-height: 2; letter-spacing: .0em}
    h4 {font-size: clamp(2.4rem, 1.604rem + 3.4vw, 5rem); margin-bottom: 28px; line-height: 1.2; letter-spacing: .02em}
    h4 span {margin-left: -20px}
  }
  
  
  #item {
    margin-bottom: 160px;
    .inner {width: min(1220px, 100%); }
    h2 {margin-bottom: 46px}
    .figure {margin-bottom: 80px}
    .text {max-width: 780px; margin: auto auto 46px}
    .text p {font-family: "Sawarabi Gothic", sans-serif; font-weight: 400; font-size: clamp(1.8rem, 1.616rem + 0.78vw, 2.4rem); margin-bottom: 0; line-height: 1.6}
    dl {max-width: 780px; margin: auto auto 50px}
    dt {font-size: clamp(1.8rem, 1.616rem + 0.78vw, 2.4rem); font-family: "Sawarabi Gothic", sans-serif; font-weight: 400; margin-left: -12px; margin-bottom: 8px}
    dl ul {display: flex; flex-wrap: wrap; gap: 6px 18px}
    dl li {display: flex; align-items: center; gap: 6px; font-size: clamp(1.8rem, 1.616rem + 0.78vw, 2.4rem); font-family: "Sawarabi Gothic", sans-serif; font-weight: 400;}
    dl li::before {content: "●"; font-size: clamp(1.8rem, 1.616rem + 0.78vw, 2.4rem)}
  }
  
  
  #order {
    .inner {width: min(1180px, 100%); }
    margin-bottom: 220px;
    h2 {color: var(--key_color); font-family: "Sawarabi Gothic", sans-serif; font-weight: 400; font-size: clamp(2rem, 1.633rem + 1.57vw, 3.2rem); text-align: center}
    h2 span {border-radius: 50px; border: 3px solid var(--key_color); padding: 20px 80px; background: white; display: inline-block}
    .detail {border: 3px solid var(--key_color); padding: 120px 100px 100px 100px; border-radius: 20px; margin-top: -28px}
    .detail dl {margin-bottom: 40px}
    .detail dt {text-align: center; font-family: "Sawarabi Gothic", sans-serif; font-weight: 400; font-size: clamp(2.6rem, 1.988rem + 2.61vw, 4.6rem); margin-bottom: 10px; line-height: 1.2}
    .detail dd p {text-align: center; font-family: "Sawarabi Gothic", sans-serif; font-weight: 400; font-size: clamp(1.6rem, 1.355rem + 1.04vw, 2.4rem); line-height: 2}
    .detail .link {margin-top: 30px; margin-bottom: 30px}
    .detail .link a {background: var(--key_color); color: white; border-radius: 6px; padding: 16px 40px ;font-size: clamp(2rem, 1.571rem + 1.83vw, 3.4rem); letter-spacing: .01em; display: inline-block; line-height: 1.2}
    .detail .link a:hover {opacity: .8}
    .detail .arrow {margin-bottom: 40px; text-align: center}
    .detail hr {margin-bottom: 60px; border: 0; height: 0; border-top: 3px solid var(--key_color); margin-left: 1px; margin-top: 100px}
    .detail .ordermaide dt {text-align: center; font-size: clamp(2.6rem, 2.355rem + 1.04vw, 3.4rem); margin-bottom: 20px}
  }
  
  
  #message {
    margin-bottom: 250px;
    .inner {width: min(1180px, 100%); }
    h2 {margin-bottom: 100px}
    dl {display: grid; grid-template-columns: 1fr 36%; gap: 40px 20px;}
    dt {order: 2}
    dd {order: 1}
    dd p {font-size: clamp(1.8rem, 1.616rem + 0.78vw, 2.4rem); margin-bottom: 70px; line-height: 2}
    dd dl {grid-template-columns: 1fr; gap: 10px;}
    dd dl dt {font-size: clamp(2.1rem, 1.886rem + 0.91vw, 2.8rem); order: 1}
    dd dl dd {font-size: clamp(2.4rem, 2.155rem + 1.04vw, 3.2rem); order: 2}
  }
  
  
  #about {
    margin-bottom: 80px;
    .inner {width: min(1180px, 100%); }
    h2 {margin-bottom: 50px}
    ul {margin-bottom: 70px}
    li {font-family: "Sawarabi Gothic", sans-serif; font-weight: 400; font-size: clamp(1.8rem, 1.647rem + 0.65vw, 2.3rem)}
    iframe {aspect-ratio: 16 / 9; width: 100%; height: 100%; margin-bottom: 100px}
    .instagram dt {text-align: center; margin-bottom: 20px}
    .instagram dt a:hover img {opacity: .6}
    .instagram dd {text-align: center; font-family: "Sawarabi Gothic", sans-serif; font-weight: 400; font-size: clamp(1.8rem, 1.647rem + 0.65vw, 2.3rem)}
    .instagram dd a:hover {color: var(--key_color)}
  }
} /* home */




/*---------------------------------------------------------------------
 固定ページ共通
---------------------------------------------------------------------*/
#title_head {
  background: var(--bg_color); margin-bottom: 80px;
  h2 {padding: 60px 0; text-align: center; line-height: 1; margin-bottom: 0}
  h2 a {pointer-events:none;}
} /* #title_head */



/*---------------------------------------------------------------------
 個別ページ
---------------------------------------------------------------------*/
/* お問い合わせ */
.page-id-2 {
  .entry_content {
    margin-bottom: 120px;
    .inner {width: min(740px, 100%); }
  }
} /* お問い合わせ */


/*---------------------------------------------------------------------
 フォーム snow monkey form
---------------------------------------------------------------------*/
.snow-monkey-form {
  .smf-item {margin-bottom: 20px; padding-bottom: 20px}
  .smf-item__label {margin-bottom: 10px}
  .smf-item__label__text {position: relative;}
  .smf-item__label__text::after {position: absolute; content: '必須'; background: var(--key_color); top: 50%; transform: translateY(-50%); right: -45px; border-radius: 2px; font-size: 1rem; font-weight: bold; color: white; padding: 1px 6px}
  .smf-item.tel .smf-item__label__text::after {display: none;} /* 必須マークの解除 高度な設定にclass名を入れる */
  .smf-item.figure .smf-item__label__text::after {display: none;} /* 必須マークの解除 */
  .smf-form .smf-text-control__control {width: 100%}

  input::placeholder {color: silver}
  textarea::placeholder {color: silver}

/* 送信ボタン */
.smf-action {text-align: center}
.smf-action .smf-button-control__control {letter-spacing: .15em; padding: 10px 50px; background: white; border-color: #707070; transition: all 0.3s ease;}
.smf-action .smf-button-control__control:hover { background: #F2F2F2; border-color: #707070}
} /* .snow-monkey-form  */

/* 確認画面 */
[data-screen="confirm"] .smf-form--simple-table .smf-item {border-bottom: 1px solid silver; padding-bottom: 20px; margin-bottom: 20px}

/* 送信後画面 */
[data-screen="complete"] p {padding: 0; text-align: center}





/*---------------------------------------------------------------------
 Not 404
---------------------------------------------------------------------*/
.error404 {
  #title_head, #breadcrumb {display: none}
  #main {background: var(--bg_color); background-size: cover; background-position: 50% 50%; min-height: 60vh; display: grid; place-items: center;}
  #main dt {color: var(--main_color); font-size: clamp(2.7rem, 2.25rem + 2.25vw, 4.5rem); text-align: center}
  #main dd {color: var(--main_color); font-size: clamp(1.2rem, 1rem + 1vw, 2rem); text-align: center}
} /* error404 */


/*---------------------------------------------------------------------
 footer
---------------------------------------------------------------------*/
footer {
  width: 100%; padding-bottom: 30px; background: var(--main_color); 
  .copy {text-align: center; padding-top: 30px; margin-bottom: 0}
  .copy small {font-size: 1.2rem; color: white; font-family: "Sawarabi Gothic", sans-serif; font-weight: 400;}
  .copy small span {text-transform: uppercase}
} /* footer */

/* ページトップへ */
p.pagetop {
  position: fixed; bottom: 20px; right: 20px; opacity: 0; transform: scale(1.5); transition: all .5s; text-align: right; width: auto; z-index: 100;
  a {display: block}
  a:hover { transform: scale(1.2)}
  &.show {opacity: 1; transform: scale(1);}
} /* p.pagetop */



/*---------------------------------------------------------------------
 print
---------------------------------------------------------------------*/
@media print {
  body {-webkit-print-color-adjust: exact;} /* Chrome 背景色強制印刷 */
  a[href]:after {content: "" !important;}
  abbr[title]:after {content: "" !important;}
  .show-for-small-only {display: none !important}
  .pagetop.show {display: none !important}
  body, h1, h2, h3, h4, h5, h6, li, dt, dd, p, th, td, .mincho {font-family: sans-serif !important} /* Chrome印刷で日本語が表示されない対応 */
}


/*---------------------------------------------------------------------
 jquery js 関連 css
---------------------------------------------------------------------*/


/*---------------------------------------------------------------------
 メディアクエリー
---------------------------------------------------------------------*/
/* スマホ以降（639px 以下） */
@media screen and (max-width: 639px) {
  .no_br_sp br {display: none !important}
  br.sp_non {display: none}

  h2.h_title {letter-spacing: .01em}
  
  header {
   .inner {padding: 20px 20px 10px; position: relative}
    h1 {max-width: 160px; line-height: 1}
    .info {position: absolute; top: 12px; right: 20px;}
    .info dt {margin-bottom: 0; line-height: 1.2}
    .info dd a {padding: 5px 10px}
  }

  .home {
    #hero {
      margin-bottom: 80px;
    }
    
    #lead {
      .inner {flex-wrap: wrap;}
      padding-bottom: 80px;
      h2 {order: 1; width: 70%;}
      .text {order: 2}
      .text p {margin-bottom: 20px}
    }
  
    #concept {
      padding: 80px 0 80px; margin-bottom: 100px;
      h2 {margin-bottom: 80px}
      h3 {margin-bottom: 60px}
      h3 img {height: 80px}
      dl {grid-template-columns: 1fr;}
      .wrap:first-of-type h4 {margin-left: 0}
    }
  
    #item {
      margin-bottom: 100px;
      .figure {margin-bottom: 40px}
    }
    
    #order {
      margin-bottom: 100px;
      h2 span {padding: 15px 20px}
      .detail {padding: 70px 40px 40px}
    }
  
    #message {
      h2 {margin-bottom: 40px}
      margin-bottom: 120px;
      dl {grid-template-columns: 1fr;}
      dd p {margin-bottom: 40px}
    }
  
    #about {
      h2 {margin-bottom: 30px}
      ul {margin-bottom: 30px}
      iframe {aspect-ratio: 1 / 1; margin-bottom: 60px}
    }
  }
    
  footer {
     padding-bottom: 10px;
    .copy {padding-top: 10px}
  }

  p.pagetop {bottom: 50px}
  p.pagetop img {max-width: 60px}
}


/* スマホ〜タブレット共通（1023px 以下） */
@media screen and (max-width: 1023px) {
  .no_br br {display: none !important}
}


/* スマホ「横」向き対応 */
@media screen and (max-width: 940px) and (orientation:landscape) {
  .sample {}
}


/* スマホ以降（375px 以下）iPhone SE */
@media screen and (max-width: 375px) {
  .inner {padding: 0 10px}
}


/* スマホ以降（320px 以下）旧 iPhone SE */
@media screen and (max-width: 320px) {
  .sample {}
}


/* スマホ以降（321px 以降） */
@media screen and (min-width: 321px) {
  .sample {}
}


/* タブレット対応 */
@media screen and (min-width: 640px) and (max-width: 1023px) {
  .no_br_tb br {display: none !important}
  br.tb_non {display: none}

  header {
    .inner {padding: 20px 20px 10px; position: relative}
    .title {display: grid; grid-template-columns: 1fr; gap: 3px;}
    h1 {max-width: 200px; line-height: 1}
    h2 {font-size: 1.8rem!important}
    .info {position: absolute; top: 20px; right: 20px;}
    .info dt {margin-bottom: 8px; line-height: 1.2}
    .info dd a {padding: 5px 10px}
  }

  .home {
    #hero {
      margin-bottom: 80px;
    }
  
    #lead {
      .inner {flex-wrap: wrap;}
      h2 {order: 1; width: 65%;}
      .text {order: 2}
    }
  
    #concept {
      padding: 80px 0 80px; margin-bottom: 100px;
      h2 {margin-bottom: 80px}
      h3 {margin-bottom: 60px}
      h3 img {height: 80px}
      dl {grid-template-columns: 1fr;}
      dt {text-align: center}
      dt img {max-width: 600px}
      .wrap:first-of-type h4 {margin-left: -14px}
    }
  
    #order {
      .detail {margin-top: -46px}
      }
  
    #message {
      h2 {margin-bottom: 40px}
      margin-bottom: 120px;
      dl {grid-template-columns: 1fr;}
      dd p {margin-bottom: 40px}
      .figure {text-align: center}
      dt img {max-width: 400px; }
    }
  }

  footer {
    padding-bottom: 10px;
    .copy {padding-top: 10px}
  }

  p.pagetop {bottom: 50px}
  p.pagetop img {max-width: 60px}
}


/* タブレット以降（640px 以降） */
@media screen and (min-width: 640px) {
}


/* 1024px以降 iPad 横 iPad 12.9 縦 含む */
@media screen and (min-width: 1024px) {
  header .inner {padding: 20px}
  header h1 {max-width: 240px}
  header .title h2 {font-size: 2rem}
  header .title {gap: 20px}
  header .info {margin-top: -20px}
  .home #lead h2 {line-height: 1.4}
  .home #concept .wrap:first-of-type h4 {margin-left: -10px}
  .home #order .detail {margin-top: -50px}
}


/* PCモニター（1025px以降） */
@media screen and (min-width: 1025px) {
  .no_br_pc br { display: none}
  br.pc_non {display: none} 
}

/* PCモニター（1180px以降） */
@media screen and (min-width: 1180px) {
  header .title h2 {font-size: 3rem}
  header .info {margin-top: -15px}
  .home #lead h2 {line-height: 1.8}
  .home #concept .wrap:first-of-type h4 {margin-left: -18px}
  p.pagetop {bottom: 110px}
}


/* PCモニター（1240px以降） */
@media screen and (min-width: 1240px) {
  header .title {gap: 10px 40px}
}


/* PCモニター大（1480px以降） */
@media screen and (min-width: 1480px) {
  header .inner {padding: 40px 20px}
  header .title {gap: 10px 80px}
  header h1 {max-width: 350px}
}