/* vim:set ts=4 sts=4 sw=4 bs=2 ai si noet nu ft=css: */
/* $Id$ */
/* Last Change: 04-July-2023 23:59:53. */

body {
	font-size: 20px;
	line-height: 1.6;
	font-family: 'Noto Sans JP', sans-serif;
/* 	font-family: 'Noto Serif JP', serif; */
  overflow-x: hidden;
  overscroll-behavior-x: contain;
}

body.hidden {
	height: 100vh;
	width: 100%;
	overflow: hidden;
}

[data-animate] {
	opacity: 0;
}

.serif {
	font-family: 'Noto Serif JP', serif;
}

.overlay {
	display: none;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* オーバーレイの背景色と透明度を設定 */
	transition: opacity 1s;
	z-index: 9999; /* オーバーレイの表示順を設定 */
}

.overlay.is-active {
	opacity: 1;
	display: block;
}

	.menu-btn {
		position: fixed;
		top: 20px;
		right: 20px;
		display: flex;
		height: 67px;
		width: 67px;
		justify-content: center;
		border-radius: 12px;
		align-items: center;
		z-index: 90;
		background-color: white;
		opacity: 0.9;
		border: 1px solid #707070;
		box-shadow: 1px 2px 5px #c5c5c5;
		cursor: pointer;
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content: '';
		display: block;
		height: 5px;
		width: 45px;
		border-radius: 3px;
		background-color: #bababa;
		position: absolute;
		transition: transform 0.3s;
	}
	.menu-btn span:before {
		bottom: 16px;
	}
	.menu-btn span:after {
		top: 16px;
	}

#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);
}
.hidden_box {
	height: auto;
}
#menu-btn-check:checked ~ .hidden_box {
	overflow: hidden;
	height: 100vh;
	width: 100vw;
}
#menu-btn-check {
    display: none;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    /* background-color: rgba(255,255,255,0.6); */
	background-color: white;
/* 	opacity: 0.60; */
    transition: all 0.5s;/*アニメーション設定*/
	font-size: 20px;
	font-weight: 700;
	overflow-y: scroll;
	overflow-x: hidden;
	font-family: 'Noto Serif JP', serif;
}
.menu-content ul {
	width: 90%;
    padding: 70px 1em 0;
	margin: 0 auto;
}
.menu-content ul li {
/*     border-bottom: solid 1px #ffffff; */
    list-style: none;
	margin-bottom: 1rem;
}
.menu-content ul li a {
    color:#333;
}

/*
.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 ul li .submenu {
	margin-top: 3px;
	font-size: 1.1rem;
}

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

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom: -1.5em;
    /*全体の高さ*/
	height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: black;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 100px;
	background: black;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0.5em;
		opacity: 0;
	}
	30%{
		height:60px;
		opacity: 1;
	}
	100%{
		height:0;
		top:5em;
		opacity: 0;
	}
}

#scroll_top {
	opacity: 0;
	position: fixed;
	bottom: 1em;
	right: 20px;
	transition: opacity 1.0s ease;
	z-index: 60000;
	cursor: pointer;
}

#scroll_top.show {
	opacity: 1;
}

#scroll_top img {
	width: auto;
	height: 85px;
}

.container_full {
	width: 100%;
}

.container_inner {
/* 	max-width: 1200px; */
	max-width: 950px;
	margin-left: auto;
	margin-right: auto;
}

#main_title {
	position: relative;
	border: 1px solid #666;
	/* max-width: 1200px; */
	/* max-height: 135px; */
	background-color: white;
	text-align: center;
	padding: 2em 0;
/* 	width: 86%; */
	width: 100%;
/* 	width: 950px; */
	margin: -3em auto 0;
}

#main_title h1 {
	font-size: 24px;
}

#key {
	position: relative;
}

#key figure {
}

#key figure img {
	width: 100%;
	height: 400px;
	object-fit: cover;
}

			section .sec_head {
				padding-top: 10em;
				margin-left: 0;
				text-align: center;
				margin-left: 0;
			}

			section .sec_header {
/* 				font-size: 2rem; */
				font-size: 15px;
				text-align: center;
				padding-bottom: 2em;
				margin-left: auto;
			}

			section .sec_header h1 {
				color: #707070;
				font-size: 17px;
				font-weight: 600;
				line-height: 1;
			}

			section .sec_header h1 > span {
				font-size: 17px;
				position: relative;
			}

			section .sec_header h1 > span:first-child {
				font-size: 17px;
				position: relative;
			}

			section .sec_header h1 > span:first-child:before {
				content: "";
				display: inline-block;
				position: absolute;
				bottom: -1em;
				left: 0;
				background-color: #E37272;
				height : 10px;
				width: 50px;
			}

#footer {
	font-family: 'Noto Serif JP', serif;
}

#footer_menu2 {
	font-family: 'Noto Serif JP', serif;
}

#footer_menu2 .menu_box {
	text-align: center;
}

#footer_menu2 .entry_box {
	text-align: center;
}

#footer p.copyright {
	margin-top: 4em;
	padding-bottom: 2em;
	font-size: 10px;
}

#footer_menu2 ul.first {
	margin: 2em;
/* 	padding-left: 2em; */
	line-height: 2;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
}

#footer_menu2 ul.first li {
	margin-bottom: 1.5rem;
}

#footer_menu2 ul.first li a {
	color: #707070;
}

#footer_menu2 ul.second {
	margin: 1em;
	line-height: 2;
}

#footer_menu2 ul.second li {
	margin-bottom: 1em;
}

#footer_menu2 ul.second img {
/* 	max-height: 100px; */
	max-height: 65px;
/* 	max-height: 47px; */
}

#footer_bg {
	background-color: #f8f8f8; 
	position: relative;
	padding-top: 3em;
}

figure.max img {
	max-width: auto;
	width: 100%;
}

br.tab {
	display: inline;
}