@charset "utf-8";
/* CSS Document */

body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 15px;
    color: #333;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: .1em;
    font-weight: 500;
    overflow-x: hidden;
}

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

/* .josefin-sans {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

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

.shippori-mincho-bold {
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    font-style: normal;
} */


/*===============================
common
===============================*/
/* ------------
text style
------------ */
h2.main_h2 {
    font-size: 30px;
    color: #e8380d;
    text-align: center;
}

h2.main_h2 span {
    display: block;
    margin-top: 0.5em;
    text-align: center;
    font-size: 20px;
    font-family: "Josefin Sans", sans-serif;
}

h2.main_h2 img {
    display: block;
    width: 50px;
    margin: 0 auto;
}

/* ------------
button
------------ */
a.main_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    margin: 0 auto;
    padding: .9em 2em;
    border: 2px solid #e8380d;
    border-radius: 50px;
    background-color: #fff;
    color: #e8380d;
    font-weight: 600;
    transition: ease 0.3s;
}

a.main_btn::after {
    transform: rotate(45deg);
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-top: 2px solid #e8380d;
    border-right: 2px solid #e8380d;
    content: '';
    transition: ease 0.3s;
}

a.main_btn:hover {
    color: #fff;
    background-color: #e8380d;
}

a.main_btn:hover::after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

a.main_btn_cl {
    background-color: #e8380d;
    color: #fff;
}

a.main_btn_cl::after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

a.main_btn_cl:hover {
    color: #e8380d;
    background-color: #fff;
}

a.main_btn_cl:hover::after {
    border-top: 2px solid #e8380d;
    border-right: 2px solid #e8380d;
}

.sp_btn {
    display: none !important;
}


/*===============================
header menu
===============================*/
div.pc_menu {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5vw;
    background-color: rgba(255, 255, 255, 0.90);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    z-index: 999;
}

a.header_logo {
    display: block;
    width: 200px;
    padding: 0 1vw;
    transition: 0.3s;
}

a.header_logo:hover {
    opacity: 0.7;
}

a.header_logo img {
    display: block;
    width: 100%;
}

ul.menu {
    width: 100%;
    display: flex;
}

ul.menu li {
    padding: 0 1vw;
    font-size: 17px;
    font-weight: 600;
}

ul.menu li a {
    position: relative;
    color: #333;
}

ul.menu li a::after {
    position: absolute;
    bottom: -6px;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #e8380d;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform .3s;
}

ul.menu li a:hover::after {
    transform: scale(1, 1);
}

div.sp_menu {
    display: none;
}

/*==================================================
toppage
==================================================*/
/*===============================
mv
===============================*/
div.mv_wrap {
    position: relative;
    width: 100%;
    height: 50vw;
    min-height: 600px;
    background-image: url(../images/bg_mv.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

div.mv_wrap img {
    position: absolute;
    display: block;
}

img.mv_subcopy {
    top: 120px;
    right: 5vw;
    width: 20vw;
    min-width: 300px;
}

img.mv_maincopy {
    top: 0;
    bottom: 0;
    right: 5vw;
    margin: auto;
    width: 50vw;
}

img.mv_masako {
    bottom: 0;
    left: 5vw;
    width: 40vw;
}

img.mv_name {
    bottom: 5vw;
    left: 5vw;
    width: 20vw;
    min-width: 250px;
}


/*===============================
banner
===============================*/
#banner {
    width: 100%;
    padding: 100px 0;
    background-color: #f1f4e8;
}

#footer_banner {
    width: 100%;
    padding: 100px 0;
    background-color: #fff;
}

div.banner_wrap {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

ul.banner_list {
    display: flex;
    justify-content: center;
    gap: 0 2vw;
}

ul.banner_list li a {
    display: block;
    width: 100%;
    transition: ease 0.3s;
}

ul.banner_list li a:hover {
    opacity: .7;
}

ul.banner_list li a img {
    display: block;
    width: 100%;
}


/*===============================
top 活動報告
===============================*/
#top_repo {
    width: 100%;
    padding: 100px 0;
}

div.top_repo_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 2vw;
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

div.top_repo_h {
    width: 30%;
}

div.top_repo_h a {
    margin-top: 30px;
}

div.top_repo_list {
    width: 60%;
}

ul.repo_list {
    width: 100%;
}

ul.repo_list li a {
    display: block;
    padding: 20px;
    border-bottom: 1px solid #e8380d;
    color: #333;
    transition: ease 0.3s;
}

