@charset "utf-8";


/************************************
body, html
************************************/

/*---------------------------------
 common
---------------------------------*/
* { box-sizing:border-box; margin:0; padding:0; }
img { width:100%; margin:0; padding:0; }

body {
	position: relative;
	background: #ffffff;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	min-height: -webkit-fill-available;
	-webkit-text-size-adjust: 100%;
}

html {
	height: -webkit-fill-available;
}

img, picture, source {
	display: block;
}

picture img {
	width: 100%;
	height: auto;
}

a:hover {
	transition: 0.3s!important;
	opacity: 0.5!important;
}

@media screen and (min-width: 768px){
	.sp {
		display: none!important;
	}
}

@media screen and (max-width: 767px){
	.pc {
		display: none!important;
	}
}

:root {
	--tablet: 13.66;
	--sp: 3.9;
}


/*---------------------------------
 .campaign
---------------------------------*/
@keyframes shiny-btn {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.25; }
    81% { transform: scale(4) rotate(45deg); opacity: 0.5; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

@media screen and (min-width: 1366px){
    .campaign {
        width: 920px;
        margin: 0 auto 120px;
    }
    
    .campaign picture {
        width: 867px;
        height: auto;
        margin: 0 auto 25px;
    }
    
    .campaign ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    
    .campaign ul li {
        width: 450px;
        height: 90px;
        list-style-type: none;
    }
    
    .campaign ul li a {
        display: block;
        align-content: center;
		text-decoration: none;
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
    
    .campaign ul li a.entry {
		position: relative;
		display: block;
		overflow: hidden;
        background: #ff6e00;
    }
	
	.campaign ul li a.entry::before {
		position: absolute;
		content: "";
		display: inline-block;
		top: -100px;
		left: 0;
		width: 100px;
		height: 100%;
		background-color: #fff;
		animation: shiny-btn 3s ease-in-out infinite;
	}
    
    .campaign ul li a.search {
        background: #ff5090;
    }
	
	.campaign ul li a p {
		color: #ffffff;
		font-size: 28px;
		line-height: 1em;
		font-weight: 600;
		text-align: center;
	}
}

@media screen and (min-width: 768px) and (max-width: 1365px){
    .campaign {
        width: calc(920vw / var(--tablet));
        margin: 0 auto calc(120vw / var(--tablet));
    }
    
    .campaign picture {
        width: calc(867vw / var(--tablet));
        height: auto;
        margin: 0 auto calc(25vw / var(--tablet));
    }
    
    .campaign ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    
    .campaign ul li {
        width: calc(450vw / var(--tablet));
        height: calc(90vw / var(--tablet));
        list-style-type: none;
    }
    
    .campaign ul li a {
        display: block;
        align-content: center;
		text-decoration: none;
        width: 100%;
        height: 100%;
        border-radius: calc(10vw / var(--tablet));
    }
    
    .campaign ul li a.entry {
		position: relative;
		display: block;
		overflow: hidden;
        background: #ff6e00;
    }
	
	.campaign ul li a.entry::before {
		position: absolute;
		content: "";
		display: inline-block;
		top: calc(100vw / var(--tablet));
		left: 0;
		width: calc(100vw / var(--tablet));
		height: 100%;
		background-color: #fff;
		animation: shiny-btn 3s ease-in-out infinite;
	}
    
    .campaign ul li a.search {
        background: #ff5090;
    }
	
	.campaign ul li a p {
		color: #ffffff;
		font-size: calc(28vw / var(--tablet));
		line-height: 1em;
		font-weight: 600;
		text-align: center;
	}
}

@media screen and (max-width: 767px){
    .campaign {
        width: calc(330vw / var(--sp));
        margin: 0 auto calc(70vw / var(--sp));
    }
    
    .campaign picture {
        width: 100%;
        height: auto;
        margin: 0 auto calc(50vw / var(--sp));
    }
    
    .campaign ul {
        display: flex;
        flex-direction: column;
        gap: calc(10vw / var(--sp)) 0;
        width: calc(305vw / var(--sp));
        margin: 0 auto;
    }
    
    .campaign ul li {
        width: 100%;
        height: calc(90vw / var(--sp));
        list-style-type: none;
    }
    
    .campaign ul li a {
        display: block;
        align-content: center;
		text-decoration: none;
        width: 100%;
        height: 100%;
        border-radius: calc(5vw / var(--sp));
    }
    
    .campaign ul li a.entry {
		position: relative;
		display: block;
		overflow: hidden;
        background: #ff6e00;
    }
	
	.campaign ul li a.entry::before {
		position: absolute;
		content: "";
		display: inline-block;
		top: calc(100vw / var(--sp));
		left: 0;
		width: calc(100vw / var(--sp));
		height: 100%;
		background-color: #fff;
		animation: shiny-btn 3s ease-in-out infinite;
	}
    
    .campaign ul li a.search {
        background: #ff5090;
    }
	
	.campaign ul li a p {
		color: #ffffff;
		font-size: calc(28vw / var(--sp));
		line-height: 1em;
		font-weight: 600;
		text-align: center;
	}
}


/*---------------------------------
 header
---------------------------------*/
@media screen and (min-width: 1366px){
	header {
		position: relative;
		display: flex;
		justify-content: center;
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	
	header::before {
		position: absolute;
		display: block;
		content: "";
		background: linear-gradient(to bottom, #cff0ff 0%, #cff0ff 600px, #ffffff 600px, #ffffff 100%);
		width: 100%;
		height: 720px;
		z-index: 97;
	}
    
    header h1 {
        flex-shrink: 0;
        position: relative;
        display: block;
		width: 2560px;
		height: 720px;
		z-index: 98;
    }
}

@media screen and (min-width: 768px) and (max-width: 1365px){
	header {
		position: relative;
		display: flex;
		justify-content: center;
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	
	header::before {
		position: absolute;
		display: block;
		content: "";
		background: linear-gradient(to bottom, #cff0ff 0%, #cff0ff calc(600vw / var(--tablet)), #ffffff calc(600vw / var(--tablet)), #ffffff 100%);
		width: 100%;
		height: calc(720vw / var(--tablet));
		z-index: 97;
	}
    
    header h1 {
        flex-shrink: 0;
        position: relative;
        display: block;
		width: calc(2560vw / var(--tablet));
		height: calc(720vw / var(--tablet));
		z-index: 98;
    }
}

@media screen and (max-width: 767px){
	header {
		position: relative;
		display: flex;
		justify-content: center;
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
    
    header h1 {
		width: 100%;
		z-index: 98;
    }
}


/*---------------------------------
 #tab
---------------------------------*/
@media screen and (min-width: 1366px){
	#tab {
		position: fixed;
		width: 200px;
		top: 100px;
		right: 0;
		z-index: 999;
	}
	
	#tab ul {
		display: flex;
		flex-flow: column;
		width: 100%;
	}
	
	#tab ul li {
		list-style-type: none;
		width: 100%;
        height: 220px;
	}
	
	#tab ul li a, #tab ul li a img {
        display: block;
		width: 100%;
        height: 100%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1365px){
	#tab {
		position: fixed;
		width: calc(200vw / var(--tablet));
		top: calc(100vw / var(--tablet));
		right: 0;
		z-index: 999;
	}
	
	#tab ul {
		display: flex;
		flex-flow: column;
		width: 100%;
	}
	
	#tab ul li {
		list-style-type: none;
		width: 100%;
        height: calc(220vw / var(--tablet));
	}
	
	#tab ul li a, #tab ul li a img {
        display: block;
		width: 100%;
        height: 100%;
	}
}


