<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing:border-box; /*余白や線を幅や高さに含める*/
}
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');

body {
font-family: 'Noto Serif JP', serif;
-webkit-text-size-adjust: 100%;
background-color: #000;
height: 100vh;
}

img{
/* SPの長押し禁止 */
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-touch-callout:none;
-moz-user-select:none;
user-select:none;
}

.bg_index {
min-height: 100%;
background-image: url("..//img/henro_2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed; 
}

.bg_home {
min-height: 100%;
background-image: url("..//img/henro.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed; 
}

.bg_salt {
min-height: 100%;
background-image: url("..//img/salt.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed; 
}

.bg_bloodorage {
min-height: 100%;
background-image: url("..//img/bloodorange.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}

.bg_pearl {
min-height: 100%;
background-image: url("..//img/pearl.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed; 
}

.bg_pentagram {
min-height: 100%;
background-image: url("..//img/pentagram_2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}

.bg_intro {
min-height: 100%;
background-image: url("..//img/map.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed; 
}

.bg_kimontour {
min-height: 100%;
background-image: url("..//img/kimontour.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}

.bg_map {
min-height: 100%;
background-image: url("..//img/map.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed; 
}

.bg_gallery {
min-height: 100%;
background-image: url("..//img/map.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed; 
}

#header {
width: 1050px;
margin: auto;
padding-bottom: 40px;
}

#navigation {
width: 1050px;
margin: auto;
display:flex;  /*ロゴとulを横に並べる*/
justify-content: space-between;  /*両端に配置*/
}

h1 {
padding: 0;
}

h1 a {
display: block;
width: 250px;
height: 170px;
background-image: url("../img/black_pilgrimage.png");
background-repeat: no-repeat;
margin-right: auto;
padding: 0;
}

@media screen and (-webkit-min-device-pixel-ratio:2),
                  (min-resolution: 2dppx){
h1 a {
display: block;
width: 250px;
height: 170px;
background-image: url("../img/black_pilgrimage@x2.png");
background-repeat: no-repeat;
background-size: 100%;
margin-right: auto;
padding: 0;
}
}

h1 span {
display: none;
}

.lang_menu {
float: right;
padding: 50px 0 0 0;
}

.lang_menu a {
font-size: 13px;
letter-spacing: 0.05em;
color: #FFF;
text-decoration: none;
}

/* ナビゲーションメニュー */
.nav-menu {
color: #FFF; /* メニューテキストの色 */
margin: 40px 0 0 0;
}

.menu-list {
display:flex;
}

.menu-item {
border-bottom: 1px solid #FFF; /* メニューアイテムの左ボーダー */
position: relative;
margin-left: 50px;
padding-bottom: 10px;
}

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
visibility: visible; /* 下層メニューを表示 */
}

.menu-item a {
font-size: 16px;
align-items: center;
color: #FFF; /* メニューアイテム内のリンクテキストの色 */
display: flex;
height: 20px;
justify-content: center;
text-decoration: none; /* リンクの下線を非表示 */
letter-spacing: 0.05em;
width: 130px;
padding-top: 15px;
}

/* ドロップダウンメニュー */
.drop-menu {
position: relative;
}
.drop-menu-list {
left: 0;
position: absolute;
top: 100%;
visibility: hidden; /* 下層メニューを非表示 */
width: max-content;
z-index: 1;
}

.drop-menu-item a {
font-size: 15px;
}

.drop-menu-item a:hover {
opacity: 0.5; /* 50％不透明度 */
}

/* パンくずリスト */
.Breadcrumb {
padding: 50px 0 20px 0;
font-size: 14px;
letter-spacing: 0.05em;
color: #FFF;
}
.Breadcrumb-ListGroup {
display: flex;
}
.Breadcrumb-ListGroup-Item-Link[href]:hover {
opacity: 0.5;
}
.Breadcrumb-ListGroup > * + * {
margin-left: 0.5em;
}
.Breadcrumb-ListGroup > * + *::before {
content: ">";
margin-left: 0.75em;
margin-right: 0.75em;
}

.Breadcrumb-ListGroup-Item-Link {
color: #FFF;
text-decoration: none;
}

h2 {
font-size: 19px;
font-weight: 300;
color: #FFF;
text-decoration: none;
letter-spacing: 0.08em;
border-bottom: #ccc solid 1px;
margin: 5px 0 0 0;
padding: 22px 0 10px 0;
text-align: center;
}

h3 {
font-size: 16px;
font-weight: bold;
line-height: 2em;
color: #FFF;
letter-spacing: 0.05em;
margin: 20px 0 13px 0;
padding: 10px 0 0 0;
border-bottom: 1px dotted #bbb;
}

h4 {
font-size: 16px;
line-height: 2.8em;
color: #FFF;
letter-spacing: 0.05em;
margin: 0 0 5px 0;
}

.wrapper {
width: 100%;
display: flex;
margin: 0;
}

.box, .box2 {
width: 1000px;
margin: 0 auto;

}
.box p {
font-size: 16px;
font-weight: 100;
line-height: 2.4em;
color: #FFF;
margin: 0;
text-align: justify;
font-feature-settings: 'pkna';
letter-spacing: 0.05em;
margin: 20px 0 30px 0;
}

.box p i {
font-size: 25px;
margin:30px 12px 0 12px;
}

.box2 p {
font-size: 15px;
font-weight: 100;
line-height: 2.2em;
color: #FFF;
font-feature-settings: 'pkna';
text-align: start;
margin: 0 0 50px 0;
}

.box2 a {
text-decoration: none;
color: #FFF;
}

.box2 a:hover {
color: #c9171e;
}

.box2 p a {
border-bottom: 1px solid #aaa;
padding-bottom: 5px;
}

.box2 p a:hover {
border-bottom: 1px solid #c9171e;
}

iframe {
padding-bottom: 20px;
}

#underline {
border-bottom: #c9171e 1px solid;
padding: 0 15px 8px 15px;
}

footer {
width: 100%;
height: 50px;
clear: both;
text-align: center;
margin: 20px 0 20px 0;
}

address {
font-size: 12px;
color: #FFF;
}

.map {
text-align: center;
padding: 40px 0 40px 0;
}

/* 画面の横幅が1150px以上 */
@media screen and (min-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#hamburger-nav {
display: none;
}
.wrapper{
width:100%;
}
～以下、画面の横幅が768pxまでの場合のスタイル記入～
}
/* 画面の横幅が768pxまで */
@media screen and (max-width: 1150px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
.nav-menu {
display: none;
}

.Breadcrumb {
display: none;
}
    
#header {
width: 100%;
margin: auto;
}
 
#navigation {
width: 90%;
display:flex;
justify-content: center;  /*真ん中に配置*/
padding-top: 50px;
}

.lang_menu {
float: right;
padding: 0 50px 0 0;
}

h1 a {
background-size: 100%;
margin: auto;
padding: 0 0 30px 0;
}

.wrapper{
width: 100%;
margin: 0;
}

.box, .box2 {
width: 90%;
margin: 0 auto;
}
    
.box p, .box2 p {
font-size: 15px !important;
line-height: 2.2em;
margin: 10px 0 30px 0;
}

iframe {
padding-bottom: 40px;
}

h2 {
font-size: 18px;
padding: 10px 0 10px 0;
}

h3 {
font-size: 15px;
}

h4 {
font-size: 14px;
line-height: 2.2em;
margin: 0 0 5px 0;
}

footer {
margin: 0;
}

address {
font-size: 11px;
}

/*ハンバーガーメニュー 3本線が×に*/
.openbtn1 {
position: relative;/*ボタン内側の基点となるためrelativeを指定*/
background:#57a2c7;
cursor: pointer;
width: 50px;
height:50px;
border-radius: 0px;
}

/*ハンバーガーメニュー　ボタン内側*/
.openbtn1 span {
display: inline-block;
transition: all .4s;/*アニメーションの設定*/
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background: #fff;
width: 45%;
}
.openbtn1 span:nth-of-type(1) {
top:15px; 
}
.openbtn1 span:nth-of-type(2) {
top:23px;
}
.openbtn1 span:nth-of-type(3) {
top:31px;
}

/*ハンバーガーメニュー　activeクラスが付与されると線が回転して×に*/
.openbtn1.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}

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

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

/*ハンバーガーメニュー　本体*/
#hamburger-nav {
position: fixed;
top: 0;
right: 0;
z-index: 1;
width: 50vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(230,230,230, .95);
}

.hamburger-menu-list a {
color: #333 !important;
}

.menu-second-list li a {
font-size: 14px !important;
}

.menu-second-list li {
padding-top: 5px;
}

.menu-second-list {
margin-top: 10px;      
}
    
.menu-second-list li a {
border: none !important;
}
.menu-second-list li a:hover {
opacity: 0.5; /* 50％不透明度 */
}
    
.hamburger-menu-item {
width: 100%;
height: auto;
margin-bottom: 50px;
text-align: left;
box-sizing: border-box;
}
.hamburger-menu-item a {
font-size: 15px;
border-bottom: #333 solid 1px;
padding: 0 15px 5px 15px;
}
    
/*ハンバーガーメニュー　アニメーション部分*/
/*アニメーション前のメニューの状態*/
#hamburger-nav {
transform: translateX(100vw);
transition: all .3s linear;
}

/*ハンバーガーメニュー　アニメーション後のメニューの状態*/
#hamburger-nav.active {
transform: translateX(0);
}

/*ハンバーガーメニュー　レイアウトのためのCSS*/
a {
color: #333;
text-decoration: none;
}

～以下、画面の横幅が1150pxまでの場合のスタイル記入～
}
/* 画面の横幅が640pxまで */
@media screen and (max-width:768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

#navigation {
width: 90%;
display:flex;
justify-content: center;  /*真ん中に配置*/
padding-top: 50px;
}

.lang_menu {
float: right;
padding: 0 32px 0 0;
}

h1 {
padding: 30px 0 0 0;
}

h1 a {
margin: auto;
padding: 0 0 20px 0;
    }

.nav-menu {
display: none;
}

.wrapper{
width:100%;
margin: 0;
}

h2 {
font-size: 17px;
padding: 10px 0 10px 0;
}

.box, .box2 {
width: 90%;
margin: 0 auto;
}

.box p, .box2 p {
font-size: 14px !important;
line-height: 2.0em;
margin: 10px 0 30px 0;
}

iframe {
padding-bottom: 40px;
}

h3 {
font-size: 14px;
}

h4 {
font-size: 13px;
line-height: 2.2em;
margin: 0 0 5px 0;
}

address {
font-size: 10px;
}
    
footer {
margin: 0;
}

/*ハンバーガーメニュー 3本線が×に*/
.openbtn1 {
position: relative;/*ボタン内側の基点となるためrelativeを指定*/
background:#57a2c7;
cursor: pointer;
width: 50px;
height:50px;
border-radius: 0px;
}

/*ハンバーガーメニュー　ボタン内側*/
.openbtn1 span {
display: inline-block;
transition: all .4s;/*アニメーションの設定*/
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background: #fff;
width: 45%;
}
.openbtn1 span:nth-of-type(1) {
top:15px; 
}
.openbtn1 span:nth-of-type(2) {
top:23px;
}
.openbtn1 span:nth-of-type(3) {
top:31px;
}

/*ハンバーガーメニュー　activeクラスが付与されると線が回転して×に*/
.openbtn1.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}

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

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

/*ハンバーガーメニュー　本体*/
#hamburger-nav {
position: fixed;
top: 0;
right: 0;
z-index: 1;
width: 50vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(230,230,230, .95);
}