ul.repo_list li a:hover {
    opacity: 0.7;
    transform: translateX(10px);
}

span.repo_deta {
    margin-right: 20px;
    font-size: 14px;
    color: #e8380d;
}


/*===============================
メッセージ
===============================*/
#message {
    width: 100%;
    padding: 100px 0;
    background-image: url(../images/bg_message.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

div.message_wrap {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5vw;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.90);
    text-align: center;
}

div.message_wrap>*+* {
    margin-top: 80px;
}

div.message_container h3 {
    margin-bottom: 1em;
    font-family: "Shippori Mincho", serif;
    font-size: 30px;
    font-weight: 700;
}


/*===============================
いでい昌子5つの提案
===============================*/
#pledge {
    width: 100%;
    padding: 100px 0;
    background-color: #f1f4e8;
}

div.pledge_wrap {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

div.pledge_wrap h2 img {
    display: block;
    width: 50%;
    margin: 0 auto;
}

div.pledge_container {
    width: 100%;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2vw;
}

div.pledge_box {
    width: 30%;
    padding: 3vw;
    border-radius: 30px;
    background-color: #fff;
}

div.pledge_box span.pledge_cate {
    padding: 0.5em 1em;
    border-radius: 50px;
    background-color: #e8380d;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

div.pledge_box img {
    display: block;
    width: 80%;
    margin: 0 auto;
}

div.pledge_outline {
    margin-top: 20px;
}

div.pledge_outline>*+* {
    margin-top: 20px;
}

div.pledge_outline h3 {
    font-size: 20px;
    color: #e8380d;
}

ul.pledge_list li {
    position: relative;
    margin-left: 1.5em;
}

ul.pledge_list>*+* {
    margin-top: 0.5em;
}

ul.pledge_list li::after {
    content: '';
    display: block;
    position: absolute;
    top: .5em;
    left: -1.3em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #999;
}


/*===============================
プロフィール
===============================*/
#profile {
    width: 100%;
}

div.profile_wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2vw;
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 100px 0;
}

img.img_profile {
    display: block;
    width: 45%;
    border-radius: 30px;
}

div.profile_container {
    position: relative;
    width: 45%;
    padding: 30px;
}

div.profile_container>*+* {
    margin-top: 50px;
}

table.profile_table {
    position: relative;
    display: block;
    max-height: 20vw;
    /* 開く前に見せたい高さを指定 */
    margin-bottom: 10px;
    overflow: hidden;
    transition: max-height 1s;
}

table.profile_table th {
    width: 110px;
    padding: 20px;
    vertical-align: top;
    color: #999;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

table.profile_table td {
    padding: 20px;
}

table.profile_table td>*+* {
    margin-top: 20px;
}

table.profile_table td strong {
    font-size: 16px;
    font-weight: 700;
    color: #e8380d;
}

.profile_container:has(:checked) table {
    max-height: 200vh;
}

table.profile_table::after {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .9) 50%, hsla(0, 0%, 100%, .9) 0, #fff);
    content: '';
}

.profile_container:has(:checked) table::after {
    content: none;
}

.profile_container label {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    padding: .9em 2em;
    border: 2px solid #e8380d;
    border-radius: 50px;
    background-color: #fff;
    color: #e8380d;
    font-weight: 900;
    transition: ease 0.3s;
}

.profile_container label::after {
    transform: rotate(135deg);
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-top: 2px solid #e8380d;
    border-right: 2px solid #e8380d;
    content: '';
    transition: ease 0.3s;
}

.profile_container label:hover {
    color: #fff;
    background-color: #e8380d;
}

.profile_container label:hover::after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

.profile_container:has(:checked) label {
    display: none;
}

.profile_container input {
    display: none;
}


/* ------------
スライド
------------ */
div.profile_slide {
    width: 100%;
    padding: 100px 0;
    background-color: #faf4e8;
}

.swiper-container {
    width: 90%;
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.swiper-wrapper {
    position: relative;
    padding-top: 5vw;
}

.swiper-slide h3 {
    position: relative;
    margin-top: 1vw;
    margin-left: 1.5em;
}

.swiper-slide h3::after {
    content: '';
    display: block;
    position: absolute;
    top: .5em;
    left: -1em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #e8380d;
}

.swiper-slide img {
    display: block;
    width: 100%;
    border-radius: 30px;
}


.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: 1vw;
    right: 0;
    left: auto;
    margin-top: 0;
    outline: 0;
    width: 3vw !important;
    height: 3vw !important;
    max-width: 40px;
    max-height: 40px;
    text-indent: -9999px;
    z-index: 9999;
    background-size: contain !important;
}

