@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

.en{
    font-family: "Bebas Neue", serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.05em;
}

/*----------------------------------------------------
	☆Reset
----------------------------------------------------*/
body#solution,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
ul ,
ol ,
li,
dl,
dt,
dd,
p,
img {
	margin:0;
	padding:0;
}
h1,
h2,
h3,
h4,
h5,
h6{
    font-weight: 700;
}
body{
	font-size:15px;
	font-family: "Zen Kaku Gothic New", serif;
    font-weight: 700;
	color:#000;
    letter-spacing: 0.2em;
    font-feature-settings: "palt";
	line-height: 1.75;
	width: 100%;
	overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    background: #F4F1ED;
}

#wrapper{
	width: 100%;
    overflow: hidden;
}

#wrapper.pb0{
    padding-bottom: 0;
}

body,
div,
p,
span, ul, ol,
li,
dl,
dt,
dd,
table,
tr,
th,
td,
img,
header,
footer,
small,
section,
a,
h1,
h2,
h3,
h4,
h5,
h6{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

a {
    color: #000;
	text-decoration:none;
	cursor:pointer;
	outline:none;
}

a:link {
	color:#000;
	text-decoration:none;
	outline:none;
}

a:hover {
	text-decoration:none;
	outline:none;
}

ul, ol {
	list-style-type:none;
}

a:focus {
  outline: none;
}

img{ 
	vertical-align:bottom;
	width: 100%;
	-webkit-backface-visibility: hidden;
}


.sp{ display:none;}
.tab{ display:none;}
.pc{ display:block;}
.btm0{ margin-bottom: 0 !important;}
.top0{ margin-top: 0 !important;}
.pb0{ padding-bottom: 0 !important;}
.pt0{ padding-top: 0 !important;}

.center{ text-align: center !important;}
.justify{ text-align: justify !important;}
.left{ text-align: left !important;}
.right{ text-align: right !important;}

.pc-center-sp-left{ text-align: center;}

.inlineBlock{ display: inline-block;}
.nowrap{ display: inline-block; white-space: nowrap;}

.white{ color: #fff !important;}
.black{ color: #000 !important;}
.green{ color: #009140;}
.red{ color: #DC0112;}

.bgWhite{ background: #fff;}

a.link{
    transition: .4s;
    text-decoration: underline;
}
.linkNone { pointer-events: none;}

.deco{
    position: absolute;
    left: 0;
    top: 0;
}

.max1500{
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}
.max1200{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}
.max1000{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}
.max900{
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}
.max850{
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}
.max800{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}
.max750{
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}
.max700{
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}

.max600{
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}

.text{
	text-align: justify;
	letter-spacing: 0.05em;
    font-weight: 500;
}
.text + .note,
.note01{
	font-size: 0.7em;
	opacity: 0.5;
	letter-spacing: 0.05em;
	margin-top: 10px;
}


/*--- 画像ボケ防止 ---*/
@media screen and (min-width:769px) {
	img { 
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		image-rendering: crisp-edges;
		image-rendering: -webkit-optimize-contrast;
	}
}

/*----------------------------------------------------
	☆BASE CONTENTS PC
----------------------------------------------------*/

/*-- header --*/
#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9995;
}
#header .headerLogo{
    width: 170px;
    margin-left: 10px;
}

#header .menuBtn{
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #000;
    position: relative;
}
#header .menuBtn #nav-open{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
}
#header .menuBtn .border{
    display: block;    
    width: 24px;
    height: 2px;
    border-radius: 100px;
    background: #fff;
    position: absolute;
    left: calc(50% - 12px);
	transition: 0.4s;
}
#header .menuBtn .border01{
    top: 24px;
}
#header .menuBtn .border02{
    top: 34px;
}

/*-- バーガーメニュー --*/
.navHeader{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 30px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
}
.navHeader .navLogo{
	width: 170px;
	margin-left: 10px;
}
.nav-close{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #000;
    z-index: 9999;
    cursor: pointer;
    transition: .4s;
	position: relative;
}
.nav-close.open {
    opacity: 1;
    visibility: visible;
}
.nav-close .border{
    width: 24px;
    height: 2px;
	border-radius: 100px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
}
.nav-close .border01{
    transform: translate(-50%,-50%) rotate(45deg);
}
.nav-close .border02{
    transform: translate(-50%,-50%) rotate(-45deg);
}

/*-- バーガーメニュー --*/

#overlay {
    display: none;
    width: 100%;
    height: 100vh;
    background: #F4F1ED;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9995;
}

#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0px;
    z-index: 9997;
    width: 100%;
    height: 100vh;
    color: #fff;
    transition: 0.75s;
    visibility: hidden;
    text-align: left;
    opacity: 0;
    padding: 40px;
}

