@charset "utf-8";
/*  
  リセット
---------------------------------*/
/* html, body, div, span,iframe,h1, h2, h3, h4, h5, h6, p, address, em, img, small, strong, b, i,dl, dt, dd, ol, ul, li,form, label, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, figcaption, figure, footer, header,#global-nav, section, time,video,a,picture,button {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  box-sizing: border-box;
  font-style: normal;
}
article,aside,figcaption,figure,footer,header,#global-nav,section,picture,small { 
  display:block;
}
ul,ol{
  list-style:none;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}

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

} */

/*  
  変数　
---------------------------------*/
:root {
  /* カラー */
  --base-black: #492417;
  --white: #fff;
  --gray: #66656A; /* #404044の80% */
  --green: #064727;

  --pink: #d3385c;
  --beige: #fce9da;
  --purple: #dcdeef;
  --pink02: #fbe4ed;  /* 薄ピンク */



  /* 文字サイズ */
  --fontXXl:clamp(22px, 4.2vw, 34px);
  --fontXl: clamp(19px, 3.8vw, 30px);
  --fontL: clamp(18px, 3.4vw, 26px);
  --fontS: clamp(14px, 2.6vw, 18px);
  --fontXS: clamp(12px, 2.3vw, 16px);

  
  /* フォントファミリー */
  /* --gothic: "Noto Sans JP", sans-serif;
  --mincho: "Noto Serif JP", serif; */
  --gothic: "kozuka-gothic-pro, sans-serif";
  --mincho :"font-family: kinuta-mincho-stdn, sans-serif";
}

/* ====================================

  基本幅

======================================*/
/*  
  各要素　基本幅
---------------------------------*/
/* html {
  font-size: 10px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  line-height: 1.6;
}
body {
  font-family: var(--gothic);
  font-weight: 500;
  color: var(--base-black);
}
h1,h2,h3,h4,h5{
  font-weight: 500;
  line-height: 1.4;
}
a{
  text-decoration: none;
  color: inherit;
}
th{
  font-weight:500;
}
 */


/*  
  main共通
---------------------------------*/

main {
  margin: 0 auto;
  max-width: 1360px;
  font-size: 18px;
  font-weight: 500;
}

#side-fixBtn {
  display: none;
}

#pagetop a {
  display: none;
}

h1 {
  font-size: 2.25rem;
  background-color: #cf4763;
  color: #fff;
  text-align: center;
  padding: 0.5em 0 1em 0;
}

.lp-wrapper {
  margin: 0 auto;
  max-width: 960px;
}

.lp-wrapper p {
  line-height: 2;
}

.pc-catch {
  position: absolute;
  bottom: 5%;
  left: 10%;
  font-size: 1.6vw;
}

.ttl01 {
  font-size: var(--fontXl);
  font-family: var(--mincho);
}
.ttl02 {
  font-size: var(--fontXl);
  font-family: var(--mincho);
  font-weight: 700;
  line-height: 1.8;
}
.ttl02 span {
  border-bottom: var(--green) 1px solid;
  display: inline;
}

.ttl-ex {
  display: flex;
  align-items: center;
  gap: .5em;
}

.ttl-ex::before {
  content: "";
  background-image: url(../../img/common/icon_mark.svg);
  background-repeat: no-repeat;
  display: inline-block;
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
}

.ttl-ex span {  /* フォント調整などで使用したspan要素が横並びにならないようにする為 */
  display: contents;
}
.ttl-ex .fontL {
  font-size: clamp(19px, 0.7447vw + 1.6468rem, 26px);
}


/* .list-dot {
  list-style: disc;
}
.list-dot li {
  margin-left: 1.25em;
  line-height: 2;
} */

.cta {
  margin: 0 auto;
}
.cta img {
  max-width: 600px;
  width: 95%;
}

.topics {
  padding: 6rem 3rem;
}
.topics > div {
  box-shadow: 0 0 8px #c2aea8;
  padding: 3rem;
  background-color: #fff;
  border-radius: 1rem;
}
.topics h2 {
  font-size: var(--fontXl);
  text-align: center;
}

