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

body * {
	font-size: 20px;
	font-weight: 400;
	font-family: futura-pt, sans-serif, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

body {
	font-family: futura-pt, sans-serif, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	box-sizing: content-box;
	background: #fff;
}

.inner-width {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
}

.pc {
	display: inline-block;
}

.pc-block {
	display: block;
}

.sp {
	display: none;
}

a:hover {
	opacity: 0.7;
}

h2,
h3,
.btnlink {
	position: relative;
	z-index: 5;
}

#gototop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99;
}

#gototop a {
	font-size: 25px;
	background: rgba(54, 54, 54, 0.6);
	color: #fff;
	display: block;
	padding: 15px 15px;
	text-decoration: none;
}


/* header ↓　*/

.header-menu {
	font-size: 10px !important;
	padding: 25px 0 0 50px;
	width: 235px;
}

.header-menu p {
	padding-top: 6px;
	font-size: 16px;
	font-weight: bold;
}

.header-menu-box {
	background-color: #222;
	box-sizing: border-box;
	display: none;
	position: absolute;
	top: 15px;
	left: 50px;
	padding: 10px 20px 20px;
	z-index: 1001;
}

@media screen and (max-width: 768px) {
	.header-menu-box {
		height: 100vh;
		left: 0;
		overflow: hidden auto;
		padding: 0 calc((15/375)* 100vw);
		top: 0;
		width: 100vw;
	}
}

.header-menu-box>p {
	color: #fff;
	margin-bottom: 20px;
	font-size: 10px;
}

@media screen and (max-width: 768px) {
	.header-menu-box>p {
		padding-top: 6px;
	}
}

.header-menu-box ul li {
	text-align: center;
}


.header-menu-box ul li ul {
	overflow: hidden;
	padding-top: 9px;
}

.header-menu-box ul li li {
	float: left;
	text-align: left;
}

.header-menu-box ul li ul li:first-child {
	margin-right: 1px;
}

.header-menu-box ul li a {
	background: url(../img/header-menu-arrow.png) 97% center no-repeat #fff;
	color: #222;
	display: block;
	font-size: 14px !important;
	height: 44px;
	line-height: 44px;
	margin-bottom: 1px;
	text-decoration: none;
	width: 335px;
}

@media(max-width: 768px) {
	.header-menu-box ul li a {
		width: 100%;
	}
}

.header-menu-box li a:hover {
	opacity: .7;
}

.header-menu-box ul li ul li a {
	background-position: 93% center;
	font-size: 12px;
	width: 100%;
}

.header-menu-btn {
	cursor: pointer;
	display: flex;
}

.header-menu-btn img {
	height: auto;
	margin-right: 10px;
	width: 30px;
}

.header-menu-btn.sp_btn {
	display: none !important;
}

@media(max-width: 768px) {

	.header-menu-btn.sp_btn {
		align-items: center;
		display: flex !important;
	}
	.header-menu-btn img {
		margin-left: calc((20/375)* 100vw);
		width: calc((30/375)* 100vw);
	
	}
}

.header-top {
	height: 132px;
	margin-bottom: 0;
	position: relative;
}


.header-util .link_txt {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
}

.header-util .link_txt a{
	background: url(../img/icon_arrow_right02.png) 97% center no-repeat;
}

.header-util .link_txt li {
	padding-right: 20px;
}

.header-menu-box li li a {
	padding: 0;
	width: 100%;
}

.header_nav .access_ul li {
	text-align: center;
}

.header-util .link_txt li {
	text-align: left;
}

.header_nav .access_ul li a {
	background-image: none;
}

.header-util .link_txt li a {
	background-color: transparent;
	color: #fff;
	width: 100%;
}

.back a {
	background: url(imgs/area/sp_menu_arrow.png) 15px center no-repeat;
	border: 1px solid #fff;
	color: #fff;
	display: block;
	font-size: 14px;
	height: 44px;
	line-height: 44px;
	text-align: center;
	text-decoration: none;
}

.header-util .link_txt {
	display: flex;
	justify-content: space-between;
	margin: 5px 0;
}

.header-util .link_txt li {
	width: 49%;
}

.header_nav .access_ul li {
	width: 100%;
}

.header_nav .access_ul li a {
	align-items: center;
	display: flex;
	justify-content: center;
	width: 100%;
}

.header_nav .access_ul li a img {
	height: auto;
	margin-right: 5px;
	width: 20px;
}

.close_button {
	cursor: pointer;
	display: block;
}

.close_button_top,
.close_button_bottom {
	height: 20px;
	width: 20px;
}

.close_button_top img,
.close_button_bottom img {
	height: auto;
	width: 100%;
}

.close_button_top {
	padding: 20px 0;
}

.close_button_top img {
	height: 20px;
	margin-right: 10px;
	width: 20px;
}

.close_button_bottom {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: 25px auto 50px;

}

.close_button_bottom p {
	color: #fff;
	font-size: 12px;
	margin-top: 10px;
	white-space: nowrap;
}

/* header ↑　*/

/*main*/

#hero {
	position: relative;
	padding-top: 70px;
}