.hamburger-menu-list a {
color: #333 !important;
}

.menu-second-list li a {
font-size: 13px !important;
}

.menu-second-list li {
padding-top: 5px;
}

.menu-second-list {
margin-top: 10px;      
}
    
.menu-second-list li a {
border: none !important;
}
.menu-second-list li a:hover {
opacity: 0.5; /* 50％不透明度 */
}
    
.hamburger-menu-item {
width: 100%;
height: auto;
margin-bottom: 50px;
text-align: left;
box-sizing: border-box;
}
.hamburger-menu-item a {
font-size: 14px;
border-bottom: #333 solid 1px;
padding: 0 15px 5px 15px;
}
    
/*ハンバーガーメニュー　アニメーション部分*/
/*アニメーション前のメニューの状態*/
#hamburger-nav {
transform: translateX(100vw);
transition: all .3s linear;
}

/*ハンバーガーメニュー　アニメーション後のメニューの状態*/
#hamburger-nav.active {
transform: translateX(0);
}

/*ハンバーガーメニュー　レイアウトのためのCSS*/
a {
color: #333;
text-decoration: none;
}

.lead {
margin:20px 0 0 0;
}

.btn-block {
width:200px;  
padding: 30px;
}

～以下、画面の横幅が640pxまでの場合のスタイル記入～
}

