@charset "UTF-8";
/*
Theme Name:i-nohachimangu
Theme URI: http://iinohachimangu.jp
Description: iinohachimanguのオリジナルテーマ
Author: watabe_design
Author URI: https://watabe-design.jp/
*/
/* ------------------------------
全体の共通部分
------------------------------ */
html, body {
  height: 100%;
}
html {
    font-size: 62.5%;
}
body {
    color: #333333;
    font-family: 'RyuminPro','游明朝体',serif;
    font-style: normal;
    font-size: 1.3rem;
    font-size: clamp(1.3rem,2vw,1.6rem);
    display: none;/* ページ移動の際にふわっと全体を表示されるためのコード */
}
.wrapper {
    max-width: 1300px;
    margin: 0 auto;
}
.youtube-wrapper {
    max-width: 560px;
    margin: 0 auto;
    margin-top: 3%;
}
.YouTube {
    aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}
.smartslider {
    width: 100%;
}
.flex {
    display: flex;
}
.sp-only {
    display: none;
}
.sp-none {
    display: none;
}
.title_set {
    text-align: center;
}
.title_set_img {
    width: 60%;
}
/* ーーーーフォントサイズーーーー*/
h1 {
    font-size: clamp(1.5rem,3vw,2.8rem);
    min-height: 0vw;
    letter-spacing: 0.38em;
    text-align: center;
    font-weight: lighter;
    margin-bottom: -10px;
}
h2 {
    display: block;
    font-family: 'RyuminPro','游明朝体',serif;
    /* font-family: 'Kozuka Gothic','小塚ゴシックPr6N',sans-serif; */
    font-size: clamp(1.1rem,3vw,1.7rem);
    font-weight: lighter;
    letter-spacing: 0.118em;
    line-height: 1.47;
    text-align: center;
    margin-top: 2%;
}
h3 {
    font-size: clamp(0.6rem,3vw,1.4rem);
    letter-spacing: 0.18em;
    text-align: center;
    font-weight: 600;
    margin-top: 13px;
}
h4 {
    font-size: clamp(1.5rem,3vw,2.8rem);
    letter-spacing: 0.06em;
    font-weight: lighter;
    color: #fff;
}
p {
    /* font-family: 'RyuminPro','游明朝体',serif; */
    font-family: 'Kozuka Gothic','小塚ゴシックPr6N',sans-serif;
    color: #231815;
}
a {
    font-family: 'RyuminPro','游明朝体',serif;
    /* font-family: 'Kozuka Gothic','小塚ゴシックPr6N',sans-serif; */
    color: #231815;
}

/* ーーーースマホの時消すーーーー*/
.sp-none {
    display: none;
}
/* ーーーーふわっと出すため最初は透明設定するーーーー*/
.fadeInUpTrigger{
	opacity: 0;
}
/* ------------------------------
ふわっと表示
------------------------------ */
/* 文字を左からふわっとフェードイン */
.fadeIn_left {
    opacity: 0;
    transform: translate(-50%, 0);
    transition: 2s;
    }
    .fadeIn_left.is-show {
    transform: translate(0, 0);
    opacity: 1;
    }
    /* 画像を下からふわっとフェードイン */
    .fadeIn_up {
    opacity: 0;
    transform: translate(0, 50%);
    transition: 2s;
    }
    .fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1;
    }
    /* sdgsロゴをその場でふわっとフェードイン */
    .fadeIn {
    opacity: 0;
    transition: 2s;
    }
    .fadeIn.is-show {
    opacity: 1;
    }
