@charset "utf-8";


/* =======================
Article header
========================== */
.header__header {
    width: 100%;
    display: flex; /* 修正: 末尾の不要な "f" を削除 */
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0;
    position: relative;
}

.mainvisual {
   width: 100%;
    height: auto;
    text-align: center;
    /* この要素を基準にテキストを配置するため、relativeを設定 */
    position: relative; 
    /* アニメーション中にテキストがはみ出さないように隠す */
    overflow: hidden; 
}

.mainvisual img {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block; /* 画像をブロック要素として表示 */
}

.mainvisual p{
  font-size: 5.5vw;
  font-weight: bold;
  color: #ffff;
  position: absolute;
  top: 10%;
  left: 10%;
  text-align: left;
  width: 100%;
}


.sky{
   color: #B6E2C2; 
}



.maincaption {
    display: block;
    flex-shrink: 0;
    text-align: left;
    width: var(--contentWidth);
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 70px;
}

.biglogo {
    display: block;
    margin: 0 auto;
    padding: 25px;
    width: 70%;
    height: auto;
    max-width: 537px;
}




/* =======================
section--activity
========================== */
.section__section--activity {
    background-color: #FFFBF0;
}

.activity-right-content-wrapper {
    display: flex; 
    flex-direction: column; 
}

/* activity_introductionSP向け） */
.activity_introduction {
    display: flex; 
    flex-direction: column; 
    margin: 0 auto;
    max-width: 800px; 
    padding: 0;
}


/* 左右のカラムの基本スタイル（SPでは縦に並ぶ） */
.activity-left-column,
.activity-right-column {
    display: block; /* SP: デフォルトはブロック要素で縦並び */
    width: 100%; 
}

/* 画像のスタイル（SP向け） */
.activity__image1,
.activity__image2 {
    display: block;
    width: 80%; /* SP: 親要素の80%幅 */
    height: auto;
    margin: 0 auto; /* SP: 画像自体を中央寄せし、下部に余白 */
    padding: 10px; 
}

