@charset "utf-8";

/*========================== 
<a href="tel:">のリンクをPC表示時に無効　
==========================*/
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/*========================== 
印刷設定
==========================*/
@media print {
  #header-nav-box {
    display: none;
  }

  /* 最初のページのみヘッダーを表示する場合は、以下のように追加 */
  @page: first {
    #header-nav-box {
      display: block;
    }
  }
}

/*========================== 
スクロール
==========================*/
html {
  scroll-behavior: smooth;
}

/*========================== 
基本スタイル
==========================*/
:root {
  --color-brown: #825B4A;
  --color-green: #2f9c41;
  --color-lightgreen: #c0d935;
  --color-yellowgreen: #7abe2c;
}

body {
  /* font-family: '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif; */
  font-size: 16px;
  /* font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal; */
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: justify;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-optical-sizing: auto;
  word-break: break-all;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  caret-color: transparent;
  background-color: #f9f3ee;
  color: var(--color-brown);
}

p {
  line-height: 2;
}

/*========================== 
フォント
==========================*/
/* Zen Kaku Gothic New: CSS class */
.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Sawarabi Gothic: CSS class */
.sawarabi-gothic-regular {
  font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Noto Sans JP: CSS class for a variable style */

.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

/* FOT-TsukuARdGothic Std */
.tsukuardgothic {
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.tsukuardgothic-b {
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 700;
  font-style: normal;
}



.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 16px !important;
}


/*========================== 
基本レイアウト
==========================*/
.inner {
  max-width: 1200px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: 0 30px;
}

section {
  margin-bottom: 100px;
}

@media screen and (max-width: 768px) {
  section {
    margin-bottom: 70px;
  }
}

/*========================== 
リンク
==========================*/
a {
  text-decoration: none;
  transition: all .4s ease;
}


.internal-link,
.external-link {
  position: relative;
}

.internal-link::after {
  font: var(--fa-font-solid);
  font-size: 16px;
  content: "\f054";
  margin-left: 7px;
  color: var(--color-green);
  display: inline-block;
  position: absolute;
  bottom: 3px;
}

.external-link::after {
  font: var(--fa-font-solid);
  font-size: 16px;
  content: "\f08e";
  margin-left: 7px;
  color: var(--color-theme);
  display: inline-block;
  position: absolute;
  bottom: 0;
}



@media (hover: hover) {
  a:hover {
    color: var(--dummy);
  }
}

/*========================== 
見出し
==========================*/
h2 {
  font-size: 26px;
  text-align: left;
  margin-bottom: 35px;
  line-height: 1.2;
  position: relative;
  padding-left: 25px;
  font-weight: 600;
}

h2::before {
  content: "";
  display: inline-block;
  height: 70px;
  aspect-ratio: 132 / 172;
  background-image: url(../img/book-b.png);
  position: absolute;
  top: -20px;
  left: 0;
  background-size: contain;
  background-repeat: no-repeat;
}

h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
  text-shadow: 1px 1px #f9f3ee;
}

h4 {
  font-weight: 600;
  margin-bottom: 10px;
}

/*========================== 
ボタン
==========================*/
.btn {
  color: #ffffff;
  /* background: linear-gradient(90deg, rgba(221, 0, 127, 1) 60%, rgba(255, 233, 0, 1) 100%); */
  background-color: #000000;
  font-family: "ads-hikari", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 20px 40px 20px 20px;
  position: relative;
  font-size: 20px;
  box-shadow: 5px 5px 0px 0px rgb(189, 189, 189);
  display: inline-block;
  width: 345px;
  z-index: 10;
}

.btn::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  font-family: 'Material Icons Outlined';
  content: '\e5c8';
  font-weight: 300;
  transition: .4s all ease;
}

.btn.external::after {
  content: '\e89e';
}

.btn:hover {
  background: #ffffff;
  color: #000000;
  box-shadow: none;
  z-index: 3;
}

.btn:hover::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  background: #ffffff;
  z-index: -1;
  border: solid 3px #000;
}

.btn:hover::after {
  right: 10px;
}

@media screen and (max-width: 768px) {
  .btn {
    font-size: 18px;
    width: 320px;
  }
}


/*========================== 
汎用スタイル
==========================*/
@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}

/* インデント */
.indent-1 {
  padding-left: 1em;
  text-indent: -1em;
}

/* マージン */
.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-100 {
  margin-bottom: 100px;
}

/* font-weight */
.fw-600 {
  font-weight: 600;
}

/* text-align */
.al-l {
  text-align: left;
}

.al-c {
  text-align: center;
}

.al-r {
  text-align: right;
}

.al-c_j {
  text-align: center;
}

@media screen and (max-width: 768px) {
  .al-c_j {
    text-align: justify !important;
  }

}

.w80-w100 , .w70-w100 , .w60-w100 , .w50-w100 , .w40-w100 , .w30-w100 {margin-left: auto; margin-right: auto;}
.w80-w100 {width: 80%;}
.w70-w100 {width: 70%;}
.w60-w100 {width: 60%;}
.w50-w100 {width: 50%;}
.w40-w100 {width: 40%;}
.w30-w100 {width: 30%;}

@media screen and (max-width: 768px) {
	.w80-w100 , .w70-w100 , .w60-w100 , .w50-w100 , .w40-w100 , .w30-w100 {width: 100%;}
}