@charset "utf-8";
/* ===================================================

◇　2021_Winter CSS　◇

====================================================== */
#page_area { font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif }
#page_area img { margin: 0; }
[class^="br_"] { display: none; }
[id^="sec"] > h3 { position: relative; box-shadow: 0 3px 8px rgba(0,0,0,0.4); }
.f_box { display: flex; justify-content: space-between; padding: 40px 40px 60px; font-family: "Hiragino Kaku GothicPro"; }
.f_box h4 { font-size: 17px; font-weight: bold; color: #0071b8; line-height: 1.9; }
.f_box h4 > span { padding: 5px 12px; font-size: 18px; background: #0071b8; color: #fff; }
.f_box h4 .yellow { color: #ffff00; }
.f_box .txt p { margin-top: 20px; line-height: 1.5; }
.summary { width: 508px; margin-top: 15px; padding: 20px 30px; box-sizing: border-box; border-radius: 10px; background: rgba(255,255,255,0.8); }
.summary:not(.ico) dl { display: table; }
.summary:not(.ico) dl + dl { margin-top: 5px; }
.summary:not(.ico) dt, .summary:not(.ico) dd { display: table-cell; }
.summary:not(.ico) dt { width: 85px; padding-right: 10px; font-size: 14px; color: #c2986d; }
.summary:not(.ico) dt:before { content: '■'; }
.photo { padding-top: 30px; }
.photo .ill { position: relative; left: -62px; padding: 170px 0 94px; }
.photo .ill::before,.photo .ill::after { position: absolute; content: ''; display: block; }
.photo .ill::before { top: 0; right: -50px; width: 176px; height: 195px; background: url(../img/sec3_ill01.png)no-repeat center / cover; }
.photo .ill::after { right: -30px; bottom: 0; width: 150px; height: 162px; background: url(../img/sec3_ill03.png)no-repeat center /cover;}
.summary.ico > dl:not(.no_line) { padding: 10px 0 30px; background: url(../img/ico_line.png)repeat-x bottom left 7px; }
.summary.ico > dl > dt { display: flex; align-items: center; font-size: 18px; font-weight: bold; color: #7b4b40; line-height: 1.3; }
.summary.ico > dl > dt span { margin-right: 12px; }
.summary.ico > dl > dd { padding-left: 62px; }
.summary.ico dl dl,
.summary.ico .no_line { display: table; }
.summary.ico .no_line { margin-top: 20px; }
.summary.ico .no_line + .no_line { margin-top: 5px; }
.summary.ico dl dl + dl { margin-top: 5px; }
.summary.ico dl dl dt,.summary.ico dd,
.summary.ico .no_line dt,.summary.ico .no_line dd { display: table-cell; }
.summary.ico dl dl dt,
.summary.ico .no_line dt { width: 85px; padding-right: 10px; font-size: 14px; color: #c2986d; }
.summary.ico dl dl dt::before,
.summary.ico .no_line dt::before { content: '■'; }
.summary.ico .no_line dd { padding: 0; }
.summary .blue { display: block; margin-bottom: 5px; font-size: 16px; font-weight: bold; color: #0071b8; }

.note { width: 100%; box-sizing: border-box; font-size: 10px; color: #000; }

@media screen and (max-width: 1000px) {
	.br_1100 { display: block;}
	.f_box .txt { width: 66%; }
	.photo { width: 30%; margin-left: 4%; }
	.photo .ill { left: -6%; }
	.photo .ill img { width: 158px; height: 110px; }
	.photo .ill::before { top: 13px; right: -6%; width: 120px; height: 132px; }
	.photo .ill::after { right: -15%; bottom: -23%; }
	.summary { width: 100%; }
}
@media screen and (max-width: 600px) {
	.br_600 { display: block;}
	[id^="sec"] { overflow: hidden; }
	[id^="sec"] > h3 { width: 130%; margin-left: -14%; }
	.f_box { flex-direction: column; padding: 40px 3%; }
	.f_box .txt { order: 2; width: 100%; padding-top: 15px; }
	.f_box .txt p { margin-top: 15px; }
	.f_box .txt p br { display: none; }
	.photo { order: 1; position: relative; width: 100%; margin: 0; padding: 0; }
	.photo img { width: 100%; max-height: 300px; object-fit: cover; object-position: 0 31%; }
	.photo .ill { display: none; }
	.summary { padding: 20px 4%; }
	.summary.ico > dl:not(.no_line) { padding: 10px 0 26px; }
	.summary:not(.ico) dt,
	.summary.ico dl dl dt,
	.summary.ico .no_line dt { width: 70px; }
	.summary.ico > dl > dd { padding: 10px 0 0; }
}


/* #lead_col
------------------------------------------------------ */
#lead_col { position: relative; background: url(../img/bg2.png)no-repeat top center,url(../img/bg.gif); }
#lead_col .cnav { display: flex; position: relative; width: 900px; margin: 0 auto; z-index: 5; }
#lead_col .cnav li { width: 23.5%; margin: 0 25px 0 0; text-align: center; border-radius: 10px 10px 0 0; }
#lead_col .cnav li a { display: block; width: 200px; padding: 10px 0 8px; }
#lead_col .cnav li:nth-of-type(1) { background: #FFC7C2; }
#lead_col .cnav li:nth-of-type(2) { background: #0055a1; }
#lead_col .cnav li:nth-of-type(3) { background: #FFAF5E; }
#lead_col .cnav li:nth-of-type(4) { background: #29ABE2; padding: 10px 0 8px; }
#lead_col .cnav li:hover { opacity: 0.7; }
#lead_col .cnav li:nth-of-type(4):hover { opacity: 1; }

#sec_tit h3 { padding: 55px 0 0; text-align: center; box-shadow: none; }
#sec_tit h3 + p { position: relative; padding: 7px 0 25px; text-align: center; z-index: 2; }
#sec_tit h3 + p span { display: none; }
#sec_tit figure { position: absolute; z-index: 1;}
#sec_tit figure:nth-of-type(1) { left: 0; top: 0;}
#sec_tit figure:nth-of-type(2) { right: 0; top: 0;}
#sec_tit figure:nth-of-type(1) figcaption { position: absolute; top: 15px; left: 10px;}
#sec_tit figure:nth-of-type(2) figcaption { position: absolute; top: 15px; right: 10px;}

#sec_tit::after { clear: both; content: "."; display: block; height: 0; font-size: 0; visibility: hidden; }

@media screen and (max-width: 1000px) {
	#lead_col { background-size: contain; }
	#lead_col .cnav { height: auto; padding: 0 2%; }
	
	#sec_tit figure { width: 25%;}
	#lead_col .cnav { width: 96%;}
	#lead_col .cnav li a { width: auto;}
	#lead_col .cnav li { width: 23.5%; margin: 0 2% 0 0;}
}
@media screen and (max-width: 768px) {
	#sec_tit h3 + p { padding: 7px 0 0; }
	#sec_tit h3 + p span span { padding: 0 0 10px; font-size: 16px; text-align: center;}
	#sec_tit figure { position: relative; float: left; width: 50%; }
}
@media screen and (max-width: 600px) {
	#sec_tit figcaption { width: 35%;}
	#lead_col .cnav { flex-wrap: wrap; }
	#lead_col .cnav li { width: 49%; margin: 0 2% 10px 0; background-size: cover !important; border-radius: 10px;}
	#lead_col .cnav li:nth-of-type(2n) { margin: 0 0 10px;}
}


/* #sec1
------------------------------------------------------ */
#sec1 { padding: 100px 0 70px; border-top: 5px solid #29a7de; box-sizing: border-box; background: url(../img/sec1_bg.jpg)no-repeat top #fff; }
#sec1 h3 { max-width: 92%; margin: 0 auto; text-align: center; }
#sec1 .lead p { margin-top: 25px; font-size: 17px; font-weight: bold; text-align: center; line-height: 1.7; font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif; }
#sec1 .lead p:last-of-type { display: block; width: 466px; max-width: 94%; margin: 30px auto 0; padding: 8px; font-size: 18px; color: #fff; background: #0071b8; border-radius: 20px; text-align: center; }
#sec1 ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 90px; padding: 0 55px; box-sizing: border-box; }
#sec1 li { position: relative; max-width: 48%; border-radius: 25px; margin-top: 110px; }
#sec1 li > img { margin: 0; border: 4px solid #fff; border-radius: 25px; }
#sec1 li > p { position: absolute; z-index: 1; }
#sec1 li > p:not([class]) { width: 100%; bottom: -18px; font-family: 筑紫A丸ゴシック, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif; font-weight: bold; text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff; font-size: 27px; text-align: center; line-height: 1.5; letter-spacing: 2px; font-feature-settings: "palt";}
#sec1 li > p:not([class]) span { display: block; font-size: 20px; }
#sec1 li .label { top: 30px; right: -20px; }
#sec1 li .label img { margin: 0; box-shadow: 5px 5px 3px rgba(0,0,0,0.4); }
#sec1 li .ico { left: -30px; top: -30px; }
#sec1 li:nth-of-type(1),
#sec1 li:nth-of-type(2) { margin: 0; }
#sec1 li:nth-of-type(2) > p:not([class]),
#sec1 li:nth-of-type(6) > p:not([class]) { line-height: 1.05; bottom: -35px; }
#sec1 li:nth-of-type(4) > p:not([class]) { line-height: 1.2; bottom: -38px; }
#sec1 li:nth-of-type(1) { box-shadow: 0 0 18px #be272d, 0 0 18px #be272d; color: #be272d;}
#sec1 li:nth-of-type(2) { box-shadow: 0 0 18px #00009d, 0 0 18px #00009d; color: #00009d;}
#sec1 li:nth-of-type(3) { box-shadow: 0 0 18px #006837, 0 0 18px #006837; color: #006837;}
#sec1 li:nth-of-type(4) { box-shadow: 0 0 18px #f8ad3b, 0 0 18px #f8ad3b; color: #f8ad3b;}
#sec1 li:nth-of-type(5) { box-shadow: 0 0 18px #000, 0 0 18px #000; color: #000;}
#sec1 li:nth-of-type(6) { box-shadow: 0 0 18px #fff, 0 0 18px #fff; color: #808080;}
#sec1 .reserve { padding: 110px 0 0; text-align: center; }
#sec1 .reserve a { display: inline-block; box-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff; border-radius: 7px; overflow: hidden; }
#sec1 .reserve a:hover { opacity: 0.7; }
#sec1 .note { padding: 60px 100px 0 0; text-align: right; }

@media screen and (max-width: 1000px) {
	#sec1 { background-size: contain; }
	#sec1 ul { padding: 0 6%; }
	#sec1 li { margin-top: 60px; }
	#sec1 li > p:not([class]) { font-size: 20px; }
	#sec1 li > p:not([class]),
	#sec1 li:nth-of-type(2) > p:not([class]),
	#sec1 li:nth-of-type(6) > p:not([class]),
	#sec1 li:nth-of-type(4) > p:not([class]) { bottom: inherit; top: 110%; transform: translateY(-110%); letter-spacing: 0px; }
	#sec1 li > p:not([class]) span { font-size: 15px; }
	#sec1 li .label { height: 32px; top: 16px; right: -10px; }
	#sec1 li .label img { width: 100%; height: 32px; object-fit: cover; }
	#sec1 li .ico { width: 30%; }
	#sec1 .reserve { padding: 60px 0 0; }
}
@media screen and (max-width: 600px) {
	#sec1 { padding: 50px 0 40px; }
	#sec1 .lead { padding: 0 3%; }
	#sec1 .lead h3 + p { margin-top: 20px; }
	#sec1 .lead p { margin-top: 15px; font-size: 15px; text-align: left; }
	#sec1 .lead p br { display: none; }
	#sec1 ul { display: block; margin-top: 80px; }
	#sec1 li,
	#sec1 li > img { max-width: 413px; width: 100%; box-sizing: border-box; }
	#sec1 li:nth-of-type(1) { margin: 0 auto; }
	#sec1 li:nth-of-type(2),
	#sec1 li + li { margin: 50px auto 0; }
	#sec1 li:nth-of-type(3),
	#sec1 li:nth-of-type(5) { margin: 70px auto 0; }
	#sec1 li .ico { left: -3%; top: -5%; }
	#sec1 .reserve { padding: 60px 3% 0; }
	#sec1 .note { padding: 30px 3% 0; font-size: 13px; }
}
@media screen and (max-width: 400px) {
	#sec1 .lead p:last-of-type { font-size: 16px; }
}


/* #sec2
------------------------------------------------------ */
[id^="sec2_"] + [id^="sec2_"] { border-top: 2px solid #c6ccd0; }
[id^="sec2_"] .note { margin-top: 10px; }
#sec2_1 { background: url(../img/sec2_1bg.gif)no-repeat center / cover; }
#sec2_2 { background: url(../img/sec2_2bg.gif)no-repeat center / cover; }
#sec2_2 .photo { position: relative; }
#sec2_2 .ab { display: flex; align-items: center; justify-content: center;
	position: absolute; z-index: 1; left: -40px; top: -10px; border-radius: 50%; border: 3px solid #0060b0;
	width: 80px; height: 80px; text-align: center; font-size: 14px; font-weight: bold; line-height: 1.3; box-sizing: border-box; color: #0060b0; background: #fff;}


@media screen and (max-width: 600px) {
	[id^="sec2_"] .note { position: absolute; bottom: 0; left: 0; margin: 0; padding: 10px; font-size: 13px; color: #fff; }
	#sec2_2 .ab { left: -2%; top: -20px; }
}


/* #sec3
------------------------------------------------------ */
[id^="sec3_"] .note { margin-top: 10px; }
#sec3_1 { background: url(../img/sec3_1bg.gif)no-repeat center / cover; }

@media screen and (max-width: 600px) {
	[id^="sec3_"] .note { position: absolute; bottom: 0; left: 0; margin: 0; padding: 10px; font-size: 13px; color: #fff; text-shadow: 0 0 5px #4e3009, 0 0 5px #4e3009, 0 0 5px #4e3009; }
}


/* #sec4
------------------------------------------------------ */
[id^="sec4_"] + [id^="sec4_"] { border-top: 2px solid #b7b7b7; }
[id^="sec4_"] .note { margin-top: 10px; }
#sec4 { border-bottom: 5px solid #94add0; }
#sec4_1 { background: url(../img/sec2_1bg.gif)no-repeat center / cover; }
#sec4_2 { background: url(../img/sec2_2bg.gif)no-repeat center / cover; }
#sec4_3 { background: url(../img/sec3_1bg.gif)no-repeat center / cover; }

@media screen and (max-width: 600px) {
	[id^="sec4_"] .note { position: absolute; bottom: 0; left: 0; margin: 0; padding: 10px; font-size: 13px; color: #fff; text-shadow: 0 0 5px #4e3009, 0 0 5px #4e3009, 0 0 5px #4e3009; }
	#sec4_2 .note { color: #000; text-shadow: none;}
}