@charset "UTF-8";
/* CSS Document */


*{
	box-sizing:border-box;
}

:root {
	--main-color: #1c2c62;
}


/*PC・SP表示非表示*/
.pc{display:none;}
@media screen and (min-width:640px){
.pc{display:inline-block;}
.sp{display:none;}
}


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{
	background:transparent;
	border:0;
	font-size:100%;
	font-style:normal;
	font-weight:500;
	line-height:100%;
	list-style:none;
	margin:0;
	padding:0;
	outline:0;
	text-align:left;
	vertical-align:baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{
	display:block;
}
iframe,
video{
	width: 100%;
	height: auto;
}


/*全体*/
html{
    /** コンテンツ幅640pxの時  1rem = 10px */
    font-size: clamp(7px, 1.5625vw, 10px);
}
body{
	background:#f7f7f8;
	color:#111;
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",YuGothic,"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial, "メイリオ",Meiryo,sans-serif;
	font-weight:500;
	margin:0 auto;
	padding:0;
	-webkit-text-size-adjust:100%;
	width:100%;
	max-width:640px;
}


/*共通*/
h2{
	letter-spacing: 0.1rem;
}
h2 span{
	font-weight: bold;
}
h2.h2{
	width: 98%;
	margin: 0 auto 50px;
	color: #000;
	font-size: 3.3rem;
	font-weight: bold;
	text-align: center;
	position: relative;
	line-height: 1.5;
}
h2.h2::after{
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	content: '';
	width: 30%;
	height: 5px;
	border-bottom: dotted 3px #000;
}
a{
	text-decoration:none;
	display: block;
}
img{
	display:block;
	width:100%;
	height:auto;
}
.hide{
	display: none;
}
.mgn{
	margin-top: 3rem;
}


/*レイアウト*/
.header,
.article,
.footer{
	margin:0 auto;
	width:100%;
	max-width:640px;
}
.article{
	background:#fff;
	margin:0 auto;
	padding: 0;
}
.section{
	margin:50px 0 0;
	padding:0;
}
@media screen and (min-width:640px) {
	.section{
		margin:70px 0 0;
	}
}
.top20 {
	padding-top: 20px;
}
.padding20 {
	padding: 20px 10px;
}


/* header */
.header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	background: rgb(56,72,106);
	background: linear-gradient(30deg, rgba(56,72,106,1) 35%, rgba(43,64,107,1) 100%);
	width: 640px;
	margin: 0 auto;
	z-index: 1000;
}
.header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0;
	position: relative;
}
.logo {
	width: 10rem;
	margin-left: 1rem;
}
/* ハンバーガーボタンのデザイン */
.drawer__button {
	position: relative;
	bottom: 0.5rem;
	width: 10rem;
	height: 6rem;
	background-color: transparent;
	border: none;
	cursor: pointer;
	z-index: 1001;
}
/* ハンバーガーボタン内の線 */
.drawer__button > span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4.5rem;
	height: 3px;
	background-color: #fff;
	transform: translateX(-50%);
	margin: 0.5rem 0;
}
.drawer__button > span:first-child {
	transform: translate(-50%, calc(-50% - 1.5rem));
	transition: transform 0.3s ease;
}
.drawer__button > span:nth-child(2) {
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease;
}
.drawer__button > span:last-child {
	transform: translate(-50%, calc(-50% + 1.5rem));
	transition: transform 0.3s ease;
}
/* メニューのデザイン */
.drawer__nav {
	position: absolute;
	top: 100%;
	right: 0;
	width: 60%;
	height: calc(100vh - 8rem);
	opacity: 0;
	visibility: hidden;
	z-index: 999;
	overflow: hidden;
}
.drawer__nav__inner {
	position: relative;
	width: 100%;
	height: auto;
	background-color: #393b3e;
	padding: 1rem 1.5rem;
	margin: 0 0 auto 0;
	overflow: scroll;
	transform: translateY(-100%);
	transition: transform 0.3s ease;
}
.drawer__nav__menu {
	list-style: none;
	padding-left: 0;
}
.drawer__nav__link {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 0  0 0 1rem;
	font-size: 1.6rem;
}
/* 展開時のデザイン */
.drawer__nav.active {
	opacity: .95;
	visibility: visible;
	top: 8rem;
}
.drawer__nav.active .drawer__nav__inner {
	transform: translateX(0);
}
/* ハンバーガーメニュー展開時、背景を固定 */
body.active {
	height: 100%;
	overflow: hidden;
}
.drawer__nav__item{
	display: flex;
	align-items: center;
	border-bottom: solid 1px #fff;
	color: #fff;
}
.drawer__nav__item:last-child{
	border-bottom: none;
}
.menu-e{
	width: 8rem;
	text-align: right;
	padding-right: 1rem;
}
.menu-j{
	flex: 1;
	text-align: left;
	margin: 2.2rem 0 2.2rem 0;
	border-left: .3rem solid #fff;
}
@media (max-width: 640px) {
	.header {
		width: 100%;
	}
}


