@charset "utf-8";
/*
Theme Name: なかい予備校グループ
Theme URI: https://nakaiyobikou.jp/
Description: なかい予備校グループのテーマです
*/

/*全体スタイル
***************************************/
body {
	font-family: "Bebas Neue", "Noto Sans JP", sans-serif;
    animation: BgfadeIn 2s ease 0s 1 normal;
    -webkit-animation: BgfadeIn 2s ease 0s 1 normal;
	font-weight:400;
	letter-spacing:0.5px;
	background-size:100%;
	color:#111;
}

h1, h2, h3, h4, h5, h6, p, dt, dd, li, a, th, td {
}

.font-bn {
	font-family: "Bebas Neue", "Noto Sans JP", sans-serif;
}

/*リンク文字色のスタイル
***************************************/
a:link, a:visited {
	text-decoration: none;
	overflow: hidden;
	color:#111;
}

a:hover {
	text-decoration: none;
}

/*構造部分
***************************************/
.base {
	padding-left:0;
	padding-right:0;
}

#wrapper {
/*background:
			radial-gradient(290px 300px , rgba(247,219,226, 0.15) 20%, transparent 20%),
			radial-gradient(800px 780px , rgba(247,219,226, 0.15) 20%, transparent 20%),
			radial-gradient(1000px 990px , rgba(247,219,226, 0.15) 20%, transparent 20%),
			radial-gradient(400px 380px , rgba(247,219,226, 0.15) 20%, transparent 20%),
			radial-gradient(750px 750px , rgba(247,219,226, 0.15) 20%, transparent 20%),
			radial-gradient(100px 100px , rgba(247,219,226, 0.15) 20%, transparent 20%);
		background-size: 
			1230px 1280px,
			810px 910px,
			1470px 990px,
			1200px 1700px,
			1520px 1200px,
			1100px 1300px;
		background-position: 
			-300px -550px,
			-200px 100px,
			50px 510px,
			-200px -550px,
			-180px -250px,
			130px -150px;
			background-attachment:fixed;*/

}

#home #wrapper {
}

#main {}

#main p {
}

#primary {
	padding-bottom:15rem;
	padding-top:3rem;
}

#home #primary {
	padding-top:15rem;
	padding-bottom:0;
}

@media (max-width: 1680px){
.base {
	padding-left:4.5rem;
	padding-right:4.5rem;
}
}


@media (max-width: 1560px){
.base {
	padding-left:4.5rem;
	padding-right:4.5rem;
}
}

@media (max-width: 1260px){
.base {
	padding-left:2rem;
	padding-right:2rem;
}
#primary {
}
}

@media (max-width: 980px){
.base {
	padding-left:2rem;
	padding-right:2rem;
}

#wrapper {
}

#main {}

#primary {
	padding-bottom:0;
}

#home #primary {
	padding-top:6rem;
}


}

/*header
***************************************/
#header {
	width:100%;
	height:110px;
	padding:0 0 0 6rem;
	position:fixed;
    z-index: 999;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
}

#header.fixedmenu{
	background:rgba(255,255,255,0.9);
}


#header #header_left {
	width:23%;
	text-align:left;
	position:relative;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
}

#header.fixedmenu #header_left {
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
}

#header #header_left img {
	width:100%;
	height:auto;
	max-width:320px;
}

#header #header_left .site_logo {
	max-width:320px;
}

#header #header_right {
	width:60%;
	margin-left:auto;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

#header #header_right #gnav_wrapper p {
	font-size:clamp(12px, 1.1vw, 13px);
	margin:1.5rem 3rem 1.3rem 0;
	text-align:right;
}

#header #header_right #gnav {
	display:flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
}

#header_contact {
	position:relative;
}

#header_contact a {
	display: flex;
	flex-direction: column; /* 要素を縦並びにする */
	justify-content: center; /* 主軸（縦方向）で中央揃え */
	align-items: center; /* 交差軸（横方向）で中央揃え */
	background:#fff100;
	text-align:center;
	width:110px;
	height:110px;
	font-size:clamp(12px, 1.1vw, 13px);
	font-weight:700;
}

#header_contact a img {
	display:block;
	margin:0 auto 0.5rem auto;
}

#header_contact a span {
	display:block;
	text-align:center;
	font-size:clamp(12px, 1.8vw, 26px);
	margin-bottom:0.5rem;
}

@media (max-width: 1200px){
#header {
	padding-left:2rem;
}	
}


@media (max-width: 1120px){
#header #header_right #header_info {
	display:none;
}
}

@media (max-width: 980px){
#header {
	height:60px;
}

#header #header_left {
  width: 54%;
}

#header #header_left img {
	max-width:200px;
	height:auto;
}

#header #header_right {
	width:42%;
}

#header #header_right #gnav_wrapper p {
	display:none;
}

#header_contact {
	position:relative;
	right:60px;
}

#header_contact a {
	width:60px;
	height:60px;
}

#header_contact a img {
	display:block;
	margin:0.5rem auto 0.5rem auto;
}

#header_contact a span {
	font-weight:500;
}

#header_contact a strong {
	display:none;
}

/*#header.fixedmenu{
	height:62px;
	padding-top:1.5rem;
	padding-bottom:1.5rem;
}*/
}

@media (max-width: 680px){
#header {
}
  
#header #header_left {
}

#header #header_left .site_logo {
}
}

/*
***************************************/
/* nav */
#header nav#nav #menu-sp_nav {
  display: none;
}

@media (max-width: 980px) {
#header nav#nav #menu-global_nav {
    display: none;
}

#header nav#nav #menu-sp_nav {
    display: block;
}
}


/*contact
***************************************/
#contact_box {
	padding-top:15rem;
	padding-bottom:15rem;
	background:url(../../images/contact_bg.png) no-repeat right top;
	background-size:cover;
	background-attachment:fixed;
}

@media (max-width: 980px) {
#contact_box {
	background:url(../../images/contact_bg_sp.png) no-repeat center center;
}
}

#contact_box .contact_title {
	margin-bottom:2rem;
}

#contact_box .contact_title span {
	font-size:clamp(36px, 3.6vw, 72px);
	line-height:0.8;
	color:#17309b;
	display:block;
	margin-bottom:1rem;
}

#contact_box .contact_title span b {
	color:#fff100;
}

#contact_box .contact_title strong {
	font-size:clamp(18px, 1.4vw, 20px);
	font-weight:700;
	display:block;
}

#contact_box .box_l ul li {
	margin-bottom:3rem;
}

#contact_box .box_l ul li:nth-child(3),
#contact_box .box_l ul li:nth-child(4) {
	margin-bottom:0;
}

#contact_box .box_r ul {
	display:flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
	margin-bottom:3rem;
	font-family: "Arial", "Noto Sans JP", sans-serif;
	border-radius: 5px;
	background: linear-gradient(to bottom,  #17309b 0%,#17309b 50%,#0a238e 50%,#0a238e 100%);
}

#contact_box .box_r ul li {
	width:33.33333%;
	text-align:center;
	position:relative;
}

#contact_box .box_r ul li:after {
	content:"";
	width:1px;
	height:60px;
	background:#FFF;
	position:absolute;
	
	/*中央*/
	right:0;
	top: 50%;
	transform: translateY(-50%);
	-webkit- transform: translateY(-50%);
	margin: auto;
	display:inline-block;
}

#contact_box .box_r ul li:last-child:after {
	content:none;
}