#hero h1 {
	width: 700px;
	margin: auto;
	padding: 50px 0 0;
}

#hero .lead {
	text-align: center;
	line-height: 2em;
	margin: 25px 0 60px;
}

#hero .tri1 {
	position: absolute;
	top: -63px;
	left: 38px;
	width: 186px;
}

#hero .tri2 {
	position: absolute;
	top: 259px;
	left: 24px;
	width: 124px;
}

#hero .tri3 {
	position: absolute;
	top: 110px;
	right: 15px;
	width: 108px;
}

#hero .tri4 {
	position: absolute;
	top: 259px;
	right: 90px;
	width: 88px;
}

#hero .tri5 {
	position: absolute;
	top: 287px;
	right: 20px;
	width: 189px;
}

#hero .tri6 {
	display: none;
}

/*--
#menu{position: relative; z-index: 10;}
#menu ul{display: flex; justify-content: space-between; width: 1006px; margin: 0 auto 100px;}
#menu ul li{width: 320px; border: 3px solid #000;}
#menu ul li a{padding: 30px 0; display: block; text-align: center; font-size: 27px;}

#menu ul li.m1 a,
#menu ul li.m2 a,
#menu ul li.m3 a{background-position: right bottom; background-size: 45px 103px; background-repeat: no-repeat; font-size: 1em;}

#menu ul li.m1 a{color: #43b5b3; background-image: url("../img/menu_bg01.png") ;}
#menu ul li.m2 a{color: #805895; background-image: url("../img/menu_bg02.png") ;}
#menu ul li.m3 a{color: #e6418c; background-image: url("../img/menu_bg03.png") ;}
--*/

#menu .ctn {
	display: flex;
	/* justify-content: space-between; */
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	margin-bottom: 100px;
}

#menu .ctn a {
	width: 24%;
	text-align: center;
	position: relative;
	height: 86px;
	box-sizing: border-box;
}

#menu .ctn a {
	display: block;
	color: #1897ec;
	background: #fff;
	border: 2px solid #808080;
	margin: 0 10px;
}

#menu .ctn a .tri {
	position: absolute;
	width: 24px;
	height: 65px;
	bottom: 0;
	right: 0;
}

#menu .ctn a span {
	display: block;
	color: #f06a96;
	font-size: 18px;
}

#menu .ctn a:not(:nth-child(4)) {
	padding-top: 21px;
}

#menu .ctn a:nth-child(4) {
	padding-top: 12px;
}

#menu .wrap-btn{
	width: 50%;
	margin: 0 auto 20px;
}

@media(max-width: 768px) {
	#menu .ctn {
		margin-bottom: 30px;
	}

	#menu .ctn a {
		width: 31.5%;
		height: 60px;
		margin-bottom: 10px;
		font-size: 13px;
		overflow: hidden;
		margin: 0 3px;
	}

	#menu .ctn a .tri {
		position: absolute;
		width: 20px;
		/* height: 54px; */
		height: 30px;
		bottom: -1px;
		right: -1px;
	}

	#menu .ctn a span {
		font-size: 12px;
	}

	#menu .ctn a:not(:nth-child(4)) {
		padding-top: 17px;
	}

	#menu .ctn a:nth-child(4) {
		padding-top: 11px;
	}
	#menu .wrap-btn{
		width: 90%;
	}	
}

#recom {
	background: rgba(244, 151, 181, 0.35);
	position: relative;
	padding: 90px 0 95px;
}

#recom .bg_lf {
	position: absolute;
	left: 0;
	top: 0;
	width: 475px;
	z-index: 0;
}

#recom .bg_rg {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 320px;
	z-index: 0;
	mix-blend-mode: soft-light;
}

#recom h2 {
	font-size: 1.75em;
	font-weight: 600;
	padding: 0 0 50px;
	text-align: center;
}

#recom h2::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background: url("../img/mark03_01.png") no-repeat;
	background-size: contain;
	background-size: 50% 50%;
	background-position: 0.2em 0;
}

#recom h2::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background: url("../img/mark03_02.png") no-repeat;
	background-size: contain;
	background-size: 50% 50%;
	background-position: 0.2em 0;
}

/*--
#recom ul{position: relative; z-index: 10; display: flex; justify-content: space-between; flex-wrap: wrap; width: 1020px; margin: auto;} 
#recom ul li{width: 325px;  text-align: center; line-height: 1.6em; padding-bottom: 30px; margin: 0 0 60px;}
#recom ul li>div{padding: 20px;}
#recom h3{font-size: 1.4em; margin: 15px 0 25px; line-height: 1.4em;}

#recom ul li.bg01{background: url("../img/recom_bg01.png")no-repeat; background-size: 100%; background-position: bottom left;}
#recom ul li.bg02{background: url("../img/recom_bg02.png")no-repeat; background-size: 100%; background-position: bottom left;}
#recom ul li.bg03{background: url("../img/recom_bg03.png")no-repeat; background-size: 100%; background-position: bottom left;}
#recom ul li.bg04{background: url("../img/recom_bg04.png")no-repeat; background-size: 100%; background-position: bottom left;}
--*/

