/* ===== 全体 ===== */

:root{
	--blue-color: #00A1E9;
	--blue-color-rgb: 0, 161, 233;
	--green-color: #DADF00;
	--green-color-rgb: 218, 223, 0;
	--main-black: #262A2B;
	--gray-color: #B6B6B6;
	--shadow: 0 0 8px 1px rgba(184, 184, 184, 0.25);
}

html{
	font-size: 62.5%;
}

body{
	font-size: 1.6rem;
	font-family: "Inter", "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

.container{
	padding: 0 40px;
	margin: 80px auto;
	display: flex;
	flex-wrap: wrap;
}

.more-btn{
	display: inline-block;
	border-bottom: solid 1px var(--blue-color);
	background: #fff;
}

.more-btn a{
	color: var(--blue-color);
}

.more-btn:hover{
	background: var(--blue-color);
}

.more-btn:hover a{
	color: #fff;
}

/*===== ヘッダー ===== */
.header{
	display: block;
	max-width: 1180px;
	margin: 0 auto;
}

.header .logo{
	background: #fff;
	width: 230px;
	position: absolute;
	top: 0;
	left: 40px;
	z-index: 3;
}

.header .sp-logo,
.header .sp-menu-btn{
	display: none;
}

.header .logo a{
	display: block;
	padding: 20px;
}

.gnav .main-menu{
	display: flex;
	flex-wrap: wrap;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99999;
	background: #fff;
	border-radius: 0 0 0 8px;
}

.gnav .main-menu li a{
	display: block;
	font-weight: 500;
	padding: 20px 24px;
	text-align: center;
}

.gnav .main-menu li a:hover{
	color: var(--blue-color);
}

/*===== トップページ =====*/
.top-image{
	margin: 120px 0 100px 0;
	display: flex;
	align-items: center;
}

.top-image .top-catchcopy{
	width: 30%;
	font-size: 2.4rem;
	line-height: 2em;
	padding: 0 40px;
	text-align: right;
}

.top-image .top-slideshow{
	width: 70%;
}

.container .title{
	width: 30%;
	text-align: right;
	padding: 0 40px;
}

.container .title .section-subject{
	font-size: 2rem;
	margin: 0 0 12px 0;
}

.top.info-list{
	width: 70%;
	margin: -16px 0 0 0;
}

.info-list li a{
	display: flex;
	padding: 16px 0;
}

.info-list li:hover a{
	background: rgba(var(--blue-color-rgb), .2);
}

.info-list li a time{
	color: var(--blue-color);
	margin: 3px 12px 0 0;
}

.container .contents{
	width: 70%;
	display: flex;
}

.container .contents .image,
.container .contents .text{
	width: 50%;
}

.container .contents .text{
	padding: 0 20px;
}

.container .contents .text p{
	line-height: 2em;
	margin: 0 0 20px 0;
}

.container .contents .gallery{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.container .contents .gallery li{
	width: 49%;
	margin: 0 0 20px 0;
}

/* ====== フッター ====== */
.footer .pankuzu{
	border-top: solid 1px var(--gray-color);
	border-bottom: solid 1px var(--gray-color);
	padding: 20px 40px;
	margin: 0 0 40px 0;
}

.footer-nav .main-menu{
	display: flex;
	justify-content: center;
}

.footer-nav .main-menu li{
	margin: 0 20px;
}

.footer-nav .main-menu li a{
	color: var(--blue-color);
}

.footer-nav .main-menu li:hover a{
	text-decoration: underline;
	color: var(--main-black);
}

.isoyama-link{
	width: 300px;
	border: solid 1px var(--blue-color);
	margin: 40px auto;
	border-radius: 8px;
}

.isoyama-link a{
	display: block;
	padding: 12px;
	text-align: center;
	color: var(--blue-color);
}

.isoyama-link:hover{
	background: var(--blue-color);
}

.isoyama-link:hover a{
	color: #fff;
}

.footer-logo{
	width: 200px;
	margin: 100px auto;
}

/* ====== 本文 ===== */
.article{
	max-width: 1200px;
	padding: 0 20px;
	margin: 300px auto 100px auto;
}

.article .page-title{
	font-size: 4rem;
	margin: 0 0 40px 0;
}

.article .contents{
	max-width: 880px;
	margin: 100px auto;
}

.article .contents .subject{
	font-size: 2.4rem;
	font-weight: 600;
	margin: 2em 0;
}

.article .contents h3{
	font-size: 2rem;
	font-weight: 600;
	margin: 1em 0;
}

.article .contents p{
	line-height: 2em;
	margin: 0 0 2em 0;
}

.article .contents p a{
	color: var(--blue-color);
	text-decoration: underline;
}

.article .contents p a:hover{
	color: var(--main-black);
	text-decoration: none;
}

.article .contents p strong{
	font-weight: 600;
	color: #CC0000;
}

.article .contents p em{
	font-weight: 600;
}

/* ====== パンクズ ===== */
.top-pankuzu{
	position: absolute;
	top: 200px;
	right: 40px;
}

/*====== 記事一覧 =====*/
.article .contents .info-list{
	margin: -60px 0;
}

.article .contents .info-list h3{
	font-weight: 400;
	font-size: 1.6rem;
	margin: 0;
}

/* 一日の流れ */
.ichinichi li{
	padding: 40px 0 40px 40px;
	border-left: solid 1px var(--main-black);
}

.ichinichi .time-title{
	display: flex;
	margin: 0 0 20px;
	position: relative;
}

.ichinichi .time-title::before{
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 100px;
	content: "";
	background: var(--main-black);
	position: absolute;
	top: 4px;
	left: -52px;
}

.ichinichi .time-title .ichinichi-time{
	margin: 0!important;
}

.ichinichi .time-title .ichinichi-title{
	font-weight: 600;
	margin: 0 0 0 20px!important;
}

.hatarakikata-pattern{
	margin: 40px auto;
	background: #eee;
	border-radius: 8px;
	padding: 16px;
}

.hatarakikata-pattern p{
	margin: 0!important;
}

/* インタビュー */
.interview .answer{
	display: flex;
	justify-content: space-between;
	margin: 0 0 60px 0;
}

.interview .answer p{
	width: 60%;
}

.interview .answer .image{
	width: 38%;
	height: auto;
}

.requirements{
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 60px 0;
}

.requirements dt{
	width: 25%;
	padding: 20px;
	border-bottom: solid 1px #fff;
	background: rgba(var(--green-color-rgb), .2);
}

.requirements dd{
	width: 75%;
	padding: 20px;
	line-height: 1.5em;
	border-top: solid 1px var(--gray-color);
}


/* ======== 1300px未満 ======= */
@media screen and (max-width: 1300px) {

.header .logo{
	display: none;
}

.header .sp-logo{
	display: block;
	margin: 20px auto;
	width: 340px;
	
}

.gnav .main-menu{
	position: absolute;
	width: 100%;
	top: 100px;
	justify-content: center;
}

.gnav .main-menu.fixed{
	position: fixed;
	top: 0;
	border-bottom: solid 1px var(--gray-color);
}

.article{
	margin: 120px auto 100px auto;
}

}

/* ======== 880px未満 ======= */
@media screen and (max-width: 880px) {

.header .sp-logo{
	width: 240px;
}

.header .gnav .main-menu{
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	padding: 80px 0 0 0;
	background: #fff;
	overflow-y: auto;
	display: none;
	z-index: 10000;
}

.header .gnav .main-menu.active{
	display: block;
	animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

body.menu-open {
	overflow: hidden;
	touch-action: none;
}

.header .gnav .main-menu li a{
	border-top: solid 1px var(--blue-color);
	color: var(--blue-color);
}

.header .sp-menu-btn{
	display: block;
	position: fixed;
	width: 64px;
	top: 0;
	right: 0;
	cursor: pointer;
	z-index: 10001;
	padding: 14px;
	background: #fff;
	font-size: 1.2rem;
}

.header .sp-menu-btn .text-close{
	display: none;
}

.header .sp-menu-btn.active .text{
	 display: none;
}

.header .sp-menu-btn.active .text-close{
	display: inline;
	font-size: 1.2rem;
}

.header .sp-menu-btn .bar{
	display: block;
	height: 3px;
	width: 100%;
	background-color: #333;
	margin: 5px 0;
	transition: 0.4s;
}

.header .sp-menu-btn.active .bar:nth-child(1) {
		transform: rotate(45deg) translate(5px, 5px);
}

.header .sp-menu-btn.active .bar:nth-child(2) {
	 opacity: 0;
}

.header .sp-menu-btn.active .bar:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

.top-pankuzu{
	position: static;
	display: block;
	padding: 20px;
}

.top-image{
	margin: 52px 0;
	display: block;
}

.top-image .top-catchcopy,
.top-image .top-slideshow{
	width: 100%;
}

.top-image .top-catchcopy{
	margin: 0 0 20px 0;
	text-align: left;
}

.top-image .top-slideshow img{
	width: auto;
	height: calc(100svh - 290px);
	object-fit: cover;
}

.container{
	display: block;
}

.container .title{
	width: 100%;
	text-align: left;
	padding: 20px 0 40px 0;
}

.top.info-list{
	width: 100%;
}

.container .contents{
	display: block;
	width: 100%;
}

.container .contents .image,
.container .contents .text{
	width: 100%;
	margin: 12px 0;
}

.footer .pankuzu{
	padding: 20px;
}

.footer-nav .main-menu{
	display: none;
}

.article{
	margin: 80px auto 100px auto;
}

.article .page-title{
	font-size: 3.2rem;
}

.interview .answer{
	display: block;
}

.interview .answer p{
	width: 100%;
}

.interview .answer .image{
	width: 100%;
	padding: 40px;
}

.ichinichi .time-title{
	display: block;
}

.ichinichi .time-title .ichinichi-title{
	margin: 0!important;
}

.requirements{
	display: block;
}

.requirements dt,
.requirements dd{
	width: 100%;
}

}