@charset "UTF-8";

/* DESKTOP GNAV LAYOUT
-----------------------*/
.gnav ul.desktop {
    display: flex;
    justify-content: center; /* 水平方向中央揃え */
    align-items: center;     /* 垂直方向中央揃え */
    flex-wrap: wrap;         /* はみ出した場合に折り返す */
    gap: 10px;               /* 各アイテム間の隙間 */
}

/* SVG Icon Style */
.gnav ul.desktop li.gn_insta a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background-color: #fff; /* 他のアイコンの背景色に合わせる */
    border-radius: 50%;
    text-decoration: none;
    transition: background-color 0.3s; /* ホバー効果を滑らかに */
}
.gnav ul.desktop li.gn_insta a svg {
    fill: #C13584; /* SVGの色 */
}

/* Button Area Layout
-----------------------*/
.button_area {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px; /* ボタン間の隙間 */
	width: 100%;
}
.button_area p {
	margin: 0;
}
.case_area .t{
    text-align: center;
    margin-bottom: 25px;
}
.case_area {
    max-width: 1091px; /* 最大幅を指定 */
    width: 100%; /* 基本は親要素に合わせる */
    margin: 50px auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.case_area .intro_present {
    width: 100%;
    max-width: 100%;
}
.case_area {
    display: flex;
    flex-direction: column; /* 見出しと写真を上下に積み上げる */
    align-items: center;    /* 中央揃えにする場合 */
    width: 100%;
}

.intro_present .img {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* 各写真の枠（サイズをここで完全に固定する） */
.intro_present .img .photo-item {
    flex: 1;
    width: 280px;       /* お好みの横幅 */
    max-width: 280px;
    height: 200px;      /* ★ここで高さを完全に統一する */
    overflow: hidden;   /* はみ出た部分を隠す */
    border-radius: 8px; /* 角を丸くする */
}

/* 枠いっぱいに綺麗にトリミングして収める */
.intro_present .img .photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* これにより縦長画像も自動でトリミングされる */
    display: block;
}


.manager_area{
width: 1091px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.manager_area .unit_manager{
min-height:220px;
}
.manager_area .t{
color: #95bc7a;
font-size: 138.5%;
}
.manager_area .lead{
color: #95bc7a;
}
.manager_area .t_prof{
margin-top: 2em;
margin-bottom: .5em;
font-size: 116%;
color: #9f9f9f;
}
.manager_area .unit_prof{
margin-left: 15px;
color: #9f9f9f;
}
.manager_area .unit_prof .table_history{
margin-top: .5em;
width: 100%;
border-collapse:collapse;
}
.manager_area .unit_prof .table_history th,
.manager_area .unit_prof .table_history td{
padding-right: 0px;
}
.manager_area .unit_prof .table_history th{
white-space:nowrap;
}



.intro_area{
background-image:url(../imgs/home/access/bg_map.jpg);
background-repeat: no-repeat;
background-color: #f8f6f0;
background-position: center top;
padding: 662px 0 0px;
min-width: 1091px;
margin-bottom: 0px;
}
.intro_area_inner{
width: 1091px;
margin: 0 auto;
position: relative;
padding-bottom: 80px;
}
.intro_area .img_map{
position: absolute;
right: 81px;
top: -83px;
z-index: 1;
}
.intro_area .bizhour{
/*font-size: 18px;*/
}
.intro_area .img_info{
margin-left: 70px;
}


.access_area{
width: 1091px;
margin: 60px auto;
position: relative;
}
.access_area .unit_access_area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.access_area .blk_txt{
width: 330px;
}
.access_area .blk_txt .tel{
margin-bottom: 15px;
}
.access_area .blk_txt .bizhour{
margin-bottom:20px;
}
.access_area .blk_txt .address{
font-size: 107.8%;
line-height: 2;
}
.access_area .blk_txt .lnav{
margin-top: 20px;
margin-right: 20px;
float: right;
}
.access_area .blk_txt .lnav li{
    display: inline-block;
}
.access_area .blk_txt .lnav li.ln_pdf{
margin-top: 80px;
}


.news_area{
background-image:url(../imgs/home/news/bg_news_inner.gif);
min-width: 1091px;
}
.news_area_wrapper{
background-image:url(../imgs/home/news/bg_news.gif);
background-repeat: repeat-x;
}
.news_area_inner{
background-image:url(../imgs/home/news/bg_ft_news.gif);
background-repeat: repeat-x;
padding-top: 10px;
padding-bottom: 20px;
background-position: left bottom;
}
.news_area_body{
width: 955px;
margin: 0px auto;
position: relative;
padding: 30px 0 50px;
}
.news_area_body .t{
position: absolute;
top: -25px;
left: 10px;
}
.news_area_body p {
margin: 70px 50px 30px;
}
.news_area_body .table_news{
margin-left: 180px;
}
.news_area_body .table_news th,
.news_area_body .table_news td{
font-size: 92.4%;
padding: 8px;
}
.news_area_body .table_news th{
white-space:nowrap;
}
.news_area_body .link_media{
position: absolute;
top: 95px;
}
.news_area_cover{
margin-top: 80px;
margin-left: 180px;
padding: 20px;
background-color: #fff;
position: relative;
}
.news_area_note{
margin-top: 20px;
margin-left: 180px;
font-size: 84.6%;
}
.news_area_cover .tt{
position: absolute;
left: -170px;
top: -50px;
}
.news_area_cover .list_cover li{
list-style:outside disc;
margin-left: 1.3em;
}

.concept_area{
background-color: #fef9eb;
min-width: 1091px;
}

.concept_area_inner{
width: 950px;
    margin: 0 auto;
    padding: 55px 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.concept_area .blk_txt{
overflow: hidden;
}
.concept_area .blk_txt .t,
.concept_area .blk_txt .txt{
margin-bottom: 30px;
color: #7e7e7e;
}
.concept_area .blk_txt .txt img{
vertical-align: middle;
}
.b_btob{
_margin-top: 100px;
}
.direction .list_direction li.sep{
padding-bottom: 30px;
margin-bottom: 30px;
background-image: url("../imgs/home/menu/bg_menu.gif");
background-position: center bottom;
background-repeat: repeat-x;
}

.case_area_summer {
margin: 0 auto;
padding: 0px 0 70px;
position: relative;
width: 800px;
margin-bottom: 30px;
}

.lead_area{
padding-bottom: 0px;
padding-bottom: 50px;
}

.case_area_notice_1509 {
    margin: 30px auto 30px;
    padding: 20px 15px 40px; /* スマホでパディングが詰まりすぎないよう調整 */
    -webkit-border-radius: 20px;
    border-radius: 20px;
    position: relative;
    width: 100%;             /* スマホなどでは画面幅に合わせる */
    max-width: 800px;        /* PCなどの広い画面では最大800pxまでに制限する */
    box-sizing: border-box;  /* paddingを含めて幅を計算させる */
    background-color: #fff;
}

.case_area_notice_1509 h2 {
    font-size: 1.2rem;       /* スマホで文字が大きすぎないよう相対値や調整しやすいサイズに */
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.4;
}

.case_area_notice_1509 dd {
    margin-bottom: 20px;
}


@media screen and (max-width: 768px) {
    /* 1. 基本設定・画像対応 */
    img {
        max-width: 100%;
        height: auto;
    }

    .logo_area_inner .logo {
        -webkit-background-size: contain;
        background-size: contain;
    }

    /* 2. 主要エリアの幅をスマホ画面いっぱいに強制拡張 */
    #header,
    .contents_inner,
    .contents_inner_body,
    .lead_area,
    .lead_area_inner,
    .news_area,
    .news_area_body,
    .concept_area,
    .concept_area_inner,
    .case_area,
    .case_area_notice_1509,
    .manager_area,
    .intro_area,
    .intro_area_inner,
    .access_area {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* 端がくっつきすぎないための適度な左右パディング */
    .lead_area_inner,
    .news_area_body,
    .case_area_notice_1509,
    .case_area {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .lead_area_inner {
        height: auto;
        padding-bottom: 20px;
    }

    /* 3. ナビゲーション（gnav）の調整 */
    .gnav {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        padding: 0 10px !important;
    }

    .gnav ul.mobile_gnav {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. アクセスマップ・ニュース部分の調整 */
    .access_area .access_map {
        display: block;
        float: none;
        margin-left: 0;
    }

    .news_area_body .table_news {
        margin-left: 0;
        margin: 10px;
    }

    .news_area_body .t {
        top: -95px;
    }

    .news_area_body .table_news th,
    .news_area_body .table_news td {
        list-style: none;
        display: list-item;
        padding: 0;
        font-size: 100%;
    }

    .news_area_body .table_news tr>td:last-child {
        margin-bottom: 20px;
    }

    .news_area_body .table_news td {
        clear: left;
    }

    .news_area_body .table_news th+td {
        clear: none;
    }

    .news_area_body .table_news th {
        white-space: normal;
        font-weight: bold;
        margin-bottom: 5px;
        float: left;
        margin-right: 10px;
    }

    .news_area_cover {
        margin-left: 10px;
    }

    .news_area_note {
        margin-top: 20px;
        margin-left: 10px;
    }

    .news_area_cover .tt {
        position: absolute;
        left: 10px;
        top: -50px;
    }

    .news_area_cover .list_cover li {
        list-style: outside disc;
        margin-left: 1.3em;
    }

    .news_area_body .link_media {
        position: static;
        text-align: center;
    }

    /* 5. コンセプトエリアの調整 */
    .concept_area_inner {
        flex-direction: column;
        padding-top: 80px;
    }

    .concept_area .img {
        float: none;
        margin-right: 0;
        text-align: center;
    }

    .concept_area .blk_txt {
        margin: 10px;
    }

    /* 6. 活動のようす（case_area）の調整 */
    .case_area {
        flex-direction: column;
        align-items: center;
        padding-bottom: 105px;
    }

    .case_area .intro_movie,
    .case_area .intro_present {
        width: auto;
        float: none;
        margin: 0;
    }

    .case_area .intro_movie iframe {
        height: 315px;
    }

    /* 7. 管理者紹介（manager_area）の調整 */
    .manager_area {
        flex-direction: column;
    }

    .manager_area .unit_manager {
        padding: 10px;
    }

    .manager_area .img_tsukashima {
        float: none;
        text-align: center;
        width: 180px;
        margin: -7px auto 10px;
    }

    .manager_area .unit_prof {
        margin-left: 0;
    }

    .manager_area .unit_prof .table_history th,
    .manager_area .unit_prof .table_history td {
        display: list-item;
        list-style: none;
        padding: 5px 0;
    }

    .manager_area .unit_prof .table_history th {
        font-weight: bold;
        padding-bottom: 0;
    }

    /* 8. イントロ・案内エリアの調整 */
    .intro_area {
        -webkit-background-size: contain;
        background-size: contain;
        padding-top: 150px;
    }

    .intro_area_inner {
        padding-bottom: 30px;
        margin: 10px;
    }

    .intro_area .img_map {
        position: static;
    }

    .intro_area .img_info {
        margin-left: 0;
    }

    /* 9. アクセスエリアの調整 */
    .access_area .blk_txt {
        width: auto;
        float: none;
        display: block;
        margin-right: 0;
    }

    .access_area .blk_txt .tel,
    .access_area .blk_txt .address,
    .access_area .blk_txt .bizhour {
        text-align: center;
    }

    .access_area .blk_txt .address {
        float: none;
        margin: 10px;
    }

    .access_area .blk_txt .lnav li {
        float: none;
        display: inline;
    }

    .access_area .blk_txt .lnav li.ln_pdf {
        margin-top: 10px;
    }

    .access_area .unit_access_area {
        flex-direction: column;
    }

    /* 10. お知らせバナーボックスの調整 */
    .case_area_notice_1509 {
        width: auto;
        margin: 0 1em;
    }
}