@charset "UTF-8";
/* ------------------------------------------------
                    共通css
--------------------------------------------------- */

/*---------- header ----------*/
header {
    width: 100%;
	background: url("../img/bg_gray_01.png") 0 0 repeat;
	background-size: 287px;
	position: relative;
	z-index: 999;
}
header.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
}
header .header-inn {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 35px 10% 12px;
    display: flex;
	align-items: flex-end;
	justify-content: space-between;
	position: relative;
	transition: 0.3s ease-in-out;
}
header.is-fixed .header-inn {
    padding: 15px 10%;
}

/* ロゴ */
header .header-logo {
    width: 188px;
    display: block;
	transition: 0.3s ease-in-out;
}
header.is-fixed .header-logo {
    width: 120px;
}


/* グロナビ */
header .gnav-wrap {
    width: calc(100% - 258px);
}
header .gnav-wrap ul#gnav {
    width: 100%;
    display: flex;
	justify-content: center;
}
header .gnav-wrap ul#gnav li {
	display: block;
    padding: 0 20px;
}
header .gnav-wrap ul#gnav li a {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    -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;
}

@media (min-width: 769px) {
    header .gnav-wrap ul#gnav li a:hover {
		color: #5c96bd;
    }
}


/* 言語 */
.lang-switch {
	display: flex;
	align-items: center;
	position: absolute;
	top: 10px;
	right: 0;
}
a.lang-switch-item {
	color: #bbbbbb;
    font-size: 1.4rem;
	line-height: 1;
	position: relative;
    transition: 0.3s ease-in-out;
}
a.lang-switch-item:hover,
a.lang-switch-item.is-current {
	color: #000;
}
.lang-switch-item + .lang-switch-item {
	margin-left: 20px;
}
.lang-switch-item + .lang-switch-item::before {
	content: '';
	width: 1px;
	height: 100%;
	background: #000;
	position: absolute;
	top: 0;
	left: -10px;
}



@media (max-width: 768px) {
    header {
        width: 100%;
    }
    header .header-inn {
        width: 94%;
        max-width: 1024px;
        margin: 0 auto;
        padding: 8vw 0 4vw;
    }
	header.is-fixed .header-inn {
		padding: 3vw 0;
	}

    /* ロゴ */
    header .header-logo {
        width: 34%;
        margin: 0 auto 0;
        display: block;
    }
	header.is-fixed .header-logo {
        width: 34%;
	}
	

    /* グロナビ */
    header .gnav-wrap {
        width: 90%;
        height: 100%;
        padding: 20vw 0 0;
        background: #5c96bd;
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 998;
    	transition: 0.6s ease-in-out;
    }
    header .gnav-wrap ul#gnav {
        width: 80%;
		margin: 0 auto;
        padding: 0;
        display: block;
        position: relative;
        z-index: 999;
    }
	header .gnav-wrap ul#gnav li + li {
		margin-top: 4vw;
	}
    header .gnav-wrap ul#gnav li a {
        padding: 0;
        display: block;
        color: #fff;
        font-size: 5.8vw;
        font-weight: 500;
        position: relative;
    }
	
	/* 開閉ボタン */
	.sp-menu-trigger {
		width: 13.3vw;
		max-width: 60px;
		height: 13.3vw;
		max-height: 60px;
		background: none;
		z-index: 2001;
		border: none;
		position: absolute;
		top: 0;
		right: 0;
	}
	.sp-menu-btn {
		width: 60%;
		height: 100%;
		margin: 0 auto;
		padding: 0;
		position: relative;
	}
	.sp-menu-btn span{
		display: block;
		height: 2px;
		background: #5c96bd;
		position:absolute;
		width: 100%;
		left: 0;
		transition: 0.5s ease-in-out;	
	}
	.sp-menu-btn span:nth-child(1){
		top: calc(50% - 15%);
	}
	.sp-menu-btn span:nth-child(2){
		top: calc(50%);
	}
	.sp-menu-btn span:nth-child(3){
		top: calc(50% + 15%);
	}

	
	/*開閉ボタンopen時*/
	.is-open .sp-menu-btn span:nth-child(1) {
		top: 50%;
		transform: rotate(45deg);
		background: #fff;
	}
	.is-open .sp-menu-btn span:nth-child(2) {
		opacity: 0;
	}
	.is-open .sp-menu-btn span:nth-child(3) {
		top: 50%;
		transform: rotate(-45deg);
		background: #fff;
	}


	/* 言語 */
	.lang-switch {
		display: flex;
		align-items: center;
		position: absolute;
		top: 2vw;
		right: auto;
		left: 0;
	}
	.lang-switch-item {
		color: #bbbbbb;
		font-size: 1.4rem;
		line-height: 1;
		position: relative;
		transition: 0.3s ease-in-out;
	}
	.lang-switch-item:hover,
	.lang-switch-item.is-current {
		color: #000;
	}
	.lang-switch-item + .lang-switch-item {
		margin-left: 3vw;
	}
	.lang-switch-item + .lang-switch-item::before {
		content: '';
		width: 1px;
		height: 100%;
		background: #000;
		position: absolute;
		top: 0;
		left: -1.5vw;
	}

}


