@charset "utf-8";
/* CSS Document */


body {font-family: 'Noto Sans JP', sans-serif; 
font-size:1.063em; 
font-weight: 400; 
font-feature-settings: "kern"; 
letter-spacing: 0.016em; 
color:#657FA2; 
line-height: 2em}
a { color:#657FA2; }
a:link { color:#657FA2; text-decoration: none; }
a:visited { color:#657FA2; text-decoration: none; }
a:focus { color:#657FA2; text-decoration: none; }
a:hover { color:#005784; text-decoration: none; }
a:active { color:#657FA2; text-decoration: none; }



/* backgroundスライドショー */
.box {
position   : relative;
max-width  : auto;
/*height     : 100vh;*/
margin     : auto;
/*overflow   : hidden;*/
background:#337784
}
@media (min-width: 576px) {.box .bgImg {
position   : absolute;
top        : 0;
left       : 0;
bottom     : 0;
right      : 0;
opacity    : 0;
animation  : bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
filter: brightness(0.84) saturate(106%) contrast(110%);
-ms-interpolation-mode: nearest-neighbor;/*画像ボケ防止*/
image-rendering: pixelated;/*画像ボケ防止*/
}}
.box .src1 {
  background-image : url(../yoshitanimg/slide_01_2.jpg);
}
.box .src2 {
  background-image : url(../yoshitanimg/slide_02_2.jpg);
  animation-delay  : 5s;
}
.box .src3 {
  background-image : url(../yoshitanimg/slide_03_2.jpg);
  animation-delay  : 10s;
}
.box .src4 {
  background-image : url(../yoshitanimg/slide_04_2.jpg);
  animation-delay  : 15s;
}
.box .src5 {
  background-image : url(../yoshitanimg/slide_06_2.jpg);
  animation-delay  : 25s;
}
.box .src6 {
  background-image : url(../yoshitanimg/slide_05_2.jpg);
  animation-delay  : 20s;
}
@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}
/* ./ */

/* bootstrap modalかぶせ */
.modal-content {
  background-color: rgba(255,255,255,0.00);
  background-clip: padding-box;
  border: none;
  border-radius: 0;
}
/* ./ */
/* bootstrap figure-captionかぶせ */
.figure-caption {
  font-size: 90%;
  color: #657FA2; 
line-height: 1.86em
}
/* bootstrap Nav navbar-darkかぶせ */
.navbar-dark .navbar-toggler {
color: rgba(255,255,255,0);
border-color: rgba(58, 20, 20, 0);
padding-top: 8px;
}
.bg-dark { background:#337784!important }

.div_wht {background:rgba(255,255,255,1.0);}
.div_ash {background:rgba(228, 232, 232, 1);} 
.div_ash_under { background: url(../yoshitanimg/base_02.png); background-repeat: no-repeat; background-size:contain; background-color:#FFFFFF} /* 背景のみの場合min-height:63px*/
.div_ash_under2 { background: url(../yoshitanimg/base_02.png); background-repeat: no-repeat; background-size:contain; min-height:63px}
.div_ash_under3 { background: url(../yoshitanimg/base_04.png); background-repeat: no-repeat; background-size:contain; min-height:63px}
/*.bg_title {background-image: url(../yoshitanimg/bg_title.png); background-position:0 -16px ; background-repeat: no-repeat;}*/
.bg_title_plus {background-image: url(../yoshitanimg/bg_title_plus.png); background-position:0 -67px ; background-repeat: no-repeat; background-size:97% auto;}
@media (min-width: 1200px) {.bg_rocky {background-image: url("../yoshitanimg/base_03.png"); background-position: right 0 top 37% ; background-repeat: no-repeat; background-size:90% auto;}}

/* 導入　重ね */
.relative { position: relative; }
@media (max-width: 575.98px) {.relative { background-image: url("../yoshitanimg/base_01.png"); background-repeat: no-repeat; background-position: right center; background-size:auto 480px; min-height: 480px }}

.absolute {
position: absolute;
top:30%; /*要メディアクエリ*/
/*left: 0;*/
bottom: 80px;
color: #fff;
padding: 0 20px 10px 22%;
}
@media (max-width: 575.98px) {.absolute {top:18%; padding: 0 15px 10px 30% }}

/* 全囲みcontainerスマホで余白なしに */
@media (max-width: 575.98px) {.container_all { padding-right: 0!important; padding-left: 0; }}

.table_r {
  border-collapse: separate!important;
  overflow: hidden;
  border-spacing: 0;
  border-radius: 26px;
  border: 1px solid #B2C3DB;
  color: #657FA2;
  th, td {
    padding: 0.8em ;
    vertical-align: middle;
    border-right: 1px solid #B2C3DB;
    border-bottom: 1px solid #B2C3DB;
border-top: 0;/*bootstrapかぶせ*/
    &:last-child { border-right: none; }
  }
  th { background: #fff; }
  td { background: #fff; }
  tbody {
    tr { &:last-child { th, td { border-bottom: none; }
      }
    }
  }
}
.table_r_2 {border-bottom: none!important}

/* bootstrap tableかぶせ */
.table { color: #657FA2; }
/*.table { border-bottom: 1px solid #dee2e6; }*/

/* メールフォームtable、必須印、角丸 */
.formtable  {color:#657FA2; font-weight: 400!important }
.formtable td:first-child{ width: 400px; }
@media screen and (max-width : 375px ){
table.formtable th, table.formtable td {
width:auto;
display:block;
}
table.formtable th {
margin-top:5px;
border-bottom:0;
}
input[type="text"], textarea {
/*width: 100%;*/
padding: 5px;
display: block;
}}
.bg_08 {
border-radius: 26px;
background: #E89ECE;
padding: 1px 6px 2px 6px;
margin-left: 10px;
font-size:0.64em;
color: #ffffff;
vertical-align:5%;
white-space: nowrap;
}
.rounded_ooki { border-radius: 1.2rem !important; }
.card_nocolor { background-color: rgba(228,232,232,1) !important}
.selectProduct { font-size:0.92em; color: #657FA2; padding: 6px 15px; border: 1px solid #ced4da; border-radius: 12px; background: #ffffff }
/* /. */

/* 上に戻る由谷石編 */
#page-top {
display:none;
position:fixed;
bottom:20px;
right:16px;
margin: 0;
padding: 0;
cursor:pointer;
z-index: 10;
}

#move-page-top {
display:block;
cursor:pointer;
}

#move-page-top:hover {
color:rgba(0,0,0,0.7);
}



/* ここまでの上書き用 */
/* ================================
   修正版 CSS（スマホ右余白対策）
================================ */

/* 1) 無効な max-width:auto を修正 */
.box {
  width: 100%;   /* 常に画面幅いっぱい */
  /* max-width: auto; ←削除 */
}

/* 2) テーブルの固定幅をスマホで解除 */
@media screen and (max-width : 375px ){
  .formtable td:first-child {
    width: auto !important;
  }
}

/* 3) 背景固定をスマホで解除 */
@media (max-width: 575.98px) {
  .box .bgImg {
    background-attachment: scroll !important;
  }
}

/* 4) .absolute の余白を調整（必要に応じて） 
@media screen and (max-width: 572px) {
  .absolute {
    padding-left: 5%;
    padding-right: 5%;
  }
}*/

/* 5) SCSS風のネストを修正 */
.table_r th,
.table_r td {
  padding: 0.8em;
  text-align: center;
  vertical-align: middle;
}


/**/
.ysp_01 {padding-top: 64px}
.ysp_02 {margin-top: 46px; padding-top: 30px}
.ysp_03 { padding-top: 90px }
@media (min-width: 1200px) { .ysp_04 { padding-top: 50px }}
@media (max-width: 576px) { .ysp_05 { padding-top: 40px }}

.yfo_01 { font-weight: 400; font-size:clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem); letter-spacing: 0.15rem; line-height: 2.6em}
.yfo_02 { font-size:clamp(1.25rem, 1.227rem + 0.11vw, 1.313rem); letter-spacing: 0.15rem; line-height:1.8em }
/*.yfo_02 { font-size:clamp(1.125rem, 1.011rem + 0.57vw, 1.438rem); letter-spacing: 0.18rem; line-height:1.8em }*/
.yfo_03 { vertical-align: -0.01em; color:#B2C3DB; margin-right:0.7em }
.yfo_04 { font-size:1.18em; }
.yfo_05 { line-height:1.8em }
.yfo_06 { color:#ffffff; font-weight:600; letter-spacing: 0.18rem; line-height:2.86em } .yfo_06 a { color:#ffffff }
.yfo_07 { vertical-align: -0.001em; color:#D7E1EF; margin-right:0.8em }
.yfo_08 { position:fixed; bottom:10px; right:0; left:0; color:#ffffff; font-size:0.82em }
.yfo_09 { font-size:clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem); letter-spacing: 0.18rem; line-height:1.8em }
.yfo_10 { font-size:0.82em }
.yfo_11 { font-size:0.92em }
.yfo_12 { color:#D7E1EF; margin-left:0.8em }