#recom .ctn1,
#recom .ctn2 {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

#recom .ctn1 .box,
#recom .ctn2 .box {
	width: 48%;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-sizing: border-box;
	margin-bottom: 30px;
}

#recom .ctn1 .box .txt,
#recom .ctn2 .box .txt {
	padding: 30px 20px;
}

#recom .ctn1 .box .txt h3,
#recom .ctn2 .box .txt h3 {
	color: #f06a96;
	font-size: 1.5rem;
	line-height: 1.2;
	margin-bottom: 10px;
}

#recom .ctn1 .box .txt p,
#recom .ctn2 .box .txt p {
	line-height: 1.3;
	margin-bottom: 6px;
}

#recom .ctn1 .box .txt a,
#recom .ctn2 .box .txt a {
	color: #1897ec;
	text-decoration: underline;
	line-height: 1.2;
}

#recom .ctn1 .box .img,
#recom .ctn2 .box .img {
	position: relative;
}

#recom .ctn1 .box .img .tri,
#recom .ctn2 .box .img .tri {
	position: absolute;
	width: 45px;
	bottom: 0;
	right: 0;
}

#recom .ctn1 .box .txt {
	text-align: center;
}

#recom .ctn2 .box {
	display: flex;
	align-items: center;
}

#recom .ctn2 .box .img {
	width: 45%;
	height: 100%;
}

#recom .ctn2 .box #img1 {
	background: url(../../common/img/recom_3.jpg) center center no-repeat;
	background-size: cover;
}

#recom .ctn2 .box #img2 {
	background: url(../../common/img/recom_4.jpg) center center no-repeat;
	background-size: cover;
}

#recom .ctn2 .box #img3 {
	background: url(../../common/img/recom_5.jpg) center center no-repeat;
	background-size: cover;
}

#recom .ctn2 .box #img4 {
	background: url(../../common/img/recom_6.jpg) center center no-repeat;
	background-size: cover;
}

#recom .ctn2 .box .txt {
	width: 55%;
}

@media(max-width:768px) {
	#recom .ctn1 .box {
		width: 48.5%;
		border-radius: 5px;
		margin-bottom: 10px;
	}

	#recom .ctn1 .box .txt,
	#recom .ctn2 .box .txt {
		padding: 15px 5px;
	}

	#recom .ctn1 .box .txt h3,
	#recom .ctn2 .box .txt h3 {
		font-size: 13px;
		line-height: 1.2;
		margin-bottom: 5px;
	}

	#recom .ctn1 .box .img .tri,
	#recom .ctn2 .box .img .tri {
		width: 20px;
	}

	#recom .ctn2 .box {
		width: 100%;
		border-radius: 5px;
		margin-bottom: 10px;
		min-height: 120px;
	}

	#recom .ctn2 .box .img {
		width: 40%;
		height: 100%;
	}
}

#recom ul li.bg01 h3 {
	color: #e6418c;
}

#recom ul li.bg02 h3 {
	color: #805896;
}

#recom ul li.bg03 h3 {
	color: #009BDE;
}

#recom ul li.bg04 h3 {
	color: #43B5B3;
}

#recom .baloon {
	width: 483px;
	margin: 20px auto 0;
}

#recom .baloon img {
	width: 240px;
}

#recom .btnlink {
	width: 483px;
	margin: 10px auto 0;
}

@media(max-width:768px) {
	#recom .baloon {
		width: 65%;
		margin: 10px auto 0;
	}

	#recom .baloon img {
		width: 140px;
	}
}


#scene {
	text-align: center;
	padding: 0 0 90px;
}

#scene h2 {
	font-size: 1.75em;
	font-weight: 600;
	padding: 40px 0 50px;
	text-align: center;
}

#scene h2::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background: url("../img/mark03_01.png") no-repeat;
	background-size: contain;
	background-size: 50% 50%;
	background-position: 0.2em 0;
}

#scene h2::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background: url("../img/mark03_02.png") no-repeat;
	background-size: contain;
	background-size: 50% 50%;
	background-position: 0.2em 0;
}

#scene .note {
	font-size: 0.8em;
}

#scene .bg_lf {
	width: 325px;
}

#scene h3 {
	font-size: 3.5em;
	text-align: center;
	position: relative;
	margin: 66px 0 0 20px;
	font-weight: 500;
}

/*--
#scene h3::after{
	content:"";
	display:inline-block;
	width:1em;
	height:0.9em;
	background:url("../img/scene2_h2.png") no-repeat;
	background-size:contain;
	background-size: 50% 50%;
	background-position: 0 0;
	position: absolute;
	top: -15px; margin-left: -20px;}
--*/

#scene .item h3 {
	color: #009BDE;
}

#scene .item h4 {
	color: #69bbf3;
}

#scene .item2 h3 {
	color: #f06a96;
}

#scene .item2 h4 {
	color: #f59ebb;
}

#scene .item3 h3 {
	color: #805896;
}

#scene .item3 h4 {
	color: #ca9ccf;
}

