@charset "utf-8";
/* 全体の設定
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0;
	word-wrap: break-word;
	overflow-x: hidden;
	color: var(--sub-color_01);
}
html {scroll-behavior: smooth;}
section {padding: 5rem 1.25rem;}

/* ROOT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
	/* 全体サイズ */
	--l-slim: 440px;
	/* Color */
	--main-color: #B8DEF4;
	--sub-color_01: #1C2027;
	--sub-color_02: #608790;
	--gray-blue: #778994;
	--light-blue: #D4ECFA;
	--blue: #3F95C7;
	--dark-blue: #00A0E9;
	--navy: #1d50a2;
	--green: #009245;
	--light-yellow: #FFFABF;
	--yellow: #F9FF58;
	--light-orange: #ED945D;
	--orange: #E35F0D;
	--vermilion: #dc503c;
	--red: #E60012;
	--high-light-gray: #F5F5F8;
	--light-gray: #EDEFF4;
	--gray: #D3D3D9;
	--gray2: #95989F;
	--dark-gray: #515152;
	--deep-dark-gray: #1C2027;
	--white: #fff;
	--black: #000;
	/* 角丸 */
	--rounded-5-10: clamp(5px, 3vw, 10px);
	--rounded-10-25: clamp(10px, 3.5vw, 25px);
	--rounded-200: 200px;
}

/* 基本CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
    display: inline-block;
    text-decoration-line: none;
	color: inherit;
}
a:hover {
    color: currentColor;
    opacity: 0.7;
}
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
li {text-decoration: none;}
table {width: 100%; border-collapse: collapse;}
table :is(th,td) {padding: 1rem;}
table th {width: 30%;}
table p {margin: 0;}
/*input {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}*/
button {
	background: none;
    border: none;
}

/* フォント */
.font-poppins {
  font-family: "Poppins", 'Noto Sans JP', sans-serif;
}

@media screen and (max-width: 960px) {
	table.table960 :is(th,td) {display: block; width: 100%;}
	table.table960 th {padding-bottom: 0;}
	table.table960 td {padding-top: .5rem;}
}
@media screen and (max-width: 768px) {
	table.table768 :is(th,td) {display: block; width: 100%;}
	table.table768 th {padding-bottom: 0;}
	table.table768 td {padding-top: .5rem;}
}
@media screen and (max-width: 560px) {
	table.table560 :is(th,td) {display: block; width: 100%;}
	table.table560 th {padding-bottom: 0;}
	table.table560 td {padding-top: .5rem;}
}

/* 汎用コンテンツ
-------------------------------------*/
/*文字色 */
.text-black { color: var(--black); }
.text-white { color: var(--white); }
.text-gray-blue, a.text-gray-blue {color: var(--gray-blue);}
.text-gray2 {color: var(--gray2);}
.text-blue, a.text-blue {color: var(--blue);}
.text-main {color: var(--main-color);}
.text-sub1 {color: var(--sub-color_01);}

/* 斜め文字(右) */
.text-rotate-r {
	display: inline-block;
    transform: rotate(15deg);
    margin-left: .4rem;
    vertical-align: middle;
}

/* メイン背景 */
main::before {
	content: "";
	position: fixed; top: 0; left: 0; z-index: -1;
	width: 100vw; height: 100svh;
	background: url("../img/common/main-bg.jpg") no-repeat center / cover;
}

