@charset "utf-8";

*{
  box-sizing:border-box;
}

body{
  margin:0;
  color: #222;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;

}

@media(min-width:961px){
	.sponly{
	  display:none !important;
	}
  }
@media(max-width:960px){
  .pconly{
    display:none !important;
  }
}
@media(min-width:561px){
	.show_sp{display: none !important;}
 }
 @media(min-width:961px){
	.show_sptb{display: none !important;}
 }
 @media(max-width:560px){
	.show_tbpc{display: none !important;}
 }
 @media(max-width:960px){
	.show_pc{display: none !important;}
 }
@media(max-width:768px){
	.none_tb{display: none !important;}
}
@media(min-width:769px){
	.show_tb{display: none !important;}
}
/*変数*/
:root{
	--backcolor: #f1f1f1; /*サブカラー*/
}

img{
  max-width:100%;
  vertical-align:bottom;
}


p{
	margin:0
}

h3{
	margin:0;
}

a{
	color: #222;
  text-decoration: none;

}

a:visited{
    color: #222;
}

a:hover{
  /*filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;*/
}
.tac{
	text-align: center;
}
.tal{
	text-align: left;
}
.tar{
	text-align: right;
}
.mg0{
	margin: 0 auto;
}


.margin1{
	margin:10px
}
.margin2{
	margin:20px
}
.margin3{
	margin:30px
}
.margin4{
	margin:40px
}
.margin5{
	margin:50px
}
.mgb1{
	margin-bottom:10px
}
.mgb2{
	margin-bottom:20px
}
.mgb3{
	margin-bottom:30px
}
.mgb4{
	margin-bottom:40px
}
.mgb5{
	margin-bottom:50px
}
.mgt1{
	margin-top:10px
}
.mgt2{
  margin-top:20px
}
.mgt3{
	margin-top:30px
}
.mgt4{
	margin-top:40px
}
.mgt5{
	margin-top:50px
}
.mgl1{
	margin-left:10px
}
.mgl2{
	margin-left:20px
}
.mgl3{
	margin-left:30px
}
.mgl4{
	margin-left:40px
}
.mgl5{
	margin-left:50px
}
.mgr1{
	margin-right:10px
}
.mgr2{
  margin-right:20px
}
.mgr3{
	margin-right:30px
}
.mgr4{
	margin-right:40px
}
.mgr5{
	margin-right:50px
}
.n_mgt5{
	margin-top:5%
}

.padding1{
	padding:10px
}
.padding2{
	padding:20px
}
.padding3{
	padding:30px
}
.padding4{
	padding:40px
}
.padding5{
	padding:50px
}
.pdt1{
	padding-top:10px
}
.pdt2{
  padding-top:20px
}
.pdt3{
  padding-top:30px
}
.pdt4{
  padding-top:40px
}
.pdt5{
	padding-top:50px
}
.pdt6{
	padding-top:60px
}
.pdt7{
	padding-top:70px
}
.pdt8{
	padding-top:80px
}
.pdt9{
	padding-top:90px
}
.pdt10{
	padding-top:100px
}
.pdb1{
	padding-bottom:10px
}
.pdb2{
  padding-bottom:20px
}
.pdb3{
  padding-bottom:30px
}
.pdb4{
  padding-bottom:40px
}
.pdb5{
	padding-bottom:50px
}
.pdb6{
	padding-bottom:60px
}
.pdb7{
	padding-bottom:70px
}
.pdb8{
	padding-bottom:80px
}
.pdb9{
	padding-bottom:90px
}
.pdb10{
	padding-bottom:100px
}
.pdr5{
	padding-right:30% ;

}