/*--
#scene .item2 h3::after{
	content:"";
	display:inline-block;
	width:1em;
	height:1em;
	background:url("../img/scene1_h2.png") no-repeat;
	background-size:contain;
	background-size: 50% 50%;
	background-position: 0 0;
	position: absolute;}
#scene .item3 h3::after{
	content:"";
	display:inline-block;
	width:1em;
	height:1em;
	background:url("../img/scene3_h2.png") no-repeat;
	background-size:contain;
	background-size: 50% 50%;
	background-position: 0 0;
	position: absolute;}
--*/
#scene .lead {
	line-height: 2.2em;
	margin: 60px 0 70px;
}

#scene .item ul,
#scene .item2 ul,
#scene .item3 ul {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: left;
	width: 770px;
	margin: auto;
	z-index: 10;
	position: relative;
}

#scene .item ul li,
#scene .item2 ul li,
#scene .item3 ul li {
	line-height: 1.8em;
	margin: 0 0 30px 0;
}

#scene .item ul li:first-child,
#scene .item2 ul li:first-child,
#scene .item3 ul li:first-child {
	width: 280px;
	margin: 0 25px 30px 0;
}

#scene h4 {
	color: #E6418C;
	font-size: 2.25em;
	margin: 0 0 30px 0;
}

#scene .btnlink {
	width: 483px;
	margin: 40px auto 0;
}




#scene .tab-area ul {
	display: flex;
	justify-content: center;
	position: relative;
	width: 750px;
	margin: auto;
}

#scene .tab-area li {
	font-size: 32px;
	border: solid #000;
	border-width: 3px 3px 3px;
	padding: 0 20px 0;
	width: 250px;
	height: 80px;
	border-radius: 16px 16px 0 0;
	text-align: center;
	line-height: 80px;
}

#scene .tab-area li+li {
	margin-left: -3px;
}

#scene .tab-area li.btn1 {
	color: #009BDE;
}

li.btn2 {
	color: #f06a96;
}

li.btn3 {
	color: #805896;
}

#scene .tab-area li.btn1.active {
	background: linear-gradient(to bottom, #009BDE 16px, #fff 17px);
}

#scene .tab-area li.btn2.active {
	background: linear-gradient(to bottom, #f06a96 16px, #fff 17px);
}

#scene .tab-area li.btn3.active {
	background: linear-gradient(to bottom, #805896 16px, #fff 17px);
}

#scene .tab-area ul::before,
#scene .tab-area ul::after {
	content: "";
	display: block;
	width: 80px;
	height: 3px;
	background-color: #000;
	position: absolute;
	bottom: 0;
}

#scene .tab-area ul::before {
	left: -80px;
}

#scene .tab-area ul::after {
	right: -80px;
}

#scene .tab-area {
	cursor: pointer;
}

#scene .tab-area .tab.active {
	border-width: 3px 3px 0px;
	padding: 3px 20px 0;
}

#scene .content-area .content {
	display: none;
}

#scene .content-area .content.show {
	display: block;
}

#scene .item,
#scene .item2,
#scene .item3 {
	position: relative;
	z-index: 1;
	/*width: 1100px; margin: auto;*/
}

#scene .item .tri1 {
	position: absolute;
	top: 249px;
	right: 214px;
	width: 186px;
}

#scene .item .tri2 {
	position: absolute;
	top: 407px;
	right: 16px;
	width: 200px;
}

#scene .item .tri3 {
	position: absolute;
	top: 587px;
	right: 134px;
	width: 57px;
}

#scene .item .tri4 {
	position: absolute;
	top: 955px;
	left: 10px;
	width: 181px;
}

#scene .item .tri5 {
	position: absolute;
	top: 826px;
	left: 166px;
	width: 97px;
	z-index: 0;
}

#scene .item2 .tri1 {
	position: absolute;
	top: 152px;
	left: 60px;
	width: 145px;
	z-index: 0;
}

#scene .item2 .tri2 {
	position: absolute;
	top: 455px;
	left: 40px;
	width: 124px;
}

#scene .item2 .tri3 {
	position: absolute;
	top: 742px;
	right: 144px;
	width: 72px;
}

#scene .item2 .tri4 {
	position: absolute;
	top: 1084px;
	right: 10px;
	width: 260px;
}

#scene .item2 .tri5 {
	position: absolute;
	top: 1181px;
	right: 40px;
	width: 107px;
}


#scene .item3 .tri1 {
	position: absolute;
	top: 152px;
	left: 60px;
	width: 145px;
	z-index: 0;
}

#scene .item3 .tri2 {
	position: absolute;
	top: 455px;
	left: 40px;
	width: 124px;
}

#scene .item3 .tri3 {
	position: absolute;
	top: 742px;
	right: 144px;
	width: 72px;
}

#scene .item3 .tri4 {
	position: absolute;
	top: 1084px;
	right: 10px;
	width: 260px;
}

#scene .item3 .tri5 {
	position: absolute;
	top: 1181px;
	right: 40px;
	width: 107px;
}




#safety {
	background: #5F8597;
	color: #fff;
	padding: 110px 0 100px;
}