.swiper-button-prev {
    left: inherit;
    right: 5vw;
    background: url(../images/icon_arrow.svg) no-repeat left top;
    transform: rotate(180deg);

}

.swiper-button-next {
    right: 0px;
    background: url(../images/icon_arrow.svg) no-repeat left top;
}


/*===============================
top 応援します
===============================*/
#top_support {
    width: 100%;
    padding: 100px 0;
    background-image: url(../images/bg_support.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

div.top_support_wrap {
    width: 70%;
    max-width: 1500px;
    margin: 0 auto;
}

div.top_support_wrap a {
    width: 100;
}

div.top_support_wrap a img {
    display: block;
    width: 100%;
    transition: ease 0.3s;
}

div.top_support_wrap a img:hover {
    transform: scale(0.98);
    opacity: 0.8;
}


/*===============================
top お問い合わせ
===============================*/
#top_contact {
    width: 100%;
    padding: 100px 0 0;
    /* border-top: 1px solid #999; */
}

div.top_contact_wrap {
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
    text-align: center;
}

div.top_contact_wrap>*+* {
    margin-top: 50px;
}


/*===============================
footer
===============================*/
footer {
    position: relative;
    width: 100%;
    padding-bottom: 20px;
    background-image: url(../images/bg_mv.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

div.footer_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 100px 0;
    color: #fff;
}

a.footer_logo {
    width: 300px;
    transition: ease 0.3s;
}

a.footer_logo:hover {
    opacity: 0.7;
}

a.footer_logo img {
    display: block;
    width: 100%;
}

ul.footer_address>*+* {
    margin-top: 1em;
}

p.copyright {
    text-align: center;
    font-size: 12px;
    color: #fff;
}


/*==================================================
subpage
==================================================*/
/*===============================
common
===============================*/
#sub_header {
    width: 100%;
    padding: 150px 0 80px;
    background-image: url(../images/bg_mv.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
}

#sub_header h2 {
    display: inline-block;
    padding: 20px 80px;
    background-color: #fff;
    border-bottom: 3px solid #e8380d;
}

h2.sub_h2 {
    padding: 20px;
    border-left: 3px solid #e8380d;
    font-size: 20px;
    font-weight: 600;
    background-color: #faf4e8;
}


/*===============================
活動報告　一覧
===============================*/
html:has(#archive) {
    scroll-padding-top: 30vh;
}

#archive {
    width: 100%;
    padding: 100px 0;
}

div.archive_wrap {
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
}

div.archive_box {
    width: 100%;
    padding: 50px 0 0;
}

div.archive_box>*+* {
    margin-top: 30px;
}

div.archive_box h3 {
    background-color: #faf4e8;
    padding: 20px 40px;
    border-radius: 100px 100px 100px 0px;
    font-size: 20px;
}

div.archive_box h3 span.day {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    color: #e8380d;
}

div.archive_box p a {
    color: #e8380d;
    text-decoration: underline;
    font-weight: 600;
}

div.archive_box p a:hover,
div.archive_img a:hover {
    opacity: 0.7;
}

div.archive_img {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2vw;
}

div.archive_img img {
    display: block;
    width: 31%;
}

div.archive_img a {
    display: block;
    width: 31%;
}

div.archive_img a img {
    display: block;
    width: 100%;
}

div.archive_box table tbody tr td {
    padding: 10px;
    border: 1px solid #999;
}

details {
    margin-top: 50px;
}

details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 30px;
    color: #333;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    background-color: #faf4e8;
    border-left: 3px solid #e8380d;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::before,
details summary::after {
    width: 2px;
    height: 25px;
    border-radius: 5px;
    background-color: #e8380d;
    content: '';
}

details summary::before {
    position: absolute;
    right: 30px;
    rotate: 90deg;
}

details summary::after {
    transition: rotate .3s;
}

details[open] summary::after {
    rotate: 90deg;
}


/*===============================
応援します
===============================*/
#support {
    width: 100%;
    padding: 100px 0;
}

div.support_wrap {
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
}

div.support_outline {
    width: 100%;
    margin: 0 auto;
}

div.support_outline>*+* {
    margin-top: 50px;
}

div.support_box {
    width: 100%;
    padding: 50px 0 0;
}