/*---------------------------------
 #point
---------------------------------*/
@media screen and (min-width: 1366px){
    #point {
        background: #cff0ff;
        width: 100%;
        padding: 30px 0;
        margin: 0 auto;
    }
    
    #point h2 {
        width: 1366px;
        margin: 0 auto;
    }
}

@media screen and (min-width: 768px) and (max-width: 1365px){
    #point {
        background: #cff0ff;
        width: 100%;
        padding: calc(30vw / var(--tablet)) 0;
        margin: 0 auto;
    }
    
    #point h2 {
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 767px){
    #point {
        background: #cff0ff;
        width: 100%;
        padding: calc(20vw / var(--sp)) 0 calc(30vw / var(--sp));
    }
    
    #point h2 {
        width: 100%;
    }
}


/*---------------------------------
 #woman
---------------------------------*/
@media screen and (min-width: 1366px){
    #woman {
        background: linear-gradient(to bottom, #cff0ff 0%, #cff0ff 20px, #ff92ba 20px, #ff92ba 100%);
        width: 100%;
        padding-bottom: 40px;
        margin: 0 auto;
    }
    
    #woman h2 {
        width: 1366px;
        margin: 0 auto;
    }
}

@media screen and (min-width: 768px) and (max-width: 1365px){
    #woman {
        background: linear-gradient(to bottom, #cff0ff 0%, #cff0ff calc(20vw / var(--tablet)), #ff92ba calc(20vw / var(--tablet)), #ff92ba 100%);
        width: 100%;
        padding-bottom: calc(40vw / var(--tablet));
        margin: 0 auto;
    }
    
    #woman h2 {
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 767px){
    #woman {
        background: linear-gradient(to bottom, #cff0ff 0%, #cff0ff calc(17vw / var(--sp)), #ff92ba calc(17vw / var(--sp)), #ff92ba 100%);
        width: 100%;
        padding-bottom: calc(45vw / var(--sp));
    }
    
    #woman h2 {
        width: 100%;
    }
}