#nav-content.open {
    opacity: 1;
    visibility: visible;
}
#nav-content a{
    color: #000;
}
#gnav{
	height: calc(100vh - 70px);
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
}
#gnav ul{
	display: flex;
	justify-content: space-between;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}
#gnav ul li{
	width: 33.333%;
}
#gnav ul li a{
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: 0.4s;
	position: relative;
	padding-bottom: 30px;
}
#gnav ul li a .image{
	width: 60px;
	margin-bottom: 10px;
}
#gnav ul li a .info{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
#gnav ul li a .en{
	font-size: 26px;
	line-height: 1;	
}
#gnav ul li a .jp{
	font-size: 12px;
	letter-spacing: 0.05em;
}
#gnav ul li a .arrowIcon{
	transform: translate(-50%,20px) scale(0.8);
	left: 50%;
	top: auto;
	bottom: 0;
	transition: 0.4s;
}

/*-- footer --*/
#footer{
    background: #000;
}
#footer .footerInr{
    max-width: 1200px;
    width: 85%;
    margin: 0 auto;
    padding: 80px 0;
    color: #fff;
}
#footer .footerInr a{
    color: #fff;
}

#footer .footerInr .logoBox{
    text-align: center;
    font-size: 12px;
    margin-bottom: 50px;
}
#footer .footerInr .logoBox .logo{
    max-width: 200px;
    margin: 0 auto 20px;
}

#footer .footerInr .footerMenu{
    display: flex;
    justify-content: space-between;
}
#footer .footerInr .footerMenu li{
    width: 33.333%;
    text-align: center;
}
#footer .footerInr .footerMenu li a{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
    position: relative;
    transition: .4s;
}
#footer .footerInr .footerMenu li a::before,
#footer .footerInr .footerMenu li:last-child a::after{
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 100px;
    opacity: 0.5;
}
#footer .footerInr .footerMenu li:last-child a::after{
    left: auto;
    right: 0;
}
#footer .footerInr .footerMenu li .en{
    font-size: min(30px,2.5vw);
    line-height: 1;
    margin-bottom: 10px;
    transition: .4s;
}
#footer .footerInr .footerMenu li .jp{
    font-size: 12px;
    opacity: 0.6;
    font-weight: 700;
    line-height: 1;
}

#footer small{
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.4);
    font-size: 12px;
    text-align: center;
    color: #fff;
    opacity: 0.5;
    display: block;
}


/*--- topcontrol ---*/
#pagetop{
    width: 45px;
    height: 45px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 101;
    opacity:0;
    transition: .4s;
    cursor: pointer;
    border-radius: 100%;
}
#pagetop::after{
    background: url("../images/common/pagetop.svg") center center / contain no-repeat;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
}
#pagetop.is-fadein {
    visibility: visible;
    opacity: 0.7;
}

/*----------------------------------------------------
	☆INNER BASE PARTS
----------------------------------------------------*/

/*--- section ---*/
#contents section{
    padding: 120px 0;
}

/*----------------------------------------------------
	☆COMPONENT PC
----------------------------------------------------*/

/*-- head --*/
.head01{
    position: relative;
    padding-bottom: 35px;
    margin-bottom: 60px;
    text-align: center;
}
.head01 span{
    display: block;
}
.head01 .icon{
    max-width: 100px;
    margin: 0 auto 25px;
    display: block;
}
.head01 .en{
    font-size: min(120px,11vw);
    line-height: 1.2;
}
.head01 .jp{
    font-size: 24px;
    line-height: 1.2;
}
.head01::after{
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    border-radius: 100px;
}

.head01.noborder{
    padding-bottom: 0;
    margin-bottom: 0;
}
.head01.noborder::after{
    display: none;
}

.head01.green::after{
    background: #009140;
}
.head01.red::after{
    background: #DC0112;
}


.head01-small{
    padding-bottom: 0;
}
.head01-small::after{
    display: none;
}
.head01-small .en{
    font-size: min(80px,7.3vw);
}
.head01-small .jp{
    font-size: 18px;
    line-height: 1.2;
}

.head02{
    font-size: 28px;
    line-height: 1.75;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 30px;
}

/*-- lead --*/
.lead01{
    text-align: center;
    word-break: auto-phrase;
    line-height: 2;
    width: min(85%,600px);
    margin: 0 auto min(50px,7vw);
}

/*-- list --*/
ul.indList li {
	text-indent:-1em;
	padding-left:1em;
}
ol.decimal{
	padding-left:1.5em;
}
ol.decimal li{
	list-style:decimal;
	margin-bottom:8px;
}
ul.disc{
	padding-left:1.5em;
}
ul.disc li{
	list-style:disc;
	margin-bottom:8px;
    display: list-item !important;
}