#safety h2 {
	text-align: center;
	font-size: 2.5em;
	border-bottom: 3px solid #fff;
	padding: 0 0 20px;
}

#safety .inner {
	line-height: 1.7;
}

#safety ul {
	display: flex;
	justify-content: center;
	margin: 30px 0;
	align-items: center;
}

#safety ul li {
	font-size: 0.95em;
	line-height: 1.5em;
}

#safety ul li:first-child {
	width: 300px;
	margin: 0 25px 0 0;
}

#safety .btnlink {
	width: 606px;
	margin: auto;
}

footer {
	text-align: center;
	padding: 100px 5% 110px;
}

footer div {
	padding: 100px 0 130px;
	text-align: center;
	border-bottom: 34px solid #43B5B3;
}

footer h2 {
	color: #E6418C;
	font-size: 2.5em;
	border-bottom: 3px solid #E6418C;
}

footer h2 span {
	display: block;
	font-size: 0.4em;
	color: #000;
	padding: 0 0 25px;
}

footer .tell {
	font-size: 3em;
	margin: 27px 0 20px;
}

footer .adds {
	line-height: 1.6em;
}

footer .adds span {
	font-size: 1.2em;
}

footer .btnlink {
	width: 467px;
	margin: 30px auto 0;
}

footer .notice {
	margin: 0 auto;
}

footer .notice li {
	font-size: 0.85em;
	padding: 0 0 10px;
}

footer .txtlink {
	margin: 40px 0 0;
}

footer .txtlink a {
	color: #000;
	text-decoration: underline;
	font-size: 1.2em;
}

@media(max-width: 768px) {
	footer {
		text-align: center;
		padding: 0 4% 60px;
	}
}



@media screen and (max-width: 768px) {
	body * {
		font-size: 13px;
	}

	.pc {
		display: none;
	}

	.pc-block {
		display: none;
	}

	.sp {
		display: block;
	}

	#hero h1 {
		width: 66%;
		padding: 10px 0 0;
	}

	#menu ul {
		width: 100%;
		margin: 0;
	}

	#menu ul li {
		width: calc(100%/3);
	}

	#menu ul li a {
		font-size: 1.2em;
		letter-spacing: 0.05em;
		line-height: 1.2em;
		padding: 10px 0;
	}

	#menu ul li+li {
		border-left: none;
	}

	#menu ul li.m1 a,
	#menu ul li.m2 a,
	#menu ul li.m3 a {
		background-position: right bottom;
		background-size: 15px 40px;
		background-repeat: no-repeat;
	}

	#hero .lead {
		margin: 2em auto;
		line-height: 1.5em;
	}

	#recom {
		padding: 60px 0 45px;
	}

	#recom h2 {
		padding: 0 0 20px;
	}

	#recom ul {
		width: 95%;
	}

	#recom ul li {
		width: 48%;
		line-height: 1.6em;
		font-size: 0.8em;
	}

	#recom .btnlink {
		width: 68%;
	}

	#recom ul li>div {
		padding: 10px;
	}

	#recom h3 {
		margin: 0 0 10px;
		font-size: 1.2em;
	}

	#recom ul li {
		padding-bottom: 1em;
		margin: 0 0 10px;
	}

	#recom .bg_rg {
		width: 45%;
	}


	#scene {
		padding: 0 0 50px;
	}

	#scene h2 {
		padding: 20px 0 25px;
		font-size: 1.65em;
	}

	#scene h3 {
		margin: 0 0 0 0;
		font-size: 3em;
	}

	#scene h3::after {
		top: -5px;
		margin-left: -10px;
	}

	#scene h4 {
		font-size: 1.8em;
		text-align: center;
		height: 2.5em;
		margin: 0;
	}

	#scene .bg_lf {
		width: 33%;
	}

	#scene .tab-area {
		display: none;
	}

	#scene .content-area .content {
		display: block;
		margin: 0 0 60px;
	}

	#scene .lead {
		margin: 1em 0 1em;
		line-height: 1.4em;
		z-index: 10;
		position: relative;
	}

	#scene .item ul,
	#scene .item2 ul,
	#scene .item3 ul {
		display: block;
		width: 31%;
		margin: 0;
	}

	#scene .item .box,
	#scene .item2 .box,
	#scene .item3 .box {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: auto;
	}

	#scene .item .box {
		justify-content: space-around;
	}

	#scene .item ul li:first-child,
	#scene .item2 ul li:first-child,
	#scene .item3 ul li:first-child {
		width: 100%;
		margin: 0 0 0.8em;
	}

	#scene .item ul li,
	#scene .item2 ul li,
	#scene .item3 ul li {
		margin: 0 0 0;
	}

	#scene .item ul li p,
	#scene .item2 ul li p,
	#scene .item3 ul li p {
		line-height: 1.5em;
	}

	#scene .btnlink {
		width: 63%;
		margin: 1em auto 0;
	}

	footer div {
		padding: 35px 0 45px;
	}

	footer .btnlink {
		width: 63%;
	}

	footer .notice {
		width: 100%;
		margin: 35px auto 0;
		line-height: 1.3;
	}

	footer .txtlink {
		margin: 20px 0 0;
	}

	#safety {
		padding: 35px 0 040px;
	}

	#safety ul {
		display: block;
	}

	#safety .btnlink {
		width: 63%;
	}

	#safety ul li:first-child {
		width: 50%;
		margin: 17px auto 15px;
	}

	#safety ul li:last-child {
		width: 90%;
		margin: auto;
		display: flex;
		justify-content: center;
	}

	#safety ul li .inner {
		font-size: 0.9em;
	}


	#recom .bg_lf {
		width: 67%;
	}



	#hero .tri1 {
		position: absolute;
		top: -5px;
		left: -25px;
		width: 25%;
	}

	#hero .tri2 {
		position: absolute;
		top: 90px;
		left: -10px;
		width: 15%;
	}

	#hero .tri3 {
		position: absolute;
		top: 20px;
		right: 15px;
		width: 15%;
	}

	#hero .tri4 {
		position: absolute;
		top: 120px;
		right: 10px;
		width: 10%;
	}

	#hero .tri5 {
		position: absolute;
		top: 120px;
		right: -20px;
		width: 25%;
	}

	#hero .tri6 {
		position: absolute;
		top: 175px;
		left: 10px;
		width: 12%;
		display: block;
	}

	#scene .item,
	#scene .item2,
	#scene .item3 {
		position: relative;
		/*width: 1100px; margin: auto;*/
	}

	#scene .item .tri1 {
		position: absolute;
		top: 178px;
		right: 5px;
		width: 11%;
	}

	#scene .item .tri2 {
		position: absolute;
		top: -60px;
		right: -16px;
		width: 28%;
	}

	#scene .item .tri3 {
		position: absolute;
		top: 30px;
		right: 30px;
		width: 8%;
	}

	#scene .item .tri4 {
		position: absolute;
		top: 950px;
		left: 10px;
		width: 19%;
	}

	#scene .item .tri5 {
		position: absolute;
		top: 900px;
		left: 70px;
		width: 13%;
		z-index: 0;
	}

	#scene .item2 .tri1 {
		display: none;
	}

	#scene .item2 .tri2 {
		display: none;
	}

	#scene .item2 .tri3 {
		display: none;
	}

	#scene .item2 .tri4 {
		display: none;
	}

	#scene .item2 .tri5 {
		display: none;
	}


	#scene .item3 .tri1 {
		display: none;
	}

	#scene .item3 .tri2 {
		position: absolute;
		top: auto;
		bottom: -50px;
		left: auto;
		right: 0;
		width: 29%;
	}

	#scene .item3 .tri3 {
		position: absolute;
		top: auto;
		bottom: -50px;
		right: 10px;
		width: 5%;
	}

	#scene .item3 .tri4 {
		display: none;
	}

	#scene .item3 .tri5 {
		display: none;
	}




	main {
		overflow: hidden;
	}
}


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

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


