@charset "utf-8";

ib {display: inline-block;}

.row-ar {display: flex; flex-wrap: wrap;}
.column-12 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
.column-6 {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
.column-4 {-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;}
.column-3 {-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}

@media (max-width: 769px) {
	.column-6 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.column-3 {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
}


.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mt60 {margin-top: 60px;}

.tcenter {text-align: center;}
.left {text-align: left;}
.tright {text-align: right;}


#myoukakuji-main .cont {width: 100%; max-width: 1030px; padding: 0 15px;}

@media (max-width: 480px) {
	#myoukakuji-main .cont {width: 90%; padding: 0;}
}


/* ------------------------------------------------------------------------------------
 ナビゲーション
------------------------------------------------------------------------------------ */
header.header_top {display: none;}
.navigation {position: absolute; top: -1px; left: 60px; border: solid 1px #fff; padding: 20px; z-index: 99; width: 260px;}
.broad-outline .navigation ul {position: initial;}
.broad-outline .navigation ul li {color: #fff; font-size: 18px; font-weight: 500; position: relative;}
.broad-outline .navigation ul li a {display: block; color: #fff; font-size: 18px; font-weight: 500; padding: 0 5px; transition:all .4s;}
.broad-outline .navigation ul li.nav-stay::before {content: ''; position: absolute; top: 12px; right: 20px; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
.broad-outline .navigation li.nav-stay ul {position: absolute; left: 100%; top: -10px; z-index: 4; padding: 20px 0; background-color: rgba( 0, 0, 0, .2); width: 230px; visibility: hidden; opacity: 0; transition: all .4s;}
.broad-outline .navigation li.nav-stay:hover > ul, .broad-outline .navigation li.nav-stay:active > ul {visibility: visible; opacity: 1;}
.broad-outline .navigation li a:hover, .broad-outline .navigation li a:active, .broad-outline .navigation li.nav-stay ul li a:hover, .broad-outline .navigation li.nav-stay ul li a:active {background-color: rgba( 0, 0, 0, .3);}
.broad-outline .navigation ul li a p {padding-left: 18px; transition: all 1s;}
.broad-outline .navigation ul li a:hover p {padding-left: 36px; transition: 0.5s all;}
.broad-outline .navigation .daiichikaisou li a p {padding: 0;}
.broad-outline .navigation .daiichikaisou li a:hover p {padding-left: 16px;}

#myoukakuji-main header nav ul:nth-child(1) li:nth-child(1), #myoukakuji-main header nav ul:nth-child(2) li:nth-child(1), #myoukakuji-main header nav ul:nth-child(3) li:nth-child(1), #myoukakuji-main header nav ul:nth-child(4) li:nth-child(1) {font-size: 1.8em;}
#myoukakuji-main header nav ul li a {font-size: 1.4em; font-weight: 500;}
#myoukakuji-main header nav ul:nth-child(2), #myoukakuji-main header nav ul:nth-child(3), #myoukakuji-main header nav ul:nth-child(4) {padding: 12px 0 0 0;}
#myoukakuji-main header nav ul li.sp-midashi {border-top: none; color: #E9DCBC; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-weight: 700; padding: 0 0 6px 45px; width: 100%; border-bottom: 1px solid #FFFFFF;}

@media (max-width: 769px) {
	header.header_top {display: block; z-index: 999;}
	.navigation {display: none;}
}

@media (max-width: 480px) {
}


/* ------------------------------------------------------------------------------------
 メインスライダー
------------------------------------------------------------------------------------ */
.broad-outline .top_main {position: relative;}
.nanatsuji-logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); z-index: 2;}
.nanatsuji-logo img {width: 450px; height: 90px;}

.broad-outline .slider_2 ul li {height: 600px; background-size: cover; background-repeat: no-repeat; background-position: center;}
.broad-outline .slider_2 ul li:nth-child(1) {background-image: url("../img/top_main01.webp");}
.broad-outline .slider_2 ul li:nth-child(2) {background-image: url("../img/top_main02.webp");}
.broad-outline .slider_2 ul li:nth-child(3) {background-image: url("../img/top_main03.webp");}
.broad-outline .slider_2 ul li:nth-child(4) {background-image: url("../img/top_main04.webp");}
.broad-outline .slider_2 ul li::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: rgba(0, 0, 0, 0.3);}

.broad-outline .top_main ul li.top_banner01 {position: fixed; width: initial; right: 20px; bottom: initial; top: 20px; z-index: 10; margin: 0;}
.broad-outline .top_main ul li.top_banner02 {position: fixed; width: initial; right: 20px; bottom: initial; top: 140px; z-index: 10;}
.broad-outline .top_main ul li.top_banner01 a img {width: 100px; margin: 0; transition: all 0.5s ease;}
.broad-outline .top_main ul li.top_banner02 a img {width: 100px; margin: 0; transition: all 0.5s ease;}

.broad-outline .top_main ul li.top_banner01 a, .broad-outline .top_main ul li.top_banner02 a {position: relative; display: block;}
.broad-outline .top_main ul li.top_banner01 a:hover img, .broad-outline .top_main ul li.top_banner02 a:hover img {transform: rotateY(-360deg);}



@media (max-width: 769px) {
	.broad-outline .top_main ul li.top_banner01 {top: 90px; left: 20px; right: initial;}
	.broad-outline .top_main ul li.top_banner02 {top: 210px; left: 20px; right: initial;}
	.broad-outline .slider_2 ul li {height: 440px;}
	.nanatsuji-logo img {width: 300px; height: 60px;}
}

@media (max-width: 480px) {
	.broad-outline .cont_top {display: block;}
	.broad-outline .slider_2 ul li {height: 330px;}
	.nanatsuji-logo {top: initial; left: initial; bottom: 10px; right: 0; transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0);}
	.nanatsuji-logo img {width: 225px; height: 45px;}
}


/* コンセプト
============================================== */
.broad-outline .top_head {position: relative; margin: 20px 0;}
.broad-outline .top_head ul {position: initial; padding: 140px 0;}
.broad-outline .top_head ul li:nth-child(1) {margin: 0; top: 0; left: 40px;}
.broad-outline .top_head ul li:nth-child(3) {position: absolute; width: 480px; right: 10px; bottom: 0;}

@media (max-width: 769px) {
	.broad-outline .top_head ul li:nth-child(2) {font-size: 2.2rem; padding: 0 20px;}
}

@media (max-width: 480px) {
	.broad-outline .top_head {overflow: hidden;}
	.broad-outline .top_head ul {padding: 70px 0;}
	.broad-outline .top_head ul li:nth-child(1) {width: 200px; top: -15px; left: -10px; display: block;}
	.broad-outline .top_head ul li:nth-child(2) {font-size: 1.8rem; margin: 20px 0;}
	.broad-outline .top_head ul li:nth-child(3) {width: 260px; right: -80px;}
}


/* 七辻紹介
============================================== */
.broad-outline .top_menu.earth-bg {background-color: #e8eef7;}


/* 七辻紹介
============================================== */
.broad-outline .top_menu {display: block; background-color: #f3f2ee; padding: 80px 0;}
.broad-outline .top_menu .row-ar {width: 100%;}
.broad-outline .top_menu .column-12 {margin-bottom: 4rem;}
.broad-outline .top_menu h2 {font-size: 3rem; font-weight: 500; text-align: center; display: flex; justify-content: center; align-items: center;}
.broad-outline .top_menu h2::before, .broad-outline .top_menu h2::after {content: ''; width: 40px; height: 2px; background-color: #000;}
.broad-outline .top_menu h2::before {margin-right: 20px;}
.broad-outline .top_menu h2::after {margin-left: 20px;}
.broad-outline .top_menu p {font-size: 2rem; font-weight: 500; text-align: center;}
.broad-outline .top_menu .column-3 {padding: 0 5px; position: relative;}
.broad-outline .top_menu a {display: block; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; overflow: hidden; transition: all 0.4s ease-out;}
.broad-outline .top_menu .detail-img {width: 100%; overflow: hidden;}
.broad-outline .top_menu .detail-img img {transition: transform 0.4s ease; backface-visibility: hidden;}
.broad-outline .top_menu .detail-title {width: 100%; background-color: #fff; padding: 20px; height: 84px;}
.broad-outline .top_menu .detail-title p {font-size: 1.8rem; line-height: 1.2; transition: 0.4s;}
.broad-outline .top_menu p.detail-triangle {position: absolute; bottom: 5px; right: 15px; font-size: small; color: #555;  transition: all 0.4s;}
.broad-outline .top_menu a:hover {box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.broad-outline .top_menu a:hover .detail-img img {transform: scale(1.2, 1.2);}
.broad-outline .top_menu a:hover .detail-title p {color: #aaa;}
.broad-outline .top_menu a:hover p.detail-triangle {transform: translate(5px, 0);}

@media (max-width: 769px) {
	.broad-outline .top_menu .column-3 {margin: 0 0 10px;}
	.broad-outline .top_menu h2 {font-size: 2.2rem;}
	.broad-outline .top_menu h2::before, .broad-outline .top_menu h2::after {width: 25px;}
	.broad-outline .top_menu p {font-size: 1.6rem;}
	.broad-outline .top_menu .detail-title {padding: 15px; height: 70px;}
	.broad-outline .top_menu .detail-title p {font-size: 1.6rem;}
}


/* 妙覚寺紹介
============================================== */
.broad-outline .myoukakuji-menu {display: block; padding: 80px 0; background: url("../img/myoukakuji-menu-bg.webp") no-repeat fixed #fff; background-size: cover;}
.broad-outline .myoukakuji-menu .column-12 {margin-bottom: 4rem;}
.broad-outline .myoukakuji-menu h2 {font-size: 3rem; font-weight: 500; color: #fff; text-align: center; display: flex; justify-content: center; align-items: center;}
.broad-outline .myoukakuji-menu p {font-size: 2rem; font-weight: 500; color: #fff; text-align: center;}
.broad-outline .myoukakuji-menu .column-6 {position: relative;}
.broad-outline .myoukakuji-menu a {display: block; overflow: hidden; width: 100%; transition: all 0.4s ease-out;}
.broad-outline .myoukakuji-menu .detail-img {width: 100%; overflow: hidden;}
.broad-outline .myoukakuji-menu .detail-img img {transition: transform 0.4s ease; backface-visibility: hidden;}
.broad-outline .myoukakuji-menu .detail-title {position: absolute; top: 10px; left: 10px;}
.broad-outline .myoukakuji-menu .detail-title p {width: 120px; font-size: 1.8rem; color: #fff; font-weight: 500; line-height: 1.2; background-color: #4b207a; padding: 5px 15px; transition: 0.4s;}
.broad-outline .myoukakuji-menu a:hover .detail-img img {transform: scale(1.2, 1.2);}
.broad-outline .myoukakuji-menu a:hover .detail-title p {background-color: #fff; color: #4b207a;}

@media (max-width: 769px) {
	.broad-outline .myoukakuji-menu h2 {font-size: 2.2rem;}
	.broad-outline .myoukakuji-menu p {font-size: 1.6rem;}
	.broad-outline .myoukakuji-menu .detail-title p {font-size: 1.6rem; width: 110px;}
}



/* アクセス・問い合わせ
============================================== */

@media (max-width: 769px) {
	#myoukakuji-main .top_foot ul li:nth-child(2) {width: 100%; flex-wrap: wrap; justify-content: center;}
	#myoukakuji-main .top_foot ul li:nth-child(2) a, #myoukakuji-main .top_foot ul li:nth-child(3) a {-ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%;}
	#myoukakuji-main .top_foot ul li:nth-child(2) a p, #myoukakuji-main .top_foot ul li:nth-child(3) a p {width: 100%;}
}


/* フッター
============================================== */
#myoukakuji-main footer .footer_myo {width: 100%; max-width: 850px; padding: 0 10px;}
#myoukakuji-main footer .footer_sp {display: none;}
#myoukakuji-main footer .footer_myo div:nth-child(1) ul:nth-child(1) {width: 100%; max-width: 170px;}
#myoukakuji-main footer .footer_myo div:nth-child(2) ul:nth-child(1) {width: 100%; max-width: 260px;}
#myoukakuji-main footer .footer_myo div:nth-child(3) ul:nth-child(1) {width: 100%; max-width: 260px;}

@media (max-width: 1024px){
	#myoukakuji-main footer .footer_sp {display: none;}
	#myoukakuji-main footer .footer_myo div:nth-child(1) {padding-right: 15px;}
	#myoukakuji-main footer .footer_myo div:nth-child(2) {padding: 0 15px 0;}
	#myoukakuji-main footer .footer_myo div:nth-child(3) {padding: 0 15px 0;}
}

@media (max-width: 769px) {
	#myoukakuji-main footer .footer_sp {display: block;}
}