#contact_box .box_r ul li a {
	display:block;
	padding:4.5rem 1rem;
	font-size:clamp(16px, 1.4vw, 18px);
	color:#FFF;
	font-weight:700;
}

#contact_box .box_r ul li a span:after {
	content:url(../../images/link_arrow01.png);
	margin-left:1rem;
	position:relative;
	top:3px;
	
	transition: transform 0.3s ease;
	display: inline-block; /* transform を効かせるため */
}

/* hover時に少し右へ */
#contact_box .box_r ul li a:hover span::after {
	transform: translateX(4px);
}

#contact_box dl {
	padding:4rem;
	background:#fafafa;
}

#contact_box dl dt {
	margin-bottom:2.5rem;
}

#contact_box dl dd {
	line-height:1.8;
	font-family: "Arial", "Noto Sans JP", sans-serif;
}

@media (max-width: 980px) {
#contact_box {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

#contact_box .box_r ul li {
	width:100%;
	border-bottom:1px solid #FFF;
}

#contact_box .box_r ul li:last-child {
	border-bottom:none;
}

#contact_box .box_r ul li:after {
	content:none;
}

#contact_box .box_r ul li a {
	padding:2rem 1rem;
}

#contact_box dl {
	padding:3rem;
}

#contact_box dl dd {
	font-size:14px;
}

}

@media (max-width: 680px) {

#contact_box .box_l.w47 {
	width:100%;
	margin-bottom:6rem;
}

#contact_box .box_r.w47 {
	width:100%;
}

}


/*footer
***************************************/
#footer {
	padding-top:9rem;
	padding-bottom:9rem;
	background:#17309b;
	color:#FFF;
}

#footer .flowing_text {
	align-items: center;
	display: flex;
	overflow:hidden;
	width: 100%;
	white-space:nowrap;
	z-index: 0;
	bottom:0;
	position:absolute;
}

#footer .flowing_text p {
	animation: flowing 40s linear infinite;
	transform:translateX(100%);
	margin: 0;
	padding: 0;
	color: transparent;
    -webkit-text-stroke: 3px rgba(255, 255, 255, 0.05);
	font-size:clamp(100px, 18vw, 300px);
	line-height:1;
}

@keyframes flowing {
  0% { transform:translateX(45%); }
  100% { transform:translateX(-100%); }
}

#footer dl {
	position:relative;
	z-index:1;
}

#footer dl dt {
	margin-bottom:1.5rem;
	font-size:clamp(16px, 1.4vw, 20px);
	font-weight:900;
}

#footer dl dt strong {
	font-weight:900;
	margin-right:1rem;
}

#footer dl dt span {
	margin:0 0.5rem;	
}

#footer table th,
#footer table td {
	padding:0.5rem 0;
	line-height:1.4;
	font-weight:normal;
	font-size:clamp(13px, 1.1vw, 15px);
	font-family: "Arial", "Noto Sans JP", sans-serif;
}

#footer table th {
	padding-right:2rem;
}

#footer_nav .footer_box {
	position:relative;
}

#footer_nav ul {
	display:flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

#footer_nav ul li {
	margin-left:1.5rem;
}

#footer_nav ul li a {
	color:#FFF;
	font-size:clamp(13px, 1.1vw, 15px);
}

#footer_nav {
}

#copy {
	position:absolute;
	right:0;
	bottom:0;
	z-index:1;
	font-size:clamp(13px, 1.1vw, 15px);
	margin-top: auto;
}


@media (max-width: 1200px) {
}

@media (max-width: 980px) {
#footer {
	padding-top: 6rem;
	padding-bottom: 9rem;
}

#footer dl {
	margin-bottom:3rem;
}

#footer dl dt {
	display:block;
	margin-bottom:2.5rem;
	text-align: center;
}

#footer dl dt strong {
	display:block;
	margin-bottom:1rem;
	margin-right:0;
}

#footer table th {
	width:25%;
}

#footer_nav {
	margin-bottom:2rem;
}

#copy {
	position:inherit;
	display:block;
	text-align:center;
}

#footer .flowing_text {
  bottom: inherit;
  top:30%;
}

#footer .flowing_text p {
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.05);
	font-size:clamp(200px, 18vw, 300px);
}

}

/*section
***************************************/
#main #primary section {
	padding-top:15rem;
	padding-bottom:15rem;
}

#main #primary section:nth-child(1) {
	padding-top:0;
}

@media (max-width: 980px){
#main #primary section {
}
}



@media (max-width: 680px){
#main #primary section {
	padding-top:15rem;
	padding-bottom:4.5rem;
}

#main #primary section:nth-child(n + 2) {
	padding-top:9rem;
}
}

/*サイドバー
***************************************/
/* =========================
   Sidebar
   ========================= */
.sidebar {
  width: 100%;
  background-color: #FFF;
  padding: 3rem;
}

.sidebar_inner {
}

@media (max-width: 980px){
.sidebar {
  padding: 0;
  margin-bottom:6rem;
}

}

/* =========================
   Search form
   ========================= */
.sidebar form#search {
  position: relative;
}

.sidebar .search h3 {
  font-size: clamp(16px, 1.8vw, 18px);
  margin-bottom: 1.5rem;
  font-weight: 600;
  color:#17309b;
}

.sidebar form#search input[type="text"] {
	padding: 0 10px;
	padding-right: 10px;
	border: 1px solid #707070;
	background: #fff;
	width:78%;
	height:45px;
}

.sidebar form#search input[type="submit"] {
	padding: 13px 10px;
	border: 1px solid #17309b;
	background:#17309b;
	color:#FFF;
	width:19%;
	float:right;
	text-align:center;
	height:45px;
	border-radius:0.35rem;
}

.sidebar h2 {  
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
}

.sidebar section {
  margin-bottom: 4.5rem;
}

.sidebar section:last-child {
	margin-bottom:0;
}

.sidebar > .sidebar_inner > section > h3 {
  font-size: clamp(16px, 1.8vw, 18px);
  margin-bottom: 2rem;
  font-weight: 600;
  padding-bottom:1.5rem;
  border-bottom:1px solid #777;
  color:#17309b;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar_list_item {
}


.cate_list ul {
	margin-top:-1.5rem;}

.cate_list ul li a {
	display:block;
	padding:2rem 1.5rem 2rem 1.5rem;
	border-bottom:1px solid #DDD;
	color:#111;
	font-weight:500;
	position:relative;
	transition: color 0.3s ease;
}

.cate_list ul li a:hover {
	color: #17309b;
}

.cate_list ul li a:after {
    content: "\f0da";
    font-family: FontAwesome;
	color:#17309b;
	/*中央*/
	position: absolute;
	top: 50%;
	right:2rem;
	transform: translateY(-50%);
	-webkit- transform: translateY(-50%);
	margin: auto;
	display:inline-block;
	transition: transform 0.3s ease;
}

.cate_list ul li a:hover::after {
	transform: translateY(-50%) translateX(4px);
}

.tag_list ul li {
	display:inline-block;
	margin-right:0.75rem;
	margin-bottom: 1rem;
}

.tag_list ul li a {
	display:block;
	padding:0.5rem 0.5rem;
	border:1px solid #17309b;
	color:#17309b;
}



/*NEWS
***************************************/
/* blog-content-wrapper：main + sidebar の2カラム */
.blog-content-wrapper {
    display: flex;
    gap: 6rem; /* mainとsidebar間の隙間 */
}

