@charset "UTF-8";

html {
	font-size: 100%;
	scroll-behavior: smooth;
}

img {
	max-width: 100%;
}

ul{
	text-decoration: none;
	list-style:none;
}

a{
	text-decoration: none;
}

body {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	/* 画像ファイルの指定 */
	background-image: url("../image/top-back.jpg");
	background-color: rgba(255,255,255,0.3);
	background-blend-mode: lighten;
         
	/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
	background-attachment: fixed;
   
	/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-size: cover;
   
}

.flex {
	display: flex;
}

/*ページトップボタン*/
#backToTop {
	position: fixed;               
	left: 15px;                    
	bottom: 60px;                  /* 下から少し上げる */
	padding: 6px 10px;             /* さらに小さく */
	background: linear-gradient(135deg, #6a11cb, #2575fc);
	color: white;
	font-size: 10px;               /* 小さめ文字 */
	font-weight: bold;
	border-radius: 15px;           /* 小さめの角丸 */
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	text-decoration: none;
	text-align: center;
	transition: transform 0.3s, background 0.3s;
	z-index: 1000;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

#backToTop:hover {
  transform: scale(1.05);        
  background: linear-gradient(135deg, #2575fc, #6a11cb);
}

/*ページトップボタンスマホでは非表示*/
@media screen and (max-width: 641px){
	#backToTop {
		display: none;
	}
}

/* サイドバー用フォント書体*/
.sidebar, 
.sidebar nav, 
.sidebar a, 
.sidebar ul, 
.sidebar li {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif" !important;
}

/* ハンバーガーメニュー用フォント書体*/
.hamburger,
.hamburger-menu,
.hamburger-menu a {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif" !important;
}


/*スマホ版ハンバーガーメニュー*/
@media screen and (min-width: 641px){
	.hamburger-menu {
		display: none;
	}
}
@media(max-width:640px) and (orientation: portrait){
	/*ハンバーガーメニューｰｰｰｰｰｰｰｰｰｰｰｰ*/
	.hamburger-menu {
/*		z-index: 110;*/
	}
	.menu-btn {
		position: fixed;
		top: 10px;
		right: 15px;
		display: flex;
		height: 30px;
		width: 30px;
		justify-content: center;
		align-items: center;
		border-radius: 3px;
		z-index: 150;
		background-color: #590001;
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content: '';
		display: block;
		height: 2px;
		width: 15px;
		border-radius: 3px;
		background-color: #ffffff;
		position: absolute;
	}
	.menu-btn span:before {
		bottom: 6px;
	}
	.menu-btn span:after {
		top: 6px;
	}

	#menu-btn-check:checked ~ .menu-btn span {
		background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	}
	#menu-btn-check:checked ~ .menu-btn span::before {
		bottom: 0;
		transform: rotate(45deg);
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
		top: 0;
		transform: rotate(-45deg);
	}

	#menu-btn-check {
		display: none;
	}
	.menu-content {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 150;
		background-color: #3584bb;
	}
	.menu-content ul {
		padding: 70px 10px 0;
	}
	.menu-content ul li {
		border-bottom: solid 1px #ffffff;
		list-style: none;
	}
	.menu-content ul li a {
		display: block;
		width: 100%;
		font-size: 15px;
		box-sizing: border-box;
		color:#ffffff;
		text-decoration: none;
		padding: 9px 15px 10px 0;
		position: relative;
	}
	.menu-content ul li a::before {
		content: "";
		width: 7px;
		height: 7px;
		border-top: solid 2px #ffffff;
		border-right: solid 2px #ffffff;
		transform: rotate(45deg);
		position: absolute;
		right: 11px;
		top: 16px;
	}

	.menu-content {
		width: 50%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;/*leftの値を変更してメニューを画面外へ*/
		z-index: 110;
		margin-left: 50%;
		border-radius: 0px 0px 0px 15px;
		background-color: #7B2812;
		transition: all 0.5s;/*アニメーション設定*/
	}

	#menu-btn-check:checked ~ .menu-content {
		left: 0;/*メニューを画面内へ*/
	}
}