/*フェードイン*/

.para {
	/*border: 1px #000 solid;*/
	transform: translate(0, 30px);
	transition: all 1s ease-out;
}


.para2 {
	transform: translate(0, 60px);
	transition: all 1s ease-out;
}

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

	.para {
		/*border: 1px #000 solid;*/
		transform: translate(0, -30px);
		transition: all 1s ease-out;
	}

	.para2 {
		transform: translate(0, -60px);
		transition: all 1s ease-out;
	}

}


section#access {
	background: #595757;
	width: 100%;
	padding: 110px 0;
	text-align: center;
	color: #fff;
}

#access .ctn {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 30px;
}

#access .ctn .box {
	width: 31%;
	padding: 25px 10px;
	margin-bottom: 20px;
	background: #fff;
	border-radius: 10px;
	box-sizing: border-box;
}

#access .box div {
	width: 100px;
	margin: 0 auto;
}

#access .box p {
	margin-top: 20px;
	line-height: 1.3;
	color: #000;
}

#access .box p span {
	color: #f06a96;
	font-size: 1.7rem;
}

#access .box p.only {
	margin-top: 5px;
	font-size: 14px;
}

#access h2 {
	font-size: 3.8rem;
	margin-bottom: 20px;
}

#access p.lead {
	line-height: 1.5;
}

#access h2 span {
	display: block;
}

#access .line {
	width: 75%;
	max-width: 500px;
	height: 2px;
	background: #fff;
	margin: 0 auto 60px;
}

#access .inquire {
	margin-top: 120px;
}

#access .inquire .tell {
	font-size: 3.8rem;
	font-weight: bold;
}

#access .inquire .tell a {
	font-size: 3.8rem;
	color: #fff;
}

#access .inquire .adds {
	margin-top: 20px;
}

#access .inquire .adds span {
	font-size: 1.6rem;
	line-height: 1.6;
}


#access .map {
	max-width: 620px;
	width: 100%;
	margin: 60px auto 20px;
}

#access .map img {
	margin-bottom: 30px;
}

#access .map a {
	color: #fff;
	text-decoration: underline;
}

#access .sns {
	display: flex;
	justify-content: space-between;
	width: 100px;
	margin: 30px auto;
}

