/* Reset basic link styles */
:root {
    --color-brown: #6d3c23;
    --color-brown-tr: #6d3c2370;
    --color-yellow: #FFDA49; 
    --color-background-white: #FFFDF7;
    --color-background-yellow: #fff8e1;
    --color-black: #333333;
    --color-gray: #999999;
    --color-light-gray: #f2f2f2;
    --color-blue: #007bff;

    --color-red: #ff0000;
    --color-green: #28a745;
    --color-asuka-yellow: #ffcb00;
    --color-asuka-yellow-tr: #ffcb0070;
    --color-asuka-blue: #0092e2;
    --color-link-blue: #178AC8;

}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    display: block; 
    box-sizing: border-box;
    font-weight: 400;
    background-color: var(--color-background-white);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    /* font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif; */
    color: var(--color-black);
}


/* Windowsの場合だけNoto Sans JPで上書き */
.windows-os {
    font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;
}

h1, h2, h3, h4, h5 {
	font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;
    color: var(--color-black);
}

h3.wp-block-heading,
h4.wp-block-heading,
h5.wp-block-heading {
    margin-top: 2em;
}

a {
    text-decoration: none;
    color: inherit; 
}

a.link {
    color: var(--color-blue);
    text-decoration: underline;
}

.post-content a{
    color: var(--color-link-blue);
    text-decoration: underline;
}

.mobile-br {
    display: none;
}

ul ul {
    margin: 0;
    padding-left: 1.5em;
}

@media (max-width: 1080px) {
    .mobile-br {
        display: block;
    }
}

:root {
    --pc: 1472 * 100vw;
    --sp: 375 * 100vw;
}
@keyframes fade {
    0% { opacity: 0;  }
    100% { opacity: 1; }
}

@media (max-width: 1080px) {
  [id] {
    scroll-margin-top: 65px;
  }
}

.until-400px{
    display: none;
}
@media screen and (max-width: 400px) {
    .until-400px{
        display: block;
    }
}
.until-370px{
    display: none;
}
@media screen and (max-width: 370px) {
    .until-370px{
        display: block;
    }
}
.until-500px{
    display: none;
}
@media screen and (max-width: 500px) {
    .until-500px{
        display: block;
    }
}
.until-620px{
    display: none;
}
@media screen and (max-width: 620px) {
    .until-620px{
        display: block;
    }
}
.until-380px{
    display: none;
}
@media screen and (max-width: 380px) {
    .until-380px{
        display: block;
    }
}
.until-370px{
    display: none;
}
@media screen and (max-width: 370px) {
    .until-370px{
        display: block;
    }
}



/* アニメーション */
/* アニメーションの初期状態（隠れている状態） */
.fade-in-up {
  opacity: 0; /* 透明にする */
  transform: translateY(30px); /* 30px下にずらす */
  transition: opacity 0.8s, transform 0.8s; /* 0.8秒かけて変化させる */
  transition-timing-function: ease-out; /* 動きの緩急をつける（最後が緩やか）*/
}
.fade-in-right {
  opacity: 0; /* 透明にする */
  transform: translateX(-30px); /* 30px下にずらす */
  transition: opacity 0.8s, transform 0.8s; /* 0.8秒かけて変化させる */
  transition-timing-function: ease-out; /* 動きの緩急をつける（最後が緩やか）*/
}
.fade-in-left {
  opacity: 0; /* 透明にする */
  transform: translateX(30px); /* 30px下にずらす */
  transition: opacity 0.8s, transform 0.8s; /* 0.8秒かけて変化させる */
  transition-timing-function: ease-out; /* 動きの緩急をつける（最後が緩やか）*/
}

/* アニメーションの最終状態（表示された状態） */
.fade-in-up.is-visible {
  opacity: 1; /* 不透明にする */
  transform: translateY(0); /* 元の位置に戻す */
}
.fade-in-right.is-visible, .fade-in-left.is-visible {
  opacity: 1; /* 不透明にする */
  transform: translateX(0); /* 元の位置に戻す */
}


/* =========================================================================
   ローディング画面
========================================================================= */

/* ローディング画面全体（白い背景） */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* 背景のフェードアウト用アニメーション */
  transition: opacity 0.8s ease-in;
}

/* ★NEW★ 背景をフェードアウトさせるためのクラス */
#loading-screen.is-hidden {
  opacity: 0;
  pointer-events: none; /* クリックを透過させる */
}

/* 画像とテキストのコンテナ */
.loading-content {
  text-align: center;
  /* 初期状態は透明 */
  opacity: 0; 
  /* 表示時と非表示時のアニメーションを設定 */
  transition: opacity 0.8s ease-out, /* 表示時のフェードイン */
              transform 0.8s ease-in; /* 非表示時のスライドアウト */
}

/* コンテンツをふわっと表示させるためのクラス */
.loading-content.is-visible {
    opacity: 1;
}

/* コンテンツをスライドアウトさせる時のスタイル */
.loading-content.is-sliding-out {
  opacity: 0;
  transform: translateX(100px);
}

/* 画像のスタイル */
.loading-content img {
  width: 150px;
  height: auto;
  margin-bottom: 16px;
}

/* テキストのスタイル */
.loading-text {
  color: var(--color-brown);
  font-size: 2rem;
  line-height: 2.3rem;
  margin-top: 1.5rem;
}




/* 共通 */
.nb {
    display: inline-block;
}

.flex {
    display: flex;
} 

.flex-column ,.f-col{
    display: flex;
    flex-direction: column;
}

.flex-center ,.fc{
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between ,.fb{
    display: flex;
    justify-content: space-between;
}

.flex-around ,.fa{
    display: flex;
    justify-content: space-around;
}

.flex-wrap ,.fw{
    display: flex;
    flex-wrap: wrap;
}

.flex-wrap-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-wrap-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex-wrap-around {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.flex-column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-column-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flex-column-around {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.flex-column-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.flex-column-wrap-center {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-column-wrap-between {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex-column-wrap-around {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
}

.flex-column-center-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.flex-column-between-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flex-column-around-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-wrap: wrap;
}

.flex-column-center-wrap-between {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.text-center ,.tc{
    text-align: center;
}
.text-left ,.tl{
    text-align: left;
}
.text-right ,.tr {
    text-align: right;
}
.text-justify ,.tj {
    text-align: justify;
}
.text-nowrap ,.tnw {
    white-space: nowrap;
}  
.text-wrap ,.tw {
    white-space: normal;
}
.gap-1 {
    gap: 1rem;
}

/* テキストを改行 */
.text-break ,.tb {
    word-break: break-all;
}