/* サイドバーレイアウト */

.sidebar {
	position: fixed;
	top: 0%;
	transform: translate(0, 0%);
	z-index: 101;
}

.sidebar {
	position: fixed;
    height: 100vh;
    top: 0;
    left: 0;
	background-color: #FFFFFF;
	background-image: url("../image/top-back.jpg");
	background-size: cover;
    box-shadow: 0px 0px 4px 0px #666;
	z-index: 101;
}

.sidemenu{
	position: fixed;
  	top: 50%;
  	transform: translate(0, -50%);
} 

.sidemenu li{
	width: 90px;
  	height: 13vh;
}


/*サイドバーナビ*/
.sidemenu a {
	display: block;
	font-size: 15px;
	letter-spacing: 0px;
	text-decoration: none;
	position: relative;
	top: 57%;
	left: 25%;
	text-align: center;
	transform: translate(-50%, -100%) rotate(90deg);
	color: #432;
}

.sidemenu a:hover {
	color: #0bd;
}

.sidemenu li:after{
	content:"";
	display:inline-block;
	width:40px;
	height:13.1vh;
	border-top: solid 1px #7C7C7C;
	border-bottom: solid 1px #7C7C7C;
	margin-top: -25px;
}


/*サイドバーロゴ・住所*/
 .inner {
    width:70%;
    position: absolute;
    top: 35%;
    left: 10%;
    right: 0;
    transform: translate(0, -50%);
    margin: 0 auto;
    padding-top: 10vw; 
}

.inner h2{
	text-align: center;
	font-size: 1.7vw;
	color: #6B6767;
}

.inner p {
	font-size: .9vw;
	margin-top: 5%;
	margin-left: 10%;
	color: #6B6767;
}

/*フッター*/
.footer{
	position: absolute;
	bottom: 0;
	background-color: salmon;
}

.shamei p{
	color: red;
}

/*ヘッダーｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ*/
.header_tab{
	position: relative;
	width: 100%;
	height: 20vh;
}

.header_tab img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.header_menu{
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: relative;
	height: 100%;
}

.header_menu li{
	width: 25%;
	padding: 2vh 0;
	border-left: 1px solid white;
	font-size: 1.8vw;
	font-weight: bold;
	text-align: center;
	background-color:  rgba(137,233,178,0.8);
}

.header_menu a{
	color: white;
	text-shadow: 1px 1px 1px #808080;
}

.header_menu a:hover {
	color: #FEA400;
}

/*ヘッダースマホ版*/
@media(max-width:640px) and (orientation: portrait){
	.header_tab{
		position: relative;
		width: 100%;
		height: 12vh;
	}

	.header_tab img{
		position: absolute;
		width: 100%;
		object-fit: cover;

	}
	
	.header_menu li{
		width: 25%;
		padding: 0.5vh 0;
		border-left: 1px solid white;
		font-size: 2.7vw;
		font-weight: 400;
		text-align: center;
		background-color:  rgba(137,233,178,0.8);
		margin-top: 6vh;
	}	
	.header_menu a{
		color: white;
		text-shadow: 1px 1px 1px #808080;
	}

}

/*スマホ版下部コピーライト*/
@media(max-width:640px) and (orientation: portrait){
	.left-side, .sidebar, .right-footer {
	display: none;
	}
	.mobile-copyright {
		text-align: center;
		font-size: .5rem;
		margin-bottom: 3vw;
	}
}
@media(min-width:641px) and (orientation: portrait){
	.mobile-copyright {
		display: none;
	}
}

/*下部デスクトップフッターレイアウト*/
.right-footer-all {
	position: relative;
	width: 93%;
	left: 7%;
	height: auto;
	background-image:url("../image/right-footer-gazou.jpg");
	background-size: cover;
	box-shadow: 0px 0px 4px 0px #666;
	z-index: 1;
}

