@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------

	HOME							[ / ]
	記事一覧						[ /articles/ ]
	記事詳細						[ /articles/xxxxx/ ]

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

/* ========================================================================
	HOME							[ / ]
======================================================================== */
#home{
	padding:150px 0 0 0;
	color:#FFFFFF;
}
#home::before{ content:none; }

#home h2{
	margin:0 0 50px 0;
	font-size:2.4rem;
	font-weight:500;
	line-height:1;
}

@media screen and (max-width:767px){
#home{
	padding:70px 0 0 0;
}

#home h2{
	margin:0 0 40px 0;
}
}


/* ----------------------------------------
	video
---------------------------------------- */
#home .video{
	overflow:hidden;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	min-height:100%;
	height:100vh;
	z-index:-1;
}

#home .video video{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
}


/* ----------------------------------------
	articles
---------------------------------------- */
#home .articles{
	position:relative;
	max-width:1760px;
	margin:0 auto;
	padding:0 20px 180px;
}

#home .articles h2{
	margin:0 0 -3px 0;
}

@media screen and (max-width:767px){
#home .articles{
	padding:0 20px 60px;
}

#home .articles h2{
	margin:0 0 -1px 0;
}
}


/* ul
---------------------------------------- */
#home .articles ul{
	margin:0 0 70px 0;
}

#home .articles ul li{
	width:860px;
	margin:0 auto;
}

#home .articles ul li:nth-child(2),
#home .articles ul li:nth-child(5),
#home .articles ul li:nth-child(6){
	width:25%;
	margin:-20px 0 0 75%;
}
#home .articles ul li:nth-child(5){ margin:-220px 0 0 12.5%; }
#home .articles ul li:nth-child(6){ margin:-130px 0 0 75%; }

#home .articles ul li:nth-child(3),
#home .articles ul li:nth-child(4),
#home .articles ul li:nth-child(7){
	width:37.5%;
	margin:-240px 0 0 0;
}
#home .articles ul li:nth-child(4){ margin:-150px 0 0 50%; }
#home .articles ul li:nth-child(7){ margin:-145px 0 0 25%; }

#home .articles ul li a{
	display:block;
	color:#FFFFFF;
	text-decoration:none;
}

#home .articles ul li h3{
	padding:20px 0 15px 0;
	font-size:2.8rem;
	line-height:3.8rem;
}

@media screen and (max-width:767px){
#home .articles ul{
	margin:0;
}

#home .articles ul li:nth-child(n+1){
	width:auto;
	margin:0 0 60px 0;
}

#home .articles ul li h3{
	padding:10px 0;
	font-size:1.8rem;
	line-height:2.8rem;
}
}


/* ---------- name ---------- */
#home .articles .name{
	padding:0 0 20px 0;
	line-height:1;
}

@media screen and (max-width:767px){
#home .articles .name{
	padding:0 0 10px 0;
}
}


/* ---------- cat ---------- */
#home .articles .cat{
	position:relative;
	padding:0 0 0 34px;
	line-height:2.4rem;
}

#home .articles .cat::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:24px;
	height:24px;
	background:var(--bg_history);
}
#home .articles .cat.diary::before{ background:var(--bg_diary); }
#home .articles .cat.teacher::before{ background:var(--bg_teacher); }
#home .articles .cat.turning-point::before{ background:var(--bg_turning-point); }
#home .articles .cat.essay::before{ background:var(--bg_essay); }

@media screen and (max-width:767px){
#home .articles .cat{
	padding:0 0 0 28px;
	line-height:1.8rem;
}

#home .articles .cat::before{
	width:18px;
	height:18px;
}
}


/* btn
---------------------------------------- */
#home .articles .btn a{
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:430px;
	height:80px;
	margin:0 auto;
	background:rgba(255,255,255,0.1);
	font-size:2.2rem;
	color:#FFFFFF;
	line-height:1;
	text-decoration:none;
}
#home .articles .btn a:hover{ background:rgba(255,255,255,0.4); }

#home .articles .btn a::before{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:2px;
	background:#FFFFFF;
	transform:scaleX(0);
	transform-origin:right;
	transition:all 0.2s ease;
	transition-property:transform;
}
#home .articles .btn a:hover::before{
	transform:scaleX(1);
	transform-origin:left;
}