#access .sns a {
	width: 40px;
	display: block;
}

p.annotaiton {
	font-size: 16px;
}

p.annotaiton a {
	font-size: 16px;
	color: #009fe8;
	text-decoration: underline;
}

@media(max-width:768px) {
	section#access {
		background: #595757;
		width: 100%;
		padding: 50px 0;
		text-align: center;
		color: #fff;
	}

	#access .ctn {
		margin-top: 15px;
	}

	#access .ctn .box {
		width: 48.5%;
		padding: 10px 10px;
		margin-bottom: 10px;
	}

	#access .box div {
		width: 70px;
		margin: 0 auto;
	}

	#access .box p {
		margin-top: 10px;
		line-height: 1.3;
		color: #000;
	}

	#access .box p span {
		color: #f06a96;
		font-size: 15px;
	}

	#access .box p.only {
		margin-top: 5px;
		font-size: 11px;
	}

	#access h2 {
		font-size: 32px;
		margin-bottom: 5px;
	}

	#access p.lead {
		line-height: 1.5;
	}

	#access h2 span {
		display: block;
	}

	#access .line {
		height: 2px;
		background: #fff;
		margin: 0 auto 20px;
	}

	#access .inquire {
		margin-top: 60px;
	}

	#access .inquire .tell {
		font-size: 28px;
		font-weight: bold;
	}

	#access .inquire .tell a {
		font-size: 28px;
		color: #fff;
	}

	#access .inquire .adds {
		margin-top: 10px;
	}

	#access .inquire .adds span {
		font-size: 16px;
		line-height: 1.6;
	}

	#access .map {
		max-width: 620px;
		width: 100%;
		margin: 20px auto 10px;
	}

	#access .map img {
		margin-bottom: 15px;
	}

	#access .map a {
		color: #fff;
		text-decoration: underline;
	}

	#access .sns {
		display: flex;
		justify-content: space-between;
		width: 76px;
		margin: 10px auto 0;
	}

	#access .sns a {
		width: 28px;
		display: block;
	}

	p.annotaiton {
		font-size: 10px;
	}

	p.annotaiton a {
		font-size: 10px;
		color: #009fe8;
		text-decoration: underline;
	}
}


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

　バーガーメニュー

----------------------------------------------------*/
header#globalNavi {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
}

.reserve {
	width: 100%;
	background: #fff;
	margin-left: 0;
	position: fixed;
	/* 開いてないときは画面外に配置 */
	top: -744px;
	left: 0;
	width: 100%;
	text-align: center;
	padding: 70px 0 0;
	transition: .4s ease-in-out;
	z-index: 600;
	box-sizing: border-box;
}

.reserve h2 {
	font-size: 24px;
	margin-bottom: 15px;
}

.reserve h2:before {
	content: '';
	display: inline-block;
	background: url(../img/tel_icon_bk.png) 0 0 no-repeat;
	width: 30px;
	height: 30px;
	background-size: contain;
	margin-bottom: -5px;
}

.res_ctn {
	max-width: 1000px;
	width: 90%;
	color: #fff;
	background: #3e3a39;
	margin: 0 auto 20px;
}

.res_ctn h3 {
	padding: 20px 0;
	border-bottom: 1px solid #fff;
}

.res_ctn p.tel {
	font-size: 32px;
	padding: 20px 0;
}

.res_ctn p.tel a {
	font-size: 32px;
	color: #fff;
}

.support {
	width: 100%;
	background: #717071;
	color: #fff;
	padding: 30px 0 50px;
}

.support .lead {
	margin-bottom: 20px;
	line-height: 1.3;
}

.sup_ctn {
	max-width: 1000px;
	width: 90%;
	color: #fff;
	background: #3e3a39;
	margin: 0 auto 30px;
	padding: 20px 0;
}

.sup_ctn p.tel {
	font-size: 32px;
	margin-bottom: 20px;
}

.sup_ctn p.tel a {
	font-size: 32px;
	color: #fff;
}

.res_ctn p.tel:before,
.sup_ctn p.tel:before {
	content: '';
	display: inline-block;
	background: url(../img/tel_icon_wh.png) 0 0 no-repeat;
	width: 30px;
	height: 30px;
	background-size: contain;
	margin-bottom: -5px;
}

.sup_ctn p.lang {
	margin-bottom: 5px;
}

.pr_res {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
}

.pr_res h3 {
	margin-bottom: 20px;
}

.pr_res ul li {
	text-align: left;
	text-indent: -1em;
	padding-left: 1em;
	line-height: 1.3;
	font-size: 17px;
}

.reserve .contact a {
	color: #fff;
	text-decoration: underline;
}

