@charset "UTF-8";

/*reset*/
/*
 reset
==============================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
line-height: 1.6;
}

article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
display: block;
}

@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}

body{
	color: #0E1737;
	font-size: 18px;
	width: 100%;
}

address,caption,cite,code,dfn,em,strong,th,var{
font-style:normal;
font-weight:normal;
}
h1,
h2,
h3,
h4,
h5,
h6{
font-size:100%;
font-weight:normal;
}
ol, ul{list-style: none;}
blockquote, q {quotes: none;}
blockquote::before, blockquote::after,
q::before, q::after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img{
	max-width:100%;
	/*width:auto;*/
	height:auto;
	vertical-align: bottom;
	margin: 0;
	padding: 0;
}
a{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}
a img{border:none;}
a:link,/* 未訪問のリンク */
a:visited,/* 訪問済みのリンク */
a:active{/* 選択中のリンク */
	color: #0E1737;
	text-decoration:none;
}

.bold {
	font-weight: 700;
}


a.text-link:hover {
			text-decoration:underline;
}

p.align_right {
    text-align: right;
}

/*box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}


.page section{
	padding: 60px 0;
}



/* font settings */


h3.style01{
	color: #0E1737;
	font-family: 'Sofia Sans', sans-serif;
	font-size: 49px;
	font-weight: 700;
	line-height: 120%; /* 58.8px */
	letter-spacing: 7.35px;
}

h3.style01 span{
	display: block;
	font-family: Ryo Gothic PlusN;
	font-size: 25px;
	font-weight: 700;
	line-height: 120%; /* 30px */
	letter-spacing: normal;
}

@media screen and (max-width: 1024px) {

	h3.style01{
		font-size: 45px;
	}

	h3.style01 span{
		font-size: 20px;
	}
}


@media screen and (max-width: 767px) {

	h3.style01{
		 font-size: calc(35px + 10 * ((100vw - 320px) / 447));;
	}

	h3.style01 span{
		 font-size: calc(16px + 4 * ((100vw - 320px) / 447));;
	}

	.page section{
		padding-top: 32px;
		padding-bottom: 32px;
	}
}




br.pcNone{
	display: none;
}

br.spNone{
	display: block;
}



@media screen and (max-width: 767px) {

	br.pcNone{
		display: block;
	}

	br.spNone{
		display: none;
	}
}



img.pc{display: block;}
img.tab{display: none;}
img.sp{	display: none;}

@media screen and (max-width: 1024px) {
	img.pc{display: none;}
	img.tab{display: block;}
	img.sp{	display: none;}
}

@media screen and (max-width: 767px) {
	img.pc{display: none;}
	img.tab{display: none;}
	img.sp{	display: block;}
}

/* スクロールアニメーション　*/



.fadeInUp {
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.animated-up {
        -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}



.fadeInSlide {
    opacity: 0;
    transform: translateX(-20px);
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animated-slide {
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-name: fadeInSlide;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

span.stack{
	display: inline-block;
}