@media screen and (max-width:767px){
#home .articles .btn a{
	width:260px;
	height:50px;
	font-size:1.6rem;
}
}


/* ----------------------------------------
	about
---------------------------------------- */
#home .about{
	padding:150px 0 100px 0;
	background:#000436;
	border-top:1px solid #3D3F5D;
}

#home .about .flex p{
	flex:1;
	margin:0 60px 0 0;
}

@media screen and (max-width:767px){
#home .about{
	padding:60px 0;
	border-bottom:1px solid #3D3F5D;
}

#home .about .flex{
	display:block;
}

#home .about .flex p{
	margin:0 0 40px 0;
}

#home .about .flex figure{
	text-align:center;
}
}


/* ----------------------------------------
	contents
---------------------------------------- */
#home .contents{
	overflow:hidden;
	margin:0 0 -1px 0;
	background:#000436;
}

@media screen and (max-width:767px){
#home .contents{
	margin:0;
	padding:60px 0 0 0;
}
}


/* ul
---------------------------------------- */
#home .contents ul{
	display:flex;
	flex-wrap:wrap;
	position:relative;
	border:1px solid #3D3F5D;
	border-bottom:none;
}

#home .contents ul::before{
	content:"";
	position:absolute;
	top:-1px;
	left:50%;
	transform:translateX(-50%);
	width:100vw;
	height:1px;
	background:#3D3F5D;
}

#home .contents ul li{
	position:relative;
	width:50%;
	border-bottom:1px solid #3D3F5D;
}
#home .contents ul li:nth-child(odd){ border-right:1px solid #3D3F5D; }

#home .contents ul li::before{
	content:"";
	position:absolute;
	bottom:-1px;
	left:0;
	width:50vw;
	height:1px;
	background:#3D3F5D;
}
#home .contents ul li:nth-child(odd)::before{
	left:auto;
	right:0;
}

#home .contents ul li a{
	display:block;
	position:relative;
	padding:36px 40px 30px 90px;
	color:#FFFFFF;
	text-decoration:none;
}
#home .contents ul li a:hover{ background:rgba(255,255,255,0.2); }

#home .contents ul li a::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:60px;
	height:60px;
	background:var(--bg_history);
}
#home .contents ul li.diary a::before{ background:var(--bg_diary); }
#home .contents ul li.teacher a::before{ background:var(--bg_teacher); }
#home .contents ul li.turning-point a::before{ background:var(--bg_turning-point); }
#home .contents ul li.essay a::before{ background:var(--bg_essay); }

#home .contents ul li h3{
	margin:0 0 20px 0;
	font-size:1.4rem;
	line-height:1;
}

#home .contents ul li h3 span{
	padding:0 18px 0 0;
	font-size:2.8rem;
	font-weight:500;
}

#home .contents ul li p{
	line-height:2.8rem;
}

@media screen and (max-width:767px){
#home .contents ul{
	display:block;
	margin:0 -20px;
	border:none;
}
#home .contents ul::before{ content:none; }

#home .contents ul li{
	width:100%;
	border-top:1px solid #3D3F5D;
	border-bottom:none;
}
#home .contents ul li:nth-child(odd){ border-right:none; }
#home .contents ul li::before{ content:none; }

#home .contents ul li a{
	padding:20px;
}

#home .contents ul li a::before{
	left:auto;
	right:0;
	width:40px;
	height:40px;
}

#home .contents ul li h3 span{
	padding:0 16px 0 0;
	font-size:2.4rem;
}
}


/* ========================================================================
	記事一覧						[ /articles/ ]
======================================================================== */
#list{
	overflow:hidden;
	background:#000436;
	color:#FFFFFF;
}

#list h1{
	display:flex;
	align-items:center;
	height:184px;
	font-size:2.0rem;
	line-height:1;
}

#list h1 span{
	padding:0 50px 0 0;
	font-size:3.4rem;
	font-weight:500;
}

#list .inner > p{
	display:flex;
	align-items:center;
	position:absolute;
	top:0;
	right:0;
	width:570px;
	height:184px;
	line-height:2.8rem;
}

@media screen and (max-width:767px){
#list h1{
	display:block;
	height:auto;
	padding:40px 0;
	font-size:1.4rem;
}

#list h1 span{
	padding:0 16px 0 0;
	font-size:2.4rem;
}