/* sidebar（左） */
.blog-sidebar {
    flex: 0 0 28%;
    order: 1; /* 左に配置 */
}

/* main（右） */
.blog-main {
    flex: 1 1 70%;
    order: 2; /* 右に配置 */
}

.blog-main .blog-single-content h1 {
	font-size: clamp(20px, 2.4vw, 28px);
	margin-bottom: 4.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #ddd;
	color:#17309b;
	font-weight:600;
	line-height:1.6;
}

.blog-main h2 {
	font-size: clamp(18px, 2.5vw, 24px);
	margin-bottom: 4.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #ddd;
	font-weight:600;
}


.single .blog-main time {
	text-align:right;
	display:block;
	margin-top:3rem;
	margin-bottom:4.5rem;
	font-size: clamp(18px, 1.6vw, 20px);
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
    .blog-content-wrapper {
        flex-direction: column;
    }
    .blog-sidebar,
    .blog-main {
        flex: 1 1 100%;
        order: unset;
    }
	.blog-main time {
	margin-top:0;
}
}

/* 記事リスト：1列表示 */
.blog-item-list {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 記事間隔 */
}

/* 各記事 */
.blog-article-list {
    display: flex;
    flex-direction: column;
	margin-bottom:6rem;
}

/* 画像 */
.blog-article-list .img-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    margin-bottom: 1rem;
}
.blog-article-list .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 記事テキスト */
.blog-article-list .text h3 {
    font-size: clamp(16px, 2vw, 20px);
    margin: 0.7rem 0 1rem;
    line-height: 1.4;
	border-bottom:1px solid #DDD;
	padding-bottom:1rem;
	margin-bottom:3rem;
}

/* 日付 */
.blog-article-list .text .article-date {
    font-size: 14px;
    line-height: 1.4;
	display:block;
	margin-bottom:3rem;
}

.blog-article-list .text .article-date small {
	padding:0.1rem 0.25rem 0.15rem 0.25rem;
	display:inline-block;
}

.blog-article-list .text .article-date small a {
    color: #FFF;
	letter-spacing:0;
}

/* 本文 */
.blog-article-list .text p {
    font-size: clamp(15px, 2vw, 16px);
    line-height: 1.6;
    margin-top: 3rem;
}

/* リンク装飾 */
.blog-article-list .text h3 a {
    text-decoration: none;
    color: inherit;
}

/* カテゴリーリスト */
.blog-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 2rem;
}

/* カテゴリー名 */
.blog-article-list .text small {
    font-size: 14px;
    margin-left: 0.5rem;
}






/*
***************************************/















ul.news-list {
	overflow:auto;
}

ul.news-list li {
	border-bottom:1px solid #DDD;
}

ul.news-list li:first-child {
	border-top:1px solid #DDD;
}

ul.news-list li a {
	display:block;
	padding:2rem 12rem 2rem 4rem;
	background:#fafafa;
	position:relative;
	
	display:flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
	-webkit-justify-content: space-between;
	justify-content: space-between;
	transition: right 0.4s ease;
}

/* hover時 */
ul.news-list li a:hover {
  background: #EEEEEE; /* 少し濃い色 */
}

/* hover時：矢印を少し右へ */
ul.news-list li a:hover:after {
  right: 3.5rem;
}


ul.news-list li a strong {
	font-family: "Arial", "Noto Sans JP", sans-serif;
	width: 77%;
	line-height:1.6;
}

ul.news-list li a:after {
	content:url(../../images/arrow-blue.png);
	right:4.5rem;
	/*中央*/
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit- transform: translateY(-50%);
	margin: auto;
	display:inline-block;
	transition: right 0.4s ease;
}

ul.news-list li a span {
	width:23%;
}

ul.news-list li a span em.date-year {
	font-size:clamp(18px, 1.8vw, 24px);
	font-style:normal;
	margin-right:1.5rem;
}

ul.news-list li a span em.date-month-day {
	font-style:normal;
	font-size:clamp(24px, 3.6vw, 48px);
	margin-right:3rem;
	position:relative;
	top:2px;
}

@media (max-width: 768px){
ul.news-list {
	width:100%;
}

ul.news-list li a {
    padding: 2rem 8rem 2rem 2rem;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}

ul.news-list li a span {
	width: 25%;
}

ul.news-list li a strong {
	width: 75%;
	line-height: 1.4;
}
ul.news-list li a::after {
	right: 1.5rem;
}
}


/*プライバシーポリシー
***************************************/
#privacy #primary p {
	margin-bottom:6rem;
}

#privacy #primary ul {
	list-style:none !important;
}

#privacy #primary dl {
}

#privacy #primary dl dt {
	margin-bottom:2rem;
	line-height:1.4;
	font-size:clamp(16px, 1.5vw, 18px);
	font-weight:600;
}

#privacy #primary dl dd {
	margin-bottom:6rem;
	padding-bottom:6rem;
	border-bottom:solid 1px #DDD;
	line-height:2;
}

#privacy #primary dl dd:last-child {
	margin-bottom:0;
	border-bottom:none;
}

#privacy #primary dl dd ul {
	margin-bottom:0;
}

#privacy #primary dl dd ul li:last-child {
	margin-bottom:0;
}

#privacy #primary dl dd table {
	width:100%;
	margin:2rem auto 0 auto;
}

#privacy #primary dl dd table td {
	vertical-align:middle;
	padding: 1em;
	border:none;
	border-bottom: 1px solid #EEE;
}

#privacy #primary dl dd table td:nth-child(1) {
	width:25%;
	padding: 1em;
	border:none;
	border-bottom: 1px solid #CCC;
	vertical-align: middle;
}

#privacy #primary dl dd table a {
	color:#0d5003;
}

@media (max-width: 980px){
#privacy #primary {
}

#privacy #primary p {
	font-size:0.9em;
	margin-bottom:3rem;
}

#privacy #primary dl {
	margin:0;
}


#privacy #primary dl dt {
	font-size:1.6rem;
	margin-bottom:1.5rem;
}

#privacy #primary dl dd {
	font-size:1.4rem;
	margin-bottom:3rem;
	padding-bottom:3rem;
}

#privacy #primary dl dd:last-child {
	padding-left:0;
}

#privacy #primary dl dd table td:nth-child(1) {
	width:30%;
}

#privacy #primary dl dd table td:nth-child(1),
#privacy #primary dl dd table td {
	padding:10px;
}
}

/*当サイトについて
***************************************/

#about #primary article > p {
	margin-bottom:6rem;
	text-align:center;
}

#about #primary ul {
	list-style:none !important;
}

#about #primary dl {
	margin:0 1.5rem;
}

#about #primary dl dt {
	margin-bottom:3rem;
	line-height:1.4;
	font-size:1.1em;
}

#about #primary dl dd {
	margin-bottom:7.5rem;
	line-height:1.8;
}

#about #primary dl dd ol {
	list-style:decimal;
	padding-left:2rem;
}

#about #primary dl dd:last-child {
	margin-bottom:0;
}

#about #primary dl dd table {
	width:100%;
	margin:2rem auto 0 auto;
}

#about #primary dl dd table td {
	vertical-align:middle;
	padding: 1em;
	border:none;
	border-bottom: 1px solid #DDD;
}