/* ------------------------------
トップイメージ画像:slick スライダー
------------------------------ */
/* 画像の高さ調整 */
.slick-slide img {
    display: block;
    width: 100%;
    height: 60vw;
    object-fit: cover;
}
/* ドットの隙間を無くす */
.slick-dotted.slick-slider {
    margin-bottom: 0;
}
/* ドットの位置調整 */
.slick-dots {
    bottom: 2%;
}
/* ------------------------------
トップイメージ画像:slick スライダー横のロゴマーク位置
------------------------------ */
.slider-container {
    position: relative;
}
.top_p_logo {
    position: absolute;
    top: 9%;
    left: -5%;
    z-index: 997;
    width: 40%;
}
/* ------------------------------
トップページ共通：トップイメージ画像
------------------------------ */
.header_container {
    position: relative;
}
.top_img_webp {
    height: 85vh;
    width: 100vw;
    object-fit: cover;
    object-position: center 50%;
}
.top_logo {
    position: absolute;
    top: 8%;
    left: 3%;
}
.top_logo_webp {
    width: 43%;
}
/* ------------------------------
トップページ：ナビメニュー
------------------------------ */
.gnav_list {
    justify-content: space-between;
    padding: 1% 0%;
    background-color: #AE0E16;
}
.gnav_list li {
    margin: 0 30px;
}
.gnav_list li a {
    color: #FFF;
    letter-spacing: 0.2em;
}
/* ------------------------------
トップページ：ナビメニューの御祈祷・撮影ボタン
------------------------------ */
#gnav {
    position: relative;
}
.btn_reservation {
    font-size: clamp(1.3rem,2vw,1.7rem);
    letter-spacing: 0.2em;
    display: flex;
    text-decoration: none;
    background: #AE0E16;
    color: #FFF;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    box-shadow: 0px 0px 0px 5px #AE0E16;
    border: solid 2px #FFF;
    transition: .4s;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -117%;
    right: 2%;
  }
.btn_reservation:hover {
    background: #961218;
    box-shadow: 0px 0px 0px 5px #961218;
  }
/* .btn_gokitou {
    font-size: clamp(0.6rem,3vw,1.4rem);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}*/
/* ------------------------------
 トップページ：ナビゲーション「中心から外に線が伸びる（下部）」
------------------------------*/
.gnav_list li a{
    /*線の基点とするためrelativeを指定*/
  position: relative;
}
.gnav_list li.current a,
.gnav_list li a:hover{
  color:#FFF;
}
.gnav_list li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -35%;
    left: 0%;
    /*線の形状*/
    width: 100%;
    height: 1px;
    background:#fff;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}
/*現在地とhoverの設定*/
.gnav_list li.current a::after,
.gnav_list li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}
.gnav_list a img {
    width: 100%;
}
#gnav img {
    transition: all .2s;
}
#gnav img:hover {
    transform: scale(0.8);
}
/* ------------------------------
トップページ共通： 挨拶文（#heading）
------------------------------ */
#heading {
    background-color: #E6D8C7;
    padding: 4% 0;
}
h2 {
    margin-top: 1% 0;
}
.top_word02 {
    color: #AE0E16;
}
.top_word03 {
    text-align: center;
}
.top_word03 > a {
    color: #AE0E16;
    border-bottom: solid 1px #AE0E16;
    text-align: center;
}
.parking {
    margin-bottom: 3%;
}
/* ------------------------------
トップページ： INFORMATION/お知らせ
------------------------------ */
#info_news {
    padding: 4% 0;
}
.info_news_wrapper {
    max-width: 990px;
    margin: 0 auto;
}
.news_list {
    width: 100%;
    margin: 6% 0%;
}
.date_area {
    width: 20%;
    border: 1px solid #231815;
    padding: 5em 0.6em;
    text-align: center;
}
#top_news ul {
    font-size: clamp(1rem,3vw,1.4rem);
    min-height: 0vw;
    letter-spacing: 0.2em;
}
time {
    font-family: '游明朝体','FOT-ロダン ProN',sans-serif;
    font-size: clamp(0.8rem,2vw,1.4rem);
    min-height: 0vw;
    letter-spacing: 0.15em;
}
.text_area {
    width: 80%;
    margin-left: 3%;
}
.text_title {
    background-color: #727171;
    width: 100%;
    padding: 0.3em 0.1em;
}
.text_title > a {
    color: #fff;
    margin-left: 5px;
}
.text_text {
    color: #231815;
    display: block;
    margin-top: 10px;
}
.text_text > p {
    font-family: '游明朝体','FOT-ロダン ProN',sans-serif;
}
/*== Moreのループ矢印→ */
.more {
    text-align: right;
    margin: 0% 3% 5% 0%;
}
.btnlinestretches5{
    /*線の基点とするためrelativeを指定*/
	position:relative;
    /*リンクの形状*/ 
	color:#333;
    padding: 10px 0;
	display:inline-block;
    text-decoration: none;
    outline: none;
    transition: all  0.3s ease;
}
.btnlinestretches5:hover {
    color: #7A6A56;
}

