@charset "utf-8";

body {
    font-family: "Esteban", serif;
    font-weight: 400;
    font-style: normal;
    color: #1d284d;
    font-size: 16px;
	line-height: 1.5;
}

header,.main-visual,article,footer{
	width: 100%;
}


#wrapper{
	position: fixed;
	top: 0;
	z-index: -10;
	overflow-y: scroll;
	width: 100%;
	height: 100%;
	-webkit-overflow-scrolling: touch;
}

.scroll{
	margin-top: 100vh;
}

a {
    color: #1d284d;
}

h2{
    font-size: 2.8rem;
    margin-left: 30px;
	margin-bottom: 60px; 
}

article{
    margin-top: 107px;
}

#access{
	margin-top: 0;
}


h2:after{
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background-image: url(../images/h2_back.jpg);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}

.more-btn{
    color: #000;
    border-radius: 100vh;
    border: 1px solid #000;
    width: 210px;
    line-height: 53px;
    font-size: 20px;
    text-align: center;
    display: block;
    align-items: center;
    margin: 50px auto;
}


/* フェードインーーーーーーーーー */
.fadein-bt,
.fadein-rl,
.fadein-lr{
	opacity: 0;
	transition-property: opacity, transform;
	transition-duration: 700ms;
	transition-timing-function: ease-in-out;
	transition-delay: 200ms;
}

.fadein-bt.move,
.fadein-rl.move,
.fadein-lr.move{
	opacity: 1;
}
/* 下から上へフェードイン -------- */

.fadein-bt{
	transform: translateY(100px);
}

.fadein-bt.move{
	transform: translateY(0);
}


/* 右から左へフェードイン -------- */

.fadein-rl {
	transform: translateX(100px);
}

.fadein-rl.move {
	transform: translateX(0);
}

.fadein-lr {
	transform: translateX(-100px);
}

.fadein-lr.move {
	transform: translateX(0);
}


.fadein-bt-02 {
	opacity: 0;
	transition-property: opacity, transform;
	transition-duration: 700ms;
	transition-timing-function: ease-in-out;
	transition-delay: 200ms;
}

.fadein-bt-02.move{
	opacity: 1;
}
/* 下から上へフェードイン -------- */

.fadein-bt-02{
	transform: translateY(100px);
}

.fadein-bt-02.move{
	transform: translateY(0);
}

.fadein-bt-03 {
	opacity: 0;
	transition-property: opacity, transform;
	transition-duration: 700ms;
	transition-timing-function: ease-in-out;
	transition-delay: 200ms;
}

.fadein-bt-03.move{
	opacity: 1;
}
/* 下から上へフェードイン -------- */

.fadein-bt-03{
	transform: translateY(100px);
}

.fadein-bt-03.move{
	transform: translateY(0);
}



/* headerのハンバーガーメニュー */
.nav-btn {
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px 0;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    transition: background-color 500ms;
}

#nav-trigger:checked + nav + label + .nav-btn {
    background-color: transparent;
}

.nav-btn span {
    width: 55px;
    height: 3px;
    background-color: #f4f4f4;
    transition: transform 500ms, opacity 500ms;
}

#nav-trigger:checked + nav + label + .nav-btn span:first-of-type {
    transform: translateY(5px) rotate(20deg);
	background-color: #017F84;
}

#nav-trigger:checked + nav + label + .nav-btn span:last-of-type {
    transform: translateY(-5px) rotate(-20deg);
	background-color: #017F84;
}

#nav-trigger {
    display: none;
}

header nav {
    padding-top: 150px;
	padding-left: 50px;
    width: 100%;
	height: 100vh;
    background-color: #fff;
    position: fixed;
    top: 0;
    right: -100%;
	bottom: 0;
    z-index: 9999;
    transition: 0.5s;
	transition-delay: 0.5s;
}

#nav-trigger:checked + nav {
	right: -30%;
}

header nav ul li {
    font-size: 1.8rem;
    line-height: 60px;
}

