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

/* erea2基本設定 */
#erea2 { width: 90%; max-width: 870px; margin: clamp(30px, 5vw, 70px) auto 0; padding-bottom: clamp(30px, 5vw, 70px);}

/* erea2導入部 */
#erea2 picture { display: block; line-height: 0; }
#erea2 .head_title { width: 100%; margin: 0; padding: 0; display: block; }

/* 背景画像 繰り返し */
#erea2 #profile_wrap { width: 100%; margin: 0; padding: 0; background-image: url("../../common/img/profile/prof_body.png"); background-repeat: repeat-y; background-size: 100% auto; background-position: top center; overflow: hidden; display: flow-root; }

/* 背景画像 繰り返し 画面サイズが1000pxまで、以下のスタイル適用 */
@media (max-width: 1000px) { #erea2 #profile_wrap { background-image: url("../../common/img/profile/prof_body_2.png"); background-size: 100% auto; }}

#erea2 #profile_wrap ul { width: 86%; margin: 0 auto; padding: clamp(10px, 5vw, 20px) 0 clamp(20px, 5vw, 30px); list-style: none; display: flex; font-size: clamp(11px, 2vw, 13px); line-height: 1.5; }
#erea2 #profile_wrap ul li:first-child { width: 30%; background-color: #00405c; padding: clamp(20px, 5vw, 30px); line-height: 1.6; }
#erea2 #profile_wrap ul li:first-child picture { display: block; line-height: 0; margin-bottom: 10px; }
#erea2 #profile_wrap ul li:last-child { width: 70%; background-color: #003a54; padding: clamp(20px, 5vw, 30px); }
#erea2 #profile_wrap ul li:last-child p a { display: inline-block; width: auto; vertical-align: bottom; }
#erea2 .prof_img { width: 100%; max-width: 200px; margin: 0 auto clamp(5px, 5vw, 10px); display: block; }
#erea2 .bunner { display: block; width: 100%; max-width: 200px; margin: 0; }

/* プロフィール表示 画面サイズが768pxまで、以下のスタイル適用 */
@media (max-width: 768px) {
#erea2 #profile_wrap { background-image: url("../../common/img/profile/prof_body_2.png"); background-size: 100% auto; }
#erea2 #profile_wrap ul { width: 86%; margin: 0 auto; padding: clamp(10px, 5vw, 20px) 0 clamp(20px, 5vw, 30px); list-style: none; display: block; font-size: clamp(11px, 2vw, 13px); line-height: 1.5; }
#erea2 #profile_wrap ul li:first-child { width: 84%; padding: 8%; }
#erea2 #profile_wrap ul li:last-child { width: 84%; padding: 8%; }
#erea2 .prof_img { max-width: 140px; }
#erea2 .bunner { max-width: 140px; }
}

#erea2 .footer_title { width: 100%; margin: 0; padding: 0; display: block; vertical-align: bottom; }

/* erea3基本設定 */
#erea3 { width: 100%; margin: 0; padding: 0; background-image: url("../../common/img/exh/exh_bg_pc.png"); }

/* 背景画像 繰り返し 画面サイズが560pxまで、以下のスタイル適用 */
@media (max-width: 560px) { #erea3 { background-image: url("../../common/img/exh/exh_bg_sp.png"); }}

#erea3 .exh_text { width: 90%; max-width: 870px; margin: 0 auto; padding: 0; }
#erea3 .exh_text .exh_label { width: 20%; max-width: 140px; min-width: 110px; margin: 0 auto; padding: clamp(30px, 5vw, 60px) 0 clamp(10px, 5vw, 25px); display: block; }
#erea3 .exh_text h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1; text-align: center; margin: 0 0 clamp(4px, 2vw, 8px) 0; padding: clamp(14px, 2vw, 18px) 0 0 0; background: linear-gradient(to bottom, #FFFFFF, #FFD700); -webkit-background-clip: text; background-clip: text; color: transparent; }
#erea3 .exh_text h2 { font-size: clamp(12px, 2vw, 16px); line-height: 1; text-align: center; font-weight: bold; background: linear-gradient(to bottom, #FFFFFF, #FFD700); -webkit-background-clip: text; background-clip: text; color: transparent; }
#erea3 .exh_text p { line-height: 1.6; }
#erea3 .p_01 { margin-top: clamp(30px, 4vw, 40px); }
#erea3 .p_02 { margin-bottom: clamp(20px, 4vw, 40px); }
#erea3 .cta_img { width: 90%; max-width: 460px; margin: 0 auto; padding: 0; }
#erea3 center { padding: clamp(30px, 4vw, 50px) 0; display: block; }

#erea3 .concept_wrap { width: 90%; max-width: 870px; margin: clamp(5px, 5vw, 40px) auto 0; padding: clamp(0px, 5vw, 30px) 0; background-color: #002d48;}
#erea3 .concept_text { width: 92%; max-width: 870px; margin: 0 auto; padding: 0 0 clamp(8px, 2vw, 16px); line-height: 1.6; }
#erea3 .concept_text h1 { font-size: clamp(20px, 3vw, 28px); line-height: 1; text-align: center; margin: 0 0 clamp(4px, 2vw, 8px) 0; padding: 0; }
#erea3 .concept_text h2 { font-size: clamp(12px, 2vw, 14px); line-height: 1; text-align: center; font-weight: bold; margin-bottom: clamp(22px, 4vw, 38px); }
#erea3 .concept_text .attend_text { width: 86%; margin: 0 auto; padding: clamp(0px, 5vw, 10px) clamp(20px, 5vw, 36px); background-color: #003859; }

#erea3 .flow_wrap { width: 90%; max-width: 870px; margin: clamp(5px, 5vw, 40px) auto 0; padding: clamp(0px, 5vw, 30px) 0; background-color: #002d48;}
#erea3 .flow_text { width: 92%; max-width: 870px; margin: 0 auto; padding: 0 0 clamp(8px, 2vw, 16px); line-height: 1.6; }
#erea3 .flow_text h1 { font-size: clamp(20px, 3vw, 28px); line-height: 1; text-align: center; margin: 0 0 clamp(4px, 2vw, 8px) 0; padding: 0; }
#erea3 .flow_text h2 { font-size: clamp(12px, 2vw, 14px); line-height: 1; text-align: center; font-weight: bold; margin-bottom: clamp(22px, 4vw, 38px); }
#erea3 .flow_text .attend_text { width: 86%; margin: 0 auto; padding: clamp(10px, 5vw, 16px) clamp(20px, 5vw, 36px); background-color: #003859; }
#erea3 .edit_flow { width: 96%; max-width: 800px; margin: clamp(40px, 4vw, 50px) auto 0; padding: 0; display: block; }

/* 制作フロー 画面サイズが680pxまで、以下のスタイル適用 */
@media (max-width: 680px) {#erea3 .edit_flow { width: 90%; max-width: 562px; }}

#erea3 .price_wrap { width: 90%; max-width: 870px; margin: clamp(5px, 5vw, 40px) auto 0; padding: clamp(0px, 5vw, 30px) 0; background-color: #002d48;}
#erea3 .price_text { width: 92%; max-width: 870px; margin: 0 auto; padding: 0 0 clamp(8px, 2vw, 16px); line-height: 1.6; }
#erea3 .price_text h1 { font-size: clamp(20px, 3vw, 28px); line-height: 1; text-align: center; margin: 0 0 clamp(4px, 2vw, 8px) 0; padding: 0; }
#erea3 .price_text h2 { font-size: clamp(12px, 2vw, 14px); line-height: 1; text-align: center; font-weight: bold; margin-bottom: clamp(22px, 4vw, 38px); }
#erea3 .price_text .attend_text { width: 86%; margin: 0 auto; padding: clamp(0px, 5vw, 10px) clamp(20px, 5vw, 36px); background-color: #003859; }
#erea3 .price_text .option_text { width: 86%; margin: clamp(15px, 5vw, 20px) auto 0; padding: clamp(0px, 5vw, 10px) clamp(20px, 5vw, 36px); background-color: #003859; }

#erea3 ul { width: 100%; margin: 0 auto; padding: 0; list-style: none; display: flex;  }
#erea3 ul li:first-child { width: 47.5%; margin-right: 2.5%; padding: clamp(5px, 5vw, 10px) 0 0; }
#erea3 ul li:last-child { width: 47.5%; margin-left: 2.5%; padding: clamp(5px, 5vw, 10px) 0 0; }
#erea3 .option_img { width: 100%; margin: 0 auto; display: block; }
#erea3 .option_p { line-height: 0; }

/* プロフィール表示 画面サイズが768pxまで、以下のスタイル適用 */
@media (max-width: 768px) {
#erea3 ul { display: block; }
#erea3 ul li:first-child { width: 100%; margin: 0; padding: 0; }
#erea3 ul li:last-child { width: 100%; margin: 0; padding: clamp(5px, 5vw, 10px) 0; }
}

/* erea4基本設定 */
#erea4 { width: 100%; margin: 0; padding: 0; background-color: #002d48; }
#erea4 .dcf_title { width: 90%; max-width: 870px; margin: 0 auto; padding: 0; }
#erea4 .dcf_title .exh_label { width: 40%; max-width: 300px; min-width: 220px; margin: 0 auto; padding: clamp(30px, 5vw, 60px) 0 clamp(10px, 5vw, 25px); display: block; }
#erea4 .dcf_title h1 { font-size: clamp(20px, 3vw, 30px); line-height: 1; text-align: center; margin: 0 0 clamp(4px, 2vw, 8px) 0; padding: clamp(14px, 2vw, 18px) 0 0 0; }
#erea4 .dcf_title p { line-height: 1.6; text-align: center; }

#erea4 .dcf_text { width: 92%; max-width: 870px; margin: 0 auto; padding: 0 0 clamp(8px, 2vw, 16px); }
#erea4 .dcf_text h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1; text-align: center; margin: 0 0 clamp(4px, 2vw, 8px) 0; padding: 0; background: linear-gradient(to bottom, #FFFFFF, #FFD700); -webkit-background-clip: text; background-clip: text; color: transparent; }
#erea4 .dcf_text h2 { font-size: clamp(12px, 2vw, 16px); line-height: 1; text-align: center; font-weight: bold; background: linear-gradient(to bottom, #FFFFFF, #FFD700); -webkit-background-clip: text; background-clip: text; color: transparent; }
#erea4 .dcf_text p { line-height: 1.6; }
#erea4 .dcf_attend { width: 90%; max-width: 870px; margin: clamp(5px, 5vw, 40px) auto; padding: clamp(0px, 5vw, 20px) 0 clamp(5px, 5vw, 25px); background-color: #002236;}
#erea4 .dcf_attend strong { width: 92%; margin: 0 auto clamp(4px, 2vw, 8px); padding: 0; display: block; line-height: 1.6; }
#erea4 .dcf_attend p { width: 92%; margin: 0 auto; padding: 0; display: block; line-height: 1.6; }
#erea4 .p_01 { margin: clamp(30px, 4vw, 40px) 0; }
#erea4 .p_02 { margin-top: clamp(30px, 4vw, 40px); }
#erea4 .cta_img { width: 90%; max-width: 460px; margin: 0 auto; padding: 0; }
#erea4 center { padding: clamp(20px, 4vw, 40px) 0 0; display: block; }

#erea4 ul { width: 90%; max-width: 870px; margin: 0 auto; padding: 0 0 clamp(20px, 5vw, 30px); list-style: none; display: flex;  }
#erea4 ul li:first-child { width: 47.5%; margin-right: 2.5%; background-color: #002236; padding: clamp(10px, 5vw, 20px) clamp(20px, 5vw, 30px); }
#erea4 ul li:last-child { width: 47.5%; margin-left: 2.5%; background-color: #002236; padding: clamp(10px, 5vw, 20px) clamp(20px, 5vw, 30px); }
#erea4 .service_img { width: 100%; max-width: 350px; margin: 0 auto clamp(5px, 5vw, 10px); display: block; }
#erea4 ul h1 { font-size: clamp(22px, 3vw, 30px); line-height: 1; text-align: center; margin: 0 0 clamp(4px, 2vw, 8px) 0; padding: 0; background: linear-gradient(to bottom, #FFFFFF, #FFD700); -webkit-background-clip: text; background-clip: text; color: transparent; }
#erea4 ul h2 { font-size: clamp(16px, 2vw, 18px); line-height: 1; text-align: center; font-weight: bold; background: linear-gradient(to bottom, #FFFFFF, #FFD700); -webkit-background-clip: text; background-clip: text; color: transparent; }
#erea4 ul p { font-size: clamp(12px, 2vw, 14px); line-height: 1.6; }

/* プロフィール表示 画面サイズが768pxまで、以下のスタイル適用 */
@media (max-width: 768px) {
#erea4 ul { width: 90%; max-width: 870px; margin: 0 auto; padding: 0 0 clamp(20px, 5vw, 30px); display: block; font-size: clamp(11px, 2vw, 13px); line-height: 1.5; }
#erea4 ul li:first-child { width: 90%; margin: 0; padding: clamp(10px, 5vw, 20px) 5%; }
#erea4 ul li:last-child { width: 90%; margin: clamp(15px, 5vw, 25px) 0 0 0 ; padding: clamp(10px, 5vw, 20px) 5%; }
#erea4 .service_img { width: 100%; max-width: none; margin: 0 auto clamp(5px, 5vw, 10px); display: block; }
}


/* swap_img設定 */
.gallery_wrap { width: 90%; max-width: 870px; margin: 0 auto; padding: clamp(5px, 5vw, 40px) 0; background-color: #002236;}
.swap_erea { width: 92%; display: grid; column-gap: 2em; grid-template-columns: repeat(4, auto); margin: 0 auto; padding: clamp(8px, 3vw, 28px) 0 0; }
.view_img { width: 92%; margin: 0 auto; padding: 0; display: block;}
.img_swap { width: 100%; padding: 0; margin: 0; line-height: 0; }
.attend_text { font-size: clamp(12px, 2vw, 16px); line-height: 1.6; width: 92%; margin: 0 auto; padding: clamp(5px, 5vw, 20px) 0 0; display: block;}
.gallery_wrap h1 { font-size: clamp(20px, 3vw, 28px); line-height: 1; text-align: center; margin: 0 0 clamp(4px, 2vw, 8px) 0; padding: 0; }
.gallery_wrap h2 { font-size: clamp(12px, 2vw, 14px); line-height: 1; text-align: center; font-weight: bold; margin-bottom: clamp(22px, 4vw, 38px); }


/* 画面サイズ1080px以下 */
@media screen and (max-width: 1080px) {
.swap_erea { column-gap: 1em; grid-template-columns: repeat(4, auto); }
}

footer { width: 100%; margin: 0; padding: 0; background-color: #002033; text-align: center; }
footer .footer_logo { width: 100%; max-width: 192px; min-width: 192px; display: block; margin: 0 auto; padding: clamp(36px, 2vw, 44px) 0 clamp(20px, 2vw, 30px);}
footer img { width: 100%; max-width: 195px; min-width: 195px;}
footer .sns_erea { padding: clamp(16px, 2vw, 14px) 0 clamp(14px, 2vw, 16px); }
footer .sns_erea img { width: 5%; max-width: 26px; min-width: 26px;}
footer .sns_erea .img_second { margin: 0 clamp(26px, 2vw, 36px); }
footer .terms_link {padding: clamp(20px, 2vw, 24px) 0 clamp(20px, 2vw, 28px);}
footer .copyright {padding: 0 0 clamp(36px, 2vw, 44px); font-size: clamp(10px, 2vw, 12px); line-height:2.2;}