/*-- button --*/
.btn01{
    display: table;
    width: auto;
    margin: 60px auto 0;
}
.btn01 a{
    display: flex;
    align-items: center;
    transition: .4s;
}
.btn01 .en{
    font-size: 24px;
    margin-right: 0.5em;
    transition: .4s;
}
.btn01 .arrowIcon{
    position: relative;
}

.btn02{
    display: table;
    width: auto;
    margin: 60px auto 0;
}
.btn02 a{
    display: flex;
    align-items: center;
    transition: .4s;
}
.btn02 a .arrowIcon{
    transform: scale(-1, 1);
    display: inline-block;
    position: static;
    margin-right: 1em;
    width: 28px;
    height: 28px;
}

/*-- arrowIcon --*/
.arrowIcon{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;
    background: #DC0112;
    transition: .4s;
    display: block;
}
.arrowIcon::before{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 14px;
    height: 5px;
    background: url("../images/common/arrow_01_white.svg") center center / contain no-repeat;
}

.arrowIcon.white{
    background: #fff;
}
.arrowIcon.white::before{
    background: url("../images/common/arrow_01_black.svg") center center / contain no-repeat;
}

.arrowIcon.green{
    background: #009140;
}

/*-- spOverflow --*/
.spOverflow{
    position: relative;
}


/*-- table --*/
.table01 > dl{
}


/*----------------------------------------------------
	☆ANIMATION
----------------------------------------------------*/

.out.slidein,
.out .slidein{
    opacity: 0;
}

.in.slidein,
.in .slidein{
    animation: slidein 1.5s ease forwards;
}

@keyframes slidein{
    0%{ transform: translate(0,10px); opacity: 0; }
    100%{  transform: translate(0,0);opacity: 1;}
}

.clip01 {
    clip-path: inset(0 100% 0 0);
}

#loading .clip01,
.in .clip01,
.in.clip01{
    animation: clip01 1s ease forwards;
}

@keyframes clip01{
    0%{ clip-path: inset(0 100% 0 0); }
    100%{ clip-path: inset(0 0 0 0);}
}

@keyframes fadeout{
    0%{ opacity: 1; }
    100%{ opacity: 0;}
}

.delay02{ animation-delay: 0.2s !important;}
.delay04{ animation-delay: 0.4s !important;}
.delay06{ animation-delay: 0.6s !important;}
.delay08{ animation-delay: 0.8s !important;}
.delay10{ animation-delay: 1.0s !important;}

/*----------------------------------------------------
	☆901以上　PCのみ & HOVER
----------------------------------------------------*/

@media screen and (min-width:901px) {
    
    a:hover .arrowIcon.white{
        background: #000;
    }
    a:hover .arrowIcon.white::before{
        background: url("../images/common/arrow_01_white.svg") center center / contain no-repeat;
    }
    .btn01 a:hover .en{
        margin-right: 0.75em;
    }
    .btn02 a:hover .arrowIcon{
        margin-right: 1.5em;
    }
    #footer .footerInr .footerMenu li a:hover .en{
        opacity: 0.5;
    }
	
	#gnav ul li a .red,
	#gnav ul li a .green{
		transition: 0.4s;
	}
	
	#gnav ul li a:hover .red,
	#gnav ul li a:hover .green{
		color: #000;
	}
	
	#header .menuBtn:hover .border01{
		top: 26px;
	}
	#header .menuBtn:hover .border02{
		top: 32px;
	}

	#gnav ul li a:hover .arrowIcon{
		background: #000;
	}

}


/*----------------------------------------------------
	☆TABLET UNDER 900
----------------------------------------------------*/

@media screen and (max-width:900px) {
    
    body{
	    font-size:14px;
    }
    
    .tab{ display:block;}
    .pc{ display:none;}

    /*--- header ---*/
    
    #header .headerLogo {
    }
    
    /*--- footer ---*/
    #footer{
    }
    
    /*----------------------------------------------------
        ☆INNER BASE PARTS
    ----------------------------------------------------*/
    
    #contents section {
    }

    
    /*----------------------------------------------------
        ☆COMPONENT TABLET
    ----------------------------------------------------*/
    
    /*-- head --*/
    
    /*-- btn --*/
    
    /*-- table --*/


}


/*----------------------------------------------------
	☆UNDER 600
----------------------------------------------------*/