#nav-trigger + nav + label {
    width: 100%;
	height: 100vh;
	background: no-repeat url("../images/nav/nav_sp.png");
    position: fixed;
	top: -100%;
	left: 0;
	right: 0;
    z-index: 999;
	transition: top 0.5s;
	background-size: cover;
}

#nav-trigger:checked + nav + label {
	top: 0;
}
/* ハンバーガーメニュー終了 */


header .header-sns i{
	color: #000;
	font-size: 30px;
	margin: 30px 15px 0 0;
}



/* SP main -------------------------*/
.main-visual{
    position: relative;
}

.main-visual .main-images{
    width: 100%;
}

.main-visual h1 {
    position: absolute;
    width: 254px;
    height: 154px;
    left: 50%;
    top: 35%;
	transform: translateX(-50%);
}

.main-visual figure{
    position: absolute;
    width: 70%;
    left: 0;
    bottom: -27px;
}



/* SP #about -------------------------*/
#about .about-img{
	width: 90%;
	max-width: 352px;
	height: 350px;
    position: relative;
    margin: 16px auto 30px;
}

#about .about-img .fadein-bt{
    width: 147px;
    height: 307px;
    position: absolute;
    right: 28px;
    top: 0px;
    z-index: -3;
}

#about .about-img .fadein-lr{
    width: 274px;
    height: 192px;
    position: absolute;
	left: 0;
    top: 47px;
    z-index: -2;
}

#about .about-img .fadein-rl{
    width: 131px;
    height: 125px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}

#about p{
    width: 310px;
	line-height: 2.5;
	white-space: pre-line;
    margin: 0 auto;
}



/* SP #product -------------------------*/
#product .slider-box{
    margin-top: 60px;
    margin: 60px auto 0;
    width: 80%;
}



/* SP #news -------------------------*/
#news .news-table{
    display: grid;
    grid-template-columns: repeat(11, 1);
    width: 271px;
    margin: 0 auto;
    margin-top: 60px;
}

#news .news-table .item{
    font-size: 16px;
	margin-bottom: 5px;
}


#news .news-table .item:first-of-type{
    width: 269px;
    height: 203px;
    margin-bottom: 30px;
}

#news .news-table .item:nth-of-type(3){
    font-size: 20px;
    margin-bottom: 50px;
}

#news .news-table .item:nth-of-type(even){
    padding-top: 3px;
}

#news .news-table .item:nth-of-type(n+4):nth-of-type(odd){
    border-bottom: solid 1px #000 ;
    padding-bottom: 5px;
}



/* SP #access -------------------------*/
.scroll{
    background-color: #505050;
	color: #fff;
    border-radius: 50px 50px 0 0;
}

.access-grid{
    display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 214px 433px;
    grid-template-areas: "item01 item01 item01 item02 item02"
    "item03 item03 item03 item03 item04";
}

.access-grid-inner{
	border-right: solid 2px #fff;
	border-bottom: solid 2px #fff;
}

.access-grid-inner:nth-of-type(even){
	border-right: none;
}

.access-grid-inner:first-of-type{
    padding-top: 80px;
    padding-bottom: 93px;
    
}
.access-grid .item01{
    grid-area: item01;
}
.access-grid .item02{
    grid-area: item02;
    position: relative;
}
.access-grid .item02::before{
    content: "";
    height: 35px;
    width: 35px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
}

.access-grid .item03{
    grid-area: item03;
}

.access-grid .item03::before{
    content: "";
    height: 30px;
    width: 30px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
}

.access-grid .item04{
    grid-area: item04;
    position: relative;
}