div.support_box>*+* {
    margin-top: 30px;
}

div.support_box h3 {
    display: block;
    font-size: 25px;
    font-weight: 500;
    background-color: #faf4e8;
    padding: 20px 40px;
    border-radius: 100px 100px 100px 0px;
}

div.support_box h3 span {
    position: relative;
    display: block;
    margin-top: 0.5em;
    padding-left: 1em;
    font-size: 14px;
    color: #e8380d;
}

div.support_box h3 span::after {
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    background-color: #e8380d;
    border-radius: 100px;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: '';
}

div.support_box img {
    display: block;
    width: 10%;
    border-radius: 30px;
}

div.support_box_in {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

div.support_box_in p {
    width: 88%;
}


/*===============================
通信
===============================*/
#news {
    width: 100%;
    padding: 100px 0;
}

div.news_wrap {
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4vw 2vw;
}

div.news_box {
    width: 23%;
}

div.news_box a>*+* {
    margin-top: 20px;
}

div.news_box a,
div.news_box img {
    display: block;
    width: 100%;
    transition: ease 0.3s;
}

div.news_box a img {
    border: 1px solid #999;
}

div.news_box a h3 {
    background-color: #f1f4e8;
    color: #558d0d;
    padding: 10px 20px;
    border-left: 3px solid #8cc63f;
    font-size: 16px;
    font-weight: 600;
}

div.news_box a:hover {
    opacity: 0.7;
}


/* ======================================================================
お問い合わせ
====================================================================== */
#inquiry {
    width: 80%;
    max-width: 1000px;
    padding: 120px 0;
    margin: 0 auto;
}

#inquiry>*+* {
    margin-top: 50px;
}

div.mailform_top>*+* {
    margin-top: 30px;
}

div.complete_top {
    text-align: center;
}

div.inq_wrap>*+* {
    margin-top: 50px;
}

div.inq_wrap a.main_btn {
    width: 300px;
}

p.inq_h {
    margin: 50px auto 0;
    font-size: 15px;
    font-weight: 500;
}

p.inq_h:first-child,
div.inq_box:first-child {
    margin: 0 auto;
}

/* 必須・任意　*/
p.inq_h span {
    margin-right: 10px;
    padding: 2px 10px;
    box-sizing: border-box;
    border-radius: 100px;
    font-size: 12px;
    color: #cc4138;
    border: 1px solid #cc4138;
}

/* エラーテキスト */
span.error_disp {
    font-size: 14px;
    color: #cc4138;
}

/* 入力部分 */
label.inq_text input,
textarea {
    display: block;
    width: 100%;
    margin: 10px auto;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 16px;
    background-color: #faf4e8;
    color: #333;
    border: none;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}

textarea.inq_textarea {
    height: 200px;
    padding: 10px;
}


/* 入力内容確認 */
p.confirm_p {
    display: block;
    width: 100%;
    margin: 20px auto;
    padding: 0 20px 20px;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.5em;
    border-bottom: 1px solid #e8380d;
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}


/* 送信ボタン */
div.confirm_wrap {
    text-align: center;
}

input.button,
a.button {
    display: block;
    width: 100%;
    padding: 40px 20px;
    box-sizing: border-box;
    border-radius: 50px;
    background-color: #e8380d;
    color: #fff;
    border: none;
    font-size: 18px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: .3s;
}

input.button:hover,
a.button:hover {
    opacity: 0.7;
}


/*戻る*/
.return_button {
    display: block;
    margin: 50px auto 0;
    border: 2px #8cc63f solid;
    color: #8cc63f !important;
    font-weight: bold;
    font-size: 15px;
    background-color: #fff;
    padding: 15px 0;
    border-radius: 50px;
    width: 150px;
    transition: 0.3s;
    cursor: pointer;
    text-align: center;
}

.return_button:hover {
    background-color: #8cc63f;
    color: #fff !important;
}


/* 連絡先 */
div.tel_top_wrap {
    margin-top: 30px;
    padding-left: 20px;
    border-left: 1px solid #e8380d;
}


/*===============================
pagetop
===============================*/
a.pagetop {
    display: block;
    position: fixed;
    z-index: 99;
    right: 3%;
    bottom: 4%;
    width: 80px;
    height: 80px;
    transition: .5s;
}

a.pagetop img {
    width: 100%;
    height: 100%;
}

a.pagetop:hover {
    margin-bottom: 10px;
}