@charset "utf-8";

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

	reset CSS

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

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,p,blockquote,table,th,td,figure,figcaption {padding: 0;margin: 0;}
body {font-size:13px;font-family:"游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
* html body {font-size: small;}
*:first-child+html body {font-size: small;}
img {border: 0; vertical-align: top;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;font-weight: 500;}
ul,dl,ol {text-indent: 0;}
li {list-style: none;}
address,caption,cite,code,dfn,em,strong,th,var {font-style: inherit; font-weight: inherit;}
sup {vertical-align: text-top;}
sub {vertical-align: text-bottom;}
input,textarea,select,b {font-family: inherit; font-size: inherit; font-weight:inherit;}
* html input,* html textarea,* html select {font-size: 100%;}
*:first-child+html+input,*:first-child html+textarea,*:first-child+html select {font-size: 100%;}
table {border-collapse: collapse; border-spacing: 0; font-size: inherit;}
th,td {text-align: left; vertical-align: top;}
caption {text-align: left;}
pre,code,kbd,samp,tt {font-family: monospace;}
* html pre,* html code,* html kbd,* html samp,* html tt {font-size: 100%; line-height: 100%;}
*:first-child+html pre,*:first-child html+code,*:first-child html+kbd,*:first-child+html+samp,*:first-child+html tt {font-size: 108%; line-height: 100%;}
input,select,textarea {font-size: 100%; font-family: Verdana, Helvetica, sans-serif;}
/* cf
========================================== */

.cf:after {visibility: hidden;display: block;content: "";clear: both;}
* html .cf {zoom: 1;} /* IE6 */
*:first-child+html .cf {zoom: 1;} /* IE7 */

/*==================================================
$common
==================================================*/
body {
  position: relative;
  overflow-x: hidden;
  font-size: 1rem;
  line-height: 1.8;
}

body.modal_open {
  overflow: hidden;
}

body .wrapping_bg {
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  pointer-events: none;
}

body.open {
  overflow: hidden;
}

body.open .wrapping_bg {
  opacity: 1;
  pointer-events: auto;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
}
a:link { color: #000; }
a:visited { color: #000; }
a:hover { color: #000; }
a:active { color: #000; }

b {
  font-weight: bold;
}

/* 2025 */
section {
  padding-bottom: 70px;
}

.inner {
  width: 100%;
  margin-inline: auto;
  overflow-x: hidden;
}

h2 {
  position: relative;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  padding: 70px 0 20px;
}
h2.white{
  background-image: url(../img/h2_white.png);
  background-size: 5%;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position-x: center;
  background-position-y: 78%;
}
h2.black {
  background-image: url(../img/h2_black.png);
  background-size: 5%;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position-x: center;
  background-position-y: 78%;
}
@media screen and (max-width: 560px) {
  h2.white, h2.black {
    background-size: 10%;
  }
}
h3 {
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  padding: 20px 0 10px 0;
}

.lead_text {
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 30px;
}

.lead_text span {
  font-size: 1.5rem;
  font-weight: bold;
  color: #705d41;
}

.sp {
  display: none;
}

@media screen and (max-width: 650px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

/* 文字調整 */
.fw-bold {
  font-weight: bold;
}

.fw-under {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-style: dotted;
}

.fw-small {
  font-size: 0.8rem;
  color: #4e4e4e;
}

/* フェードインアニメーション */
.fadein {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 1s;
}

.fadein.second {
  transition: all 3s;
}

.fadein.third {
  transition: all 4s;
}

.fadein.forth {
  transition: all 5s;
}

.fadein.five {
  transition: all 6s;
}

.fadein.fadein-left {
  transform: translate(-30px, 0);
}

.fadein.fadein-right {
  transform: translate(30px, 0);
}

.fadein.fadein-up {
  transform: translate(0, -30px);
}

.fadein.fadein-bottom {
  transform: translate(0, 30px);
}

.fadein.scrollin {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* スクロールアニメーション */
.slidein {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 1.8s;
}

.slidein.slidein-left {
  transform: translate(-100%, 0);
}

.slidein.slidein-right {
  transform: translate(100%, 0);
}

.slidein.slidein-up {
  transform: translate(0, -100%);
}

.slidein.slidein-bottom {
  transform: translate(0, 100%);
}

.slidein.scrollin {
  transform: translate(0, 0) !important;
  opacity: 1 !important;
}

/* スクロールボックス */
.scroll-box {
  overflow-x: auto;
  padding-top: 3vw;
}
/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: 1.5px;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #aaa;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: #7a7a7a;
  border: none;
}
/*スクロールバーの動く部分のホバー（マウスオーバー）*/
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #7a7a7a;
}

/* もっと読む */
.grad-btn {
  z-index: 2;
    width: 128px;
    margin: auto;
    padding: 0.2%;
    border-radius: 2px;
    background: #000;
    color: #fff;
    text-align: center;
    cursor: pointer;
    display: block;
}
.grad-btn::before {
    content: "More Read ▿"
}
.grad-item {
    position: relative;
    overflow: hidden;
    height: 80px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(34,34,34,0) 30%, rgba(34,34,34,0.3) 30%, rgba(34,34,34,0.5) 30%, rgba(34,34,34,0.7) 30%, #222 100%);
  background: linear-gradient(top, rgba(34,34,34,0) 30%, rgba(34,34,34,0.3) 30%, rgba(34,34,34,0.5) 30%, rgba(34,34,34,0.7) 30%, #222 100%);
  content: "";
}
.grad-item.--white::before {
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 30%, rgba(255,255,255,0.3) 30%, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0.7) 30%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 30%, rgba(255,255,255,0.3) 30%, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0.7) 30%, #fff 100%);
}
.grad-trigger {
    display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
    content: "Close" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
    height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
    display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}