/* h4のスタイル（SP向け） */
.section__section--activity h4 {
    color: var(--primary-orange, #CC947F);
    text-align: center;
    font-size: 2.0rem; 
    line-height: 2;
    margin: 0 auto;
    padding-top: 25px;
}

/* pタグのスタイル（SP向け） */
.activity_introduction p {
    margin-bottom: 1em; 
    padding: 0 var(--contentPadding); 
}

/* ボタンのスタイル（SP向け） */
.activity_introduction .btn {
    margin-top: 25px; 
    margin-bottom: 25px; 
}

@media screen and (min-width: 769px) {
    .section__section--activity {
        padding: 80px 0; 
    }

    .activity_introduction {
        display: flex; /* PC: 左右のカラムを横並びにするFlexコンテナ */
        flex-direction: row; /* PC: 横並び */
        justify-content: center; /* PC: 左右のカラムを中央寄せ */
        align-items: flex-start; /* PC: 上端揃え */
        max-width: 1200px; /* PC: セクション全体の最大幅を調整 */
        margin: 0 auto; /* PC: セクション全体を中央寄せ */
        padding: 0 40px; /* PC: 左右のパディング */
        box-sizing: border-box; /* パディングを含めて幅を計算 */
    }

    .activity-left-column {
        display: flex; /* PC: 画像を縦に並べるためのFlexコンテナ */
        flex-direction: column; /* PC: 縦並び */
        align-items: center; /* PC: 画像をカラム内で中央寄せ */
        width: 45%; /* PC: 左カラムの幅 */
        gap: 40px; /* PC: 画像間の余白 */
        padding-right: 40px; /* PC: 右カラムとの間隔 */
        box-sizing: border-box; /* パディングを含めて幅を計算 */
    }

    .activity__image1,
    .activity__image2 {
        width: 100%; /* PC: 親カラムの幅いっぱいに広げる */
        max-width: 400px; /* PC: 画像の最大幅 */
        height: auto;
        margin: 25px; /* PC: 不要なマージンをリセット */
    }

    .activity-right-column {
        display: flex; /* PC: テキスト要素とボタンを縦に並べるFlexコンテナ */
        flex-direction: column; /* PC: 縦並び */
        justify-content: flex-start; /* PC: 上揃え */
        align-items: flex-start; /* PC: 左揃え */
        width: 55%; /* PC: 右カラムの幅 */
        padding-left: 40px; /* PC: 左カラムとの間隔 */
        box-sizing: border-box; /* パディングを含めて幅を計算 */
    }

    .activity-right-content-wrapper {
        display: flex; /* Make this a flex container */
        flex-direction: column; /* Stack h4 and .activity-right-column vertically */
        justify-content: flex-start; /* Align contents to the top */
        align-items: flex-start; /* Align contents to the left */
        width: 55%; /* Take up the remaining width */
        padding-left: 40px; /* Consistent left padding */
        box-sizing: border-box;
    }

    .section__section--activity h4 {
        color: #CC947F;
        text-align: left; 
        font-size: 2.0rem; 
        font-weight: 500;
        line-height: 1.2;
        padding: 0; 
        margin: 30px; 
        
    }

    .activity-right-column {
        display: block; 
        width: 100%;
        box-sizing: border-box;
    }

    .activity-right-column p {
        margin-bottom: 1.2em; 
        padding: 0; 
    }

    .activity-right-column .btn {
        margin: 30px auto 0 auto; 
    }
}

/* =======================
section--news
========================== */
.section_section--news {
    background-image:url(../images/baloon_sp.svg);
    background-repeat: repeat-y;
    background-size: contain;
    background-position: center top;
    padding-bottom: 50px;
    letter-spacing: 0.256px;
    object-fit: contain;
}

.news-item {
    display: flex; /* Flexboxを適用 */
    flex-direction: column; /* モバイルでは縦並びにする */
    align-items: center; /* モバイルでは子要素を中央揃え */
    max-width: 800px; /* コンテンツの最大幅を制限（PCでも利用） */
    margin: 0 auto; /* 中央寄せ */
    padding: 25px var(--contentPadding); /* 内側のパディング */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
    letter-spacing: 0.256px;
}

.news__text {
    width: 100%;
    text-align: left;
    margin-bottom: 25px;
}


.news__text h4 {
    color: #CC947F;
    text-align:center;
    font-size: 2.0rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 15px;
}

.news__text p {
    text-align: left;
    margin-bottom: 1em; 
}

.news__img {
    width: 100%; 
    max-width: 400px; /* 画像の最大幅 */
    margin: 0 auto 25px auto; 
}

.news__img img {
    display: block;
    width: 100%;
    height: auto;
}

/* Instagramボタンのスタイル */
/* .btn は .news-item の外にあるため、その親である .section_section--news の範囲内で中央寄せする */
.section_section--news > .btn {
    margin: 0 auto; /* 上に余白、左右中央寄せ */
    display: block; /* a要素がインライン要素なのでblockにする */
}


/* --- PC表示の調整 --- */
@media screen and (min-width: 769px) { /* PC向けのブレイクポイント */
    .section_section--news {
        padding-top: 80px; /* PCでのセクション上部のパディング */
        padding-bottom: 80px;
    }

    .news-item {
        flex-direction: row; /* ★PCでは横並びにする★ */
        justify-content: center; /* テキストと画像を中央寄せ */
        align-items: center; /* 垂直方向の中央揃え */
        max-width: 900px; /* PCでのニュースアイテムの最大幅を広げる */
        padding: 40px; /* PCでの内側パディング */
    }

    .news__text {
        width: 40%; 
        padding-right: 10px; 
        padding-bottom: 25px;
        margin-bottom: 0; 
    }

    .news__text h4 {
        text-align: center;
        margin-bottom: 20px;
    }

    .news__img {
        width: 50%; 
        max-width: 400px; 
        margin-left: 40px; 
        margin-top: 0; 
        margin-bottom: 0;
    }

    .section_section--news {
    background-image:url(../images/baloon.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding-bottom: 50px;
    letter-spacing: 0.256px;
    object-fit: contain;
}

}


.news-medicalitem {
    display: flex; /* Flexboxを適用 */
    flex-direction: column; /* モバイルでは縦並びにする */
    align-items: center; /* モバイルでは子要素を中央揃え */
    max-width: 950px; /* コンテンツの最大幅を制限（PCでも利用） */
    margin: 0 auto; /* 中央寄せ */
    padding: 25px var(--contentPadding); /* 内側のパディング */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
     justify-content: center;
}

.medicalimg {
    display: block;
    /* width: 100%; */
    height: auto;
    margin: 0 auto 25px auto;
    max-width: 400px; /* 画像の最大幅 */
}

.news__medicaltext {
    width: 100%;
    text-align: left;
    margin-bottom: 25px;
}


.news__medicaltext h4 {
    color: #CC947F;
    text-align:center;
    font-size: 2.0rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 15px;
}

.news__medicaltextt p {
    text-align: left;
    margin-bottom: 1rem; 
}

.embedsocial-hashtag{
    border-radius: 30px;
    background: #FFF4EF;
    margin: 20px;
 }




/* --- PC表示の調整 --- */
@media screen and (min-width: 769px) { /* PC向けのブレイクポイント */

    .news-medicalitem {
        flex-direction: row-reverse; /* ★PCでは横並びにする★ */
        justify-content: center; /* テキストと画像を中央寄せ */
        align-items: center; /* 垂直方向の中央揃え */
        max-width: 900px; /* PCでのニュースアイテムの最大幅を広げる */
        padding: 40px; /* PCでの内側パディング */
    }

    .news__medicaltext {
        width: 60%; /* PCでは左カラムに50%の幅 */
        padding-right: 40px; /* 右の画像との間隔 */
        margin-bottom: 0; /* PCでは縦方向の余白をリセット */
        flex-shrink: 1;
        flex-grow: 1;
    }

    .news__medicaltext h4 {
        text-align: center; /* PCでは左寄せ */
        margin-bottom: 20px;
    }

    .medicalimg {
        width: 40%;
        max-width: 400px;
        margin-left: 0; /* 左側のマージンをリセット */
        margin-right: 40px; /* 右側にスペースを設ける */
        margin-top: 0;
        margin-bottom: 0;
        object-fit: contain;
        flex-shrink: 1;
        flex-grow: 1;
        margin: 0 auto;
    }


}



.timeline p {
    margin: 0 auto;
    text-align: left;
    flex-shrink: 0;
    padding: 0 25px;
}

.timeline_title {
    flex-shrink: 0;
    padding: 25px;
    width: 30%;
    height: auto;
}


.timeline_image{
    flex-shrink: 0;
    padding: 25px;
    width: 70%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 40px;
}

@media screen and (min-width: 769px) {
    .timeline_title {
        width: 30%; /* 例: PCでは親要素の30%の幅にする */
        max-width: 400px; /* ただし、最大でも400pxまでとする */
        /* width: 30%; と max-width: 400px; のうち小さい方が適用されます */
        height: auto;
        display: block;
        margin: 50px auto;
        padding: 0;
    }

    .timeline p {
    margin: 0 auto;
    text-align: center;
    flex-shrink: 0;    
    }

    .timeline {
        width: 1060px;
        margin: 0 auto;
        
    }

    .embedsocial-hashtag{
    border-radius: 30px;
    background: #FFF4EF;
    margin: 20px;
    }
}





/* =======================
section--handbook
========================== */
.section--handbook {
    padding: 25px var(--contentPadding);
    text-align: left;
    background-color: #E3F5E8;
    display: block;
    margin: 0 auto;
    height: auto;
    letter-spacing: 0.256px;
    max-width: 800px;
}

.handbook_title{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.handbook_title .handbook,
.handbook_title .merry {
    width: 5vw; /* ビューポート幅の8%でサイズを決定 */
    min-width: 60px; /* 最小サイズは60px */
    max-width: 80px; /* 最大サイズは80px */
    height: auto;
    flex-shrink: 0;
    margin: 0;
}
    


.handbook_title .topic {
    margin: 0; /* デフォルトのマージンをリセットし、Flexboxで間隔を制御します */
    white-space: nowrap; /* 見出しのテキストが改行されないようにします */
}

/* --- PC表示の調整 --- */
@media (min-width: 768px) {
    .handbook_title {
        gap: 20px; /* 大きい画面でのアイテム間の間隔を広げます */
    }

    .handbook_title .handbook,
    .handbook_title .merry {
        width: 80px; /* デスクトップ表示でのアイコンサイズを大きくします */
    }
}

.block{
    display: block; /* 既存のスタイル */
    margin-left: auto; /* これを追加 */
    margin-right: 0;   /* 明示的に0にするか、省略してもOK */
    margin-bottom: 30px;
}

.handbook_intro{
    color: #7B9983;
}


.section--handbook p {
    margin-bottom: 25px; /* 段落間の余白 */
}

.section--handbook a {
    color: var(--primary-orange);
    /* text-decoration: underline; */
}

.section--handbook a {
  padding-bottom: 5px;
  position: relative;
}
.section--handbook a::before {
  background: #CC947F;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.section--handbook a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}







.timeline_title {
    margin: 0 auto;
    display: block;
    flex-shrink: 0;
    text-align: center;
    padding: 25px;
    width: 70%;
    height: auto;
    
}

/* =======================
section--summary
========================== */
.section--summary {
    padding: 25px var(--contentPadding);
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}

.section--summary h3 {
    margin-bottom: 20px;
}

.section--summary div p {
    margin-bottom: 10px;
}

.summary-top,
.summary-under {
    margin: 25px auto;
    display: block;
    flex-shrink: 0;
    text-align: center;
    padding: 25px;
    width: 70%;
    height: auto;
}

h3 {
    color: #CC947F;
    text-align: center;
    font-style: normal;
    font-size: 2.4rem;
    font-weight: 500;
}

.summary_text1 {
    display: inline;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-skip-ink: auto;
    text-decoration-color: #E2C2B6;
    text-decoration-thickness: 13%; /* 2.08px */
    text-underline-offset: 25%; /* 4px */
    text-underline-position: from-font;
}

.bullet-point {
    color: #CC947F;
}

.chibaHP{
    word-break: break-all;
}


.join {
  padding-bottom: 5px;
  position: relative;
}
.join::before {
  background: #CC947F;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.join:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}


.chibaHP {
  padding-bottom: 5px;
  position: relative;
}
.chibaHP::before {
  background: #CC947F;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.chibaHP:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}


/* =======================
section--thanks
========================== */
.section--thanks {
    padding: 25px var(--contentPadding);
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}

.section--thanks h3 {
    margin-bottom: 20px;
}

.section--thanks p {
    margin-bottom: 10px;
}

/* .section--thanks a {
    color: var(--primary-orange);   
} */


.section--thanks a {
  padding-bottom: 5px;
  position: relative;
}
.section--thanks a::before {
  background: #CC947F;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.section--thanks a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.section--thanks img {
    margin: 0 auto;
    display: block;
    flex-shrink: 0;
    width: 60%;
    height: auto;
}