#list .inner > p{
	display:block;
	position:static;
	width:auto;
	height:auto;
	margin:-20px 0 40px 0
}
}


/* ----------------------------------------
	ul
---------------------------------------- */
#list ul{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	border-left:1px solid #3D3F5D;
	border-right:1px solid #3D3F5D;
}

#list ul li{
	position:relative;
	border-top:1px solid #3D3F5D;
	border-right:1px solid #3D3F5D;
}
#list ul li:nth-child(3n){ border-right:none; }

#list ul li:nth-child(3n-2)::after{
	content:"";
	position:absolute;
	top:-1px;
	left:570px;
	transform:translateX(-50%);
	width:100vw;
	height:1px;
	background:#3D3F5D;
}

#list ul li a{
	display:block;
	position:relative;
	height:100%;
	padding:34px 0 34px 34px;
	color:#FFFFFF;
	text-decoration:none;
}
#list ul li a:hover{ background:rgba(255,255,255,0.2); }
#list ul li a:hover img{ opacity:1; }

#list ul li a::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:34px;
	height:34px;
	background:var(--bg_history);
}
#list ul li.diary a::before{ background:var(--bg_diary); }
#list ul li.teacher a::before{ background:var(--bg_teacher); }
#list ul li.turning-point a::before{ background:var(--bg_turning-point); }
#list ul li.essay a::before{ background:var(--bg_essay); }

#list ul li img{
	width:100%;
	height:230px;
	object-fit:cover;
}

#list ul li h2{
	padding:0 20px 13px 0;
	font-size:2.0rem;
	line-height:3.0rem;
}

@media screen and (max-width:767px){
#list ul{
	display:block;
	margin:0 -20px;
	border:none;
	border-bottom:1px solid #3D3F5D;
}

#list ul li{
	border-right:none;
}
#list ul li:nth-child(3n-2)::after{ content:none; }

#list ul li a{
	padding:20px 20px 30px;
}

#list ul li a::before{
	width:20px;
	height:20px;
}

#list ul li img{
	width:auto;
	height:auto;
	object-fit:fill;
}

#list ul li h2{
	padding:0 0 10px 0;
	font-size:1.8rem;
	line-height:2.8rem;
}
}


/* cat
---------------------------------------- */
#list .cat{
	padding:18px 0 13px 0;
	font-size:1.4rem;
	line-height:1;
}

@media screen and (max-width:767px){
#list .cat{
	padding:15px 0 10px 0;
}
}


/* name
---------------------------------------- */
#list .name{
	line-height:1;
}


/* ----------------------------------------
	paging
---------------------------------------- */
#list .paging{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:32px;
	position:relative;
	padding:61px 0 60px 0;
	font-family:"Figtree", sans-serif;
	font-size:2.0rem;
	font-weight:500;
}

#list .paging::before{
	content:"";
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:100vw;
	height:1px;
	background:#3D3F5D;
}

#list .paging span.dots{
	display:flex;
	align-items:center;
	height:58px;
	margin:0;
	line-height:1;
}

#list .paging span.current,
#list .paging a{
	display:flex;
	justify-content:center;
	align-items:center;
	width:58px;
	height:58px;
	background:#3D3F5D;
	color:#FFFFFF;
	line-height:1;
	text-decoration:none;
}
#list .paging span.current,
#list .paging a:hover{ background:#FFFFFF; color:#000436; }

#list .paging a.next,
#list .paging a.prev{
	width:25px;
	background:none;
}
#list .paging a.prev{ transform:scaleX(-1); }

@media screen and (max-width:767px){
#list .paging{
	gap:20px;
	margin:0 -5px;
	padding:30px 0;
	font-size:1.4rem;
}
#list .paging::before{ content:none; }

#list .paging span.dots{
	height:40px;
}

#list .paging span.current,
#list .paging a{
	width:40px;
	height:40px;
}

#list .paging a.next,
#list .paging a.prev{
	width:20px;
}

#list .paging a.next img,
#list .paging a.prev img{
	width:10px;
}
}


/* ========================================================================
	記事詳細						[ /articles/xxxxx/ ]
======================================================================== */
#entry{
	background:#000436;
}


/* ----------------------------------------
	title
---------------------------------------- */
#entry .title{
	color:#FFFFFF;
}