/*---------------------------------
 #facility
---------------------------------*/
@media screen and (min-width: 1366px){
    #facility {
        background: #fff9a6;
        width: 100%;
        padding: 30px 0 40px;
        margin: 0 auto 80px;
    }
    
    #facility h2 {
        width: 1366px;
        margin: 0 auto;
    }
}

@media screen and (min-width: 768px) and (max-width: 1365px){
    #facility {
        background: #fff9a6;
        width: 100%;
        padding: calc(30vw / var(--tablet)) 0 calc(40vw / var(--tablet));
        margin: 0 auto calc(80vw / var(--tablet));
    }
    
    #facility h2 {
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 767px){
    #facility {
        background: #fff9a6;
        width: 100%;
        padding: calc(30vw / var(--sp)) 0 calc(40vw / var(--sp));
        margin-bottom: calc(40vw / var(--sp));
    }
    
    #facility h2 {
        width: 100%;
    }
}


/*---------------------------------
 #top
---------------------------------*/
@media screen and (min-width: 1366px){
	#top {
		display: none;
		position: fixed;
	    width: 50px;
        height: 50px;
		bottom: 280px;
        right: 10px;
		pointer-events: none;
		z-index: 999;
	}
	
	#top img {
	    width: 100%;
        height: 100%;
		pointer-events: auto;
	    cursor: pointer;
	}
	
	#top img:hover {
		cursor: pointer;
		opacity: 0.5;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		-o-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}
}

@media screen and (min-width: 768px) and (max-width: 1365px){
	#top {
		display: none;
		position: fixed;
	    width: calc(50vw / var(--tablet));
        height: calc(50vw / var(--tablet));
		bottom: calc(280vw / var(--tablet));
        right: calc(10vw / var(--tablet));
		pointer-events: none;
		z-index: 999;
	}
	
	#top img {
	    width: 100%;
        height: 100%;
		pointer-events: auto;
	    cursor: pointer;
	}
	
	#top img:hover {
		cursor: pointer;
		opacity: 0.5;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		-o-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}
}

@media screen and (max-width: 767px){
	#top {
		display: none;
		position: fixed;
	    width: calc(40vw / var(--sp));
        height: calc(40vw / var(--sp));
		bottom: calc(120vw / var(--sp));
        right: calc(10vw / var(--sp));
		pointer-events: none;
		z-index: 999;
	}
	
	#top img {
	    width: 100%;
        height: 100%;
		pointer-events: auto;
	    cursor: pointer;
	}
	
	#top img:hover {
		cursor: pointer;
		opacity: 0.5;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		-o-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}
}


/*---------------------------------
 #floating
---------------------------------*/
@media screen and (max-width: 767px){
	#floating {
/*		display: none;*/
		position: fixed;
		width: 100%;
		height: calc(220vw / 7.5);
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;
	}
	
	#floating ul {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}
	
	#floating ul li {
        display: block;
        width: 100%;
        height: 100%;
		list-style-type: none;
	}
	
	#floating ul li a, #floating ul li a img {
        display: block;
        width: 100%;
        height: 100%;
	}
}


/*---------------------------------
 footer
---------------------------------*/
@media screen and (min-width: 1366px){
	footer {
		position: relative;
		background: #0080cb;
		width: 100%;
		padding: 50px 0 40px;
		margin: 0 auto;
	}
    
    footer .search {
        display: block;
        box-sizing: border-box;
        align-content: center;
        background: transparent;
		color: #ffffff;
		font-size: 18px;
		line-height: 1em;
		font-weight: 400;
        text-align: center;
        text-decoration: none;
        width: 200px;
        height: 50px;
        border: 1px solid #ffffff;
        border-radius: 6px;
        margin: 0 auto 40px;
    }
	
	footer h2 {
		width: 302px;
        height: 28.5px;
		margin: 0 auto 35px;
	}
	
    footer h2 img {
        width: 100%;
        height: 100%;
    }
	
	footer .link {
        display: flex;
        justify-content: center;
        gap: 0 75px;
        margin: 0 auto 50px;
	}
	
	footer .link li {
        position: relative;
        display: inherit;
		list-style-type: none;
	}
	
	footer .link li::after {
        position: absolute;
        display: block;
        content: "";
        background: #ffffff;
        width: 1px;
        height: 24px;
        top: 50%;
        right: calc(-75px / 2);
        transform: translateY(-50%);
	}
	
    footer .link li:last-child::after {
        display: none;
    }
	
	footer .link li a {
		color: #ffffff;
		font-size: 16px;
		line-height: 1em;
		font-weight: 400;
		text-decoration: underline;
	}
	
	footer .copyright {
		color: #ffffff;
		font-size: 10px;
		line-height: 1em;
		font-weight: 400;
        text-align: center;
	}
}