#about #primary dl dd table th {
	width:25%;
	padding: 1em;
	border:none;
	border-bottom: 1px solid #AAA;
	vertical-align: middle;
}

#about #primary dl dd table a {
	color:#a6231b;
}

@media (max-width: 980px){
#about #primary {
}

#about #primary p {
	font-size:0.9em;
	margin-bottom:3rem;
}

#about #primary dl {
	margin:0;
}


#about #primary dl dt {
	font-size:1.6rem;
	margin-bottom:1.5rem;
}

#about #primary dl dd {
	font-size:1.4rem;
	margin-bottom:3rem;
}

#about #primary dl dd:last-child {
	padding-left:0;
}

#about #primary dl dd table td:nth-child(1),
#about #primary dl dd table td {
	padding:10px;
}
}


/*サイトマップ
***************************************/
#sitemap .entry-content article > ul {
	list-style:none;
	padding-left:0;
	margin-left:0;
}

#sitemap .entry-content article > ul > li {
	border-bottom:1px solid #DDD;
	margin-bottom:0;
	font-size:clamp(16px, 1.6vw, 20px);
}

#sitemap .entry-content article > ul > li > a {
	padding:4.5rem 3rem;
	text-decoration:none;
	display:block;
	font-weight:600;
}

#sitemap .entry-content article > ul > li > a:hover {
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	-ms-transition: 0s ease-in-out;
	opacity: 0.6;
	filter: alpha(opacity=60);
}

#sitemap .entry-content article > ul > li > a:before {
    content: "\f0da";
    font-family: FontAwesome;
    margin-right:1rem;
}

#sitemap .entry-content article > ul > li > ul {
	margin-left:4%;
	margin-bottom:3rem;
	margin-top:-1.5rem;
	list-style:none;
}

#sitemap .entry-content article > ul > li > ul > li {
	margin-bottom:1rem;
}

#sitemap .entry-content article > ul > li > ul > li:before {
	content:"― ";
	color:#182d9a;
}

#sitemap .entry-content article > ul > li > ul > li > a {
	text-decoration:none;
}

#sitemap .entry-content article > ul > li > ul > li > a:hover {
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	-ms-transition: 0s ease-in-out;
	opacity: 0.6;
	filter: alpha(opacity=60);
}

@media (max-width: 980px){
#sitemap .entry-content article > ul > li > a {
	padding:3rem 1rem;
}
#sitemap .entry-content article > ul > li > ul {
	margin-left:8%;    
	margin-top: -1.5rem;
    margin-bottom: 3.5rem;
}
}

/*パン屑のスタイル
***************************************/
#breadcrumb {
	width:100%;
	padding-top:1.5rem;
	padding-bottom:1.5rem;
}

#breadcrumb ul {
	width:100%;
	margin:0 auto;
	display:flex;
	-webkit-flex-wrap:wrap; /* Safari */
	flex-wrap:wrap;
	list-style:none;
}

#breadcrumb ul li {
	margin-right:0.5rem;
	letter-spacing:0;
	font-size:clamp(12px, 1vw, 14px);
	font-family: "Arial", "Noto Sans JP", sans-serif;
}

#breadcrumb ul li a {
	font-family: "Arial", "Noto Sans JP", sans-serif;
}

#breadcrumb ul li:nth-child(1):before {
    content: "\f015";
    font-family: FontAwesome;
    margin-right:0.5rem;
}

#breadcrumb ul li:after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left:0.5rem;
}

#breadcrumb ul li:last-child:after {
	content:none;
}

@media (max-width: 980px){
#breadcrumb {
	padding:1rem 2rem 1rem 2rem;
	letter-spacing:0;
}

#breadcrumb ul li {
	margin-right:0.25rem;
}

#breadcrumb ul li:after {
    margin-left:0.25rem;
}
#breadcrumb ul li a {
}
}



/*ページナビ
***************************************/
.pagenav {
}

.pagenav ul {
	clear: both;
	padding: 6rem 0;
	text-align: center;
	display:flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
	justify-content: center; /* 横方向中央揃え */
}

.pagenav ul li span.dots {
	position:relative;
	top:1rem;
	padding:0 1rem;
}


a.page-numbers, .pagenav .current {
	background: #fff;
	border: solid 1px #ddd;
	padding: 5px 8px;
	margin: 5px 2px;
	text-decoration: none;
	display:inline-block;
	font-size:clamp(18px, 1.8vw, 24px);
}
.pagenav .current {
	background: #000;
	border: solid 1px #CCC;
	color: #fff;
	display:inline-block;
}

@media (max-width: 980px) {
.pagenav {
	clear: both;
	padding: 2rem 10px;
	font-size:1.2rem;
	margin-bottom:0;
}
}


#prev_next {
    border-bottom: 1px solid #E0E0E0;
	margin-bottom:9rem;
}

#prev_next ul {
	display:flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
	border-top:1px solid #E0E0E0;
}

#prev_next ul li {
	width:50%;
}

#prev_next ul li #prev_title,
#prev_next ul li #next_title {
	width:100%;
}

#prev_next ul li #prev_title a:hover,
#prev_next ul li #next_title a:hover {
	text-decoration:underline;
}

#prev_next ul li #prev_title a {
	padding:1rem 2rem;
	background:#F0F0F0;
	display:block;
	font-size:1.5rem;
}

#prev_next ul li #prev_title a:before {
    content: "\f0a8";
    font-family: FontAwesome;
    margin-right:0.5rem;
}

#prev_next ul li #next_title a {
	padding:1rem 2rem;
	background:#F0F0F0;
	text-align:right;
	display:block;
	font-size:1.5rem;
}

#prev_next ul li #next_title a:after {
    content: "\f0a9";
    font-family: FontAwesome;
    margin-left:0.5rem;
}

#prev_next ul li {
	display:flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

#prev_next ul li.bktop{
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items:center; /* 縦方向中央揃え */
}

#prev_next ul li figure {
	width:35%;
	padding:2rem;
}

#prev_next ul li p {
	width:100%;
	padding:2rem;
	font-size:1.5rem;
	line-height:1.3;
}

#prev_next ul li:nth-child(2) p {
	text-align:right;
}

#prev_next ul li p a:hover {
	text-decoration:underline;
}

#prev_next ul li:nth-child(1) {
	border-right:1px solid #E0E0E0;
}

.bktop {
}

.bktop a {
	display:block;
	text-align:center;
	width:100%;
	font-size:1.5rem;
}

.bktop a:before {
    content: "\f015";
    font-family: FontAwesome;
    margin-right:0.5rem;
}

@media (max-width: 980px){
#prev_next {
	margin-bottom:0;
    border-bottom:none;
}

#prev_next ul {
	padding:0;
	border-bottom:1px solid #E0E0E0;
}

#prev_next ul li {
	-webkit-align-items: flex-start; /* 縦方向中央揃え（Safari用） */
	align-items:flex-start; /* 縦方向中央揃え */
}


#prev_next ul li #prev_title a,
#prev_next ul li #next_title a {
	padding:1rem 10px;
	font-size:1.2rem;
}

#prev_next ul li figure {
	display:none;
}

#prev_next ul li p {
	width:100%;
	padding:10px;
}

#prev_next ul li p a {
	font-size:1.2rem;
}

.bktop a {
	margin-top:0%;
	font-size:1.2rem;
}

}

/*チェイン表示
***************************************/
.chain01,
.chain02,
.chain03,
.chain04,
.chain05 {
  opacity : 0;
  transition : all 1s;
}
  