#entry .title .inner::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:160px;
	height:160px;
	background:var(--bg_history);
}
#entry .title.diary .inner::before{ background:var(--bg_diary); }
#entry .title.teacher .inner::before{ background:var(--bg_teacher); }
#entry .title.turning-point .inner::before{ background:var(--bg_turning-point); }
#entry .title.essay .inner::before{ background:var(--bg_essay); }

@media screen and (max-width:767px){
#entry .title .inner::before{
	left:auto;
	right:0;
	width:60px;
	height:60px;
}
}


/* cat
---------------------------------------- */
#entry .title .cat{
	position:absolute;
	top:190px;
	left:0;
	line-height:1;
}

#entry .title .cat time{
	display:block;
	padding:10px 0 0 0;
}

@media screen and (max-width:767px){
#entry .title .cat{
	position:static;
	padding:60px 0 15px 0;
}

#entry .title .cat time{
	display:inline;
	padding:0;
}

#entry .title .cat time::before{
	content:"｜ ";
}
}


/* block
---------------------------------------- */
#entry .title .block{
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:10px 0;
	height:160px;
	margin:0 0 0 160px;
	padding:0 0 0 40px;
}

#entry .title .block h1{
	font-size:2.8rem;
	line-height:3.8rem;
}

#entry .title .block .name{
	font-size:2.0rem;
	line-height:3.0rem;
}

@media screen and (max-width:767px){
#entry .title .block{
	display:block;
	height:auto;
	margin:0 0 40px 0;
	padding:0;
}

#entry .title .block h1{
	font-size:2.0rem;
	line-height:3.0rem;
}

#entry .title .block .name{
	padding:15px 0 0 0;
	font-size:1.6rem;
	line-height:1;
}
}


/* img
---------------------------------------- */
#entry .title .img{
	margin:0 0 0 160px;
}

@media screen and (max-width:767px){
#entry .title .img{
	margin:0 -20px;
}
}


/* ----------------------------------------
	profile
---------------------------------------- */
#entry .profile{
	padding:80px 0;
	background:#FFFFFF;
}

#entry .profile .inner{
	display:flex;
}

@media screen and (max-width:767px){
#entry .profile{
	padding:40px 0;
}

#entry .profile .inner{
	display:block;
}

#entry .profile .img{
	text-align:center;
}
}


/* block
---------------------------------------- */
#entry .profile .block{
	flex:1;
	margin:0 0 0 40px;
}

#entry .profile dl dt{
	margin:0 0 10px 0;
	font-size:2.0rem;
	line-height:1;
}

#entry .profile dl dd{
	margin:0 0 18px 0;
	line-height:2.8rem;
}

@media screen and (max-width:767px){
#entry .profile .block{
	margin:0;
}

#entry .profile dl dt{
	margin-top:20px;
	font-size:1.6rem;
}

#entry .profile dl dd{
	margin:0 0 10px 0;
}
}


/* ---------- btn ---------- */
#entry .profile .btn{
	display:flex;
}

#entry .profile .btn a{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:0 10px;
	min-width:170px;
	height:40px;
	padding:0 18px;
	border:1px solid #3D3F5D;
	border-radius:20px;
	line-height:1;
	text-decoration:none;
}

#entry .profile .btn a::after{
	content:"";
	width:20px;
	height:100%;
	background:url(../../img/common/icon_blank.png) no-repeat center;
	background-size:20px;
}

@media screen and (max-width:767px){
#entry .profile .btn{
	padding:10px 0 0 0;
}

#entry .profile .btn a{
	min-width:150px;
	height:34px;
	padding:0 16px;
}

#entry .profile .btn a::after{
	width:18px;
	background-size:18px;
}
}


/* ----------------------------------------
	entry
---------------------------------------- */
#entry .entry{
	position:relative;
	padding:80px 0;
	background:#F4F4F7;
}

#entry .entry .inner{
	padding:0 180px;
}

#entry .entry h2{
	margin:0 0 40px 0;
	font-size:2.6rem;
	font-weight:600;
	color:#00A6DF;
	line-height:3.6rem;
}

#entry .entry p{
	margin:0 0 120px 0;
}

@media screen and (max-width:767px){
#entry .entry{
	padding:60px 0 20px 0;
}

#entry .entry .inner{
	padding:0 20px;
}

#entry .entry h2{
	margin:0 0 20px 0;
	font-size:2.0rem;
	line-height:3.0rem;
}

