@charset "utf-8";
/*--------------------------------------
	copyright :　webcal
--------------------------------------*/

@import url(normalize.css);
@import url(../_plugin/fontawesome/css/all.min.css);
@import url(common_parts.css);
@import url(common.css);


/*　index　==============================*/


/* mv ----------*/
	#mv { position: relative; height: 900px; }
	#mv img { position: absolute; top: 50%; left: 50%; max-width: 150%; transform: translate(-50%, -50%); }
	#mv .mv_inner { position: fixed; top: 0; left: 0; width: 100%; height: 450px; }
	#mv .mv_c_copy { position: absolute; top: 50%; left: 50%; width: 105%; padding: 3rem 2rem; background: rgba(141, 39, 48, 0.6); transform: translate(-50%, -50%) skew(5deg, -6deg); }
	#mv .mv_c_copy h2 { font-size: 2.6rem; color: #fff; text-align: center; text-shadow: 5px 3px 3px rgba(255, 255, 255, 0.3); line-height: 1.3; transform: skew( -6deg, 5deg ); }
@media screen and ( min-width: 769px ) {
	#mv img { top: 0; left: 50%; max-width: inherit; transform: translateX(-50%); }
	#mv .mv_inner { height: 100%; }
	#mv .img_wrap::before { position: absolute; top: 0; left: 0; content: ""; display: block; width: 30%; background: rgba(0, 0, 0, 0.7); }
	#mv .mv_c_copy { padding: 10rem 2rem; }
	#mv .mv_c_copy h2 { font-size: 3.5rem; }
}


/* main  ----------*/

/* main #concept ----------*/
#main section#concept { margin: 3rem 0; }
#concept .sec_inner{ margin-bottom: 10rem; }
#concept .sec_item { position: relative; padding-bottom: 5rem; }
#concept .item_box h3 { font-size: 2rem; }
#concept .text_box { position: absolute; bottom: -3rem; right: 0; padding: 2rem; background: rgba(255, 255, 255, 0.7); border-radius: 7px; box-shadow: 7px 5px 5px rgb(0 0 0 / 30%); }
@media screen and ( min-width: 769px ) {
	#concept .sec_inner{ margin-bottom: 13rem; }
	#concept .img_box { width: 70%; margin-left: -3rem; }
	#concept .text_box { width: 60%; padding: 5rem; }
}


/* main #recommend ----------*/
#recommend .sec_inner{ margin-bottom: 10rem; }
#recommend .sec_item { position: relative; padding-bottom: 5rem; }
#recommend .item_box h3 { font-size: 2rem; }
#recommend .text_box { position: absolute; bottom: -3rem; left: 0; padding: 2rem; background: rgba(255, 255, 255, 0.8); border-radius: 7px; box-shadow: 7px 5px 5px rgb(0 0 0 / 30%); }
@media screen and ( min-width: 769px ) {
	#recommend .sec_inner{ margin-bottom: 13rem; }
	#recommend .sec_item { display: flex; justify-content: flex-end; }
	#recommend .img_box { width: 70%; margin-right: -3rem; }
	#recommend .text_box { width: 60%; padding: 5rem; }
}

/* main #info_bg ----------*/
#main #info_bg { padding: 0; }
#info_bg .sec_inner { position: relative; height: 150px; background: url(../_img/index/bg.jpg); background-attachment: fixed; background-size: cover; }
#info_bg h2 { position: absolute; top: 50%; left: 50%; width: 100%; padding: 2rem 0; color: #fff; text-align: center; text-shadow: 5px 3px 3px rgb(255 255 255 / 30%); background: rgb(141 39 48 / 60%); transform: translate(-50%, -50%); }
@media screen and ( min-width: 769px ) {
	#info_bg .sec_inner { height: 250px; }
	#info_bg h2 { padding: 3rem 0; }
}

/* main #menu ----------*/
#menu ul li { position: relative; }
#menu ul li span { position: absolute; top: 0; left: 0; display: block; width: 1.5em; height: 1.5em; color: #fff; text-align: center; line-height: 1.5; background: #8d2730; }
#menu ul li p { margin: 0; text-align: center; }

/* main #gallery ----------*/
#gallery .gallery_img { display: flex; flex-wrap: wrap; }
#gallery .item_box { position: relative; width: calc( (99.999% - 2rem) / 2 ); overflow: hidden; margin-bottom: 2rem; transition: .7s; }
#gallery .item_box:not(:nth-of-type(2n)) { margin-right: 2rem; }
@media screen and ( min-width: 769px ) {
	#gallery .item_box { position: relative; width: calc( (99.999% - 4rem) / 3 ); overflow: hidden; margin-bottom: 2rem; transition: .7s; }
	#gallery .item_box:not(:nth-of-type(2n)) { margin-right: 0; }
	#gallery .item_box:not(:nth-of-type(3n)) { margin-right: 2rem; }
	#gallery .item_box:hover img { position: absolute; height: auto; max-width: 115%; transition: 1s; }
	#gallery .read_btn { margin-top: 1rem; }
}


/* main #news ----------*/
#news h3 { position: relative; padding-left: 1em; line-height: 1.2; }
#news h3::before { position: absolute; top: 50%; left: 0; content: ""; width: 0; height: 0; border-left: 10px solid #8d2730; border-top: 10px solid transparent; border-bottom: 10px solid transparent; transform: translateY(-50%); }
#news ul li { padding: 0.5rem 0; border-bottom: 1px solid #8d2730; }
#news ul li a { color: inherit; }
#news .news_list { align-items: center; }
#news .news_list p { margin: 0 5rem 0 0; }
#news .news_list .n_date { color: #000; }
#news .news_list .n_cat { margin-right: 5rem; padding: 0.2rem 0.5rem; font-size: 1.4rem; color: #fff; background: #8d2730; }