.chain01.fadein-chain,
.chain02.fadein-chain,
.chain03.fadein-chain,
.chain04.fadein-chain,
.chain05.fadein-chain {
  opacity : 1;
}


/*スマホ用コンタクトボタン
***************************************/

@media screen and (min-width:980px){
#sp_contact {
	display:none;
}
#sp_link {
	display:none;
}
}

@media (max-width:980px) {
#sp_contact {
    position: fixed;
    bottom: 0;
    right: 0;
	width: 100%;
	z-index:9999;
	border-top:1px solid #FFF;
}

#sp_contact ul {
	display:flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

#sp_contact li {
	width:33.3333%;
}

#sp_contact li:nth-child(2),
#sp_contact li:nth-child(3) {
	border-left: 1px solid #FFF;
}

#sp_contact li a {
    background: #17309b;
    text-decoration: none;
    color: #fff;
    width: 100%;
    padding: 1.2em 0;
    text-align: center;
    display: block;
	font-size:15px;
	letter-spacing:0;
	font-family: "Arial", "Noto Sans JP", sans-serif;
	font-weight:700;
}

#sp_contact li:nth-child(2) a{
	background:#17309b;
}

#sp_contact li:nth-child(3) a{
	background:#17309b;
}

#sp_contact a:hover {
    text-decoration: none;
    background:#e1af00;
	color:#FFF;
}

#sp_contact li a i {
	margin-right:0.5rem;
}

#sp_link {
    display: block;
    position: absolute;
    top: 10px;
    right: 50px;
    z-index: 100;
}
#sp_link ul {
		display:flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
}

#sp_link ul li {
	width:43px;
	margin:0 0.25rem;
}
}


/*ページトップ
***************************************/
div.scroll-btn {
	position: fixed;
	right: 2rem;
	z-index: 10000;
}

div.scroll-btn a {
	background: rgba( 204, 204, 204, 0.5);
	width: 50px;
	height: 50px;
	display: block;
	text-align: center;
	transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-webkit-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	-ms-transition: .2s ease-in-out;
}

div.scroll-btn a:hover {
	background: #000;
}

div.scroll-btn a i {
	font-size: 60px;
	line-height: .8;
	color: #fff;
	opacity: .8;
	transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-webkit-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	-ms-transition: .2s ease-in-out
}

div.scroll-btn a:hover i {
	color: #FFF;
	opacity: 1;
}

@media (max-width: 980px){
.grecaptcha-badge {
    bottom: 150px !important;
}
}



/*WORDPRESSのCSS*/
.entry-header {
	position: relative;
	padding: 15rem 6rem 15rem 6rem;
	margin-top:110px;
	background: url(../../images/entry-header_bg.png) no-repeat 90% center;
	background-size: 55%;

}

.entry-header #page_title {
	max-width:1600px;
	margin:0 auto;
	letter-spacing:0;
}

.entry-header h1 {
	text-align:left;
	font-size:clamp(22px, 2.2vw, 28px);
	line-height:1.4;
	color:#111;
	font-weight:700;
}

.entry-header h1 span {
	display:block;
	font-size: clamp(60px, 10vw, 180px);
	color: #17309b;
	margin-top:1rem;
	line-height: 1;
	font-weight:normal;
}

@media only screen and (max-width: 980px) {
.entry-header {
	position: relative;
	margin-top:110px;
	background: url(../../images/entry-header_bg.png) no-repeat 90% bottom;
	background-size: 68%;

}

.entry-header {
	padding:3rem 2rem 6rem 2rem;
}
}

 @media only screen and (max-width: 414px) {
.entry-header {
	padding:0 2rem 10rem 2rem;
}

.entry-header #page_title {
	max-width:1200px;
	margin:0 auto;
}

.entry-header h1 {
	letter-spacing:0;
}

.entry-header h1 span {
	margin-top:0.5rem;
}

}


/* ===================================================
   WordPress 本文エリア（the_content）基本スタイル（調整済レスポンシブ）
   対象: .entry-content
=================================================== */

.entry-content {
  font-size: clamp(16px, 1.4vw, 17px);
  word-break: break-word;
}

.entry-content article {
	font-family: "Arial", "Noto Sans JP", sans-serif;
}

/* 目次 */
.entry-content #toc_container {
	position: relative;
	z-index: 1;
	margin-top: 3rem;
	margin-bottom:6rem;
	padding: 3rem;
	border: 1px #e4e1e1 solid;
}

.entry-content #toc_container .toc_title {
	text-align:center;
  font-size: clamp(18px, 1.9vw, 23px);
}

.entry-content #toc_container .toc_list > li {
	list-style:none;
}

.entry-content #toc_container .toc_list > li::before {
  display: inline-block;
  content: "■";
  margin-right: 0.5em;
  margin-left: -1.5em;
  color:#17309b;
}



/* 段落 */
.entry-content p {
  margin-bottom: 1.6rem;
  line-height:2.2;
}

/* 見出し */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  line-height: 1.5;
  margin: 3rem 0 3rem;
}

/* h1〜h6は段階的に縮小 */

.entry-content h2 {
	font-size: clamp(20px, 2.1vw, 24px);
	margin-bottom:4.5rem;
}

.page .entry-content h2 {
	font-size: clamp(24px, 2.4vw, 36px);
	font-weight: 700;
	display: block;
}

.entry-content h2:first-child {
	margin-top:0 !important;
}

.page .entry-content h2.wp-block-heading span {
	font-size:0.75em;
	position:relative;
	top:-0.25rem;
	color:#17309b;
	font-family: "Bebas Neue", "Noto Sans JP", sans-serif;
	font-weight: 400;
	text-align:right;
	display:block;
}

.page .entry-content h2.wp-block-heading span:before {
  background-color: #17309b;
  content: "";
  height: 1px;
  width: 100%;
  display:block;
  margin-top:1rem;
  margin-bottom:1rem;
}


.entry-content h3 {
	font-size: clamp(18px, 1.9vw, 22px);
	padding:0 0 0 1.5rem;
	border-left:3px solid #f07a8b;
	margin-bottom:4.5rem;
}

.page .entry-content h3 {
	border:none;
	padding-left:0;
	font-size: clamp(20px, 2.4vw, 26px);
	color:#17309b;
	position:relative;
	font-weight:600;
	text-align: center;
	
/*	align-items: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;*/
}


.page .entry-content h3 span {
	position:relative;
	display:inline-block;
	border-bottom: 1px solid #17309b;
	padding:0 4.5rem 1rem 4.5rem;
}

.page .entry-content h3 span:before,
.page .entry-content h3 span:after {
	content: '';
	background-color: #17309b;
	width: 1px;
	height: 20px;
	transform: rotate(30deg);
	position: absolute;
	bottom: -10px;
}
.page .entry-content h3 span:before {
  right: 1em;
}

.page .entry-content h3 span:after {
  right: 0.5em;
}


/*.page .entry-content h3.wp-block-heading span {
	display: inline-block;
	flex-shrink: 0;
	margin-left:0;
    padding-left: 2rem;
    padding-right: 2rem;
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight:600;
}

.page .entry-content h3:before,
.page .entry-content h3:after {
	background-color: #17309b;
	content: "";
	height: 1px;
	width: 100%;
}*/

.page .entry-content h3:first-letter {
}

