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

/* Ci support
-----------------------------------------------------*/

/* ==============================================
    main-visual
============================================== */
#main-visual {
	line-height: 0;
	margin-bottom: 80px;
	width: 100%;
	height: 70vh;
	position: relative;
	overflow: hidden;
}
#main-visual .slider {
	margin-bottom: 0;
	width: 100%;
	height: 70vh;
	position: absolute;
}

#slider-top {
	z-index: 1;
}
#slider-text {
	z-index: 2;
	pointer-events: none;
}


#main-visual .slide {
	position: relative;
	width: 100%;
	height: 70vh;
}
#main-visual strong,
#main-visual figure {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
}
#main-visual strong img,
#main-visual figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 1030px) {
	#main-visual,
	#main-visual .slider,
	#main-visual .slide {
		height: 46vh;
	}
}

@media screen and (max-width: 700px) {
	#main-visual,
	#main-visual .slider,
	#main-visual .slide {
		height: 75vh;
	}
}

/* ==============================================
    main-concept
============================================== */

#main-concept ul {
	display: flex;
	flex-wrap: wrap;
	column-gap: 25px;
}
#main-concept ul {
	max-width: 1000px;
	list-style: none;
	padding: 0;
	justify-content: center;
}
#main-concept li {
	width: 290px;
	height: 290px;
	border-radius: 50%;
	border: 1px solid #003228;
	align-items: center;
	text-align: center
}
#main-concept p {
	font-size: 1.250em;
	font-weight: 800;
	color: #003228;
	padding: 40px 0px 0px 0px;
}
#main-concept figure {
	padding: 15px;
}

@media screen and (max-width: 700px) {
	#main-concept {
		display: none;
	}
}

/* ==============================================
    section common
============================================== */
section.toppage {
	margin-bottom: 80px;
}
section.toppage h2 {
	font-size: 2.600em;
	font-weight: 800;
	color: #333;
	text-align: center;
	margin-bottom: 50px;
}
section.toppage h2 span {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: #003228;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	
}
section.toppage p {
	text-align: center;
}
@media screen and (max-width: 700px) {
	section.toppage {
		margin-bottom: 40px;
	}
	section.toppage h2 {
		font-size: 1.840em;
	}
	section.toppage p {
		text-align: left;
	}
}

/* ==============================================
    massage_area
============================================== */
#message_area {
	padding-top:150px;
}
@media screen and (max-width: 700px) {
	#message_area {
		padding-top:70px;
	}
}

/* ==============================================
    search_area
============================================== */
#search_area {
	background: #d5efdd;
	padding: 80px 0px;
	margin-bottom:0;
}

/* ==============================================
    news_area
============================================== */
#news_area {
	padding-top: 80px;
}

/* ==============================================
    products_lanking
============================================== */
#products_lanking {
	background: #f6f6f6;
	padding: 80px 0px 100px;
	margin-bottom: 0px;
}
section#products_lanking.toppage h2{
	margin-bottom:20px;
}
section#products_lanking.toppage p.read{
	margin-bottom:50px;
}

/* ==============================================
    concept
============================================== */
#concept {
	background: #ffffff;
	padding: 70px 0;
}
#concept .catchcopy {
	font-size: 1.250em;
	color: #006666;
}
#concept .entry-content h3 {
	margin-bottom: 10px;
}

/* ==============================================
    pickup_banner_area
============================================== */
#pickup_banner_area {
	text-align: center;
}

#pickup_banner_area .intro {
	text-align: left;
	margin-bottom: 30px;
}
#pickup_banner_area .intro h3 {
	font-size: 1.625em;
	color: #006666;
	margin-bottom: 10px;
}


#pickup_banner_area ul {
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#pickup_banner_area li {
	width: 23%;
	margin: 10px 1%;
}

@media screen and (max-width: 700px) {
	#pickup_banner_area li {
		width: 90%;
		margin: 10px auto;
	}
}

/* ==============================================
    products_area
============================================== */
#products_area {}
#products_area section {
	margin-bottom: 30px;
}
@media screen and (max-width: 700px) {
	#products_area section h2 {
		padding: 20px 0;
	}
}

/* ==============================================
    products_movie
============================================== */
#products_movie ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	list-style: none;
}
#products_movie li {
	width: 30%;
	margin: 20px 0;
}
#products_movie li a {
	display: inline-block;
	position: relative;
	font-size: 1.2em;
	font-weight: bold;
    color: #3c3c3c;
}
#products_movie li a::before {
	content: "";
	display: block;
	background: url("image/btn_start.svg") no-repeat 0 0 / contain;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
}
#products_movie li.mem_login a::before {
	background: url("image/icon_lock_g.svg") no-repeat 0 0 / contain;	
}
#products_movie li p {
	margin-top: 0.6em;
	padding: 0 5px;
}
#products_movie li p span {
	color: #b3b3b3;
	font-size: 0.9em;
	font-weight: bold;
}
@media screen and (max-width: 700px) {
	#products_movie ul {
		display: block;
	}
	#products_movie li {
		width: 70%;
		margin: 0 auto 30px;
	}
	
}