.reserve .contact {
	width: 400px;
	margin: 30px auto 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

@media(max-width: 768px) {
	.reserve h2 {
		font-size: 17px;
		margin-bottom: 10px;
	}

	.reserve h2:before {
		width: 20px;
		height: 20px;
		background-size: contain;
		margin-bottom: -5px;
	}

	.res_ctn {
		margin: 0 auto 10px;
	}

	.res_ctn h3 {
		padding: 12px 0;
		border-bottom: 1px solid #fff;
	}

	.res_ctn p.tel {
		font-size: 24px;
		padding: 10px 0;
	}

	.res_ctn p.tel a {
		font-size: 24px;
	}

	.support {
		width: 100%;
		background: #717071;
		color: #fff;
		padding: 15px 0 40px;
	}

	.support .lead {
		margin-bottom: 20px;
		line-height: 1.3;
	}

	.sup_ctn {
		margin: 0 auto 20px;
		padding: 10px 0;
	}

	.sup_ctn p.tel {
		font-size: 24px;
		margin-bottom: 10px;
	}

	.sup_ctn p.tel a {
		font-size: 24px;
	}

	.res_ctn p.tel:before,
	.sup_ctn p.tel:before {
		width: 20px;
		height: 20px;
		margin-bottom: -2px;
	}

	.pr_res h3 {
		margin-bottom: 10px;
		font-size: 14px;
	}

	.support .lead {
		margin-bottom: 10px;
		font-size: 14px;
	}

	.pr_res ul li {
		font-size: 12px;
	}

	.reserve .contact a {
		font-size: 14px;
	}

	.reserve .contact {
		width: 300px;
		margin: 30px auto 0;
	}
}

#fix_head {
	position: fixed;
	display: flex;
	justify-content: space-between;
	max-width: 540px;
	width: 540px;
	height: 54px;
	padding: 5px;
	z-index: 1000;
	top: 0;
	right: 0;
}

#fix_head a {
	position: relative;
	font-size: 18px;
	display: block;
	background: #1d1d1c;
	text-align: center;
	width: 49%;
	color: #fff;
	padding: 17px 0;
}

#fix_head a:before {
	content: '';
	display: inline-block;
	background: url(../img/bed_icon.png) 0 0 no-repeat;
	width: 26px;
	height: 23px;
	background-size: contain;
	margin-bottom: -7px;
	margin-top: 1px;
	margin-right: 5px;
}

#fix_head .arrow {
	position: absolute;
	width: 16px;
	right: 10px;
	top: 23px;
}

@media(max-width: 768px) {
	#fix_head {
		height: 50px;
		max-width: 100%;
		width: 100%;
	}

	#fix_head a {
		font-size: 13px;
		padding: 12px 0;
		width: calc((154/ 375) * 100vw);
	}

	#fix_head a:before {
		width: 22px;
		height: 20px;
		margin-bottom: -8px;
		margin-top: 6px;
		margin-right: 5px;
	}

	#fix_head .arrow {
		display: none;
	}
}

/* ----- オープンボタン ----- */

#nav-toggle {
	width: 49%;
	cursor: pointer;
	z-index: 9999;
	background: #dadad9;
	text-align: center;
	padding: 17px 0;
	position: relative;
}

#nav-toggle p {
	font-size: 18px;
}

#nav-toggle:hover {
	opacity: 0.8;
}

#nav-toggle p:before {
	content: '';
	display: inline-block;
	background: url(../img/tel_icon_bk.png) 0 0 no-repeat;
	width: 23px;
	height: 23px;
	background-size: contain;
	margin-bottom: -4px;
	margin-top: -2px;
}

#nav-toggle div {
	position: relative;
}

#nav-toggle span {
	display: none;
	position: absolute;
	height: 2px;
	width: 30px;
	border-radius: 0;
	background: #3e3a39;
	left: 50%;
	margin-left: -15px;
	transition: .3s ease-in-out;
}

#nav-toggle span:nth-child(1) {
	top: 0;
}

#nav-toggle span:nth-child(2) {
	top: 10px;
}

#nav-toggle span:nth-child(3) {
	top: 20px;
}

@media(max-width: 768px) {
	#nav-toggle {
		padding: 12px 0;
		width: calc((154/ 375) * 100vw);
	}

	#nav-toggle p {
		font-size: 13px;
	}

	#nav-toggle p:before {
		width: 20px;
		height: 20px;
		margin-bottom: -5px;
		margin-top: 3px;
	}

	#nav-toggle span {
		width: 24px;
		margin-left: -12px;
	}

	#nav-toggle:hover {
		opacity: 1;
	}
}

.open #nav-toggle span:nth-child(1) {
	top: 10px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg);
	display: block;
}

.open #nav-toggle span:nth-child(2) {
	width: 0;
	left: 50%;
	display: block;
}

.open #nav-toggle span:nth-child(3) {
	top: 10px;
	-webkit-transform: rotate(-315deg);
	-moz-transform: rotate(-315deg);
	transform: rotate(-315deg);
	display: block;
}

.open #nav-toggle p,
.open #nav-toggle img {
	display: none;
}

@media(max-width: 768px) {

	.open #nav-toggle span:nth-child(1),
	.open #nav-toggle span:nth-child(3) {
		top: 12px;
	}
}


/* スライドアニメーション */
.open .reserve {
	/* #global-nav top + #mobile-head height */
	-moz-transform: translateY(744px);
	-webkit-transform: translateY(744px);
	transform: translateY(744px);
}

.fixed {
	position: fixed;
}

@media(min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}