/* .video-wrap */
.video-wrap{
	width: 96%;
    max-width: 640px;
   	margin: 0 auto 5%;
	aspect-ratio: 16 / 9;
}

.video-wrap iframe {
	width: 100%;
	height: 100%;
	border: none;
}


/* section.link */
.link {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	justify-content: center;
	margin: 0 auto;
	background: #1c2c62;
	padding: 10px 0;
}
.link__list {
	width: 45%;
}
.link__list a {
	text-align: center;
	font-size: 2em;
	line-height: 1.4;
	padding: 0;
	margin: 5px;
	color: #000;
}

.cm {
	background: #ebf1fe;
}
.cm__video {
	padding: 15px;
}

/* section.btn */
.btn_img{
	width:90%;
	margin:0 auto 30px;
}
@media screen and (min-width:640px){
	.btn_img{
	width:90%;
	margin:0 auto 30px;
	}
}

/*lisk*/
.lisk {
	padding: 0 0 20px;
}
.lisk__ttl {
	font-size: 14px;
	color:#898989;
	text-align: center;
	margin: 0 0 5px;
}
.lisk__txt {
	text-align: center;
	color:#898989;
	font-size:11px;
	line-height:2;
	margin:10px 12px 0;
	padding:0 0 2px;
}

@media screen and (min-width:640px) {
	.lisk__txt {
		font-size:11px;
	}
}

/*footer.footer*/
.footer{
	background:#191919;
	display:flex;
    justify-content:center;
	padding:20px 12px 30px;
}
.footer p{
    display:inline-block;
    margin:0;
	padding:0 10px;
}
.footer p.b_left{
	border-left:1px solid #fff;
}
.footer a{
	color:#fff;
	font-size:14px;
    font-weight:normal;
	line-height:1;
	text-decoration:none;
}
@media screen and (min-width:640px) {
	.footer a{
		font-size:16px;
	}
}
@media screen and (max-width:375px) {
	.footer a{
		font-size:12px;
	}
}

.active {
	display: flex;
	align-items: center;
	transition: .3s;
}


/* div.slider-wrapper */
.slider-wrapper{
    background-repeat:no-repeat;
    background-size:cover;
	width: 100%;
    margin:0 auto;
    padding:0;
	background-color: #fff;
	transform: translateY(-.2rem);
}
.slider-wrapper ul{
    width:100%;
    margin:0 auto;
}
.slider-wrapper ul li p b{
    display:block;
    margin:10px 0;
}
.slider-wrapper ul li img{
    width:100%;
}

.slider-wrapper .active{
	color: red;
}

.slick-dots li button:before{
	font-size: 20px;
}

.slick-dots li button:before{
	font-size: 5rem;
}
.slick-dots li.slick-active button:before{
	color: #171663;
}