@media screen and (max-width:600px) {
    
    body {
        font-size: 14px;
    }
    
    .sp{ display:block;}
    
    #wrapper:not(.pb0){
        padding-bottom: 60px;
    }
    
    /*--- header ---*/
    #header {
        padding: 10px 15px;
    }
    #header .headerLogo {
        width: 100px;
    }
    #header .menuBtn{
        width: 48px;
        height: 48px;
    }
    #header .menuBtn .border01 {
        top: 18px;
    }
    #header .menuBtn .border02 {
        top: 28px;
    }
    #header .menuBtn .border {
        width: 20px;
        left: calc(50% - 10px);
    }
	
    /*--- navHeader ---*/
	
	.navHeader{
		padding: 10px 15px;
	}
	.navHeader .navLogo{
		width: 100px;
	}
	.nav-close{
		width: 48px;
		height: 48px;
	}
	
    /*--- ganv ---*/

	#gnav ul{
		flex-direction: column;
		max-width: 400px;
		width: 100%;
		margin: 0 auto;
	}
	#gnav ul li {
		width: 100%;
		margin-bottom: 20px;
	}
	#gnav ul li a{
		flex-direction: row;
		align-items: center;
		padding-bottom: 20px;
		position: relative;
		width: 100%;
		justify-content: flex-start;
	}
	#gnav ul li a::after{
		width: 100%;
		height: 2px;
		border-radius: 1px;
		content: "";
		display: block;
		background: #000;
		opacity: 0.15;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	#gnav ul li a .arrowIcon{
		right: 0;
		top: 50%;
		left: auto;
		bottom: auto;
		transform: translate(0,-78%) scale(0.7);
	}
	#gnav ul li a .info{
		text-align: left;
		align-items: flex-start;
		justify-content: flex-start;
	}
	#gnav ul li a  .image{
		margin-right: 20px;
	}
	

    /*--- footer ---*/
    #footer .footerInr{
        padding: 60px 0 40px;
    }
    #footer .footerInr .footerMenu{
        flex-direction: column;
    }
    #footer .footerInr .footerMenu li{
        width: 100%;
        margin-bottom: 20px;
    }
    #footer .footerInr .footerMenu li:last-child{
        margin-bottom: 0;
    }
    #footer .footerInr .footerMenu li a{
        padding-bottom: 20px;
    }
    #footer .footerInr .footerMenu li .en {
        font-size: 26px;
    }
    #footer .footerInr .footerMenu li a::before{
        width: 30px;
        height: 2px;
        left: 50%;
        bottom: 0;
        top: auto;
        transform: translate(-50%,0);
    }
    #footer .footerInr .footerMenu li:last-child a::before,
    #footer .footerInr .footerMenu li:last-child a::after{
        display: none;
    }


    /*----------------------------------------------------
        ☆INNER BASE PARTS
    ----------------------------------------------------*/

    /*--- section ---*/
    #contents section {
        padding: 80px 0;
    }
    
    /*----------------------------------------------------
        ☆COMPONENT SP
    ----------------------------------------------------*/
   
    /*--- head ---*/
    .head01 {
        position: relative;
        padding-bottom: 25px;
        margin-bottom: 40px;
    }
    .head01 .icon {
        max-width: 60px;
        margin: 0 auto 15px;
    }
    .head01::after{
        height: 3px;
        width: 50px;
    }
    
    .head01-small{
        margin-bottom: 30px;
    }
    .head01-small .en{
        font-size: min(80px,10vw);
    }
    .head01-small .jp{
        font-size: 16px;
    }
    
    .head02 {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    /*--- lead ---*/
        
	/*--- btn ---*/
    .btn01 {
        margin: 30px auto 0;
    }
    
    /*-- table --*/

    
    /*-- spOverflow --*/
    .spOverflow{
		overflow-x: scroll;
		width: 100%;
		padding: 0 9% 20px;
    }
    .spOverflow .inr{
		width: 600px;
        opacity: 0.3;
        transition: .4s;
        position: relative;
        padding: 30px 20px;
    }
    .spOverflow.touched .inr,
    .spOverflow.touched img{
        opacity: 1;
    }
    .howToScroll.is-ua-sp{
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	.howToScroll.is-ua-sp .howToScrollInr::after{
		content: "";
		display: block;
		width: 70%;
		height: 100%;
		position: absolute;
		left: 15%;
		top: 0;
		z-index: 2;
		background: url("../images/common/icon_swipe.svg")center center / 60% auto no-repeat;
		animation: slide 1500ms linear infinite;
		transition: all 300ms;
	}
    .howToScroll.is-ua-sp.delete,
	.howToScroll.is-ua-sp .howToScrollInr.delete {
		animation: none;
		transition: .3s;
		opacity: 0;
		visibility: hidden;
	}

}