/*---------- footer ----------*/

/* pagetop */
.pagetop {
    display: block;
    cursor: pointer;
    text-align: center;
    font-size: 2.1rem;
    font-weight: 400;
    line-height: 1;
    position: fixed;
    right: 5%;
    bottom: 100px;
    z-index: 9996;
}
.pagetop img {
	width: 16px;
	margin-left: auto;
}
.pagetop-txt {
	margin: -5px 5px 0 0;
    display: block;
}
@media (max-width: 768px) {
	.pagetop {
		display: block;
		font-size: 4.2vw;
		right: 5%;
		bottom: 16vw;
	}
	.pagetop img {
		width: 4vw;
		margin-left: auto;
	}
	.pagetop-txt {
		margin: -1vw 1vw 0 0;
		display: block;
	}
    
}

footer {
    width: 100%;
	padding: 100px 0 20px;
	position: relative;
}
footer::after {
	content: '';
    width: 100%;
	height: 10vw;
	background: url("../img/bg_footer_bottom_pc.svg") bottom left no-repeat;
	background-size: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}

.footer-sns-link-wrap {
	width: 100%;
	margin: 0 auto 130px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.footer-sns-link {
	width: 24px;
	margin: 0 15px;
}
.copyright {
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 1.0rem;
	font-weight: 300;
	position: relative;
	z-index: 3;
}

@media (max-width: 768px) {

	footer {
		width: 100%;
		padding: 30vw 0 3vw;
	}
	footer::after {
		content: '';
		width: 100%;
		height: 30vw;
		background: url("../img/bg_footer_bottom_sp.svg") bottom left no-repeat;
		background-size: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.footer-sns-link-wrap {
		width: 100%;
		margin: 0 auto 24vw;
	}
	.footer-sns-link {
		width: 6vw;
		margin: 0 3vw;
	}
	.copyright {
		width: 100%;
		font-size: 2.8vw;
	}
}


/*---------- コンテンツ レイアウト ----------*/
.cont-inn {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}


@media (max-width: 768px) {
    .cont-inn {
        width: 90%;
        max-width: initial;
        margin: 0 auto;
        position: relative;
    }
}



/*---------- カラー ----------*/
.txt-blue {
	color: #5c96bd;
}
.txt-orange {
	color: #df5029;
}



/*---------- テキスト ----------*/
.txt-dancing {
	font-family: "Dancing Script", system-ui;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
.txt-yugothic {
	font-family: "游ゴシック体","Yu Gothic",YuGothic,"Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","ヒラギノ角ゴ Pro","メイリオ","Meiryo",メイリオ,"ＭＳ Ｐゴシック", sans-serif;
}
.letter-spacing-none {
	letter-spacing: 0;
}

.sec-ttl {
	width: 164px;
	height: 164px;
	margin: -30px auto 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid #5c96bd;
	font-size: 2.7rem;
	position: relative;
	z-index: 10;
}
.sec-readtxt {
	margin-bottom: 55px;
	font-size: 3.6rem;
	font-weight: 600;
	letter-spacing: 0.1em;
}
.sec-readtxt.is-en {
	letter-spacing: 0.01em;
}
.sec-txt {
	line-height: 3.37;
}
.sec-txt.is-en {
	line-height: 2.2;
}

@media (max-width: 768px) {

	.sec-ttl {
		width: 30vw;
		height: 30vw;
		margin: -6vw auto 8vw;
		font-size: 5.5vw;
	}

	.sec-readtxt {
		margin-bottom: 4vw;
		font-size: 6.2vw;
		font-weight: 400;
	}
	.sec-txt {
		font-size: 3.8vw;
		line-height: 2.33;
	}
}

/*---------- ボタン ----------*/
.btn-line {
	width: 90%;
	max-width: 180px;
	margin: 0 auto;
	padding: 14px 10px 14px 0;
	display: block;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	position: relative;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}
.btn-line::after {
	content: '';
	width: 8px;
	height: 14px;
	background: url("../img/icon_arrow_blue.svg") center center no-repeat;
	background-size: 100%;
	position: absolute;
	top: calc(50% - 7px);
	right: 15px;
}
@media (max-width: 768px) {
	.btn-line {
		width: 50%;
		max-width: 280px;
		margin: 0 auto;
		padding: 3vw 2vw 3vw 0;
		font-size: 4.0vw;
	}
	.btn-line::after {
		content: '';
		width: 2vw;
		height: 3vw;
		top: calc(50% - 1.5vw);
		right: 3vw;
	}
}