@charset "utf-8";

/* スマホここから */
@media only screen and (max-width: 767px) {
	
	.pc {
		display: none;
	}

	body {
		background: #ffffff;
		color: #000000;
		font-family: "Noto Serif JP", serif;
		font-size: 1.6rem;
		line-height: 3.2rem;
		font-weight: 400;
		/* font-feature-settings: "palt"; */
	}

    /*ヘッダー*/

    div.head_area {
        margin: 0 auto;
        width: 100%;
        height: 80px;
        background: #ffffff;
        border-top: 10px solid var(--primary-color);
        position: fixed;
        z-index: 1000;
    }

    div.head {
        margin: 0 auto;
        width: 90%;
        height: 80px;
        position: relative;
    }

    div.head_logo {
        margin: 0;
        width: 240px;
        position: absolute;
        top: 24px;
        left: 0;
        z-index: 2;
    }

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

    div.head_logo h1 img {
        width: 100%;
        height: auto;
    }

    div.head_menu {
        display: none;
    }

    div.head_sns {
        display: none;
    }

	ul.head_menu_sp {
        width: 40px;
		position: absolute;
        top: 18px;
        right: 0;
        z-index: 2;
    }

	ul.head_menu_sp li {
        width: 100%;
    }

	ul.head_menu_sp li img {
        width: 100%;
		height: auto;
    }

    div.main {
        margin: 0 auto;
        padding: 80px 0 0;
        width: 100%;
    }

    div.main_visual_area {
        display: none;
    }

	div.main_visual_sp {
		margin: 0 auto 50px;
		width: 100%;
	}

	div.main_visual_sp img {
		width: 100%;
		height: auto;
	}

    div.top_area {
        margin: 0 auto 50px;
        width: 90%;
    }

    div.top_area h2 {
        margin: 0 auto 16px;
        width: 105px;
    }

    div.top_area h2 img {
        width: 100%;
        height: auto;
    }
    
    div.top_area ul {
        margin: 0 auto;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    div.top_area ul li {
        margin: 0 0 2px;
        width: 18%;
    }

    div.top_area ul li img {
        width: 100%;
        height: auto;
    }

    div.top_thoughts {
        margin: 0 auto 50px;
        width: 90%;
    }

    div.top_thoughts h2 {
        margin: 0 auto 27px;
        width: 100%;
    }

    div.top_thoughts h2 img {
        width: 100%;
        height: auto;
    }

    div.top_thoughts p {
        margin: 0 auto 40px;
        font-size: 1.6rem;
        line-height: 3.2rem;
        font-weight: 400;
        color: #000000;
        text-align: left;
    }

    div.top_thoughts p:last-child {
        margin: 0 auto;
    }

	div.top_thoughts p br {
        display: none;
    }

    div.top_profile_area {
        margin: 0 auto 50px;
        width: 100%;
    }

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

	div.top_profile_photo_area {
        margin: 0 auto;
		padding: 40px 0 20px;
        width: 100%;
		background: #eed6f3;
    }

    div.top_profile_photo {
        margin: 0 auto;
        width: 90%;
    }

    div.top_profile_photo img {
        width: 100%;
        height: auto;
    }

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

    div.top_profile_text {
        margin: 0 auto 40px;
		padding: 0 5% 40px;
        width: 100%;
		background: #eed6f3;
    }

    div.top_profile_text h2 {
        margin: 0 0 22px;
        width: 98px;
    }

    div.top_profile_text h2 img {
        width: 100%;
        height: auto;
    }

    div.top_profile_text h3 {
        margin: 0 0 15px;
        width: 258px;
    }

    div.top_profile_text h3 img {
        width: 100%;
        height: auto;
    }

    div.top_profile_text p {
        margin: 0 auto;
        font-size: 1.6rem;
        line-height: 2.8rem;
        font-weight: 400;
    }

    div.educational_background {
        margin: 0 auto 18px;
        width: 90%;
    }

    div.educational_background h3 {
        margin: 0 auto 12px;
        padding: 8px 12px;
        font-size: 1.4rem;
        line-height: 24px;
        font-weight: 400;
        background: url(./images/line_profile.png) no-repeat left bottom;
        background-size: 508px;
    }

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

    div.educational_background table th {
        padding: 0 0 5px;
        width: 100px;
        font-size: 1.4rem;
        line-height: 3.0rem;
        text-align: center;
    }

    div.educational_background table td {
        padding: 0 0 5px;
        font-size: 1.4rem;
        line-height: 3.0rem;
    }

    div.work_experience {
        margin: 0 auto;
        width: 90%;
    }

    div.work_experience h3 {
        margin: 0 auto 12px;
        padding: 8px 12px;
        font-size: 1.4rem;
        line-height: 24px;
        font-weight: 400;
        background: url(./images/line_profile.png) no-repeat left bottom;
        background-size: 508px;
    }

    div.work_experience dl {
        margin: 0 auto 10px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
		flex-wrap: wrap;
    }

    div.work_experience dl dt {
		width: 100%;
        font-size: 1.4rem;
        line-height: 3.0rem;
    }

    div.work_experience dl dd {
        margin: 0 0 0 0;
		width: 100%;
        font-size: 1.4rem;
        line-height: 3.0rem;
    }

    div.work_experience dl dd dl {
        margin: 0 auto;
        width: 100%;
        display: flex;
        justify-content: flex-start;
		flex-wrap: wrap;
    }

    div.work_experience dl dd dl dt {
		width: inherit;
        font-size: 1.4rem;
        line-height: 3.0rem;
    }

    div.work_experience dl dd dl dd {
        margin: 0 0 0 10px;
		width: inherit;
        font-size: 1.4rem;
        line-height: 3.0rem;
    }

    div.banner_partners {
        margin: 0 auto 60px;
        width: 90%;
    }

    div.banner_partners img {
        width: 100%;
        height: auto;
    }

    div.top_policy_title_area {
        margin: 0 auto 20px;
        padding: 0 0 8px;
        width: 100%;
        background: url(./images/bg_policy_title_sp.jpg) repeat-x center bottom;
        background-size: 1px;
    }

    div.top_policy_title_area h2 {
        margin: 0 auto;
        width: 240px;
    }

    div.top_policy_title_area h2 img {
        width: 100%;
        height: auto;
    }

    div.top_policy_subtitle {
        margin: 0 auto 30px;
        width: 80%;
    }

    div.top_policy_subtitle img {
        width: 100%;
        height: auto;
    }

    div.top_policy_content {
        margin: 0 auto 80px;
        width: 94%;
    }

    div.policy_box {
        margin: 0 auto 25px;
        width: 100%;
    }

    div.policy_box:last-child {
        margin: 0 auto;
    }

    div.policy_title {
        margin: 0 auto 12px;
        width: 100%;
        background: url(./images/icon_open.png) no-repeat right 4px bottom 11px;
        background-size: 12px;
        border-bottom: 1px solid var(--primary-color);
        cursor: pointer; /* クリック可能であることを示す */
    }

    /* 政策タイトルのアクティブ状態（開いている状態） */
    div.policy_title.active {
        background: url(./images/icon_close.png) no-repeat right 4px bottom 11px;
        background-size: 12px;
    }

    div.policy_title h3 {
        margin: 0 auto;
        padding: 0 0 0 32px;
        font-size: 2.0rem;
        line-height: 40px;
        font-weight: 600;
    }

    div.policy_box:nth-child(1) div.policy_title h3 {
        background: url(./images/num01.png) left center no-repeat;
        background-size: 24px;
    }

    div.policy_box:nth-child(2) div.policy_title h3 {
        background: url(./images/num02.png) left center no-repeat;
        background-size: 24px;
    }

    div.policy_box:nth-child(3) div.policy_title h3 {
        background: url(./images/num03.png) left center no-repeat;
        background-size: 24px;
    }

    div.policy_box:nth-child(4) div.policy_title h3 {
        background: url(./images/num04.png) left center no-repeat;
        background-size: 24px;
    }

    div.policy_box:nth-child(5) div.policy_title h3 {
        background: url(./images/num05.png) left center no-repeat;
        background-size: 24px;
    }

    div.policy_box:nth-child(6) div.policy_title h3 {
        background: url(./images/num06.png) left center no-repeat;
        background-size: 24px;
    }

    div.policy_box:nth-child(7) div.policy_title h3 {
        background: url(./images/num07.png) left center no-repeat;
        background-size: 24px;
    }

    div.policy_box:nth-child(8) div.policy_title h3 {
        background: url(./images/num08.png) left center no-repeat;
        background-size: 24px;
    }

    div.policy_text {
        margin: 0 auto;
        display: none; /* 初期状態で非表示 */
    }

    /* アクティブな政策テキストの表示 */
    div.policy_box .policy_title.active + div.policy_text {
        display: block;
    }

    /* スムーズなアニメーション効果（オプション） */
    div.policy_text {
        transition: all 0.3s ease;
    }

    div.policy_text ul {
        margin: 0 auto;
    }

    div.policy_text ul li {
        margin: 0 0 10px 0;
        padding: 0 0 0 10px;
        background: url(./images/list_icon16_30.png) left top no-repeat;
        background-size: 3px;
        font-size: 1.6rem;
        line-height: 3.0rem;
    }

    div.policy_text ul li:last-child {
        margin: 0 0 0 0;
    }

    div.top_volunteer_area {
        margin: 0 auto 50px;
		padding: 50px 0;
        width: 100%;
        background: url(./images/bg_volunteer_pc.jpg) no-repeat center center;
        background-size: cover;
    }

    div.top_volunteer {
        margin: 0 auto;
        width: 90%;
    }

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

    div.top_volunteer_content h2 {
        margin: 0 auto 16px;
        font-size: 3.0rem;
        line-height: 4.0rem;
        font-weight: 500;
		text-align: center;
    }

    div.top_volunteer_content p {
        margin: 0 auto 16px;
        font-size: 1.6rem;
        line-height: 3.7rem;
    }

    div.volunteer_button {
        margin: 0 auto;
        width: 257px;
    }

    div.volunteer_button a {
        margin: 0 auto;
        width: 100%;
        background: var(--primary-color);
        color: #ffffff;
        font-size: 1.9rem;
        line-height: 50px;
        font-weight: 500;
        text-align: center;
        text-decoration: none;
        display: block;
    }

    div.top_supporter_area {
        margin: 0 auto 45px;
        width: 90%;
    }

    div.top_supporter_content {
        margin: 0 auto 36px;
        width: 100%;
    }

    div.top_supporter_content h2 {
        margin: 0 auto 20px;
        padding: 0 0 30px;
        font-size: 3.0rem;
        line-height: 4.0rem;
        font-weight: 500;
        color: var(--primary-color);
        text-align: center;
        background: url(./images/eng_sub_supporter.png) no-repeat center bottom;
        background-size: 120px;
    }

    div.top_supporter_content h3 {
        margin: 0 auto 10px;
        font-size: 2.2rem;
        line-height: 3.6rem;
        font-weight: 500;
        color: var(--primary-color);
        text-align: center;
    }

    div.top_supporter_content p {
        margin: 0 auto 20px;
        font-size: 1.6rem;
        line-height: 2.4rem;
        text-align: center;
    }

    div.top_supporter_content p:last-child {
        margin: 0 auto;
        font-size: 1.9rem;
        line-height: 3.2rem;
		text-align: center;
    }

    div.top_supporter_button {
        margin: 0 auto;
        width: 257px;
    }

    div.top_supporter_button a {
        margin: 0 auto;
        width: 100%;
        background: var(--primary-color);
        color: #ffffff;
        font-size: 1.9rem;
        line-height: 50px;
        font-weight: 500;
        text-align: center;
        text-decoration: none;
        display: block;
    }

    div.top_donation_area {
        margin: 0 auto 88px;
        padding: 50px 0 64px;
        width: 100%;
        background: #f0e6f5;
    }

    div.top_donation_intro {
        margin: 0 auto 32px;
        width: 90%;
    }

    div.top_donation_intro h2 {
        margin: 0 auto 30px;
        font-size: 3.0rem;
        line-height: 4.0rem;
        font-weight: 500;
        color: var(--primary-color);
        text-align: center;
    }

    div.top_donation_intro p {
        margin: 0 auto 30px;
        font-size: 1.6rem;
        line-height: 3.5rem;
        text-align: left;
    }

	div.top_donation_intro p br {
        display: none;
    }

    div.top_donation_intro p:last-child {
        margin: 0 auto;
    }

    div.top_donation_application {
        margin: 0 auto 24px;
        width: 90%;
    }

    div.top_donation_application h3 {
        margin: 0 auto 14px;
        padding: 10px 0;
        color: var(--primary-color);
        font-size: 1.8rem;
        line-height: 3.5rem;
        font-weight: 700;
        text-align: center;
        border-bottom: 1px solid var(--primary-color);
    }

    div.top_donation_application p {
        margin: 0 auto 10px;
        font-size: 1.6rem;
        line-height: 3.5rem;
    }

    div.top_donation_application p.note {
        margin: 0 auto;
        padding-left: 1em;
        font-size: 1.4rem;
        line-height: 2.3rem;
        text-indent: -1em;
    }

    div.top_donation_application ul {
        margin: 0 auto 10px;
    }

    div.top_donation_application ul li {
        padding: 0 0 0 12px;
        background: url(./images/list_icon16.png) left top no-repeat;
        background-size: 3px;
        font-size: 1.6rem;
        line-height: 3.5rem;
    }

    div.top_donation_notes {
        margin: 0 auto 36px;
        padding: 20px 0 27px;
        width: 90%;
        border: 1px solid var(--primary-color);
    }

    div.top_donation_notes h4 {
        margin: 0 24px 5px;
        color: var(--primary-color);
        font-size: 1.6rem;
        line-height: 3.5rem;
        font-weight: 800;
    }

    div.top_donation_notes ul {
        margin: 0 24px 0 24px;
    }

    div.top_donation_notes ul li {
        margin: 0 0 5px;
        padding: 0 0 0 9px;
        background: url(./images/list_icon14.png) left top no-repeat;
        background-size: 3px;
        font-size: 1.4rem;
        line-height: 2.4rem;
    }

    div.top_donation_form {
        margin: 0 auto;
        width: 90%;
    }

    div.top_donation_form table {
        margin: 0 auto 25px;
        width: 100%;
    }

    div.top_donation_form table th {
        padding: 20px 0 8px;
        font-size: 1.4rem;
        line-height: 2.2rem;
    }

    div.top_donation_form table th.note {
        color: var(--primary-color);
        text-align: right;
    }

    div.top_donation_form table td {
        font-size: 1.4rem;
        line-height: 2.2rem;
    }

    div.top_donation_form table td p.note_text {
        margin: 5px 0 0;
        font-size: 1.4rem;
        line-height: 2.2rem;
        color: var(--primary-color);
    }

    .wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="tel"],
	.wpcf7 input[type="url"] {
		background-color: #fff;
		color: #333;
		width: 100%;
        height: 50px;
		border: 1px solid #ddd;
		font-size: 100%;
		padding: 0 20px;
		border-radius: 5px;
	}

    .wpcf7 select {
		background-color: #fff;
		color: #333;
		width: 100%;
        height: 50px;
		border: 1px solid #ddd;
		font-size: 100%;
        line-height: 50px;
		padding: 0 20px;
		border-radius: 5px;
	}

    .wpcf7 textarea {
		background-color: #fff;
		color: #333;
		width: 100%;
        height: 150px;
		border: 1px solid #ddd;
		font-size: 100%;
		padding: 10px 20px;
		border-radius: 5px;
	}
	
	
	div.button_submit {
		margin: 0 auto;
		width: 260px;
	}
	
	.wpcf7 input[type="submit"].wpcf7-submit {
		margin: 0 auto;
		font-size: 1.6rem;
		line-height: 40px;
        text-align: center;
		width: 100%;
		background: var(--primary-color);
		color: #ffffff;
		border-radius: 4px;
		cursor: pointer;
		border: none;
        display: block;
	}
	
	/*
	.wpcf7 input[type="submit"].wpcf7-submit:hover {
		background: #a52424;
	}
	*/
	
	span.required {
		color: var(--primary-color);
	}

    div.check_privacy {
        margin: 0 auto 38px;
		width: 94%;
        font-size: 1.4rem;
        line-height: 3.2rem;
    }

    div.check_privacy a {
        color: var(--primary-color);
        text-decoration: underline;
    }

    .wpcf7-list-item-label {
        position: relative;
    }

    .check_privacy input[type=checkbox] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: 1;
        margin: 0;
        width: 20px;
        height: 20px;
        cursor: pointer;
        opacity: 0; 
    }

    .check_privacy .wpcf7-list-item-label::before {
        content: "";
        position: absolute;
        top: 52%;
        left: -1.5em;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background: transparent url(./images/check_off.png) no-repeat center center / contain;
        cursor: pointer;
        transition: all 0.3s;
    }

    .check_privacy .wpcf7-list-item-label::after {
        content: "";
        position: absolute;
        top: 52%;
        left: -1.5em;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background: transparent url(./images/check_on.png) no-repeat center center / contain;
        cursor: pointer;
        transition: all 0.3s;
        opacity: 0;
    }

    input[type=checkbox]:checked + .wpcf7-list-item-label::after {
        opacity: 1;
    }

    input[type=checkbox]:checked + .wpcf7-list-item-label::before {
        opacity: 0;
    }

    div.contact_recaptcha {
		margin: 20px auto 0;
		width: 100%;
	}

	div.contact_recaptcha p {
		margin: 0 auto;
		font-size: 1.1rem;
		line-height: 2.1rem;
		text-align: center;
	}

    div.youtube_area {
        margin: 0 auto 34px;
        width: 94%;
    }

    div.youtube_title {
        margin: 0 auto 16px;
        width: 100%;
    }

    div.youtube_title h2 {
        margin: 0 auto;
        width: 140px;
    }

    div.youtube_title h2 img {
        width: 100%;
        height: auto;
    }

    div.youtube_content {
        margin: 0 auto;
        width: 94%;
    }

    div.youtube_box {
        margin: 0 auto 20px;
        width: 100%;
    }

	div.youtube_box:last-child {
        margin: 0 auto;
    }

    div.youtube_box iframe {
        aspect-ratio: 16 / 9;
        width: 100%;
        height: auto;
    }

    div.youtube_content {
        margin: 0 auto;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    div.instagram_area {
        margin: 0 auto;
        width: 94%;
    }

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

    div.instagram_title h2 {
        margin: 0 auto;
        width: 184px;
    }

    div.instagram_title h2 img {
        width: 100%;
        height: auto;
    }

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

    div.view_more {
        margin: 10px 0 0 auto;
        width: 100px;
    }

    div.view_more img {
        width: 100%;
        height: auto;
    }

    /*フッター*/

    div.foot {
        margin: 0 auto;
        padding: 40px 0 40px;
        width: 100%;
    }

    div.foot_office {
        margin: 0 auto 20px;
        width: 100%;
        text-align: center;
    }

    div.foot_office h3 {
        margin: 0 auto 16px;
        width: 237px;
    }

    div.foot_office h3 img {
        width: 100%;
        height: auto;
    }

    div.foot_office p {
        margin: 0 auto;
        font-size: 1.4rem;
        line-height: 3.0rem;
        font-weight: 400;
        text-align: center;
    }

    div.foot_sns {
        margin: 0 auto 40px;
        width: 120px;
    }

    div.foot_sns ul {
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    div.foot_sns ul li {
        margin: 0;
        width: 23px;
    }

    div.foot_sns ul li.foot_fb {
        width: 23px;
    }

    div.foot_sns ul li.foot_ig {
        width: 23px;
    }

    div.foot_sns ul li.foot_yt {
        width: 33px;
    }

    div.foot_sns ul li img {
        width: 100%;
        height: auto;
    }

    div.foot_logo_cdp {
        margin: 0 auto;
        width: 240px;
    }

    div.foot_logo_cdp img {
        width: 100%;
        height: auto;
    }

    div.copyright {
        margin: 0 auto;
        width: 100%;
        background: var(--primary-color);
    }

    div.copyright p {
        margin: 0 auto;
        color: #ffffff;
        font-size: 1.2rem;
        line-height: 50px;
        text-align: center;
    }

    /*下層ページ*/

    div.page_title {
        margin: 90px auto 70px;
    }

    div.page_title h2 {
        margin: 0 auto;
        font-size: 3.5rem;
        line-height: 4.0rem;
        font-weight: 500;
        color: var(--primary-color);
        text-align: center;
    }

    div.page_content {
        margin: 0 auto 240px;
        width: 94%;
    }

    div.page_content h3 {
        margin: 0 auto;
        font-size: 1.8rem;
        line-height: 3.1rem;
        font-weight: 400;
        color: var(--primary-color);
    }

    div.page_content p {
        margin: 0 auto 31px;
        font-size: 1.6rem;
        line-height: 3.1rem;
    }

    div.page_content p:last-child {
        margin: 0 auto;
    }

	/*スマホメニュー*/

	div#upper_menu_area {
		margin: 0 auto;
		width: 100%;
		height: 100svh;
		overflow: hidden;
		background: #f0e6f5;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: calc(infinity);
		display: none;
	}

	div.upper_menu {
		margin: 0 auto;
		width: 100%;
		height: 100svh;
		position: relative;
	}

	div.upper_close {
		margin: 0;
		width: 40px;
		position: absolute;
		top: 20px;
		right: 10px;
		z-index: 5;
	}

	div.upper_close ul {
		margin: 0;
		width: 100%;
	}

	div.upper_close ul li {
		margin: 0;
		width: 100%;
	}

	div.upper_close ul li img {
		width: 100%;
		height: auto;
	}

	div.upper_menu_content_area {
		margin: auto;
		width: 100%;
		height: 100svh;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		display: flex;
		justify-content: flex-start;
        align-items: center;
		flex-wrap: wrap;
	}

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

	div.upper_menu_list {
		margin: 0 auto 60px;
		width: 100%;
	}

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

	div.upper_menu_list ul li {
		margin: 0 auto 40px;
		font-size: 1.5rem;
		line-height: 2.4rem;
		text-align: center;
	}

	div.upper_menu_list ul li:last-child {
		margin: 0 auto;
	}

	div.upper_menu_list ul li a {
		text-decoration: none;
	}

	div.upper_sns {
        margin: 0 auto;
        width: 100%;
		height: 23px;;
    }

    div.upper_sns ul {
        margin: 0 auto;
        width: 100px;
        display: flex;
        justify-content: space-between;
    }

    div.upper_sns ul li {
        margin: 0;
        width: 23px;
    }

    div.upper_sns ul li.upper_fb {
        width: 23px;
    }

    div.upper_sns ul li.upper_ig {
        width: 23px;
    }

    div.upper_sns ul li.upper_yt {
        width: 33px;
    }

    div.upper_sns ul li img {
        width: 100%;
        height: auto;
    }


}