/*線の設定*/
.btnlinestretches5::before {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    /*線の形状*/
    width: 100%;
    height: 1px;
    background: #333;
}

/*矢印の設定*/
.btnlinestretches5::after {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom:-4px;
    /*矢印の形状*/
    width: 8px;
    height: 8px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    transform: rotate(45deg);
}

/*線と矢印を繰り返しアニメーション*/
.btnlinestretches5::before {
    animation: arrowlong01 2s ease infinite;
}
.btnlinestretches5::after {
    animation: arrowlong02 2s ease infinite;
}

@keyframes arrowlong01{
    0%{width:0;opacity:0}
    20%{width:0;opacity:1}
    80%{width:105%;opacity:1}
    100%{width:105%;opacity:0}
}

@keyframes arrowlong02{
    0%{left:0;opacity:0}
    20%{left:0;opacity:1}
    80%{left:103%;opacity:1}
    100%{left:103%;opacity:0}
}
/* ------------------------------
トップページ：カテゴリー
------------------------------ */
#plan_type {
    background-color: #E6D8C7;
    padding-top: 5%;
    padding-bottom: 5%;
}
.plan_type_list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 50px;
    margin-top: 4%;
}
.plan_type_list_text {
    text-align: center;
    font-family: 'RyuminPro','游明朝体',serif;
    letter-spacing: 0.2em;
    margin-top: 4%;
}
#plan_type ul li a {
    display: block;
    transition-duration: .7s;
}
#plan_type ul li a:hover {
   filter: brightness(120%);
}
/* ------------------------------
固定ページ：文化財
------------------------------ */
#c-country p,
#c-city p,
#c-prefecture p {
    font-family: 'Kozuka Gothic','小塚ゴシックPr6N',sans-serif;
    font-size: clamp(1.1rem,3vw,1.6rem);
    font-weight: lighter;
}
.country_img {
    width: 50%;
}
.c_text {
    margin-left: 3%;
    width: 50%;
}
.c_text01 {
    letter-spacing: 0.118em;
    margin-top: 2%;
}
.c_text02 {
    margin-top: 2%;
}
.culture_icon_list {
    justify-content: space-between;
    margin-top: 5%;
    margin-bottom: 3%;
}
.culture_icon_list li a img {
    width: 55%;
}
.culture_icon_list li:nth-child(2) {
    text-align: center;
}
.culture_icon_list li:nth-child(3) {
    text-align: end;
}
.culture_icon_list li a img {
    transition: all 0.6s ease 0s;
}
.culture_icon_list li a img:hover {
    cursor: pointer;
	transform: scale(1.1, 1.1);
}
#c-country {
    margin-top: 4%;
}
.c-outer {
    margin-top: 5%;
}
.country_lead,
.prefecture_lead,
.city_lead {
    background-color: #3B1E87;
    display: block;
    padding-left: 2%;
    letter-spacing: 0.2em;
    line-height: 1.4;
}
.prefecture_lead {
    background-color: #1E2571;
}
.city_lead {
    background-color: #0068B7;
}
.c-lead01 {
    font-size: clamp(1rem,3vw,1.8rem);
}
/* ------------------------------
固定ページ：祭事・行事ギャラリー
------------------------------ */
#event {
    margin: 4% 0;
}
.e-outer {
    margin-top: 3%;
}
.event_img01 {
    width: 100%;
}
.event_img02 {
    justify-content: space-between;
    margin-top: 2%;
}
.event_img04 {
    margin-top: 3%;
}
.event_img08 {
    margin-top: 3%;
}
.event02,
.event03 {
    width: 49%;
}
.event_lead_brown {
    background-color: #7A6A56;
    margin-top: 2%;
}
.e_day {
    padding-left: 1%;
    letter-spacing: 0.2em;
}
.e_text01 {
    font-size: clamp(0.8rem,2vw,1.7rem);
    letter-spacing: 0.03em;
    margin-top: 1%;
}
.e_text02 {
    font-family: 'Kozuka Gothic','小塚ゴシックPr6N',sans-serif;
    font-size: clamp(0.7rem,2vw,1.6rem);
    letter-spacing: 0.12em;
    line-height: 1.56;
    margin-top: 2%;
}
.e_text03 {
    font-size: clamp(1.3rem,2vw,2.2rem);
    letter-spacing: 0.052em;
    color:#AE0E16;
    text-align: center;
    margin-top: 2%;
}
/* ------------------------------
固定ページ： 御祈祷種類 代金
------------------------------ */
#prayer {
    margin-top: 5%;
}
.img_prayer01 {
    margin-top: 3%;
}
.img_prayer08 {
    margin-bottom: 4%;
}
.prayer_lead_red {
    background-color: #AE0E16;
    margin-top: 2%;
}
.prayer_lead_black {
    background-color: #231815;
	margin-top: 2%;
}
.prayer_lead_wrapper {
    max-width: 1100px;
    margin: 0% auto;
}
.prayer_text {
    margin: 1% 0;
}
.prayer_text02 {
    font-weight: bold;
    margin: 2% 0;
}
.prayer_text03 {
    margin: 2% 0;
    color: #E60012;
}
.prayer_text03_maru {
    color: #231815;
}
.img_prayer02 {
    margin: 2% 0;
}
.prayer_reservation_btn {
    background-color: #E83828;
    color: #fff;
    display: block;
    text-align: center;
    padding: 1% 0;
    letter-spacing: 0.2em;
    border-bottom: solid 3px #d27d00;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	margin-top: 1%;
}
.prayer_reservation_btn:active {
    border-bottom: solid 2px #fd9535;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
.prayer_reservation_btn:hover {
    border-bottom-color: transparent;
	transform: translateY(0.1875em);
}
/* ------------------------------
固定ページ： 開運・御朱印
------------------------------ */
#luck {
    margin-top: 3%;
}
.luck_grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 35px;
    margin-top: 5%;
}
.luckgoods_name {
    background-color: #AE0E16;
    text-align: center;
    color: #fff;
    font-family: 'RyuminPro','游明朝体',serif;
    font-size: clamp(1.2rem,2vw,2.7rem);
    margin-bottom: 3%;
    padding: 1px 0;
}