#entry .entry p{
	margin:0 0 60px 0;
}
}


/* schedule
---------------------------------------- */
#entry .entry .schedule{
	margin:0 -180px 120px;
}

@media screen and (max-width:767px){
#entry .entry .schedule{
	margin:0 0 60px 0;
}

#entry .entry .schedule .scroll{
	overflow-x:scroll;
	margin:0 0 30px 0;
}

#entry .entry .schedule .scroll span{
	position:absolute;
	top:150px;
	left:50%;
	transform:translateX(-50%);
}

#entry .entry .schedule .scroll > img{
	max-width:none;
	width:800px;
    margin:0 auto;
}
}


/* flex
---------------------------------------- */
#entry .entry .flex{
	justify-content:center;
	gap:0 100px;
	margin:0 -180px 120px;
}

#entry .entry .flex .block{
	width:780px;
}

@media screen and (max-width:767px){
#entry .entry .flex{
	display:block;
	margin:0 0 60px 0;
}

#entry .entry .flex .block{
	width:auto;
}
}


/* ---------- toc ---------- */
#entry .entry .toc{
	order:2;
	position:sticky;
	top:0;
	width:260px;
	padding:30px 0 0 0;
	border-top:1px solid #D9DAEB;
}

#entry .entry .toc dt{
	padding:0 0 20px 0;
	font-size:2.0rem;
	font-weight:600;
	color:#000436;
	line-height:1;
}

#entry .entry .toc ol li a{
	display:block;
	margin:10px 0 0 0;
	padding:0 0 0 19px;
	background:url(../../img/common/arrow_toc.png) no-repeat left 8px;
	background-size:11px 18px;
	font-size:1.8rem;
	line-height:3.2rem;
	text-decoration:none;
}
#entry .entry .toc ol li a:hover{ text-decoration:underline; }

@media screen and (max-width:767px){
#entry .entry .toc{
	position:static;
	width:auto;
	padding:0 0 50px 0;
	border:none;
}

#entry .entry .toc ol li a{
	margin:0 0 10px 0;
	padding:0 0 0 16px;
	background-size:8px auto;
	font-size:1.4rem;
	line-height:2.8rem;
}
}


/* ---------- editer ---------- */
#entry .entry .editor{
	padding:0 0 80px 0;
}

#entry .entry .editor p{
	margin:0 0 40px 0;
}

#entry .entry .editor .wp-caption{
	width:auto !important;
}

#entry .entry .editor .wp-caption-text{
	padding:10px 0 0 0;
	font-size:1.4rem;
}

@media screen and (max-width:767px){
#entry .entry .editor{
	padding:0 0 40px 0;
}

#entry .entry .editor p{
	margin:0 0 20px 0;
}

#entry .entry .editor .wp-caption-text{
	font-size:1.2rem;
}
}


/* explain
---------------------------------------- */
#entry .entry .explain{
	margin:0 0 120px 0;
	padding:20px 0 0 0;
	border-top:1px solid #D9DAEB;
	line-height:2.8rem;
}

#entry .entry .explain dt{
	margin:0 0 6px 0;
	font-weight:500;
}

@media screen and (max-width:767px){
#entry .entry .explain{
	margin:0 0 60px 0;
	padding:15px 0 0 0;
}

#entry .entry .explain dt{
	margin:0 0 4px 0;
}
}


/* sns
---------------------------------------- */
#entry .entry .sns{
	margin:0 0 80px 0;
}

@media screen and (max-width:767px){
#entry .entry .sns{
	margin:0 0 40px 0;
}
}


/* btn
---------------------------------------- */
#entry .entry .btn a{
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:344px;
	height:64px;
	background:#FFFFFF;
	font-size:1.7rem;
	line-height:1;
	text-decoration:none;
}
#entry .entry .btn a:hover{ color:#00A6DF; }

#entry .entry .btn a::before{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:2px;
	background:#00A6DF;
	transform:scaleX(0);
	transform-origin:right;
	transition:all 0.2s ease;
	transition-property:transform;
}
#entry .entry .btn a:hover::before{
	transform:scaleX(1);
	transform-origin:left;
}

@media screen and (max-width:767px){
#entry .entry .btn a{
	width:260px;
	height:50px;
	font-size:1.6rem;
}
}