.entry-content h4 {
  font-size: clamp(18px, 1.8vw, 24px);
  border-left:1px solid #17309b;
  padding-left:1.5rem;
  font-weight:600;
}

.entry-content h5 {
  font-size: clamp(17px, 1.8vw, 20px);
  color: #17309b;
  margin-bottom:1.5rem;
  padding-bottom:1rem;
  border-bottom:1px solid #DDD;
}

.entry-content h6 {
  font-size: clamp(15px, 1.6vw, 18px);
  color: #777;
}

.wp-block-group *:last-child {
	margin-bottom:0 !important;
}

/* =====================================
   Font Size Responsive (S / M / L / XL)
   WordPress Editor対応
   ===================================== */

/* 小サイズ（S） */
.has-small-font-size {
  font-size: clamp(12px, 1.2vw, 14px) !important;
}

/* 中サイズ（M） */
.has-medium-font-size {
  font-size: clamp(16px, 1.8vw, 20px) !important;
}

/* 大サイズ（L） */
.has-large-font-size {
  font-size: clamp(24px, 2.4vw, 36px) !important;
}

/* 特大サイズ（XL） */
.has-x-large-font-size {
  font-size: clamp(30px, 3.6vw, 48px) !important;
}

/* 画像・動画など */
.entry-content img,
.entry-content video,
.entry-content iframe {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 4.5rem auto;
  border-radius: 0.4rem;
  outline: none;
  border: none;
}

.entry-content .wp-block-media-text img {
	margin-top:0;
	margin-bottom:0;
}

.entry-content .wp-block-column img {
	margin-top:0;
}

/* YouTubeなど埋め込み */
.entry-content iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* リスト */
.entry-content ul,
.entry-content ol {
  margin: 3rem 0 3rem 2rem;
  padding: 0;
}

.entry-content ul > li > ul,
.entry-content ol > li > ol {
	margin:1.5rem 0 1.5rem 2rem;
}

.entry-content ul.has-background,
.entry-content ol.has-background {
	margin-left:0;
}

.entry-content ul {
	list-style:disc;
}

.entry-content ul li,
.entry-content ol li {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.entry-content ul li::marker {
  color: #f07a8b;
}

/* 引用 */
.entry-content blockquote {
  border-left: 0.4rem solid #f07a8b;
  background: #f9f9f9;
  padding: 1.2rem 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: #555;
}

/* テーブル */
.entry-content .wp-block-table {
  margin: 2rem 0;
}

.entry-content .wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: clamp(14px, 1.4vw, 16px);
}

.entry-content .wp-block-table.top0 table {
	margin-top:0 !important;
}

.entry-content th,
.entry-content td {
  border: 1px solid #ddd;
  padding: 1.5rem 2rem;
}

.entry-content th {
  background: #f7f7f7;
  font-weight: bold;
}

/* リンク */
.entry-content a {
  color: #17309b;
  text-decoration: underline;
  transition: color 0.3s;
}

.entry-content a:hover {
  color: #ff4788;
  text-decoration: none;
}

#recruit #main a,
#instructor #main a,
#honsha #main a {
  color: #17309b;
  text-decoration: underline;
  transition: color 0.3s;
}

#recruit #main a:hover,
#instructor #main a:hover,
#honsha #main a:hover {
  color: #ff4788;
  text-decoration: none;
}

/* ボタン風リンク */
.entry-content .wp-block-button__link,
.entry-content a.button {
  background: #f07a8b;
  color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: 0.4rem;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s ease;
  font-size: clamp(14px, 1.6vw, 17px);
}

.entry-content .wp-block-button__link:hover,
.entry-content a.button:hover {
  background: #d65b70;
}

/* キャプション付き画像 */
.entry-content .wp-caption {
  text-align: center;
  margin: 1.8rem auto;
  max-width: 100%;
}

.entry-content .wp-caption-text {
  font-size: clamp(13px, 1.4vw, 15px);
  color: #666;
  margin-top: 0.4rem;
}

/* コードブロック */
.entry-content pre,
.entry-content code {
  background: #f5f5f5;
  padding: 0.8rem 1rem;
  border-radius: 0.4rem;
  font-family: monospace;
  overflow-x: auto;
  font-size: clamp(13px, 1.4vw, 15px);
}

/* clearfix */
.entry-content::after {
  content: "";
  display: block;
  clear: both;
}

/* 全幅ブロックをブラウザ幅いっぱいに広げる */
.entry-content .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-right:6rem;
  padding-left:6rem;
  
/*background:
			radial-gradient(290px 300px , rgba(247,219,226, 0.15) 20%, transparent 20%),
			radial-gradient(800px 780px , rgba(247,219,226, 0.15) 20%, transparent 20%),
			radial-gradient(1000px 990px , rgba(247,219,226, 0.15) 20%, transparent 20%),
			radial-gradient(400px 380px , rgba(247,219,226, 0.15) 20%, transparent 20%),
			radial-gradient(750px 750px , rgba(247,219,226, 0.15) 20%, transparent 20%),
			radial-gradient(100px 100px , rgba(247,219,226, 0.15) 20%, transparent 20%);
		background-size: 
			1230px 1280px,
			810px 910px,
			1470px 990px,
			1200px 1700px,
			1520px 1200px,
			1100px 1300px;
		background-position: 
			-300px -550px,
			-200px 100px,
			50px 510px,
			-200px -550px,
			-180px -250px,
			130px -150px;
			background-attachment:fixed;*/
}

@media screen and (max-width: 600px) {
.entry-content {
  padding-bottom:6rem;
}

}

/* alignwide（ワイド幅）も使う場合 */
.entry-content .alignwide {
  width: 90vw;
  max-width: 90vw;
  margin-left: calc(50% - 45vw);
  margin-right: calc(50% - 45vw);
}

/* iframeや画像もはみ出しを防ぐ */
.entry-content .alignfull iframe,
.entry-content .alignfull img {
  width: 100%;
  height: auto;
  display: block;
}

/* Gutenbergのblock内余白調整（不要なら削除OK） */
.entry-content .alignfull > * {
  margin-left: auto;
  margin-right: auto;
}


.wp-block-cover {
	padding-top:12rem;
	padding-bottom:12rem;
}

.wp-block-columns {
	margin-bottom:4.5rem;
}

.wp-block-columns:last-child {
	margin-bottom:0;
}

.wp-block-cover .wp-block-image img {
	margin-bottom:1.5rem;
}

.wp-block-cover .wp-block-column-is-layout-flow p {
	letter-spacing:0;
	font-size: clamp(13px, 1.4vw, 15px);
	line-height:1.5;
}




/* 微調整 */

article > .wp-block-media-text {
	padding-top:3rem;
	padding-bottom:3rem;
}

.wp-block-media-text > .wp-block-media-text__content {
	padding-right:0;
}

.wp-block-group__inner-container > *:first-child,
.wp-block-media-text > .wp-block-media-text__content > *:first-child {
	margin-top:0;
}

.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
	padding-right:8%;
	padding-left:0;
}

@media screen and (max-width: 600px) {
.wp-block-media-text > .wp-block-media-text__content {
	padding-left:0;
	margin-top:3rem;
}
.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
  padding-right: 0;
}
}