/* ------------------------------
news： お知らせ
------------------------------ */
#news {
    margin-top: 3%;
}
.news_wrapper {
    max-width: 950px;
    margin: 0 auto;
}

#news ul li {
    margin: 10% 0;
    width: 100%;
}
#news ul li a {
    color: #AE0E16;
}
.catalog_page_area01 {
    width: 24%;
    align-items: center;
    text-align: center;
    display: flex
;
}
.catalog_page_area02 {
    width: 85%;
    margin-left: 4%;
}
.catalog_name {
    align-items: center;
}
.news_time {
    margin-left: 2%;
}
#news p {
    color: #333;
}
.top_news_title {
    font-weight: lighter;
    font-size: larger;
    border-bottom: solid 1px;
    margin-bottom: 2%;
    font-family: 'RyuminPro','游明朝体',serif;
}
.top_news_text > p{
    font-family: 'RyuminPro','游明朝体',serif;
    line-height: 2;
    letter-spacing: 0.12em;
}
/* ------------------------------
news： お知らせ_ページネーションプラグイン「WP-PageNavi」のカスタマイズ
------------------------------ */
.wp-pagenavi {
	margin: 40px auto;
	font-size: 14px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #AE0E16;
}
.wp-pagenavi a {
    color: #333;
}
.wp-pagenavi a:hover {
	color: #AE0E16;
}
.wp-pagenavi span.current,
.wp-pagenavi a.page {
	margin: 0 10px;
	line-height: 2;
	padding: 0 12px;
	transition: .03s;
	display: block;
	border-bottom: 4px solid transparent;
}
.wp-pagenavi span.current {
	border-bottom: 4px solid #AE0E16;
}
.wp-pagenavi a.page {
	background: none;
}
.wp-pagenavi a.page:hover {
	border-bottom: 4px solid #AE0E16;
}
.wp-pagenavi .first,
.wp-pagenavi .extend {
	margin-right: 15px;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
	display: none;
}
/* ------------------------------
single.php 「お知らせ」個別ページ
------------------------------ */
#single_area {
    width: 100%;
}
#single_area > h2 {
    margin-top: 10%;
}
.single_content {
    max-width: 980px;
    margin: 0 auto;
    padding: 3% 3%;
    border: solid 1px rgb(192, 185, 185);
    border-radius: 20px;
    margin-top: 3%;
}
.single_icon {
    width: 32px;
}
.single_time {
    font-size: clamp(1rem,1.5vw,1.5rem);
    letter-spacing: 0.1em;
    font-weight: bold;
}
.single_flex {
    display: flex;
    font-size: clamp(2.5rem,1.5vw,2.8rem);
    font-weight: bold;
    letter-spacing: -0.08em;
    margin-top: 15px;
}
.single_flex a {
    color: #AE0E16;
    letter-spacing: 0.2em;
}
.single_title {
    text-align: center;
    margin-top: 5%;
    overflow: hidden;
    font-family: '游明朝体','FOT-ロダン ProN',sans-serif;
    color: #333;
}
.single_text {
    letter-spacing: 0.5em;
    line-height: 2;
    margin: 6% 0;
}
.single_text > p  {
    font-family: '游明朝体','FOT-ロダン ProN',sans-serif;
}
.single_pagenavi {
    display: flex;
    justify-content: space-evenly;
    margin: 5% 3% 12% 3%;
}
.single_pagenavi:hover {
    color: #AE0E16;
}
.single_pagenavi li a:hover {
    color: #AE0E16;
}
.wp-block-image img {
    margin: 5% 0;
}
/* ------------------------------
御祈祷・撮影の予約ページ:ボタン
------------------------------ */
.reservation_btn_list {
    width: 95%;
}
.reservation_btn_list ul li {
    margin-bottom: 6%;
}
.reservation_btn_list ul li {
    text-align: center;
    margin-top: 1%;
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: #AE0E16;
}
.reservation_btn_list ul li a {
    display: block;
}
.reservation_btn {
    display: flex;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
    padding: 1.3rem 2rem;
    border: 1px solid #231815;
    background: #fff;
    text-decoration: none;
    text-align: center;
    transition: 0.5s;
}
.reservation_btn:hover {
    background-color: #AE0E16;
    color: #fff;
    border: 1px solid #AE0E16;
}
.shougatu_btn {
    max-width: 650px;
    background-color: rgba(245, 222, 179, 0.56);
}
.reservation_btn_text {
    font-size: clamp(1rem, 3vw, 1.6rem);
    letter-spacing: 0.15em;
}
/* ------------------------------
お正月の予約ページ:ボタン
------------------------------ */
.shougatu_wrapper {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.shougatu_wrapper02 {
    max-width: 800px;
    margin: 0 auto;
}
.shougatu_btn_list ul {
    display: flex;
    justify-content: space-around;
}
.shougatu_btn_list ul li a {
    display: block;
    padding: 1.3rem 2rem;
    border: 1px solid #231815;
    background: #fff;
    text-decoration: none;
    text-align: center;
    align-items: center;
    transition: 0.5s;
}
.shougatu_btn_list ul li a:hover {
    background-color: #AE0E16;
    color: #fff;
    border: 1px solid #AE0E16;
}
.shougatu_btn_list ul li span {
    color: #AE0E16;
}
.shougatu_area {
    border: 1px solid #231815;
    text-align: center;
    padding: 3% 0;
    margin: 3% 0;
}
.shougatu_area p {
    font-family: 'RyuminPro','游明朝体',serif;
}
.shougatu_title {
    text-align: center;
    font-size: clamp(1.7rem,3vw,2rem);
    font-family: 'RyuminPro','游明朝体',serif;
    font-weight: bold;
    margin-bottom: 2%;
}
.shougatu_big {
    font-size: clamp(1.4rem,3vw,1.7rem);
    color: #AE0E16;
}
/* ------------------------------
各予約ページ:メールフォーム
------------------------------ */
/* フォーム全体のスタイル */
.wpcf7-form {
    background-color: #fff;
    border: 2px solid #ccc;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* 入力フィールドのスタイル */
.wpcf7-form .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-family: '游明朝体','FOT-ロダン ProN',sans-serif;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-select,
.wpcf7-form textarea,
.wpcf7-form input[type="file"] {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 15px;
    font-family: '游明朝体','FOT-ロダン ProN',sans-serif;
    font-size: 16px;
}
/* フォーカス時のスタイル */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="date"]:focus,
.wpcf7-form input[type="select"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form input[type="file"]:focus {
    border-color: #999;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
    background-color: #AE0E16;
    color: #FFFFFF;
    font-family: 'Times New Roman', serif;
    font-size: 18px;
    padding: 10px 30px;
    border-radius: 5px;
    /* border: 2px solid #483D8B; */
    transition: background-color 0.3s ease;
}
.wpcf7-form input[type="submit"]:hover {
    background-color: #333;
}
.wpcf7-spinner {
    display: block;/* form-submitぼ送信ボタンの中央揃えがずれるのでプラグインのフォームを調整 */
}
.form-submit {
    text-align: center;
}
label {
    font-family: 'RyuminPro','游明朝体',serif;
}
#reservation {
    margin-top: 3%;
}
.reservation_wrapper {
    max-width: 800px;
    margin: 0 auto;
}
.contact_p01 {
    font-family: 'RyuminPro','游明朝体',serif;
    text-align: center;
    margin: 3% 0;
}
.Google_reCAPTCHA > p{
    font-family: 'RyuminPro','游明朝体',serif;
    text-align: center;
    margin-top: 4%;
    font-size: smaller;
}
/* ------------------------------
404.php
------------------------------ */
.courses_outer {
    text-align: center;
    margin-top: 30px;
}
.toprink404 {
    font-size: x-large;
    font-weight: bold;
    color: #fff;
    background-color: #c4975d;
}
/* ------------------------------
共通のフッター部分
------------------------------ */
#footer {
    margin-top: 3%;
    padding-bottom: 3%;
}
.footer_map {
    margin-bottom: 7%;
}
.map_p {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    color: #AE0E16;
    text-align: center;
    letter-spacing: 0.26em;
    font-size: clamp(2rem,2vw,2.7rem);
}
.GoogleMap {
    margin-top: 2%;
    width: 100%;
    filter: grayscale(100%);
}
.footer_gnav_list li a span{
    color: #fff;
}
.footer_area {
    margin-top: 2%;
    color: #231815;
    justify-content: space-between;
}
.footer_logo {
    width: 40%;
}
.footer_logo > a {
    display: block;
    text-align: center;
}
.footer_logo_img {
    width: 40%;
}
.footer_address {
    font-family: 'RyuminPro','游明朝体',serif;
    line-height: 1.54;
    font-size: clamp(1.2rem,2vw,1.6rem);
    letter-spacing: 0.2em;
    margin-top: 5%;
}
.footer_btn {
    width: 30%;
}
.footer_btn a {
    display: block;
}
.footer_btn_reservation,
.footer_btn_contact {
    display: flex;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
    padding: 1.3rem 2rem;
    border: 1px solid #231815;
    background: #fff;
    text-decoration: none;
    text-align: center;
    transition: 0.5s;
}
.footer_btn_reservation:hover,
.footer_btn_contact:hover {
    background-color: #AE0E16;
    color: #fff;
    border: 1px solid #AE0E16;
}
.footer_btn_text {
    font-size: clamp(1rem, 3vw, 1.6rem);
    letter-spacing: 0.15em;
}
.footer_btn_contact {
    margin-top: 10px;
}
.footer_gnav {
    margin-top: 10%;
    text-align: center;
}
.footer_gnav_list {
    background-color: transparent;
    writing-mode: vertical-rl;
    /* list-style: none; */
    align-items: flex-start;
    display: inline-block;
    text-align: start;
}
.footer_gnav_list li {
    text-align: start;
    margin: 0 50px;
}
.footer_gnav_list li a {
    color: #231815;
    transition: .5s;
}
.footer_gnav_list li a:hover {
    color: #AE0E16;
}
small.copyright {
    font-family: 'Century Gothic';
    font-size: 8px;
    font-weight: bold;
    display: block;
    text-align: end;
    margin-top: 1%;
}
.img_instagram {
    text-align: end;
}
/* ------------------------------
JS/ページトップリンク_上矢印
------------------------------ */
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	width: 60px;
	height: 60px;
	color: #6C6C6C;
    border:1px solid #333333;
	transition:all 0.3s;
    background-color: #ffffff5c;
}
#page-top p {
    font-size: 1.2rem;
    position: relative;
    top: -18px;
    color: #333;
}
#page-top span {
    position: relative;
    top: -10px;
}
#page-top span::after {
    content: '';
    position: absolute;
    left: 6px;
    top: -7px;
    background: #333333;
    width: 1px;
    height: 20px;
    transform: rotate(-45deg);
}
#page-top span::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -3px;
    background: #333;
    width: 1px;
    height: 30px;
}