/*----------
特殊例
-----------*/
/*----------
マーカー下線
----------*/
.marker_line {
    background: linear-gradient(transparent 60%, var(--basecolor) 0%);
}
.marker_line_oreng{
	background: linear-gradient(transparent 50%, #ffd95d9f 50%);
}

/*------------*/

.flex{
	display: flex;
}
.flex_wrap_reverse{
	display: flex;
}

/*--------------------------------
       ここまでtemplate
---------------------------------*/
/*--top--*/
.top_wrap .hero_logo img:nth-child(1) {
	position: absolute;
	top: 22%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	height: 48%;
	filter: drop-shadow(5px 5px 5px #000);
}

/* ホームのヒーロー（スライド） */
.top_wrap{
	position: relative;
}

/* スライド背景 */
.hero_bg{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 66vw;
	max-height: 100vh;
	overflow: hidden;
	z-index: 0;
}

/* 背景共通 */
.hero_bg .bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease; /* ← クロスフェード時間 */
}

/* スライド画像 PC */
.hero_bg .bg1{
  background-image: url(../img/top_hero1.jpg);
}
.hero_bg .bg2{
  background-image: url(../img/top_hero2.jpg);
}
.hero_bg .bg3{
  background-image: url(../img/top_hero3.jpg);
}

/* スライド画像 SP */
@media(max-width:768px){
	.hero_bg .bg1{
	  background-image: url(../img/top_sp_hero1.jpg);
	}
	.hero_bg .bg2{
	  background-image: url(../img/top_sp_hero2.jpg);
	}
	.hero_bg .bg3{
	  background-image: url(../img/top_sp_hero3.jpg);
	}
}

/* 表示中 */
.hero_bg .bg.is-active{
  opacity: 1;
}


.hero_bg.is-hidden{
  display: none;
}

/* マスク（ここで背景を切る） */
.hero_mask{
	position: relative;
	height: 66vw;
	max-height: 100vh;
	overflow: hidden;   /* ★ fixed背景を“消す”のはここ */
	z-index: 1;
}
@media(max-width:768px){
	.hero_mask{
		height: 150vw;
	}
}

/* 前面コンテンツ */
.hero_content{
	position: relative;
	height: 100%;
	z-index: 2;
}
.menu_box{
	position: absolute;
	top: 0%;
	right: 0;
	width: 100%;
    font-size: 100%;
    font-weight: bold;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    z-index: 6;
}
.menu_box a{
	margin: 25px 35px 15px;
	letter-spacing: 2px;
	position: relative;
	display: block;
	transition: .3s;
	text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
	-moz-text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
	-webkit-text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
}
.news_new_box{
	position: absolute;
	bottom:0;
	left: 0;
	/* height: 3.3em; */
	z-index: 1;
	background: #000;
	padding: 1.5% 3%;
}
@media(max-width:960px){
 	.hero_mask{
		height: calc(66vw + 3em);
	}
	.news_new_box{
		width:100%;
		top: 66vw;
		height:auto;
		font-size:90%;
	}
}
@media(max-width:768px){
	.hero_bg{
		height:150vw;
	}
 	.hero_mask{
		height: 155vw;
	}
	.news_new_box{
		position:absolute;
		width:100%;
		top:unset;
		bottom:0;
		height:auto;
		padding: 1% 2%;
		font-size:90%;
	}
}

.news_new_box a{
	color: #fff;
	display: flex;
}
.news_new_box a date{
	margin: 0 20px 0 0;
}
/*ニュース1行の周りの余白*/
.news_new_box .bx-wrapper{
	background: none;
	border: none;
	box-shadow: none;
	margin-bottom: 0;
}
.news_new_box ul {
	list-style: none;
    padding: 10px;
    margin: 0;
    border-radius: 10px;
}
.news_new_box ul li{
	display: block;
	width: fit-content !important;
}

/*日付*/
.bx_slider span {
    display:inline-block;
    font-size:0.8rem;
    margin-right:10px;
    color:#777;
}

/*768px以下の見た目 ※1行のままにしたい場合は不要　*/
/*@media screen and (max-width:768px) {
    .bx_slider {
        padding:20px;
        background:#fff;
    }

    .bx_slider li {
        border-bottom:1px dashed #ccc;
    }

    .bx_slider li:last-child {
        border-bottom:none;
    }
    .bx_slider span {
        display:block;
		padding-bottom:10px;
    }
}*/
/*----------- contentsここから --------------*/
#menuBar {
	position: fixed;
	top: -120px; /* メニューバーを隠す初期位置 */
	left: 0;
	right: 0;
	height: 100px;
	width: fit-content;
	text-align: center;
	line-height: 50px;
	transition: top 0.3s;
	z-index: 9;
	margin: 0 0 0 auto;
}

#menuBar.visible {
	top: 0; /* メニューバーが表示される位置 */
}

/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width:100%;
    height: 100vh;
}

/*丸の拡大*/
.circle-bg{
    position: fixed;
	z-index:3;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--backcolor);
    /*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
	top:-50px;
    left:calc(50% - 50px);/*50%から円の半径を引いた値*/
    transition: all .6s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
	transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
	padding: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
     display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
/*#g-nav ul {
	opacity: 0;
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
	padding: 0;
}
*/
/*背景が出現後にナビゲーションを表示*/
/*#g-nav.panelactive ul {
    opacity:1;
}
*/

.sp_menu_design_box.flex{
	align-items: center;
	position: relative;
}
.sp_menu_design_box.flex::after{
	content: "";
    position: absolute;
    top: -100px;
    left: 0;
    background: url(../img/asanoha_1.png) no-repeat;
    background-size: contain;
    width: 100%;
    height: 866px;
    z-index: -1;
}.sp_menu_design_box.flex::before{
    content: "";
    position: absolute;
    bottom: -0px;
    right: 0;
    background: url(../img/asanoha_2.png) no-repeat;
    background-size: cover;
    width: 40%;
    height: 500px;
    z-index: -1;

}
.sp_mune_img{
	width: 40%;

}
.sp_mune_img img{
	width: auto;
	height: 100vh;
	object-fit: cover;
	overflow: hidden;
}
.sp_menu_box{
	width: 60%;
	/*height: 100vh;*/
	overflow: hidden;
	padding: 5%;
}
.sp_menu_logo{
	text-align: left;
	margin: 0 auto 20px;
}
.sp_menu_logo img{
	width: 25%;
}