/* スマホ背景対応用 */
@media (max-width: 980px){
.cd-fixed-bg {
    position: relative;
    min-height: 100%;
    background-size: cover; /*--背景画像のサイズ--*/
    background-attachment: fixed; /*--背景画像の固定--*/
    background-repeat: no-repeat; /*--背景画像の繰り返し--*/
    background-position: center center; /*--背景画像の位置--*/
	z-index: 2;
}

}

/* 親はそのまま */
.deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  height: 100vw;
  overflow: hidden;
}

/* 基本スラッシュ（位置・回転は個別で指定します） */
.slash {
  position: absolute;
  top: 0;
  width: 20vw;
  height: 300vw;
  opacity: 1;
  overflow: visible;
  pointer-events: none;

  /* ---- カスタムプロパティで回転とスケールを分離 ---- */
  --rot: 0deg;     /* 各 .slash-X で上書き */
  --sy: 0;         /* 0 -> 1 で伸びる */
  transform-origin: top center; /* デフォルト、個別で上書き可 */
  transform: rotate(var(--rot)) scaleY(var(--sy));
  transition: transform 20s cubic-bezier(0.16,1,0.3,1);
}

/* 表示（伸ばす） */
.slash.is-show {
  --sy: 1;
}

/* 各スラッシュ個別設定（回転と transform-origin はここで定義） */
.slash-1 {
  --rot: 43.5deg;
  transform-origin: right top;   /* 既存の基準点を守る */
  left: calc(50% - -4vw);
}

.slash-2 {
  --rot: 43.5deg;
  transform-origin: left top;
  right: calc(-50% - -13.5vw);
  /* overflow: clip; を外すか必要なら残す */
}

.slash-3 {
  --rot: 43.5deg;
  transform-origin: right top;
  left: calc(50% - 55vw);
}