/* lightGallery */
#lightgallery1,
#lightgallery2,
#lightgallery3,
#lightgallery4,
#lightgallery5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 35px 0 30px 0;
}

#lightgallery1 a,
#lightgallery2 a,
#lightgallery3 a,
#lightgallery4 a,
#lightgallery5 a {
  width: calc(20% - 10px);
  margin: 0px;
}

#lightgallery1 img,
#lightgallery2 img,
#lightgallery3 img,
#lightgallery4 img,
#lightgallery5 img {
  padding: 0 0 8px 0;
}

#lightgallery1 img:hover,
#lightgallery2 img:hover,
#lightgallery3 img:hover,
#lightgallery4 img:hover,
#lightgallery5 img:hover {
  opacity: 0.7;
}

.loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 45vh;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}

.loading__logo {
opacity: 0;
animation: logo_fade 3s 0.5s forwards;
width: 250px;
}

@keyframes logo_fade {
0% {
opacity: 0;
transform: translateY(20px);
}

60% {
opacity: 1;
transform: translateY(0);
}

100% {
opacity: 1;
}
}

.index_lang_menu {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 60vh;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}

.index_lang_menu li {
float: left;

}

.index_lang_menu li p {
font-size: 16px;
font-weight: 300;
height: 33px;
margin: 0 13px 0 13px;
}

.index_lang_menu li a {
text-decoration: none;
}

.index_lang_menu li a:hover {
opacity: 0.5; /* 50％不透明度 */
}

.index_lang_menu__p {
opacity: 0;
animation: index_lang_menu_fade 3s 0.5s forwards;
margin-top: 140px;
}

@keyframes index_lang_menu_fade {
0% {
opacity: 0;
transform: translateY(20px);
}

60% {
opacity: 1;
transform: translateY(0);
}

100% {
opacity: 1;
}
}