#page-top a:hover{
	background: #eb63016f;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*上に上がる動き*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*下に下がる動き*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}
/*ここからSPスマホ==================================================
共通部分
===================================*/
@media screen and (max-width:990px) {
/* ------------------------------
 共通部分
------------------------------sp*/
.sp-only {
    display: block;
}
.pc-only {
    display: none;
}
.sp_block {
    display: block;
}
.wrapper,
.youtube-wrapper,
.prayer_lead_wrapper,
.info_news_wrapper,
.reservation_wrapper {
    padding: 0 5%;
}
.news_wrapper {
    padding: 0 3%;
}
#heading {
    padding: 7% 0;
}
.title_set_img {
    width: 75%;
}
/* ------------------------------
 トップページ：gnavナビゲーション「中心から外に線が伸びる（下部）」
------------------------------sp*/

.gnav_list li span:nth-child(2) {
    display: none;
}
.gnav_list li a::after {
    display: none;
}
.sample3:hover .mask {
	display: none;

}
/*===========================================================*/
/* ハンバーガーメニューボタン */
/*===========================================================sp*/
.openbtn{
	position: fixed;
    z-index: 9999;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 50px;
    height: 50px;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background: #604f4bd9;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
/*========= ナビゲーションのためのCSS ===============*/
#gnav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 9999;
    /*ナビのスタート位置と形状*/
	top:-30PX;
    left: -120%;
	width:60%;
    height: 120vh;/*ナビの高さ*/
	background: rgb(255,255,255,0.8);
    /*動き*/
	transition: all 0.6s;
}
.panelactive {
    position:fixed;
    z-index: 9999;
}
/*アクティブクラスがついたら位置を0に*/
#gnav.panelactive{
    left: 0;
    justify-content: end;
}
.gnav_list li {
    margin-top: 6vh;
}
.gnav_list {
    display: block;
    margin-top: 30%;
    background-color: transparent;
}
.gnav_list li span{
    transform: none;
    text-align: center;
}
.gnav_list li a {
    color: #AE0E16;
}
.btn_reservation {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    box-shadow: 0px 0px 0px 5px #AE0E16;
    border: solid 2px #FFF;
    transition: .4s;
    justify-content: center;
    align-items: center;
    position: absolute;
    background: #fff;
    color: #AE0E16;
    width: 140px;
    height: 140px;
    box-shadow: 0px 0px 0px 5px #FFF;
    border: solid 2px #AE0E16;
    top: 59%;
    left: 9%;
}
/*========= ナビゲーションのためのCSS ==========ここまで=====*/
/* ------------------------------
トップイメージ画像:slick スライダー
------------------------------sp */
/* 画像の高さ調整 */
.slick-slide img {
    height: 127vw;
    object-position: right;
}
/* ------------------------------
トップイメージ画像:slick スライダー横のロゴマーク位置
------------------------------sp */
.slider-container {
    position: relative;
}
.top_p_logo {
    position: absolute;
    top: 40%;
    left: 25%;
    width: 50%;
}
/* ------------------------------
トップページ： 
------------------------------sp */
.top_img_webp {
    height: 80vh;
    width: 100vw;
    object-fit: cover;
    object-position: 28% 50%;
}
.top_logo_webp {
    width: 40%;
    margin: 12% 28%;
}
h2 {
    margin-top: 5%;
    padding: 0 3%;
}
.top_reservation {
    bottom: 2%;
}
.top_reservation_webp {
    width: 33%;
}
.date_area {
    padding: 2.1em 0.3em;
}
.text_title {
    width: 100%;
}
.news_list {
    margin: 15% 0;
}
#info_news {
    padding: 10% 0;
}
#plan_type {
    padding: 10% 0 15% 0;
}
#gallery {
    padding: 10% 0;
}
.plan_type_list {
    gap: 10px;
}
/* ------------------------------
news： お知らせ
------------------------------sp */
.news_top_img_webp {
    object-position: 47% 50%;
}
#news ul li {
    width: 100%;
    align-items: center;
}
.catalog_page_area01 {
    width: 50%;
}
.catalog_page_area01 a img {
    object-fit: cover;
}
.catalog_page_area02 {
    width: 50%;
}
.top_news_text {
    display: none;
}
.top_news_title {
    font-size: small;
}
.catalog_name {
    margin-bottom: 3%;
}
/* ------------------------------
single.php 「お知らせ」個別ページ
------------------------------sp */
.single_content {
    padding: 4%;
}
/* ------------------------------
固定ページ： 祭事・行事ギャラリー
------------------------------sp */
.event_top_logo_webp {
    object-position: 40% 50%;
}
/* ------------------------------
固定ページ： 人生儀礼
------------------------------sp */
.prayer_text03 {
    text-align: center;
}
.prayer_top_logo_webp {
    object-position: 80% 50%;
}
/* ------------------------------
固定ページ： 開運・御朱印
------------------------------sp */
.luck_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 7%;
}
.luckgoods_name {
    margin-bottom: 6%;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form input[type="file"] {
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 13px;
}
/* ------------------------------
お正月の予約ページ:ボタン
------------------------------sp */
.shougatu_wrapper {
    margin: 0 5%;
}
.shougatu_btn_list ul {
    display: block;
}
.shougatu_btn_list ul li span {
    font-size: 10px;
}
.shougatu_area {
    margin: 3% 5%;
}

/* ------------------------------
共通のフッター部分
------------------------------sp */
.footer_gnav {
    display: none;
}
.footer_map {
    margin-top: 7%;
}
.GoogleMap {
    height: 45vh;
}
.footer_area {
    align-items: flex-end;
}
.footer_logo {
    width: 65%;
}
.footer_logo > a {
    text-align: end;
}
.footer_logo_img {
    width: 50%;
    margin: 10% 0;
}
.footer_btn {
    width: 35%;
}
.footer_btn_reservation,
.footer_btn_contact {
    padding: 1.3rem 1rem;
}
.img_instagram {
    display: flex;
    align-items: flex-end;
    text-align: center;
}
.img_instagram a img {
    width: 80%;
}

}