#topics01 {
  background-color: #fce9da;
}
#topics01 ul li {
  border-bottom: dashed 1px var(--base-black);
  padding-bottom: 1rem;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  gap: .5em;
}
#topics01 ul li::before {
  content: '';
  background-image: url(../img/ico_check.svg);
  background-repeat: no-repeat;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
#topics02 {
  background-color: var(--purple);
}
#topics03 {
  background-color: var(--pink02);
}

/* バランス設計 */
#balance {
  background-image: linear-gradient(90deg, #f4ada5, #f9d7e6);
}

#balance .h2-wrapper {
  background-image: url(../img/bg_balance.png);
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  width: 100%;
  max-width: 960px;
  aspect-ratio: 1 / 0.5;
  position: absolute;
}
#balance h2 {
  margin: 0 auto;
  position: relative;
  text-align: center;
  background-image: linear-gradient(#c23473, #eb6c83);
  color: #fff;
  width: 16em;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
#balance h2 span {
  /* display: inline-block; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--fontXl);
  white-space: nowrap;
}
#balance h2 span::after {
  position: absolute;
  content: 'balance design';
  opacity: .6;
  display: block;
  font-family: var(--mincho);
  margin-top: 2rem;
  left: 50%;
  transform: translateX(-50%);
}

/* 3つの視点 */
#perspective {
  background-color: #f0efe6;
  padding: 6rem 3rem;
}

.list-perspective {
  display: flex;
  flex-direction: column;
  gap: 14rem;
  margin-top: 14rem;
}
.list-perspective li {
  box-shadow: 0 0 8px #c2aea8;
  padding: 3rem;
  border-radius: 1rem;
  background-color: #fff;
  position: relative;
}
.ico-perspective {
  position: absolute;
  left: 50%;
  top: -10rem;
  transform: translateX(-50%);
  width: 30rem;
}
.list-perspective li h3 {
  color: #fff;
  font-size: var(--fontXl);
  text-align: center;
  margin: 12rem auto 3rem auto;
  padding: 1rem;
  background-image: linear-gradient(90deg, #e2737e, #f39b47);
  border-radius: 3rem;
}
.list-perspective li:first-child h3 {
  margin-bottom: 0rem;
}

/* 口元が影響しているかもしれません */
#influence {
  background: #492417;
  color: #fff;
}

#influence h2 {
  font-size: var(--fontXl);
  color: #492417;
}
#influence h2 span {
  background: #fff;
  display: inline-block;
  margin-bottom: 1rem;
  padding: 1rem;
}

/* K-Smile Method */
#method .beginning {
  background-image: url(../img/bg_method.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#method .beginning picture {
  text-align: center;
}
@media (max-width: 768px) {
  #method .beginning picture {
    text-align: right;
  }
}

#method .detail h3 {
  background-image: linear-gradient(90deg, #d3385c 0%, #e26ca5);
  text-align: center;
  font-size: var(--fontXl);
  color: #fff;
  padding: 2rem;
}
#method .detail dl {
  border: solid 1px var(--base-black);
}
#method .detail dl dt {
  border-bottom: solid 1px var(--base-black);
  padding: 1.5rem;
}
#method .detail dl dd {
  padding: 1.5rem;
}
#method .detail h4 {
  background: linear-gradient(180deg, #FAE8E8 0%, #FAE8E8 50%, #fff 50%, #fff 100%);
  text-align: center;
  padding: 3rem 0;
}
#method .detail h4 span {
  background: var(--pink);
  color: #fff;
  font-size: var(--fontL);
  display: inline-block;
  padding: 1rem 4rem;
  border-radius: 3rem;
}

/* 「安心・安全を一番に考えます」 */
#anshin {
  background-image: url(../img/bg_anshin.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 6rem;
  padding-bottom: 20rem;
}
#anshin p {
  background: #fff;
  color: var(--base-black);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* 自分をしることから */