.sp_mune_link{
	display: flex;
	flex-wrap: wrap;
	padding:0 0 30px 0;
	margin: 0 0 30px 0;
	border-bottom: 1px solid #000;
}
.sp_mune_link li{
	width: 25%;
	list-style:none;
}
.sp_mune_link li a{
	font-size: 1.3vw;
	font-weight: bold;
}
.sp_menu_contact{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	max-width: 850px;
}
.sp_menu_contact div{
	width: 40%;
	text-align: center;
}
.sp_menu_contact div img{
	width: 60%;
}
.sp_menu_contact div:nth-child(1){
	position: relative;
	margin: 0 4em 0 0;

}
.sp_menu_contact div:nth-child(1)::after{
	position: absolute;
    top: 0px;
    left: 100%;
    margin: 0 2rem;
    content: "";
    width: 1px;
    height: 120%;
    border-left: solid 1px #333;
    transform: rotate(45deg);
}

.sp_menu_sns_wrap{
	display: flex;
	align-items: center;
	justify-content:center;
	margin: 50px auto 0;
	max-width: 400px;
}
.sp_menu_sns{
	display: flex;
}
.sp_menu_sns_wrap a{
	display: block;
    width: 60px;
    margin: 0 20px;
}


.sp_copyright{
	color:#222;
	margin: 30px 0 0 0;
}