.logo-address-menu {
	display: flex;
}
.right-footer {
	display: flex;
/*		justify-content: center;*/
}

.right-footer img {
	position: absolute;
	width: 5vw;
	margin-left: 5vw;
	margin-top: 3vh;
}

.footer-address {
	margin-left: 14vw;
}
.footer-address h2 {
	font-size: 1rem;
	margin-top: 2vh;
	color: gray;
}

.footer-address p {
	font-size: .7rem;
	color: gray;
}

.footer-menu {
	margin-top: .3rem;
	margin-left: 5vw;
}

.footer-menu ul {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap:4.5vw;
}

.footer-menu ul li a {
	display: block;
	padding: 1vw;
	text-decoration: none;
	font-size: .8rem;
	color: gray;
	text-align: center;
	position: relative;
}

/* 区切り線：a要素の右側に線を引く */
.footer-menu ul li a::after {
	content: "";
	position: absolute;
	right: -2.5vw; /* gapの半分 */
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 1.5em;
	background-color: rgba(0, 0, 0, 0.2);
}

/* 最後の項目には線を表示しない */
.footer-menu ul li:last-child a::after {
	content: none;
}

.footer-menu ul li a:hover {
	color: coral;
}

.footer-sns {
	text-align: center;
	margin-top: -3rem;
	margin-right: 6vw;
}

.sns-icon {
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-right: 11vw;
	gap: 4vw; /* アイコンの間隔 */
}

.sns-icon li {
	text-align: center;
}

.sns-icon li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: gray;
}

.sns-icon li img {
	width: 30px; /* アイコンのサイズ */
	height: auto;
}

.sns-icon li p {
	margin-top: .5vh;
	font-size: 1vw;
}

.copyright {
	text-align: center;
	font-size: 1vw;
	margin-top: 1rem;
	padding-bottom: 1rem;
}


/*下部モバイルフッターレイアウト*/

@media(max-width:640px) and (orientation: portrait){
	.right-footer-all {
		display: block;
		position: relative;
		width: 100%;
		height: auto;
		left: 0px;
		background-image:url("../image/right-footer-gazou.jpg");
		background-size: cover;
		box-shadow: 0px 0px 4px 0px #666;
		z-index: 1;
	}
	
	.logo-address-menu {
		display: block;
	}
	
	.right-footer {
		display: flex;
		justify-content: center;
	}
	
	.right-footer img {
		position: relative;
		width: 15vw;
		margin-right: 0vw;
	}
	
	.footer-address {
		margin-left: 5vw;
	}
	
	.footer-address h2 {
		font-size: 3.5vw;
		margin-top: 2vh;
		color: gray;
	}
	
	.footer-address p {
		font-size: 3vw;
		color: gray;
	}
	
	.footer-menu {
		margin-top: 1vh;
		margin-left: 0;
	}
	
	.footer-menu ul {
		margin-top: 1rem;
		gap: 5vw;
	}

	.footer-menu ul li a {
		display: block;
		position: relative;
		padding: 1vw;
		text-decoration: none;
		font-size: 3vw;
		color: gray;
		text-align: center;
		justify-content: center;
	}

	/* 区切り線：a要素の右側に線を引く */
	.footer-menu ul li a::after {
		content: "";
		position: absolute;
		right: -2.5vw; /* gapの半分 */
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 1.5em;
		background-color: rgba(0, 0, 0, 0.2);
	}

	/* 最後の項目には線を表示しない */
	.footer-menu ul li:last-child a::after {
		content: none;
	}

	.footer-menu ul li a:hover {
		color: coral;
	}
	
	.footer-sns {
		margin-top: 1.5rem;
		margin-right: 0;
	}
	
	.footer-sns ul {
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 7vw;
	}
	
	.footer-sns li {
		width: 5vw;
	}
	
	.copyright {
		text-align: center;
		font-size: 1.5vw;
		margin-top: 1rem;
	}
}