/* メインコンテンツ(幅狭) */
html.is-restoring .l-slim {visibility: hidden;}
main:has(.l-slim) {
	display: grid;
    grid-template-columns: 1fr var(--l-slim) 1fr;
	max-width: 1920px; margin: 0 auto;
}
.l-slim__left,
.l-slim__right {
	color: var(--white);
	padding: 4rem clamp(1rem,calc((-60rem + 100vw) / 5),3rem);
}
.l-slim__left {
	order: 1;
	display: flex; justify-content: space-between;
	flex-direction: column;
}
.l-slim__right {order: 3;}
.l-slim {
	order: 2;
	width: 100%; max-width: var(--l-slim); 
	height: calc(100svh - 1rem);
	margin: 1rem auto 0;
	background-color: var(--white);
	border-radius: 40px 40px 0 0;
	overflow: hidden;
	filter: drop-shadow(3px 3px 9px rgba(0, 114, 129, 0.25));
}
.l-slim__inner {
	height: 100%;
	overflow-y: scroll;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* 背景色 */
.bg__main {background-color: var(--main-color);}
.bg__sub01 {background-color: var(--sub-color_01);}
.bg__white {background-color: var(--white);}
.bg__black {background-color: var(--black);}
.bg__light-gray {background-color: var(--light-gray);}
.bg__high-light-gray {background-color: var(--high-light-gray);}
.bg__light-blue {background-color: var(--light-blue);}
.bg__light-yellow {background-color: var(--light-yellow);}
.bg__lp {background: url("../img/common/con-bg.jpg") no-repeat center / cover;}

/* マップリンクボタン(矢印付き角丸線) */
.link-btn__rou-bd {
	display: grid; grid-template-columns: 1fr 60px;
	width: 100%; max-width: 280px;
	margin-left: auto; margin-right: auto;
	border: 1px solid var(--sub-color_01);
	border-radius: 200px;
	background-color: var(--white);
	transition: background-color .3s ease;
}
.link-btn__rou-bd span {position: relative;}
.link-btn__rou-bd span:first-of-type {
	padding: 1.15rem 2rem;
	font-family: "Poppins", sans-serif;
	font-weight: 600; font-size: 15px; text-align: left;
	transition: color .3s ease;
}
.link-btn__rou-bd span:first-of-type::after {
	content: "";
	position: absolute; left: 100%; top: 50%;
	transform: translateY(-50%);
	width: 1px; height: calc(100% - 1.5rem);
	background-color: var(--gray);
}
.link-btn__rou-bd span.arrow {
	width: 20px; height: 2px;
    background-color: var(--sub-color_01);
	margin: auto;
	transition: background-color .3s ease;
}
.link-btn__rou-bd span.arrow::before {
	content: "";
	width: 7px; height: 8px;
	background-color: var(--sub-color_01);
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	position: absolute; right: -2px; top: 50%;
    transform: translateY(-50%);
	transition: background-color .3s ease;
}
.link-btn__rou-bd:hover {background-color: var(--sub-color_01); opacity: 1;}
.link-btn__rou-bd:hover span:first-of-type {color: var(--white);}
.link-btn__rou-bd:hover span.arrow,
.link-btn__rou-bd:hover span.arrow::before {
	background-color: var(--white);
}
.link-btn__rou-bd.link-btn__white {
	border: none;
}
.link-btn__rou-bd.link-btn__white:hover {
	background-color: var(--sub-color_01);
}

/* [矢印付き角丸線]前にリンクアイコン付 */
.link-btn__rou-bd.link-btn__icon-blue span {
	display: inline-flex; align-items: center;
}
.link-btn__rou-bd.link-btn__icon-blue span:first-of-type::before {
	content: "";
	display: block;
	width: 16px; height: 16px;
	background: url("../img/common/link-btn-2.svg") no-repeat center / contain;
	margin-right: .5rem;
}

/* 見出し(上部2色線) */
.ttl__top-line {
	position: relative;
	border-top: 1px solid var(--main-color);
	padding-top: 1rem;
}
.ttl__top-line::before {
	content: "";
	position: absolute;
	left: 0; top: -1px;
	width: 2.75rem;
	border-top: 1px solid var(--sub-color_01);
}

/* テキスト(文字前に記号) */
[class*="text-marker__"]::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-right: .5rem;
	background-color: var(--main-color);
}
.text-marker__white::before {background-color: var(--white);}
.text-marker__circle::before {
	width: 12px; height: 12px;
	border-radius: 50%;
}

/* 後ろにリンクアイコン付 */
[class*="link-icon__"] {
	display: inline-flex; align-items: center;
}
[class*="link-icon__"]::after {
	content: "";
	display: block;
	width: 16px; height: 16px;
	background: url("../img/common/link-btn-1.svg") no-repeat center / contain;
	margin-left: .5rem;
}
.link-icon__gry::after {background-image: url("../img/common/link-btn-1.svg");}
.link-icon__white::after {background-image: url("../img/common/link-btn-3.svg");}
.link-icon__blue::after {background-image: url("../img/common/link-btn-2.svg");}

/* 後ろに矢印アイコン付 */
.link-icon__arrow {position: relative;}
.link-icon__arrow::after {display: none;}
.link-icon__arrow span.arrow {
	width: 16px; height: 1px;
    background-color: var(--sub-color_01);
	margin-left: 1rem;
}
.link-icon__arrow span.arrow::before {
	content: "";
	width: 6px; height: 7px;
	background-color: var(--sub-color_01);
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	position: absolute; right: -2px; top: 50%;
    transform: translateY(-50%);
}