/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive .sp_mune_img{
	animation-name:gnaviAnime;
	animation-duration:1s;
	animation-delay:.1s;/*0.2 秒遅らせて出現*/
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes gnaviAnime{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
}


/*========= ボタンのためのCSS ===============*/
.openbtn{
	position: relative;
	z-index: 9999;/*ボタンを最前面に*/
	cursor: pointer;
	width: 80px;
	height: 80px;
	margin: 12px 20px 0px auto;
	background: #333;
	border-radius: 45px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    right: 19px;
    height: 5px;
    border-radius: 0;
    background-color: #fff;
    width: 53%;
}

.openbtn p {
    position: absolute;
    right: 9px;
    bottom: -12px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0;
    color: #333;
	text-shadow:
		0 0 1px #999,
		0 0 1px #999,
		0 0 1px #999;
	
}


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

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

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

.openbtn.active span:nth-of-type(1) {
    top: 32px;
    right: 20px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 44px;
    right: 20px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}

@media(max-width:960px){
	.sp_menu_design_box.flex{
		justify-content: center;
		height: 100vh;
	}
	.sp_mune_img{
		display: none;
	}
	.sp_menu_box{
		width: 80%;
		padding: 0;
	}


}
@media(max-width:768px){
	.sp_mune_link{
		margin: 0 0 10px 0;
		padding: 0 0 10px 0;
	}
	.sp_mune_link li{
		width: 50%;
	}
	.sp_mune_link li a{
		font-size: 120%;
	}
	.sp_menu_sns_wrap{
		flex-wrap: wrap-reverse;
		margin: 30px auto 0;
	}
	.sp_menu_sns,.sp_menu_online{
		width: 100%;
	}
	.sp_menu_sns{
		justify-content: center;
		margin: 20px auto 0;
	}
	.sp_menu_sns a{
		width: 35px;
	}
	.sp_menu_online{
		text-align: center;
	}
	.sp_menu_contact div img{
		width: 100%;
	}
	.sp_menu_online a img{
		width: 70%;
	}
	.sp_menu_contact div:nth-child(1){
		margin: 0 2em 0 0;
	}
	.sp_menu_contact div:nth-child(1)::after{
		top: 50%;
		margin: 0 1em;
		height: 50%;
		transform: rotate(35deg);
	}
	.sp_copyright{
		font-size: 12px;
	}
	.sp_menu_design_box.flex::after{
		background-size: cover;
		height: 600px;
		right: -00px;
		top: -200px;
	}
	.openbtn{
		width: 46px;
		height: 46px;
		margin: 7px 7px 0px auto;
	}
	.openbtn span{
		right: 11px;
		height:3px;
	}
	.openbtn span:nth-of-type(1) {
		top: 13px;
	}
	
	.openbtn span:nth-of-type(2) {
		top: 22px;
	}
	
	.openbtn span:nth-of-type(3) {
		top: 31px;
	}
	.openbtn p {
		margin: 0 -5px;
		font-size: 13px;
		right: 5px;
		font-weight:bold;
		bottom: -8px;
		letter-spacing:-1px;
	}
	.openbtn.active span:nth-of-type(1) {
		top: 16px;
		right: 12px;
	}
	.openbtn.active span:nth-of-type(3){
		top: 28px;
		right: 12px;
	}
}


/*----*/
.noto_serif_normal{
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.noto_serif_bold{
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.section_box{
	position: relative;
	margin: 0px auto;
}
.contents_wrap{
	max-width: 1200px ;
	margin: 0 auto;
	width: 90%;
}
.gray_back{
	background-image:url(../img/bg_gray.jpg);
}
.access_gray_back{
	/*background: linear-gradient(to top, #ffffff 45%, #f0f0f0 45%);*/
}
.access_gray_back::before{
  content: "";
  position: absolute;
  
  top: 0;
  left: 0;
  width: 100%;
  height: 60%; /* ←上から100pxの範囲だけ表示 */
  background-image: url('../img/bg_gray.jpg');
  background-size: cover;
  background-position: center top;
  z-index: -1;
}
.section_box.access_gray_back{
	padding: 100px 0;
}
.section_box.gray_back{
	padding: 50px 0;
}

.contents_ttl{
	position: relative;
}
.contents_ttl::after{
	content:"";
	position: absolute;
	top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	width: 80px;
	height: 80px;
	background: url(../img/intro_back.png) no-repeat;
	background-size:contain ;
	z-index: -1;
}
.contents_ttl h2{
	width: fit-content;
	border-bottom: 1px solid #000;
	padding: 30px 0 30px 40px;
	margin: 0;
	font-size: 200%;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}


/*--intro--*/
.intro_box{
	position: relative;
	margin: 0 auto;
	padding: 150px 0 200px;
	position: relative;
	z-index: 3;
	background: #fff;	
}
.intro_box::after{
	content:"";
	position: absolute;
	top: 15%;
	right:20%;
	width: 30%;
	height: 60%;
	background: url(../img/intro_back.png) no-repeat;
	background-size: contain;
	z-index: -1;

}
.intro_box .contents_wrap{
	max-width: 1000px;
	width: 90%;
}
.intro_text{
	width: 60%;
	padding: 0 0px 0 100px;
	margin: 100px auto 0;

}
.intro_text p{
	line-height: 1.8em;
	letter-spacing: 1.5px;
}
.intro_text p .big_font{
	font-size: 130%;
}
.intro_text h2{
	font-size: 100%;
	margin: 1.5em 0;
}
.intro_text h3{
	font-size: 90%;
	margin: 30px auto 0;
}
.tate_intro{
	position: relative;
	width: 40%;
	writing-mode: vertical-rl;
    text-orientation: upright;
	font-size: 170%;
	font-weight: 400;
}
.tate_intro_box{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	height: 550px;
}
.tate_intro p:nth-child(2){
	margin: 6.6em 1em 1em 0em;
}
.tate_intro p:nth-child(3){
	margin: 13.5em 0em 1em 1em;
}


/*--about--*/
.about_wrap{
	background-color:#fff
}
.about_wrap .contents_wrap{
	max-width: 900px;
}
.gaikan{
	position: relative;
	width: 85%;
    height: 35vw;
	margin: 0 0 0 auto;
}
.inner{
	position: absolute;
    top: 0;
    right: 0;
	width: 100%;
	height: 100%;
    clip-path: inset(0);
}
.about_hero{
	background: url(../img/about.webp) ;
    width: 100%;
    height: 100vh;
	background-repeat: no-repeat;
    background-size: 150%;
    background-position: center top;
    transition-property: background-position;
    transition-duration: .8s;
    transition-delay: .045s;
}

.about_box{
	margin: 100px auto 0;
}
.about_box .flex{
	margin: 50px auto 50px;
}
.about_tate{
	width: 50%;
	writing-mode: vertical-rl;
    text-orientation: upright;
	position: relative;
}
.about_tate div{
	position: absolute;
	height: 100px;
    top: 0;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.about_tate p{
	margin: 0 10px;
}
.about_text{
	width: 100%;
	line-height: 1.8em;
}
.about_text p{
	margin: 0 auto 10px;
}
.link_box{
	margin-top:1.5em;
}

.link_box a{
	position: relative;
	background: #f0f0f0;
	display: inline-block;
	padding: 10px 50px 10px 60px;
	transition: ease .3s;

}
.link_box a::after{
	content: "";
	position: absolute;
    right: -8px;
    border-style: solid;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 15px solid #000;
    border-right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transition: all .3s;
}
.link_box a:hover{
	background: #656565;
	color: #fff;
}
.link_box a:hover::after{
	right: -12px;
}
.dot_line_wrap{
	max-width: 600px;
	width: 90%;
	margin: 0 auto;
	/* background-color:#fff; */
}
.dot_line{
	display: block;
	background-image: repeating-linear-gradient(90deg, #000000, #000000 4px, transparent 4px, transparent 16px);
	background-position: left top;
	background-repeat: repeat-x;
	background-size: 100% 1px;
	height: 1px;

}

/*--スライダーリンク--*/
.scroll_infinity{

}

@keyframes infinity-scroll-left {
	from {
	transform: translateX(0);
	}
	to {
	transform: translateX(-100%);
	}
}
.scroll_infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll_infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll_infinity__list__left {
  animation: infinity-scroll-left 50s infinite linear 0.9s both;
}
.scroll_infinity__item {
  width: calc(100vw / 4);
  margin: 0 50px 0 0;
}
.scroll_infinity__item a .mask{
	display: block;
    line-height: 0;
    overflow: hidden;
}
.scroll_infinity__item a p{
	margin: 10px auto 0;
}
.scroll_infinity__item a img{
  transition: .3s ease-in-out;
  filter: grayscale(60%) brightness(70%);
  
}
.scroll_infinity__item>img {
  width: 100%;

}
.scroll_infinity__item a:hover img{
	transform: scale(1.1);
	filter:grayscale(0);
}

.highlight_wrap{
	padding: 150px 0;
}
.highlight_box{
	position: relative;
}
.highlight_box .flex{
	align-items: center;
	z-index: 10;
	margin: 150px 0 50px;
}
.highlight_ttl{
	position: relative;
	width: 50%;
	z-index: 3;
}

.highlight_ttl h2{
	position: absolute;
	top: -105px;
	left: 30%;
	letter-spacing: 1.5px;
	width: fit-content;
	padding: 60px 20px 30px;
	writing-mode: vertical-rl;
	text-orientation: upright;
	background: #fff;
	height: 300px;
	font-size: 200%;
	z-index: 1;
}
.highlight_ttl h2::after{
	content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background: url(../img/intro_back.png) no-repeat;
    background-size: contain;
    z-index: -1;
}

.highlight_text{
	width: 50%;
	line-height: 1.8em;
}

.highlight_box .link_box{
	margin: 50px auto 0;
}


/*--年間行事--*/
#event_movie .contents_wrap{
	max-width: 1400px;
}
.event_movie_ttl h2{
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	margin: -130px auto 50px;
	width: fit-content;
	font-size: 200%;
}
.event_movie_ttl{
	margin: 0 auto 50px;
}
.movie_box {
	margin: 0 auto 50px;
	flex-wrap: wrap;
}
.movie_box div{
	margin: 3% 2% 0 0;
	width: 32%;
	text-align: center;
}
.movie_box div:nth-child(3n){
	margin: 3% 0 0 0;
}
.movie_box h4{
    background: #fff;
    width: fit-content;
    margin: 1em auto 0.5em;
    padding: 5px 20px;
    font-size: 120%;
	letter-spacing: 1.5px;
}
.movie_box button{
	border: none;
	padding: unset;
}

/*--ご祈禱・お守り--*/
.prayer_wrap{
	padding: 100px 0 ;
}
.prayer_wrap .flex{
	align-items: center;
}
.prayer_ttl{
	width: 50%;
	justify-items: center;
}
.prayer_ttl h2{
	padding: 30px 30px 30px 40px;
	margin: 0 auto;
	width: fit-content;
	font-size: 200%;
	position: relative;
}
.prayer_ttl h2::after{
	content: "";
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 80px;
    height: 80px;
    background: url(../img/intro_back.png) no-repeat;
    background-size: contain;
    z-index: -1;
}
.prayer_box_wrap{
	display: flex;
	margin: 50px auto ;
}
.prayer_box_img{
	width: 47%;
	margin: 0 3% 0 0;
}
.prayer_box{
	width: 50%;
}
.prayer_box h4{
	background: #f1f1f1;
	width: fit-content;
	margin: 0 auto 30px;
	font-size: 130%;
	padding: 5px 20px;
}

.prayer_box h3{
	line-height: 1.7em;
	margin: 10px auto 0;
}
.prayer_box h3 span{
	display:inline-block;
	margin: 0 0 0 5px;
}
.prayer_box div{

	margin: 0 auto 20px;
}
.prayer_box .link_box{
	margin: 30px auto 0;
}
.prayer_wrap .dot_line_wrap{
	margin: 100px auto 50px;
}
.mgt100{
	margin-top: 100px;
}



/*----お知らせ欄---*/
.news_wrap{
	display: flex;
	align-items: center;
	margin: 50px auto 50px;
}
.news_ttl_box{
	width: 30%;
}
.news_box{
	width: 70%;

}
.news_ttl_box h2{
    position: relative;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    font-size: 170%;
    width: fit-content;
    margin: 0 auto 50px;
	z-index: 3;
}
.news_ttl_box h2::after{
	content: "";
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	background: url(../img/mon.png) no-repeat;
	background-size: contain;
	z-index: -1;
}

.news_box a span{
	display: inline-block;
}
.category{
	background: #292929;
	font-size: 80%;
	color: #fff;
	padding: 3px 20px;
	border-radius: 45px;
	margin: 0 0 0 20px;
}
.news_box a p{
	padding: 10px 0 20px;
	border-bottom: 1px solid;
}
.news_box a{
	display: block;
	padding: 20px 0 0;
}

/*--access--*/
.access_map_wrap{
	display: flex;
	align-items: center;
}
.map_box{
	width: 50%;
}
.access_ttl h2{
	position: relative;
	width: fit-content;
	margin: 0 auto;
	padding: 20px 0;
	font-size: 160%;
	z-index: 3;
}
.access_ttl h2::after{
	content: "";
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	background: url(../img/mon.png) no-repeat;
	background-size: contain;
	z-index: -1;
}
.map_box iframe{
	width: 100%;
	height: 400px;
}
.access_box{
	width: 50%;
}
.access_txet{
	width: fit-content;
	margin: 20px auto;
}
.access_txet p img{
	width: auto;
	height: 22px;
	display: inline-block;
	margin: 0 0 0 5px;
}
.access_txet p {
	margin: 10px 0;
}
.access_txet .access_link{
	display:inline-block;
	margin:0 0 0 10px;
	background:#222222;
	padding:3px 20px;
	color:#fff;
	border-radius:45px;
}
.access_txet .access_link img{
	margin:0 10px 0 0;
}

/*------------- footer -------------*/
footer{
	margin: 0px 0 ;
	text-align: center;
	padding: 100px 0 0;
	background-image:url(../img/bg_gray.jpg);
}

.footer_logo{
	margin: 20px 0;
}
.footer_logo img{
	width: 15%;
}
.footer_tel{
	display: inline-block;
	margin:20px auto 0;
	font-size: 130%;
}
.footer_tel_text{
	font-size: 90%;
}
.copyright{
	padding: 80px 0 20px;
}
.footer_sns{
	margin:20px auto;
}
.footer_sns a {
	display:inline-block;
	margin:0 10px;
}
.footer_sns a img{
	width:50px;
}




/*--------------- お問い合わせ ---------------*/
.tel_box{
	text-align: center;
	margin: 50px auto 100px;
}
.mail_wrap{
	margin:0 auto 100px;
}
.form{
	max-width: 900px;
	margin: 0 auto;
	width:90%;
}
.form p{
	margin-left: 10%;
}

.co_table{
	max-width: 900px;
	width: 100%;
	margin: 0px auto 40px;
	display: flex;
	align-items: center;
}

.co_table dt{
	width: 30%;
}
.co_table dd{
	width: 70%;
}
.co_table span{
	padding:3px 8px;
	display: inline-block;
	margin-right: 20px;
	background: var(--backcolor);
	color: #333;
}

input[type=text],
input[type=radio],
textarea {
	width: 100%;
	border-top: none;
	border-right: none;
	border-left: none;
	height: 60px;
	border: #333 solid 1px;
	background-color: #fff;
	padding: 0.5em;
}
textarea{
	height: 100px;
}
input[type=text],
input[type=radio],
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

.submit_tac{
	text-align: center;
}
input[type="submit"],
a.back {
	width: auto;
	height: auto;
	text-align: center;
	border: 0px solid;
	padding: 10px 20px;
	color: #333;
	background: var(--backcolor);
	font-size: 16px;
	margin-top: 40px;
	min-width: 200px;
	display: inline-block;
}


.mail_form_check .co_table dt{
	color: #000;
}

.fff_block.mail{
	max-width: 900px;
	width: 90%;
	margin: 0px auto 40px;
}
.return_top{
	text-align: center;
	background: var(--basecolor);
	padding: 10px 50px;
	display: inline-block;
	margin: 40px auto 0;
}





/*----------- 子ページ -------------*/
.menu_box.under_menu{
	position: unset;
}
.under_hero_logo{
	align-self: center;
	padding-left:1.2em;
}
.under_hero_logo img{
	width: 50%;
}
.under_hero_img{
	position: relative;
	margin: -50px auto 0;
}
.under_hero_img img{
	object-fit: cover;
	width: 100%;
	height: 600px;
}

.bread_list{
	margin: 20px auto;
}
.bread_list span{
	display: inline-block;
	margin: 0 30px;
}
.under_page_ttl{
	text-align: center;
}
.under_page_ttl h2{
	position: absolute;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	font-size: 180%;
	letter-spacing: 2px;
	width: fit-content;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	color: #fff;
	margin: 0 auto;
	height: 300px;
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.midokoro_box{
	display: flex;
	margin: 100px auto 100px;
}
.midokoro_txt{
	width: 48%;
	margin: 0 2% 0 0;
}
.midokoro_img{
	width: 50%;
}
.midokoro_img img:nth-child(1){
	margin: 0 0 20px 0;
}
.midokoro_ttl{
	margin: 0 auto 20px;
}
.midokoro_ttl.flex{
	align-items: center;

}
.midokoro_ttl h2{
	background: #f0f0f0;
	width: fit-content;
	padding: 5px 20px;
	margin: 0 20px 0 0;
}
.midokoro_txt p{
	line-height: 1.8;
}

/*糸崎神社について*/
.about_ttl{

	text-align: center;
	margin: 100px auto 0;
}
.about_ttl h2{
	position: relative;
	writing-mode: vertical-rl;
    text-orientation: upright;
	width: fit-content;
	margin: 0 auto;
}
.about_ttl h2::after{
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background: url(../img/intro_back.png) no-repeat;
    background-size: contain;
    z-index: -1;
}
.saijin{
	writing-mode: vertical-rl;
    text-orientation: upright;
	width: fit-content;
	margin: 70px auto 100px;
	font-size: 130%;
}
.saijin p{
	margin: 0px 15px;
}
.gosintoku_wrap h3{
	writing-mode: vertical-rl;
    text-orientation: upright;
	width: fit-content;
	margin: 150px auto 50px;
	letter-spacing: 3px;
}
.gosintoku_wrap p{
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.8;
}
.about_img_box{
	margin: 150px 0 150px 4vw;
	text-align: right;
}

.story_box_wrap{
	margin: 100px auto;
}
.story_ttl{
	writing-mode: vertical-rl;
    text-orientation: upright;
	width: fit-content;
	background: #f1f1f1;
	padding: 10px 10px;
	align-self: center;
	letter-spacing: 10px;
}
.story_box{
	margin: 0 0 0 30px;
}
.story_box p{
	line-height: 1.8;
}
.about_hosoku_box{
	margin: 150px auto;
}
.hosoku_box{
	width: 47%;
	margin: 0 3% 0 0;
}
.about_hosoku_wrap{
	border: 1px solid;
}
.hosoku_text h4{
	background: #f1f1f1;
	width: fit-content;
	padding: 5px 20px;
	margin: 0 0;
}
.hosoku_text p{
	margin: 10px auto 50px;
	line-height: 1.8;
}
.hosoku_text p .jisage{
	display:inline-block;
	padding-left: 2rem;
}
.hosoku_text{
	width: 50%;
}


/*--news-page--*/
.section_box.news_page_wrap{
	margin: 150px auto;
}
.news_text{
	line-height: 1.8;
}
.news_page_wrap{
	max-width:900px;
	margin:150px auto;
}
.news_img_wrap{
	width:900px;
	max-width:100%;
	text-align:center;
}
.news_thumb{
	display:flex;
	flex-wrap:wrap;
	width:fit-content;
	margin: 10px auto;
	padding: 0;
	
	img{
		height:calc(3vw + 35px);
		margin: 10px 5px 0;
	}
}
.news_img{
		background:#000;
}
.return_btn{
	display:inline-block;
	background:var(--backcolor);
	padding:5px 25px;
	margin:50px auto 0;
	
}

/* 複数画像（multi）のときだけ3:2比率を適用 */
.news_img_wrap.multi .news_img {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.news_img_wrap.multi .news_img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

/* 単一画像（single）のときは通常表示 */
.news_img_wrap.single .news_img img {
  max-height:600px;
  object-fit: initial;
  position: static;
  transform: none;
}
.news_text{
	width: 900px;
	max-width:100%;
	margin-top: 40px;
}
.news_link{
	display:block;
	margin: 10px auto 0;
}
.news_link p{
	padding: 10px 0 20px;
	border-bottom: 1px solid;
}
.news_pdf{
	margin-top:10px;
}
.news_pdf a{
	margin-top:5px;	
	display:inline-block;
	background:#eee;
	padding:5px 15px 8px;
	line-height:2.4em;
}
.news_pdf a img{
	height:2.5em;
	margin-right:0.3em;
}

/*--お守り--*/
.omamori_intro{
	margin: 150px auto 0;
	max-width: 700px;
}
.omamori_intro p{
	line-height: 1.8;
}
.omamori_hosoku{
	max-width: 700px;
	margin:50px auto 150px;
}
.hanpu{
	border: 1px solid;
	margin: 50px auto;
	padding: 10px ;
}
.hanpu dl{
	display: flex;
	margin: 5px auto;
	justify-content: center;
}
.oamori_box_ttl{
	text-align: center;
	margin: 0px auto 50px;
}
.oamori_box_ttl h3{
	font-size: 120%;
	writing-mode: vertical-rl;
    text-orientation: upright;
	width: fit-content;
	margin: 0 auto;
}
.oamori_box_wrap{
	margin: 0 auto 150px;
}
.oamori_box{
	display: flex;
	flex-wrap: wrap;
	margin:100px auto ;
}
.omamori{
	width: 32%;
	margin: 2% 2% 0 0;
}
.omamori:nth-child(3n){
	margin: 2% 0 0 0;
}
.omamori h4{
	font-size: 120%;
	margin: 10px auto 0;
}

/*--------------SP--------------■■■■■■■■■■■*/
@media(max-width:1100px){



	/*-------- contact page ----------*/



}
@media(max-width: 960px){
	/*------共通---------*/
	.flex_wrap_reverse{
		flex-wrap: wrap-reverse;
	}
	.flex{
		flex-wrap: wrap;
	}
	/*----------- contact page----------------*/
	.co_table{flex-wrap: wrap;}
	.co_table dt{
		margin: 0% auto 20px;
		width:100%;
    }
	.co_table dd{
		margin-left: 0%;
		width:100%;
	}

	
	.sp_mune_link li a{
		font-size: 115%;
	}

	/*intro*/
		/*intro*/
	.intro_box{
		padding:100px 0;
	}
	.tate_intro{
		font-size: 150%;
	}
	.intro_box::after{
		height: 60%;
		width: 60%;
		right: 5%;
	}

	/*--見どころ--*/
	.scroll_infinity__item{
		width: calc(100vw / 2);
	}

	/*--年間行事--*/
	.movie_box a{
		width: 49%;
		margin: 3% 2% 0 0;
	}
	.movie_box a:nth-child(3n) {
		margin: 3% 2% 0 0;
	}
	.movie_box a:nth-child(2n) {
		margin: 3% 0% 0 0;
	}

	/*--子ページ--*/
	.under_hero_img{
		margin: 0px auto 0;
	}
	.under_hero_logo{
		margin:20px 20px 20px 0;
	}
	.under_hero_img img{
		height: 300px;
	}
	.under_page_ttl h2{
		font-size: 150%;
	}

	/*--神社について--*/
	.story_box_wrap{
		justify-content: center;
	}
	.story_box{
		margin: 20px auto 0;
		width: 100%;
	}
	.about_img_box img{
		width: 100%;
		object-fit: cover;
		height: 300px;
	}



}
@media(max-width: 768px){
	.hero_img{
		height: 80vw;
	}
	.hero_img img{
		height: 80vw;
		object-fit: cover;
	}
	.news_new_box ul li{
		width: 100% !important;
	}
	/*--top--*/
	.news_new_box a{
		flex-wrap: wrap;
	}
	.top_wrap .hero_logo img:nth-child(1){
		width:auto;
	}
	.top_wrap .hero_logo img:nth-child(2){
		width: 10%;
	}

	/*--intro--*/
	.intro_box{
		padding: 50px 0;
	}
	.intro_text{
		width: 100%;
		padding: 0;
		margin: 280px auto 0;
	}
	.tate_intro{
		font-size: 110%;
		width: 100%;
	}
	.tate_intro_box{
		height: 400px;
	}
	.tate_intro_box .show_sp{
		display: inline-block;
		margin: 10px 0 0 0;
	}
	.tate_intro p:nth-child(1) span{
		font-size: 70%;
	}
	.tate_intro p:nth-child(2){
		margin: 4em 0.2em 1em 0em;
	}
	.tate_intro p:nth-child(3){
		margin: 10em 0.2em 1em 0em;
	}
	.intro_box::after{
		top: 10%;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}

	/*--見どころ--*/
	.highlight_wrap{
		padding: 70px 0 100px;
	}
	.highlight_box .flex{
		margin: 50px 0;
	}
	.prayer_ttl{
		width: 100%;
		text-align: left;
	}
	.prayer_ttl h2{
		margin: 0 auto 0 0;
		font-size: 160%;
	}
	.highlight_text{
		width: 70%;
	}
	.highlight_ttl{
		width: 30%;
	}
	.highlight_ttl h2{
		left: 0;
		margin: 0 auto;
		font-size: 160%;
	}

	/*年間行事*/
	.event_movie_ttl h2{
		font-size:160%;
		margin: -113px auto 0;
	}
	.movie_box div{
		width: 49%;
	}
	.movie_box div:nth-child(3n){
		margin: 3% 2% 0 0;
	}
	.movie_box div:nth-child(2n){
		margin: 3% 0 0 0
	}
	/*--御祈祷・お守り--*/
	.prayer_wrap{
		padding: 50px 0;
	}
	.prayer_box_wrap{
		flex-wrap: wrap;
	}
	.prayer_box_img{
		width: 100%;
		margin: 0 0 3% 0;
	}
	.prayer_box{
		width: 100%;
	}

	/*--お知らせ--*/
	.news_page_wrap{
		margin:50px auto;
	}
	.news_wrap{
		flex-wrap: wrap;
	}
	.news_ttl_box{
		width: 100%;
	}
	.news_box{
		width: 100%;
	}

	/*--アクセス--*/
	.access_map_wrap{
		flex-wrap: wrap-reverse;
	}
	.access_box{
		width: 100%;
	}
	.map_box{
		width: 100%;
	}

	/*--footer--*/
	.footer_logo img{
		width: 30%;
	}

	/*--神社について--*/
	.hosoku_box,.hosoku_text{
		width: 100%;
	}

	/*--お守り・授与品--*/
	.omamori{
		width: 48.5%;
		margin: 2% 3% 0 0;
	}

	.omamori:nth-child(3n){
		margin: 2% 3% 0 0;
	}
	.omamori:nth-child(2n){
		margin: 2% 0% 0 0;
	}
	.omamori h4{
		font-size: 100%;
	}
	.omamori_intro,
	.oamori_box{
		margin: 50px auto 50px;
	}
	.bread_list{
		font-size: 80%;
		margin: 10px auto ;
	}
	.bread_list span{
		margin: 0 10px;
	}

	/*--見どころページ--*/
	.midokoro_box{
		flex-wrap:wrap
	}
	.midokoro_txt{
		width:100%;
		margin:0 auto 20px
	}
	.midokoro_img{
		width:100%
	}


}

@media(max-width:560px){
	.top_wrap .hero_logo img:nth-child(1){
		/* height: 75vw; */
		width:auto;
		/* top: 38vw; */
	}	
	.sp_mune_link li a{
		font-size: 110%;
	}
	.sp_menu_logo img{
		width: 50%;
	}
	.gaikan{
		height: 40vw;
	}
	.about_hero{
		background: url(../img/about_sp.webp);
		background-size: 150%;
	}

	.contents_ttl h2{
		font-size: 160%;
	}
	.about_box{
		margin: 50px auto 0;
	}
	.access_txet .access_link{
		margin:10px auto ;
	}

	/*--contact--*/
	.tel_box p{
		margin:20px auto 0;
	}
	.tel_box img{
		width:85%;
	}
	/*--footer--*/
	.footer_logo img{
		width: 40%;
	}

	/**/
	.movie_box a h4{
		font-size: 100%;
	}
	.prayer_box h4{
		font-size:110%;
	}
	.prayer_box h3{
		font-size:100%
	}
	/*----*/
	.gaikan_sp{
		margin:0 0 0 80px;
	}
}