.access-grid .item04::before{
    content: "";
    height: 20px;
    width: 20px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

.access-grid-inner + .item03{
    position: relative;

}
.item-inner{
    width: 90%;
	max-width: 300px;
    margin: 0 auto;
}
.item-inner iframe{
    margin: 0 auto;
    margin-top: 40px;
	width: 100%;
	height: 200px;
}

.item-inner dl{
    margin-top: 20px;
	font-size: 14px;
}

.item-inner dl dd{
	margin-left: 90px;
	margin-top: -1.5em;
	margin-bottom: 10px;
}



/* SP #footer -------------------------*/
footer{
    margin-top: 50px;
}

footer img{
    width: 226px;
    display: block;
    margin: 30px auto;
}

footer .footer-sns{
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	width: 150px;
}

footer .footer-sns i{
    font-size: 30px;
	color: #fff;
}

footer p small{
    text-align: center;
    font-size: 10px;
    line-height: 50px;
}





















/*タブレット用スタイル----------------------------------------------------------------------------------------*/
@media screen and (min-width:600px){	
	h2{
		font-size: 3.5rem;
		margin-left: 50px;
		margin-bottom: 80px;
	}
	
	article{
		margin-top: 220px;
	}
	
	
	
	#nav-trigger + nav + label {
		background: no-repeat url("../images/nav/nav_tb.png");
		background-size: cover;
	}
	
	
	
	/* TB main -------------------------*/
	.main-visual .main-images{
		width: 100%;
	}
	
	.main-visual h1 {
		width: 277px ;
		height: 174px;
		top: 35%;
	}
	
	.main-visual figure{
		position: absolute;
		width: 48%;
		left: 0;
		bottom: -40px;
	}
	
	
	
	/* TB #about -------------------------*/
	#about .about-img{
		width: 90%;
		max-width: 700px;
		height: 540px;
		position: relative;
		margin: 53px auto 30px;
	}
	
	#about .about-img .fadein-bt{
		width: 345px;
		height: 478px;
		position: absolute;
		right: -10px;
		top: -90px;
		z-index: -3;
	}
	
	#about .about-img .fadein-lr{
		width: 405px;
		height: 258px;
		position: absolute;
		left: -10px;
		top: 0px;
		z-index: -1;
	}
	
	#about .about-img .fadein-rl{
		width: 298px;
		height: 285px;
		position: absolute;
		right: 60px;
		bottom: 60px;
		z-index: -2;
	}
	
	#about .about-box{
		max-width: 700px;
		margin: 0 auto;
	}
	
	#about p{
		width: auto;
		margin: 0;
		margin-top: -260px;
		margin-left: 10px;
	}
	
	
	
	/* TB #product -------------------------*/
	#product .slider-box{
		margin: 80px auto 0;
		width: 350px;
	}
	
	
	
	/* TB #news -------------------------*/
	#news .news-table{
		display: grid;
		grid-template-columns: repeat(11, 1);
		width: 395px;
		margin: 0 auto;
		margin-top: 60px;
	}
	
	#news .news-table .item{
		font-size: 16px;
	}


	#news .news-table .item:first-of-type{
		width: 395px;
		height: 300px;
		margin-bottom: 30px;
	}
	
	#news .news-table .item:nth-of-type(3){
		font-size: 24px;
		margin-bottom: 50px;
	}

	#news .news-table .item:nth-of-type(even){
		padding-top: 3px;
	}
	
	#news .news-table .item:nth-of-type(n+4):nth-of-type(odd){
		border-bottom: solid 1px #000 ;
		padding-bottom: 3px;
	}
	
	
	
	/* TB #access -------------------------*/
	.scroll{
		border-radius: 80px 80px 0 0;
	}
	
	.access-grid{
		grid-template-rows: 251px 651px;
	}    

	.access-grid-inner:first-of-type{
		padding-top: 120px;
		padding-bottom: 93px;
	}
	
	.access-grid .item02::before{
		height: 70px;
		width: 70px;
	}
	
	.access-grid .item03::before{
		height: 55px;
		width: 55px;
	}

	.access-grid .item04::before{
		height: 48px;
		width: 48px;
	}
 
	.item-inner{
		max-width: 480px;
	}
	
	.item-inner iframe{
		margin-top: 80px;
		height: 300px;
	}
	
	.item-inner dl{
		font-size: 16px;
		margin-top: 40px;
	}
	
	.item-inner dl dd{
		margin-left: 100px;
		margin-bottom: 20px;
	}
	
}


/*タブレット用スタイル終了----------------------------------------------------------------------------------------*/







































