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

 2023.10.30

--------------------------------------------*/
/* Noto Sans JP */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
/* Jost */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&display=swap');
/* ----------------------------------------------

 * タグの設定

---------------------------------------------- */
a {
	display: inline-block;
	outline:none;
	color: #222;
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
    transition: all .5s ease;
	user-select: none;
}
input,
input[type="submit"],
input[type="button"],
button {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	box-sizing: border-box;
	outline: none;
	font-style: normal;
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="button"],
input[type="text"],
input[type="submit"],
input[type="image"],
textarea {
   -webkit-appearance: none;
   appearance: none;
   border-radius: 0;
}
select {
	font-family: 'Noto Sans JP', sans-serif;
    -webkit-appearance: none;
	 -moz-appearance: none;
    appearance: none;
}
select::-ms-expand{
	font-family: 'Noto Sans JP', sans-serif;
}
/*------------------------------------------------*/
html {
	margin: 0;
	padding: 0;
	background: #fff;
	color: #222;
	font-style: normal;
	font-weight: 400;
	font-size: 62.5%;
	line-height: 1.4;
	letter-spacing: .03em;
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-font-smoodting: antialiased;
	-moz-osx-font-smoodting: grayscale;
	word-break: break-all;
}
body,p {font-size: 15px;line-height: 1.4;letter-spacing: .03em;}
body{
background-size: auto auto;
background-color: rgba(199, 239, 255, 1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(216, 244, 255, 1) 10px, rgba(216, 244, 255, 1) 20px );
background-attachment: fixed;}
body::before{
content: '';
position: fixed;
background-image: url("img/bg-l.png");
width:calc(50vw - 187.5px);
height:calc((50vw - 187.5px)*0.61);
background-size: contain;
background-repeat: no-repeat;
bottom: 0;
left:0;
}
body::after{
content: '';
position: fixed;
background-image: url("img/bg-r.png");
width:calc(50vw - 187.5px);
height:calc((50vw - 187.5px)*0.61);
background-size: contain;
background-repeat: no-repeat;
bottom: 0;
right:0;
}
main{display: block;width: 375px;margin:0 auto;border-right:1px solid #043B95;border-left:1px solid #043B95;overflow: hidden;position: relative;background: #fff;z-index: 2;}
h2,h3,h4,h5 {line-height: 1.2;letter-spacing: .03em;}
ul,li,th,td,dt,dd,figcaption {line-height: 1.4;letter-spacing: .03em;}
span {line-height: 1.4;letter-spacing: .03em;}
a img {-webkit-backface-visibility: hidden;backface-visibility: hidden;}
section{padding:20px 0;}
.flexbox {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
.Jost{font-family: 'Jost', sans-serif;}

@media only screen and ( max-width : 500px ) {
main{width: 100%;border-right:none;border-left:none;}
}
/*------------------------------------------------

    header

------------------------------------------------*/
header {display: block;position: fixed;z-index: 100;width: inherit;}
header .flexbox{background: #fff;width: calc(100% - 2px);}
header h1{display: inline-block;width: calc(100% - 71px);margin:20px auto 10px;padding-left:calc((100% - 210px)/2);}
header h1 img{width:210px;}
header .menu-btn {display: inline-block;width: 50px;height:50px;background: #043B95;border-radius: 5px;position: relative;margin: 10px;}
header .menu-btn span{display: block;width: 20px;height: 2px;background: #fff;margin:0 auto;position: absolute;}
header .menu-btn span:nth-of-type(1){left: 50%;top: calc(50% - 5px);transform: translate(-50%,-50%); transition: .3s;}
header .menu-btn span:nth-of-type(2){left: 50%;top: 50%;transform: translate(-50%,-50%); transition: .3s;}
header .menu-btn span:nth-of-type(3){left: 50%;top: calc(50% + 5px);transform: translate(-50%,-50%); transition: .3s;}
header .menu-btn.clicked span:nth-of-type(1){top:50%;transform:translate(-50%,-50%) rotate(45deg); transition: .3s;}
header .menu-btn.clicked span:nth-of-type(2){display: none; transition: .3s;}
header .menu-btn.clicked span:nth-of-type(3){top:50%;transform:translate(-50%,-50%) rotate(-45deg);  transition: .3s;}
header #g-nav{
position:absolute;
display: none;
opacity: 0;
z-index: 999;
top:70px;
width:inherit;
padding: 50px 0 30px;
background:#043B95;
}
#g-nav.clicked{right: 1px;
	display: block;
	animation: fadeAnime .2s forwards ease-out;
	animation-delay: .1s;}
@keyframes fadeAnime {
	from {opacity: 0;}
	to {opacity: 1;}
}
#g-nav ul{display: block;margin: 0 auto;width: max-content;}
#g-nav li a{
	color: #fff;
	margin-bottom: 25px;
	padding-left: 30px;
	position: relative;
}
#g-nav li a::before{
	content: '';
	position: absolute;
	background-image: url("img/triangle.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width:10px;
	height:15px;
	left: 0;
}
@media only screen and ( max-width : 500px ) {
header .flexbox{width:100%;}
}

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

    footer

------------------------------------------------*/
footer {display: block;background:#043B95;padding:20px 0;}
footer p{text-align: center;font-size: 14px;color:#fff;}

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

	404 Not Found

------------------------------------------------*/
#notfound {
	padding-top: calc(130px + 70 * ((100vw - 375px) / 1605));
	padding-bottom: calc(70px + 30 * ((100vw - 375px) / 1605));
}
#notfound h2 {margin-bottom: 50px;text-align: center;}
#notfound h2 span {display: block;font-size: 2.3em;text-align: center;}
#notfound p {margin-bottom: 40px;text-align: center;}
#notfound a {
	display: block;
	position: relative;
	z-index: 1;
	width: 70%;
	max-width: 300px;
	margin: 0 auto;
	padding: 15px;
	border: 1px solid #222;
	background: #222;
	color: #fff;
	text-align: center;
}
#notfound a:hover {color: #222;}
#notfound a::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
	z-index: -5;
	background: #fff;
	color: #222;
}
#notfound a:hover::after {transform-origin: left top;transform: scale(1, 1);}
#notfound a span {display: block;position: relative;text-align: center;}