#shiru {
  position: relative;
}
#shiru .ttl-shiru {
  margin: 0 auto;
  text-align: center;
}
#shiru::before {
  content: '';
  background-image: url(../img/bg_shiru_pc.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  position: absolute;
  width: 100%;
  height: 14rem;
  top: -14rem;
}
@media (max-width: 768px) {
  #shiru::before {
    content: none;
  }
  #shiru .ttl-shiru {
    margin: -16rem auto 0 auto;
    width: 100%;
  }
}

#musubi {
  background-image: linear-gradient(90deg, #e6cbea, #eae0e9);
  padding-left: 3rem;
  padding-right: 3rem;
}
#musubi > div {
  box-shadow: 0 0 8px #c2aea8;
  border-radius: 1rem;
  background: #fff;
}
#musubi .musubi-start {
  border-radius: 1rem 1rem 0 0;
}
#musubi .musubi-end {
  border-radius: 0 0 1rem 1rem;
}
#musubi h2 span {
  /* border-bottom: var(--pink) solid 5px; */
  display: inline-block;
  margin-bottom: .25em;
  padding-bottom: .25em;
  background-repeat: repeat-x;
  background-size: 0.7em 0.3em,1.7em 0.3em,3.5em 0.3em,3.7em 0.3em;
  background-position: right bottom;
  background-image:
  radial-gradient(0.3em 0.2em at center center,#e83c5e,rgba(246,89,115,0)),
  radial-gradient(0.5em 0.2em at center center,#e83c5e,rgba(246,89,115,0)),
  radial-gradient(0.8em 0.2em at center center,#e83c5e,rgba(246,89,115,0)),
  radial-gradient(7.2em 0.2em at center center,#e83c5e,rgba(246,89,115,0));
}

/* 
.copyright {
  background-color: var(--base-black);
  color: #fff;
  text-align: center;
  font-size: var(--fontXS);
  padding: 1rem;
} */

.box-kadomaru {
  border-radius: 2rem;
  padding: 3rem;
}

.movie-box-one {
  max-width: 640px;
  margin: 0 auto;
}
.movie-inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie-inner iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

table {
  border-collapse: collapse; /* 隣接するセルの罫線を重ねて表示する */
}
table th {
  text-align: center;
  white-space: nowrap;
}
table th, table td {
  border: 1px solid var(--base-black);
  padding: 1rem;
}

.kadomaru {border-radius: 1rem;}

.nowrap{white-space: nowrap}

/* 色 */
.white { color: #fff;}
.pink { color: var(--pink)}


/* 文字サイズ */
.fontXXl {font-size: var(--fontXXl)}
.fontXl {font-size: var(--fontXl)}
.fontL {font-size: var(--fontL)}
.fontS {font-size: var(--fontS)}
.fontXS {font-size: var(--fontXS)}

.alias{font-size: clamp(12px,1.5rem,15px)}

/* 書体 */
.mincho {
  font-family: var(--mincho);
  font-weight: 600;
}

.bg-beige {background-color: #f0f0e9}
.bg-white{background-color: #fff;}
.bg-orange{background-color: #fef2de;}
.bg-pink {background-color: #FAE8E8;}

.lh2 {line-height: 2}


/* box幅 */
.w90per{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.w80per{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.max300{max-width: 300px}
.max400{max-width: 400px}
.max430{max-width: 430px}
.max640{max-width: 640px}
.max900{max-width: 900px}
.max1000{max-width: 1000px;}
.max1360{max-width: 1360px}

/* 配置 */
.align-left{ text-align: left!important}
.align-right{ text-align: right}
.align-center{ text-align: center}

/* 余白 */
.mt-auto{margin-top: auto}
.mt0{margin-top: 0!important}
.mt-5em{margin-top: .5em}
.mt1em{margin-top: 1em}
.mt1rem{margin-top: 1rem}
.mt2rem{margin-top: 2rem}
.mt3rem{margin-top: 3rem}
.mt4rem{margin-top: 4rem}
.mt6rem{margin-top: 6rem}
.mt10rem{margin-top: 10rem}
.mb-auto{margin-bottom: auto}
.mb0{margin-bottom: 0!important}
.mb1rem{margin-bottom: 1rem}
.mb3rem{margin-bottom: 3rem}
.ml0{margin-left: 0!important}
.ml2-5{margin-left: 2.5em}
.ml-auto{margin-left: auto}
.mr-auto{margin-right: auto}

.pt0{padding-top: 0!important}
.pl1em{padding-left: 1em!important}
.pb1em{padding-bottom: 1em;}
.pt3rem{padding-top: 3rem}
.pt6rem{padding-top:6rem}
.pb3rem{padding-bottom: 3rem;}
.ptpb3rem{padding-top:3rem;padding-bottom:3rem;}
.pb6rem{padding-bottom:6rem}
.ptpb6rem{padding-top:6rem;padding-bottom:6rem;}


/* 表示／非表示 */
.sptb-only,
.sp-only{
  display: none;
}


/* ===============================

  1281px以上（PC用）

=================================*/
@media (min-width: 1281px) {
  /* PC h1 */
  h1 {

  }

  /* PCのtelリンク無効 */
  a[href^="tel:"] {
    pointer-events: none;
  }  
}



/* ===============================

  1536px以下：小型PC 

=================================*/

@media screen and (max-width:1536px) {
  main{
    /* font-size: 9.5px; 1rem = 9.5pxと定義 */
    font-size: 18px;
  }

}

/* ===============================

  1280px以下：小型PC
  ここからハンバーガーメニュー

=================================*/

@media screen and (max-width:1280px) {
  main {
    /* font-size: 9.3px; 1rem = 9.3pxと定義 */
    font-size: 18px;
  }
  main{
    overflow-x: hidden;
  }

}

/* ===============================

  960px以下：タブレット・スマホ横

=================================*/
@media screen and (max-width:960px){
  main {
    /* font-size: 9px; 1rem = 9pxと定義 */
    font-size: 18px;
  }

  #point {
    background-position-y: bottom;
  }

  #foot-fixBtn {
    display: none;
  }

  .pc-only{
    display: none;
  }
  .sptb-only{
    display: block;
  }
}


/* ===============================

  768px以下：スマホ横 

=================================*/

@media screen and (max-width:768px) {
  html{
    /* font-size: 8.5px;1rem = 8.5pxと定義 */
  }
  main {
    font-size: 16px;
  }

  .pc-catch {
    display: none;
  }

  #first .wrapA {
    margin-top: 0;
  }

  .list-discomfort {
    width: 100%;
  }


  #point {
    background-position-y: top -2em;
    background-size: 60%
  }

  .box-point {
    width: 100%;
  }

  .sp-left {text-align:left}

  /* 表示・非表示 */
  .pctb-only,
  .sp-none{
    display: none!important;
  }
  .sp-only{
    display: block;
  }

}

/* ===============================

  520px以下：スマホ縦  

=================================*/
@media screen and (max-width:520px){
  html{
    /* font-size: 8px;1rem = 8pxと定義 */
  }
  main {
    font-size: 16px;
  }

  .list-discomfort li  {
    align-items: start;
    margin-bottom: 1.5rem;
  }
  .list-discomfort li img {
    margin-top: .5em;
  }

  .list-point {
    font-size: 16px;
  }
  
  .box-kadomaru {
    padding: 3rem 2rem;
  }

}

/* ===============================

  340px以下：小型スマホ縦  

=================================*/
@media screen and (max-width:340px){
  main {
    font-size: 7.5px; /* 1rem = 7.5pxと定義 */
  }
}

/* ===============================

  hover指定できるPCを想定したスタイル 

=================================*/
@media (hover: hover) {
  /* 共通 */
  a {
    transition: opacity .2s,color .25s,background-color .3s;
  }
}


/* ===============================

  print

=================================*/
@media print{
  body {
    width: 1360px;
    overflow: hidden;
  }
  #hero img {
    width: 100%;
    height:auto;
  }
}