@charset "UTF-8";

/* ▼1032px以上の場合に適用（iPad Pro以上 ナビ・PC用）
--------------------------------------------------------------------- */
@media only screen and (min-width: 1033px) {

	#Navi_Wrap {
		display: none;
	}

	.Sp_Navi {
		display: none;
	}

}

/* ▼1032px以下の場合に適用（iPad Pro以下 ナビ・スマホ用）
---------------------------------------------------------------------- */
@media only screen and (max-width: 1032px) {

	.Sp_None {
		display: none;
	}

	/*---ナビ オーバーレイ画面---*/
	#g-nav{
		position:fixed;
		z-index: 999;
		top:0;
		width:100%;
		height: 100vh;
		opacity: 1;
		transition: all 0s;
		border-radius: 0;
	}

}

/* ▼820px以上の場合に適用
---------------------------------------------------------------------- */
@media only screen and (min-width: 821px) {

	.Sp_Cont {
		display: none;
	}

}

/* ▼820px以下の場合に適用（iPad Air以下 コンテンツ・スマホ用）
---------------------------------------------------------------------- */
@media only screen and (max-width: 820px) {

	body {
		font-family: "Noto Serif JP", serif;
		-webkit-text-size-adjust: none;
		font-size: 16px;
		color: #000;
		line-height: 1.6em;
		word-wrap:break-word;/* 英数字折り返し */
	}

	/* ==========================================================
	共通
	========================================================== */
	.row {
		width:90%;
		margin: 0 auto;
	}

	/*---縦書き---*/
	.vertical_box {
		text-align: right;
		height: auto;
	}

	.vertical {
		writing-mode: horizontal-tb;
		text-align: left;
		display: inline-block;
	}

	.vertical p {
		margin:0;
	}

	/*---レイアウト調整---*/
	.vertical .ml50 {
		margin-left: 0;
		margin-bottom: 28px;
		text-align: center;
	}

	.vertical .mr40 {
		margin-right: 0;
	}

	.vertical_box .height400 {
		height: auto;
	}

	.vertical_box .height500 {
		height: auto;
	}

	/*---ボタン（黒・横）---*/
	.btn_blk01 {
		display: block;
		width: 100%;
		max-width: 280px;
		font-size: 16px;
		color: #fff;
		text-align: center;
		text-decoration: none;
		background:url(../img/btn_blk01.png) no-repeat center;
		background-size: contain;
		padding: 14px 0;
	}

	.btn_blk01:hover {
		color: #fff;
		text-decoration: none;
		background:url(../img/btn_blk01_on.png) no-repeat center;
		background-size: contain;
	}

	/*---ボタン（黒・縦）---*/
	.btn_blk02 {
		display: block;
		width: 100%;
		max-width: 280px;
		font-size: 16px;
		color: #fff;
		text-align: center;
		text-decoration: none;
		background:url(../img/btn_blk01.png) no-repeat center;
		background-size: contain;
		padding: 14px 0;
		writing-mode: horizontal-tb;
	}

	.btn_blk02:hover {
		color: #fff;
		text-decoration: none;
		background:url(../img/btn_blk01_on.png) no-repeat center;
		background-size: contain;
	}

	/*---ボタン（白・横）---*/
	.btn_wht01 {
		display: block;
		width: 100%;
		max-width: 280px;
		font-size: 16px;
		color: #000;
		text-align: center;
		text-decoration: none;
		background:url(../img/btn_wht01.png) no-repeat center;
		background-size: contain;
		padding: 14px 0;
	}

	.btn_wht01:hover {
		color: #000;
		text-decoration: none;
		background:url(../img/btn_wht01_on.png) no-repeat center;
		background-size: contain;
	}

	/* !背景
	---------------------------------------------------------- */
	/*---茶色（footer含む）---*/
	#Bg_Brown {
		position: relative;
		width: 100%;
		height: auto;
		background:url(../img/ftr_bg.jpg) repeat-x left bottom;
		background-size: 2064px 1376px;
		color: #000;
		padding: 40px 0;
	}

	/*---白色---*/
	#Bg_White {
		position: relative;
		width: 100%;
		height: auto;
		background: #fff;
		color: #000;
		padding: 40px 0;
	}

	/*---灰色（七福神で使用）---*/
	#Bg_Gray {
		position: relative;
		width: 100%;
		height: auto;
		background:url(../img/gods/gray_bg.jpg) no-repeat center;
		background-size: cover;
		padding: 40px 0;
	}

	/*---飾り位置（右上）---*/
	#Posi_r0t0 {
		display: none;
	}

	/*---飾り位置（右下）---*/
	#Posi_r0b0 {
		display: none;
	}

	/*---飾り位置（右下3%）---*/
	#Posi_r0b3 {
		display: none;
	}

	/*---飾り位置（右下30%）---*/
	#Posi_r0b30 {
		display: none;
	}

	/*---飾り位置（左上30%）---*/
	#Posi_l0t30 {
		display: none;
	}

	/*---飾り位置（左上40%）---*/
	#Posi_l0t40 {
		display: none;
	}

	/*---飾り位置（左下300px）---*/
	#Posi_l0b300 {
		display: none;
	}

	/* !Fonts -------------------------------------------------------------- */
	.fz28 { font-size: 24px;}

	/* !Margin ------------------------------------------------------------------ */
	.mt10 { margin-top:10px !important;}
	.mt20 { margin-top:20px !important;}
	.mt30 { margin-top:24px !important;}
	.mt40 { margin-top:28px !important;}
	.mt60 { margin-top:32px !important;}
	.mt80 { margin-top:36px !important;}
	.mt100 { margin-top:50px !important;}

	/* !Inline Align ------------------------------------------------------------ */
	.taC_spL { text-align: left !important;}

	/* ==========================================================
	トップページ
	========================================================== */
	#Top_Header {
		position: relative;
		width: 100%;
		height: 100svh;
		background:url(../img/main_sp.jpg) no-repeat bottom right;
		background-size: cover;
	}

	#Top_Logo {
		position: absolute;
		top: 20px;
		left: 30px;
		display: block;
		width: 74px;
		z-index: 1;
	}

	/*---スクロールダウン---*/
	.scrolldown{
		display: none;
	}

	/* !お便り
	---------------------------------------------------------- */
	#Area01 {
		width: 100%;
		height: auto;
		background: #fff;
		padding: 40px 0;
	}

	#Top_News {
		width: 100%;
	}

	#Top_News .contL {
		width: 100%;
	}

	#Top_News .contL img {
		width: 80px;
		position: relative;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	#Top_News .contR {
		width: 100%;
	}

	/*---電子ブックを見る---*/
	#Area01 .Book {
		width: 100%;
	}

	#Area01 .Book .contL {
		width: 100%;
		text-align: center;
	}

	#Area01 .Book .contL .ImgC_Sp {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	#Area01 .Book .contC {
		width: 100%;
		padding: 20px 0;
	}

	#Area01 .Book .contR {
		width: 100%;
	}

	#Area01 .Book .contR img {
		width: 54%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	#Area01 .w50per {
		width: 70% !important;
	}

	/* !要行寺について
	---------------------------------------------------------- */
	#Area02 {
		width: 100%;
		height: auto;
		background: #f3f2ee;
		padding: 40px 0;
	}

	#Area02 .w80per {
		width: 100% !important;
	}

	#flex_wrap {
		display:flex;
		flex-flow: column;
		margin-top:10px;
	}

	#flex_wrap .cont {
		width: 80%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top:20px;
	}

	/* !境内のご案内
	---------------------------------------------------------- */
	#Area03 {
		width: 100%;
		height: 680px;
		height: auto;
		background:url(../img/area03_bg.jpg) no-repeat left top;
		background-size: cover;
		padding: 60px 0;
	}

	#Area03 .Cont {
		width: 100%;
	}

	#Area03 .vertical {
		width: 96%;
		background-color: rgba(255, 255, 255, 0.8);
		padding: 40px 30px;
		border-radius: 4px;
	}

	/* !要行寺の宝物
	---------------------------------------------------------- */
	#Area04 {
		width: 100%;
		height: 680px;
		height: auto;
		background:url(../img/area04_bg.jpg) no-repeat right top;
		background-size: cover;
		padding: 60px 0;
		color: #fff;
	}

	#Area04 .Cont {
		width: 100%;
	}

	#Area04 .vertical {
		width: 96%;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 40px 30px;
		border-radius: 4px;
	}

	/* !年中行事
	---------------------------------------------------------- */
	#Area05 {
		position: relative;
		width: 100%;
		height: 600px;
		height: auto;
		background:url(../img/area05_bg_sp.jpg) no-repeat right top;
		background-size: cover;
		padding: 260px 0 60px;
		color: #000;
	}

	#Area05 .Cont {
		width: 100%;
	}

	#Area05 .vertical {
		width: 96%;
		background-color: rgba(255, 255, 255, 0.8);
		padding: 40px 30px;
		border-radius: 4px;
	}

	/* !浜の七福神
	---------------------------------------------------------- */
	#Area06 {
		width: 100%;
		height: auto;
		background: #767e75;
		padding: 40px 0 0;
		color: #fff;
	}

	#Area06 .ContL {
		width: 100%;
		padding: 20px 0;
	}

	#Area06 .ContR {
		width: 100%;
	}

	#Area06 .ContR img {
		width: 54%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	/* ==========================================================
	第二階層
	========================================================== */
	#Cover_Title {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		display: block;
		width: 26px;
	}

	/* ==========================================================
	要行寺について
	========================================================== */
	#About_Header {
		position: relative;
		width: 100%;
		height: 320px;
		background:url(../img/about/cover.jpg) no-repeat center;
		background-size: cover;
	}

	/* !住職
	---------------------------------------------------------- */
	#About_Area01 {
		position: relative;
		width: 100%;
		height: auto;
		background: #fff;
		overflow: hidden;
		padding: 40px 0;
	}

	/*---装飾---*/
	#About_Area01 .Posi01 {
		display: none;
	}

	#About_Area01 .Posi02 {
		display: none;
	}

	/*---あいさつ---*/
	#About_Area01 .frame {
		background:url(../img/about/area01_01.png) no-repeat right top;
		background-size: 60%;
		background-size: 240px;
		margin-top: -30px;
		padding-top: 30px;
	}

	#About_Area01 .lead {
		width: 100%;
	}

	#About_Area01 .area_greeting {
		width: 100%;
		z-index: 2;
		margin-top: 20px;
	}

	#About_Area01 .photo {
		width: 100%;
		margin-left: 0;
	}

	#About_Area01 .comment {
		position: relative;
		top: 0;
		left:0;
		width: 100%;
		background: #000;
		color: #fff;
		padding: 20px 20px 30px;
	}

	/* !要行寺由緒沿革
	---------------------------------------------------------- */
	#About_Area02 {
		width: 100%;
		height: auto;
		background: #000;
		padding: 40px 0;
		color: #fff;
	}

	/* !要行寺歴代譜
	---------------------------------------------------------- */
	#About_Area03 {
		width: 100%;
		height: auto;
		background:url(../img/about/area03_bg.jpg) no-repeat center;
		background-size: cover;
		padding: 40px 0 60px;
	}

	/* ==========================================================
	境内のご案内
	========================================================== */
	#Info_Header {
		position: relative;
		width: 100%;
		height: 320px;
		background:url(../img/info/cover.jpg) no-repeat right;
		background-size: cover;
	}

	/* ==========================================================
	要行寺の宝物
	========================================================== */
	#Treasure_Header {
		position: relative;
		width: 100%;
		height: 320px;
		background:url(../img/treasure/cover.jpg) no-repeat right;
		background-size: cover;
	}

	#Treasure_Text .w50per {
		width: 80% !important;
	}

	#Treasure_Text .w70per {
		width: 100% !important;
	}

	/* ==========================================================
	永代供養墓
	========================================================== */
	#Eitai_Header {
		position: relative;
		width: 100%;
		height: 320px;
		background:url(../img/eitai/cover.jpg) no-repeat center;
		background-size: cover;
	}
	
	.frame_detail {
		background: #fff;
		padding: 30px 20px 40px;
		border:5px solid #604d24;
	}

	/* ==========================================================
	年中行事
	========================================================== */
	#Event_Header {
		position: relative;
		width: 100%;
		height: 320px;
		background:url(../img/event/cover.jpg) no-repeat center;
		background-size: cover;
	}

	#Event_Lead .areaL {
		width: 100%;
		padding-bottom: 20px;
	}

	#Event_Lead .areaR {
		width: 100%;
	}

	/* ==========================================================
	浜の七福神
	========================================================== */
	#Gods_Header {
		position: relative;
		width: 100%;
		height: 320px;
		background:url(../img/gods/cover.jpg) no-repeat center;
		background-size: cover;
	}

	#Gods_Lead .areaL {
		width: 100%;
		padding-bottom: 20px;
	}

	#Gods_Lead .areaR {
		width: 100%;
	}

	#Gods_Lead .areaR img {
		width: 68%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	#Gods_List {
		width: 68%;
		margin: 0 auto;
	}

	/* ==========================================================
	お便り
	========================================================== */
	#News_Header {
		position: relative;
		width: 100%;
		height: 320px;
		background:url(../img/news/cover.jpg) no-repeat center;
		background-size: cover;
	}

	/*---お便り一覧---*/
	#News {
		width: 100%;
		margin-top: 10px;
	}

	#News .News_box {
		width: 100%;
		border-bottom:1px solid #d7d3c0;
		padding:24px 0 30px;
		padding:16px 0 20px;
		clear:both;
	}

	/*---お便り詳細---*/
	#Cont_News {
		width: 100%;
		margin-top: 10px;
	}

	/* ==========================================================
	花まつり稚児行列
	========================================================== */
	.frame_notes {
		background: #fff;
		padding: 20px 20px 30px;
		border:6px solid #97844c;
	}

	.h2_tit {
		font-size: 20px;
		font-weight: bold;
		color: #000;
		border-left: 6px solid #bfa34f;
		border-bottom: 1px solid #bfa34f;
		padding: 4px 0 10px 10px;
	}

	/* ==========================================================
	Footer
	========================================================== */
	/*---Googleマップ---*/
	.map {
		height: 480px;
		margin-top: 40px;
	}

	/*---ページの先頭へ---*/
	#back-top a {
		display: none;
	}

	/* ==========================================================
	フォーム
	========================================================== */
	.form_frame {
		background: #fff;
		padding:0 20px 10px;
		border-radius: 20px;
	}

}