/* 色はそのまま */
.bg-yellow { background: #fff100; }

/* レスポンシブ調整はそのまま流用 */
@media (max-width: 980px){
  .slash-1 { left: calc(50% - 5vw); }
}


/* ==================================================
   🎨 CSS Animation Library - 70 Animations
   カテゴリ別
   トリガー: .trigger-load / .trigger-hover / .trigger-scroll
================================================== */


/* ================= fade 系 ================= */

/* 1. fade-in */
.anim-fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.anim-fade-in.show {
  opacity: 1;
}

/* 2. fade-out */
.anim-fade-out {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}
.anim-fade-out.show {
  opacity: 0;
}

/* 3. fade-up */
.anim-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* 4. fade-down */
.anim-fade-down {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-fade-down.show {
  opacity: 1;
  transform: translateY(0);
}

/* 5. fade-left */
.anim-fade-left {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.anim-fade-left.show {
  opacity: 1;
  transform: translateX(0);
}

/* 6. fade-right */
.anim-fade-right {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-fade-right.show {
  opacity: 1;
  transform: translateX(0);
}

/* 7. fade-scale-up */
.anim-fade-scale-up {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-fade-scale-up.show {
  opacity: 1;
  transform: scale(1);
}

/* 8. fade-scale-down */
.anim-fade-scale-down {
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-fade-scale-down.show {
  opacity: 1;
  transform: scale(1);
}

/* 9. fade-rotate-in */
.anim-fade-rotate-in {
  opacity: 0;
  transform: rotate(-15deg);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-fade-rotate-in.show {
  opacity: 1;
  transform: rotate(0);
}

/* 10. fade-blur-in */
.anim-fade-blur-in {
  opacity: 0;
  filter: blur(5px);
  transition: opacity 0.5s ease-out, filter 0.5s ease-out;
}
.anim-fade-blur-in.show {
  opacity: 1;
  filter: blur(0);
}

/* ================= slide 系 ================= */

/* 11. slide-up */
.anim-slide-up {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-slide-up.show {
  transform: translateY(0);
  opacity: 1;
}

/* 12. slide-down */
.anim-slide-down {
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-slide-down.show {
  transform: translateY(0);
  opacity: 1;
}

/* 13. slide-left */
.anim-slide-left {
  transform: translateX(20px);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-slide-left.show {
  transform: translateX(0);
  opacity: 1;
}

/* 14. slide-right */
.anim-slide-right {
  transform: translateX(-20px);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-slide-right.show {
  transform: translateX(0);
  opacity: 1;
}

/* 15. slide-scale-up */
.anim-slide-scale-up {
  transform: translateY(20px) scale(0.8);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-slide-scale-up.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* 16. slide-scale-down */
.anim-slide-scale-down {
  transform: translateY(-20px) scale(1.2);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-slide-scale-down.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* 17. slide-rotate-in */
.anim-slide-rotate-in {
  transform: translateY(20px) rotate(-15deg);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-slide-rotate-in.show {
  transform: translateY(0) rotate(0);
  opacity: 1;
}

/* 18. slide-blur-in */
.anim-slide-blur-in {
  filter: blur(5px);
  opacity: 0;
  transition: filter 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-slide-blur-in.show {
  filter: blur(0);
  opacity: 1;
}

/* ================= zoom/scale 系 ================= */


/* 19. zoom-in */
.anim-zoom-in {
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-zoom-in.show {
  transform: scale(1);
  opacity: 1;
}

/* 20. zoom-out */
.anim-zoom-out {
  transform: scale(1.2);
  opacity: 1;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-zoom-out.show {
  transform: scale(1);
  opacity: 0;
}

/* 21. zoom-up */
.anim-zoom-up {
  transform: translateY(20px) scale(0.8);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-zoom-up.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* 22. zoom-down */
.anim-zoom-down {
  transform: translateY(-20px) scale(0.8);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-zoom-down.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* 23. zoom-left */
.anim-zoom-left {
  transform: translateX(20px) scale(0.8);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-zoom-left.show {
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* 24. zoom-right */
.anim-zoom-right {
  transform: translateX(-20px) scale(0.8);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-zoom-right.show {
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* 25. zoom-rotate-in */
.anim-zoom-rotate-in {
  transform: rotate(-15deg) scale(0.8);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-zoom-rotate-in.show {
  transform: rotate(0) scale(1);
  opacity: 1;
}

/* 26. zoom-blur-in */
.anim-zoom-blur-in {
  filter: blur(5px);
  opacity: 0;
  transition: filter 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-zoom-blur-in.show {
  filter: blur(0);
  opacity: 1;
}

/* ================= flip/rotate 系 ================= */

/* 27. flip-x */
.anim-flip-x {
  transform: rotateX(90deg);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.anim-flip-x.show {
  transform: rotateX(0);
  opacity: 1;
}

/* 28. flip-y */
.anim-flip-y {
  transform: rotateY(90deg);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.anim-flip-y.show {
  transform: rotateY(0);
  opacity: 1;
}

/* 29. rotate-in */
.anim-rotate-in {
  transform: rotate(-180deg);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  transform-origin: center;
}
.anim-rotate-in.show {
  transform: rotate(0);
  opacity: 1;
}

/* 30. rotate-out */
.anim-rotate-out {
  transform: rotate(0);
  opacity: 1;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  transform-origin: center;
}
.anim-rotate-out.show {
  transform: rotate(180deg);
  opacity: 0;
}

/* ================= attention 系 ================= */

/* 31. shake */
.anim-shake {
  transform: translateX(0);
  transition: none;
}
.anim-shake.show {
  animation: shake-anim 0.5s ease-in-out 3;
}
@keyframes shake-anim {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
}

/* 32. pulse */
.anim-pulse {
  transform: scale(1);
  transition: none;
}
.anim-pulse.show {
  animation: pulse-anim 0.5s ease-in-out infinite;
}
@keyframes pulse-anim {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* 33. bounce */
.anim-bounce {
  transform: translateY(0);
  transition: none;
}
.anim-bounce.show {
  animation: bounce-anim 0.5s ease-in-out infinite;
}
@keyframes bounce-anim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* 34. wiggle */
.anim-wiggle {
  transform: rotate(0);
  transition: none;
}
.anim-wiggle.show {
  animation: wiggle-anim 0.5s ease-in-out 3;
}
@keyframes wiggle-anim {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

/* 35. swing */
.anim-swing {
  transform-origin: top center;
  transition: none;
}
.anim-swing.show {
  animation: swing-anim 0.5s ease-in-out 1;
}
@keyframes swing-anim {
  0% { transform: rotate(0); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0); }
}

/* ================= entrance 系 ================= */

/* 36. slide-in-left */
.anim-slide-in-left {
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 1.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1.6s ease;
}
.anim-slide-in-left.show {
  transform: translateX(0);
  opacity: 1;
}

/* 37. slide-in-right */
.anim-slide-in-right {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 1.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1.6s ease;
}
.anim-slide-in-right.show {
  transform: translateX(0);
  opacity: 1;
}

/* 38. slide-in-up */
.anim-slide-in-up {
  transform: translateY(10%);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-slide-in-up.show {
  transform: translateY(0);
  opacity: 1;
}

/* 39. slide-in-down */
.anim-slide-in-down {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.anim-slide-in-down.show {
  transform: translateY(0);
  opacity: 1;
}

/* 40. fade-in-scale */
.anim-fade-in-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-fade-in-scale.show {
  opacity: 1;
  transform: scale(1);
}

/* ================= decorative/loop 系 ================= */

/* 41. spin */
.anim-spin {
  animation: spin-anim 2s linear infinite;
}
@keyframes spin-anim {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

/* 42. spin-reverse */
.anim-spin-reverse {
  animation: spin-reverse-anim 2s linear infinite;
}
@keyframes spin-reverse-anim {
  0% { transform: rotate(0); }
  100% { transform: rotate(-360deg); }
}

/* 43. pulse-loop */
.anim-pulse-loop {
  animation: pulse-anim 2s ease-in-out infinite;
}

/* 44. bounce-loop */
.anim-bounce-loop {
  animation: bounce-anim 2s ease-in-out infinite;
}

/* 45. wiggle-loop */
.anim-wiggle-loop {
  animation: wiggle-anim 0.5s ease-in-out infinite;
}

/* 46. swing-loop */
.anim-swing-loop {
  animation: swing-anim 2s ease-in-out infinite;
}

/* 47. float */
.anim-float {
  animation: float-anim 3s ease-in-out infinite;
}
@keyframes float-anim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* 48. heartbeat */
.anim-heartbeat {
  animation: heartbeat-anim 1.5s ease-in-out infinite;
}
@keyframes heartbeat-anim {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* 49. wiggle-small */
.anim-wiggle-small {
  animation: wiggle-small-anim 0.5s ease-in-out infinite;
}
@keyframes wiggle-small-anim {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(3deg); }
}

/* 50. shake-small */
.anim-shake-small {
  animation: shake-small-anim 0.3s ease-in-out infinite;
}
@keyframes shake-small-anim {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}


/* ================= fade 系 続き ================= */

/* 51. fade-slide-up */
.anim-fade-slide-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-fade-slide-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* 52. fade-slide-down */
.anim-fade-slide-down {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-fade-slide-down.show {
  opacity: 1;
  transform: translateY(0);
}

/* ================= slide 系 続き ================= */

/* 53. slide-in-top-left */
.anim-slide-in-top-left {
  opacity: 0;
  transform: translate(-100%, -100%);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.anim-slide-in-top-left.show {
  opacity: 1;
  transform: translate(0, 0);
}

/* 54. slide-in-top-right */
.anim-slide-in-top-right {
  opacity: 0;
  transform: translate(100%, -100%);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.anim-slide-in-top-right.show {
  opacity: 1;
  transform: translate(0, 0);
}

/* ================= zoom/scale 系 続き ================= */

/* 55. zoom-in-big */
.anim-zoom-in-big {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-zoom-in-big.show {
  opacity: 1;
  transform: scale(1);
}

/* 56. zoom-out-big */
.anim-zoom-out-big {
  opacity: 1;
  transform: scale(2);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-zoom-out-big.show {
  opacity: 0;
  transform: scale(1);
}

/* ================= flip/rotate 系 続き ================= */

/* 57. rotate-x-in */
.anim-rotate-x-in {
  opacity: 0;
  transform: rotateX(-90deg);
  transform-style: preserve-3d;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-rotate-x-in.show {
  opacity: 1;
  transform: rotateX(0);
}

/* 58. rotate-y-in */
.anim-rotate-y-in {
  opacity: 0;
  transform: rotateY(-90deg);
  transform-style: preserve-3d;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-rotate-y-in.show {
  opacity: 1;
  transform: rotateY(0);
}

/* ================= attention 系 続き ================= */

/* 59. pulse-slow */
.anim-pulse-slow {
  transform: scale(1);
  transition: none;
}
.anim-pulse-slow.show {
  animation: pulse-anim 3s ease-in-out infinite;
}

/* 60. shake-slow */
.anim-shake-slow {
  transform: translateX(0);
  transition: none;
}
.anim-shake-slow.show {
  animation: shake-anim 0.5s ease-in-out 3;
}

/* ================= entrance 系 続き ================= */

/* 61. drop-in */
.anim-drop-in {
  opacity: 0;
  transform: translateY(-200%);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.anim-drop-in.show {
  opacity: 1;
  transform: translateY(0);
}

/* 62. fade-in-left-big */
.anim-fade-in-left-big {
  opacity: 0;
  transform: translateX(-200%);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-fade-in-left-big.show {
  opacity: 1;
  transform: translateX(0);
}

/* ================= decorative/loop 系 続き ================= */

/* 63. slow-spin */
.anim-slow-spin {
  animation: spin-anim 10s linear infinite;
}

/* 64. fast-spin */
.anim-fast-spin {
  animation: spin-anim 0.5s linear infinite;
}

/* 65. float-small */
.anim-float-small {
  animation: float-anim 1.5s ease-in-out infinite;
}

/* 66. heartbeat-fast */
.anim-heartbeat-fast {
  animation: heartbeat-anim 0.7s ease-in-out infinite;
}

/* 67. wiggle-tiny */
.anim-wiggle-tiny {
  animation: wiggle-small-anim 0.3s ease-in-out infinite;
}

/* 68. shake-tiny */
.anim-shake-tiny {
  animation: shake-small-anim 0.2s ease-in-out infinite;
}

/* ================= その他 ================= */

/* 69. bounce-small */
.anim-bounce-small {
  animation: bounce-anim 0.5s ease-in-out infinite;
}

/* 70. swing-slow */
.anim-swing-slow {
  animation: swing-anim 3s ease-in-out infinite;
}

.smooth {
  clip-path: inset(0 100% 0 0); /* 初期状態：右側を隠す */
  transition: 1s cubic-bezier(0.37, 0, 0.63, 1); /* アニメーション設定 */
  transition-property: clip-path;
}

.smooth.show {
  clip-path: inset(0); /* アニメーション後：隠れた部分が表示 */
}