/*PC用スタイル----------------------------------------------------------------------------------------*/
@media screen and (min-width:960px){
	h2{
		margin-left: 180px;
		margin-bottom: 95px;
	}

	article{
		margin-top: 314px;
	}
	
	
	/* PC header -------------------------*/
	header nav {
		padding-top: 200px;
		padding-left: 100px;
		background-color: #fff;
		position: fixed;
		top: 0;
		right: -100%;
		bottom: 0;
		z-index: 9999;
		transition: 0.5s;
		transition-delay: 0.5s;
	}

	#nav-trigger:checked + nav {
		right: -55%;
	}

	#nav-trigger + nav + label {
		background: no-repeat url("../images/nav/nav_pc.png");
		background-size: cover;
		position: fixed;
		top: -100%;
		left: 0;
		right: 0;
		z-index: 999;
		transition: top 0.5s;
	}

	#nav-trigger:checked + nav + label {
		top: 0;
	}
	
	
	
	/* PC main -------------------------*/
	.main-visual h1 {
		width: 445px ;
		height: 281px;
		top: 30%;
	}
	
	.main-visual figure{
		width: 63%;
		left: 0;
		bottom: -70px;
	}
	
	
	
	/* PC #about -------------------------*/
	#about .about-img{
		max-width: 1000px;
		height: 800px;
		position: relative;
		margin: 53px auto 30px;
	}

	#about .about-img .fadein-bt{
		width: 520px;
		height: 720px;
		position: absolute;
		right: 0px;
		top: -100px;
		z-index: -3;
	}

	#about .about-img .fadein-lr{
		width: 610px;
		height: 390px;
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: -1;
	}

	#about .about-img .fadein-rl{
		width: 450px;
		height: 430px;
		position: absolute;
		right: 80px;
		bottom: 90px;
		z-index: -2;
	}
	
	#about .about-box{
		max-width: 1000px;
	}

	#about p{
		margin: 0;
		margin-top: -380px;
		margin-left: 70px;
	}
	
	#about .more-btn{
		margin-top: 50px;
		margin-left: 110px;
	}
	
	
	
	/* PC #product -------------------------*/
	#product .slider-box{
		width: 1070px;
	} 
	
	
	
	/* PC #news -------------------------*/
	#news .news-table{
		display: grid;
		grid-template-columns: 395px 395px;
		grid-template-rows: repeat(8, 50px);
		grid-column-gap: 80px;
		width: 870px;
		margin: 0 auto;
		margin-top: 60px;
		grid-auto-flow: column;
	}
	
	#news .news-table .item:first-of-type{
		grid-column: 1/2;
		grid-row: 1/7;
	}
	
	#news .news-table .item:nth-of-type(2){
		grid-column: 1/2;
		grid-row: 7/8;
	}
	
	#news .news-table .item:nth-of-type(3){
		grid-column: 1/2;
		grid-row: 8/9;
	}

	#news .news-table .item:nth-of-type(even){
		line-height: 50px;
	}
	
	
	
	/* PC #access -------------------------*/
	.scroll{
		border-radius: 100px 100px 0 0;
	}


	.access-grid{
		grid-template-rows: 434px 651px;
	}    

	.access-grid-inner:first-of-type{
		padding-top: 200px;
		padding-bottom: 93px;
	}
	
	.access-grid .item02::before{
		height: 85px;
		width: 85px;
	}
	
	.access-grid .item03::before{
		height: 62px;
		width: 62px;
	}

	.access-grid .item04::before{
		height: 48px;
		width: 48px;
	}
 
	.item-inner{
		width: auto;
		max-width: 1000px;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
	}
	
	.item-inner iframe{
		margin: 0;
		margin-top: 100px;
		width: 55%;
		height: 400px;
	}
	
	.item-inner dl{
		margin-top: 100px;
		width: 35%;
	}
	
	.item-inner dl dd{
		margin-top: -1.5em;
	}
	
}


/*PC用スタイル終了----------------------------------------------------------------------------------------*/