@media screen and (min-width: 768px) and (max-width: 1365px){
	footer {
		position: relative;
		background: #0080cb;
		width: 100%;
		padding: calc(50vw / var(--tablet)) 0 calc(40vw / var(--tablet));
		margin: 0 auto;
	}
    
    footer .search {
        display: block;
        box-sizing: border-box;
        align-content: center;
        background: transparent;
		color: #ffffff;
		font-size: calc(18vw / var(--tablet));
		line-height: 1em;
		font-weight: 400;
        text-align: center;
        text-decoration: none;
        width: calc(200vw / var(--tablet));
        height: calc(50vw / var(--tablet));
        border: calc(1vw / var(--tablet)) solid #ffffff;
        border-radius: calc(6vw / var(--tablet));
        margin: 0 auto calc(40vw / var(--tablet));
    }
	
	footer h2 {
		width: calc(302vw / var(--tablet));
        height: calc(28.5vw / var(--tablet));
		margin: 0 auto calc(35vw / var(--tablet));
	}
	
    footer h2 img {
        width: 100%;
        height: 100%;
    }
	
	footer .link {
        display: flex;
        justify-content: center;
        gap: 0 calc(75vw / var(--tablet));
        margin: 0 auto calc(50vw / var(--tablet));
	}
	
	footer .link li {
        position: relative;
        display: inherit;
		list-style-type: none;
	}
	
	footer .link li::after {
        position: absolute;
        display: block;
        content: "";
        background: #ffffff;
        width: calc(1vw / var(--tablet));
        height: calc(24vw / var(--tablet));
        top: 50%;
        right: calc((-75vw / var(--tablet)) / 2);
        transform: translateY(-50%);
	}
	
    footer .link li:last-child::after {
        display: none;
    }
	
	footer .link li a {
		color: #ffffff;
		font-size: calc(16vw / var(--tablet));
		line-height: 1em;
		font-weight: 400;
		text-decoration: underline;
	}
	
	footer .copyright {
		color: #ffffff;
		font-size: calc(10vw / var(--tablet));
		line-height: 1em;
		font-weight: 400;
        text-align: center;
	}
}

@media screen and (max-width: 767px){
	footer {
		position: relative;
		background: #0080cb;
		width: 100%;
		padding: calc(40vw / var(--sp)) 0 calc(30vw / var(--sp) + (220vw / 7.5));
		margin: 0 auto;
	}
    
    footer .search {
        display: block;
        box-sizing: border-box;
        align-content: center;
        background: transparent;
		color: #ffffff;
		font-size: calc(18vw / var(--sp));
		line-height: 1em;
		font-weight: 400;
        text-align: center;
        text-decoration: none;
        width: calc(200vw / var(--sp));
        height: calc(50vw / var(--sp));
        border: calc(1vw / var(--sp)) solid #ffffff;
        border-radius: calc(6vw / var(--sp));
        margin: 0 auto calc(40vw / var(--sp));
    }
	
	footer h2 {
		width: calc(236vw / var(--sp));
        height: calc(22vw / var(--sp));
		margin: 0 auto calc(40vw / var(--sp));
	}
	
    footer h2 img {
        width: 100%;
        height: 100%;
    }
	
	footer .link {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: calc(30vw / var(--sp)) 0;
        margin: 0 auto calc(60vw / var(--sp));
	}
	
	footer .link li {
        position: relative;
        display: inherit;
        margin: 0 auto;
		list-style-type: none;
	}
	
	footer .link li::after {
        position: absolute;
        display: block;
        content: "";
        background: #ffffff;
        width: calc(190vw / var(--sp));
        height: calc(1vw / var(--sp));
        bottom: calc((-30vw / var(--sp)) / 2);
        left: 50%;
        transform: translateX(-50%);
	}
	
    footer .link li:last-child::after {
        display: none;
    }
	
	footer .link li a {
		color: #ffffff;
		font-size: calc(12vw / var(--sp));
		line-height: 1em;
		font-weight: 400;
		text-decoration: none;
	}
	
	footer .copyright {
		color: #ffffff;
		font-size: calc(10vw / var(--sp));
		line-height: 1em;
		font-weight: 400;
        text-align: center;
	}
}