/* リンク画像をhoverで拡大する */
/* 1番上のとこに高さもしくはアス比を入れて使用する */
.link__img-hover {
	position: relative; overflow: hidden; width: 100%;
}
.link__img-hover > img {
	position: absolute; left: 0; right: 0; top: 0; bottom: 0;
	object-fit: cover;
	transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
a:hover .link__img-hover > img {transform: scale(1.1, 1.1);}
a:has(.link__img-hover):hover {opacity: 1;}

/* リスト(文字前に記号) */
ul.list-icon__square li {
	text-indent: -1.75em;
    padding-left: 1.75em;
}
ul.list-icon__square li::before {
	content: "■";
    margin-right: .75rem;
}

/* リスト(文字前に●) */
ul.list-icon__circle li {
	text-indent: -1.75em;
    padding-left: 1.75em;
}
ul.list-icon__circle li::before {
	content: "●";
    margin-right: .75rem;
}

/* 動画用リスト */
.list-movie li {margin-bottom: 1.25rem;}
.list-movie [class*="aspect-"] {
	position: relative;
}
.list-movie [class*="aspect-"]::before,
.list-movie [class*="aspect-"]::after {
	content: "";
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
}
.list-movie [class*="aspect-"]::before {
	width: 33px; height: 33px;
	background: url("../img/common/mark-video.svg") no-repeat center / contain;
	z-index: 1;
	transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
.list-movie [class*="aspect-"]::after {
	width: 100%; height: 100%;
	z-index: 0;
	transition: background-color .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
.list-movie a:hover [class*="aspect-"]::before {
	transform: translate(-50%,-50%) scale(1.1, 1.1);
}
.list-movie a:hover [class*="aspect-"]::after {background-color: rgb(0 0 0 / .3);}

/* テーブル(全線) */
.tbl__border {
	border: 1px solid var(--gray);
}
.tbl__border :is(th,td) {
	border-right: 1px solid var(--gray);
	border-bottom: 1px solid var(--gray);
}
.tbl__border > :not(thead) tr:last-of-type > :is(th,td) {border-bottom: none;}
.tbl__border tr > :is(th,td):last-of-type {border-right: none;}
.tbl__border th {background-color: var(--light-blue);}

/* テーブル(角丸) */
table.tbl__round, .tbl__round table {
	border-collapse: separate; border-spacing: 0;
	border-radius: 5px;
}

/* 追加アスペクト比 */
.aspect-196-111, .aspect-196-111 > img { aspect-ratio: 196 / 111; }
.aspect-98-65, .aspect-98-65 > img { aspect-ratio: 98 / 65; }
.aspect-92-53, .aspect-92-53 > img {aspect-ratio: 92 / 53;}

/* 角丸 */
.corner-rounded__5, .corner-rounded__5 > img {border-radius: 5px;}
.corner-rounded__8, .corner-rounded__8 > img {border-radius: 8px;}
.corner-rounded__24, .corner-rounded__24 > img {border-radius: 24px;}
.corner-rounded__200 {border-radius: var(--rounded-200);}
.corner-rounded__5-10 {border-radius: var(--rounded-5-10);}
.corner-rounded__10-20 {border-radius: var(--rounded-10-20);}
.corner-rounded__10-25 {border-radius: var(--rounded-10-25);}
.corner-rounded__50per, .corner-rounded__50per > img {border-radius: 50%;}
.youtube.corner-rounded__8 iframe {border-radius: var(--rounded-5-10);}

/* 下線 */
.border-b__white-1 {border-bottom: 1px solid var(--white);}
.border-b__gray-1 {border-bottom: 1px solid var(--gray);}
.border-b__gray-blue-1 {border-bottom: 1px solid var(--gray-blue);}
.border-b__blue-1 {border-bottom: 1px solid var(--blue);}

.border-b__white-3 {border-bottom: 3px solid var(--white);}

/* Y軸スクロールバー */
.scroll-y {overflow-y: scroll;}
.scroll-y::-webkit-scrollbar-track {
	background-color: var(--white);
	border-radius: var(--rounded-200);
}
.scroll-y::-webkit-scrollbar-thumb {
	background-color: var(--light-blue);
	border-radius: var(--rounded-200);
}
.scroll-y::-webkit-scrollbar {
	background-color: var(--white);
	width: 4px;
}

/* X軸スクロールバー */
.scroll-x {
	overflow-x: scroll;
	overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
	padding-bottom: 1rem;
}
.scroll-x::-webkit-scrollbar-track {
	background-color: var(--light-gray);
	border-radius: var(--rounded-200);
}
.scroll-x::-webkit-scrollbar-thumb {
	background-color: var(--light-blue);
	border-radius: var(--rounded-200);
}
.scroll-x::-webkit-scrollbar {
	background-color: var(--white);
	height: 8px;
}

@media screen and (max-width: 1024px) {
	/* メインコンテンツ(幅狭) */
	main:has(.l-slim) {grid-template-columns: minmax(0, 1fr);}
	.l-slim__left,
	.l-slim__right {display: none;}
}

@media screen and (max-width: 560px) {
	/* メインコンテンツ(幅狭) */
	html.is-restoring .l-slim {visibility: visible;}
	.l-slim {
		margin-top: 0;
		max-width: 100%; height: auto; 
		min-height: 100svh;
		border-radius: 0;
		overflow-y: visible;
		filter: none;
	}
	.l-slim__inner {
		overflow-y: visible;
        height: auto;
        overscroll-behavior: auto;
        -webkit-overflow-scrolling: auto;
	}
}