@charset "UTF-8";

.img-pc{display:block;}
.img-sp{display:none;}

@media screen and (max-width:768px){
	.img-pc{display:none;}
	.img-sp{;display:block;}
}


/* # =================================================================
   # 共通タイトル
   # ================================================================= */
.main-title{
	font-size:18px;
	line-height:170%;
	font-weight:600;
	margin-bottom:100px;
	letter-spacing: 5px;
	text-align:left;
	color:var(--color-bk);
	position: relative;
}

.main-title:before {
  content: '';
  position: absolute;
  bottom: -25px;
  display: inline-block;
  width: 40px;
  height: 1px;
  left: 0;
  background-color:var(--color-blue1);
  border-radius: 2px;
}

.main-txt{
	font-size:14px;
	line-height:220%;
	text-align:left;
	margin:0 auto;
}

.main-txt span{
	display:block;
	font-family: 'Noto Serif JP', sans-serif;
	font-size:30px;
	line-height:150%;
	font-weight:400;
	text-align: left;
	padding-bottom:25px;
}

.main-txt-en{
	font-family: 'Cormorant Garamond', serif;
	font-size:14px;
	line-height:220%;
	text-align:left;
	padding-bottom:20px;
}



.txt-change{
	text-align:center;
}


@media screen and (max-width:599px){
	.main-title{font-size:20px;letter-spacing: 3px;}
	.txt-change{text-align:left;}
	.main-txt{font-size:14px;}
}


/* # =================================================================
   # 画像
   # ================================================================= */
.img-box {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.img-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
}


/* # =================================================================
   # parallax
   # ================================================================= */
   
.cd-fixed-bg {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.cd-fixed-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 15vw);
    object-fit: cover;
    display: block;
}

@media screen and (max-width: 768px) {
    .cd-fixed-bg {
        height: 250px;
    }
}



/* # =================================================================
   # fv
   # ================================================================= */

#fvbg{
	position: relative;
	overflow: hidden;
	width:100%;
	height: 98vh;
}

.fv-bg-cont{
	z-index:-1;
}

.fv-img{
	overflow:hidden;
}

.fv-img img{
	object-fit: cover;
	width: 100%;
	height: 100vh;
}

.fadeInImg{
	animation-name:fadeInImgAnime;
	animation-duration:8s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeInImgAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.fv-bg-img{
	position: absolute;
	z-index:10;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width:90%;
}

.fv-bg-img-en{
	font-family: 'Cormorant Garamond', serif;
	font-weight:400;
	font-size:90px;
	line-height:120%;
	color:var(--color-gray1);
	text-align:left;
	text-transform:uppercase;
}


.fv-bg-img-maintxt{
	font-family: 'Noto Serif JP', sans-serif;
	font-size:30px;
	font-weight:400;
	color:var(--color-gray1);
	letter-spacing:10px;
	text-align:left;
	padding:30px 0;
}

.fv-bg-img-txt{
	font-size:14px;
	line-height:200%;
	font-weight:400;
	color:var(--color-gray1);
	text-align:left;
}

@media screen and (max-width: 768px) {
#fvbg{position:static;overflow: auto;height: auto;}
.fv-bg-img{
	position: static;
	z-index:10;
	top: 0;
    left: 0;
    transform: translate(0, 0);
	width:90%;
	margin:0 auto;
	padding:100px 0 50px 0;
}
.fv-img{overflow: auto;}
.fv-img img{object-fit: contain;width: 100%;height:auto;}
.fv-bg-img-en{font-size:60px;}
.fv-bg-img-maintxt{font-size:25px;}
}

@media screen and (max-width: 599px) {
.fv-bg-img-maintxt{font-size:22px;}
}



/* # =================================================================
   # 説明
   # ================================================================= */
.setumei-top-block{padding-top:100px;}

.setumei-top-flex{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.setumei-top-flex-item{width:40%;text-align:right;}
.setumei-top-flex-item-main{width:60%;}

.setumei-top-flex-item img{
	object-fit: cover;
	width: auto;
	height:100%;
}

.setumei-txt-box{padding:0 100px;}

.setumei-en{
	font-family: 'Cormorant Garamond', serif;
	font-weight:400;
	text-align:left;
	font-size:40px;
	text-align:left;
	padding:50px 100px;
	color:var(--color-gray1);
	border-top:solid 1px var(--color-gray3);
	border-bottom:solid 1px var(--color-gray3);
	text-transform:uppercase;
	position: relative;
}

.setumei-en:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px var(--color-blue1);
  bottom: -3px;
  width: 10%;
}

.setumei-h2{
	font-family: 'Noto Serif JP', sans-serif;
	font-size:25px;
	line-height:200%;
	font-weight:400;
	text-align: left;
	padding:50px 0;
}

.setumei-txt{
	font-size:14px;
	line-height:220%;
	text-align:left;
}


@media screen and (max-width:768px){
.setumei-top-block{padding-top:1px;}
	.setumei-top-flex-item{width:100%;margin:0 auto;}
	.setumei-top-flex-item-main{width:90%;margin:0 auto;}
	.setumei-top-flex-item img{width:100%;height:300px;}
	.setumei-txt-box{padding:0;}
	.setumei-en{font-size:30px;padding:50px 0;}
	.setumei-h2{font-size:25px;}
}


/* # =================================================================
   # 特徴
   # ================================================================= */

.about-flex{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

.about-flex-item1{width:50%;}
.about-flex-item2{width:45%;}
.about-flex-item1 img{width:100%;}
.about-flex-item1, .about-flex-item2{padding-bottom:80px;}




@media screen and (max-width:768px){
.about-flex-item1{width:100%;padding-bottom:50px;margin:0 auto;}
.about-flex-item2{width:100%;padding-bottom:50px;}
.about-img{padding-bottom:100px;}
.about-flex-txt{padding:0 0 50px 0;}
.about-order1{order:1;}
.about-order2{order:2;}
.about-order3{order:3;}
.about-order4{order:4;}
.about-order5{order:5;}
.about-order6{order:6;}
.about-order7{order:7;}
.about-order8{order:8;}
}

/* # =================================================================
   # 博士
   # ================================================================= */
 
.hakae-bg{
	background: rgb(45,77,142);
	background: linear-gradient(90deg, rgba(45,77,142,1) 0%, rgba(0,212,255,1) 100%);
}

.hakae-flex{
	display:flex;
	flex-wrap: wrap;
	width:70%;
	margin:0 auto;
}

.hakae-flex-item-L{
	width:180px;
}

.hakae-flex-item-L img{
	width:100%;
}

.hakae-flex-item-R{
	flex:1;
	padding-left:30px;
}

.hakae-title{
	font-family: 'Noto Serif JP', sans-serif;
	font-size:28px;
	line-height:180%;
	font-weight:600;
	text-align: center;
	padding-bottom:40px;
}

.hakae-txt{
	font-size:14px;
	line-height:220%;
	text-align:left;
	margin:0 auto;
}


@media screen and (max-width:768px){
	.hakae-flex{width:80%;}
	.hakae-flex-item-L{width:150px;}
}

@media screen and (max-width:599px){
	.hakae-flex{width:90%;}
	.hakae-flex-item-L{width:100%;}
	.hakae-flex-item-R{width:100%;}
	.hakae-flex-item-L img{width:150px;padding-bottom:30px;}
}

/* # =================================================================
   # 商品
   # ================================================================= */

.shohin-bg{
	background-color:var(--color-gray4);
	border-top:solid 1px var(--color-gray3);
}


.item-box{
	height: 100%;
}

.shohin-img{
	padding:40px 20px;
	margin-bottom:15px;
	background-color:var(--color-white);
	border-radius:10px;
	position: relative;
}

.shohin-img img{
	height:120px;
}

.mark-3set{
	width:50px;
	height:50px;
	position: absolute;
	display:block;
	background-image: url(../img/mark_3set.svg);
	background-size: 50px 50px;
	top:10px;
	left:10px;
}

.mark-2set{
	width:50px;
	height:50px;
	position: absolute;
	display:block;
	background-image: url(../img/mark_2set.svg);
	background-size: 50px 50px;
	top:10px;
	left:10px;
}

.shohin-cat{text-align:left;padding-top:15px;}

.shohin-cat-box{
	display:inline-block;
	font-size:14px;
	color:var(--color-white);
	padding:3px 5px;
	border-radius:5px;
}

.shohin-cat1{background-color:#49BBBC;}
.shohin-cat2{background-color:#15AE67;}
.shohin-cat3{background-color:#00B4ED;}
.shohin-cat4{background-color:#AF9B53;}


.shohin-name{
	color:var(--color-blue1);
	font-size:16px;
	font-weight:700;
	padding:15px 0;
	text-align:left;
}

.shohin-txt{
	color:var(--color-gray1);
	font-size:14px;
	line-height:180%;
	text-align:left;
}

.shohin-btn-box{
	margin-top: auto;
}


.shohin-btn {
	display:block;
	font-size:14px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding:10px;
	background-color:var(--color-blue1);
	color: var(--color-white);
	transition: all .5s;
	text-decoration:none;
	line-height:150%;
	margin-top: 10px;
	border-radius:10px;
}


.shohin-btn:hover{
	background-color:var(--color-green);
	color: var(--color-white) !important;
	text-decoration:none;
	cursor: pointer;
}




@media screen and (max-width:768px){
	.shohin-flex-item{width:47%;}
	.shohin-img img{height:100px;}
}

@media screen and (max-width:599px){
	.shohin-flex-item{padding-bottom:50px;}
	.shohin-cat-box{font-size:12px;}
	.shohin-name{font-size:14px;}
	.shohin-txt{font-size:12px;}
}

/* # =================================================================
   # 会社概要
   # ================================================================= */


.company a{color:var(--color-blue1);}
.company table{width:100%;border-collapse:collapse;}
.company th,.company td{text-align:left;padding:19px 18px;border-bottom:1px solid #dae4eb;font-size:15px;vertical-align:top}
.company th{width:210px;color:var(--navy);background:#f6f9fb}

@media screen and (max-width:599px){
.company th,.company td{display:block;width:100%;padding:10px 14px}
.company td{padding-bottom:19px}
}


/* # =================================================================
   # よくある質問
   # ================================================================= */



.faq-catch-txt{
	font-size: 18px;
	text-align: left;
	font-weight: 700;
	margin-bottom:20px;
}

.faq-block {
	padding-bottom: 5px;
	margin-bottom: 5px;
}

/* 質問 */
#faq .quest {
	text-indent: -1.9em;
	padding-left: 1.5em;
	padding-right: 40px;
	padding-bottom: 10px;
	padding-top: 10px;
	font-size: 16px;
	line-height: 150%;
	text-align: left;
	font-weight: 700;
}


/* Q */
#faq .quest span {
	font-size: 25px;
	font-weight: 700;
	color: var(--color-blue1);
	margin-right: 0.5em;
}


/* 回答 */
#faq .answer {
	font-size: 16px;
	text-align: left;
	padding: 25px 10px;
	line-height: 180%;
}


#faq .answer span {
	font-weight: 700;
	color: var(--color-blue1);
}


#faq .answer a {
	color: var(--color-blue1);
}

#faq .answer-ul{list-style-type:disc;padding:10px 0;}
#faq .answer-ul li{margin-left:20px;line-height:1.5;}

/* =========================================================
   FAQ アコーディオン
========================================================= */


/* checkbox */
.table__list-check {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}


/* 質問エリア */
.table__list-label {
	width: 100%;
	display: block;
	padding: 10px 20px;
	position: relative;
	cursor: pointer;
	border-radius: 1em;
	background-color: #eceef6;
}


/* =========================================================
   矢印 → ×
========================================================= */

.table__list-label::before,
.table__list-label::after {
	content: "";
	position: absolute;
	top: 50%;

	width: 10px;
	height: 1px;

	background-color: var(--color-gray1);

	transform-origin: center;

	transition:
		transform .35s ease,
		right .35s ease;
}


/* ▼ 左側 */
.table__list-label::before {
	right: 26px;
	transform: translateY(-50%) rotate(45deg);
}


/* ▼ 右側 */
.table__list-label::after {
	right: 19px;
	transform: translateY(-50%) rotate(-45deg);
}


/* =========================================================
   開いた状態
   ▼ → ×
========================================================= */

.table__list-label:has(.table__list-check:checked)::before {
	right: 22px;
	transform: translateY(-50%) rotate(45deg);
}


.table__list-label:has(.table__list-check:checked)::after {
	right: 22px;
	transform: translateY(-50%) rotate(-45deg);
}


/* =========================================================
   回答部分
   0 → 自動高さで滑らかに開閉
========================================================= */

.table__list-content {
	display: grid;
	grid-template-rows: 0fr;

	opacity: 0;

	transition:
		grid-template-rows .45s ease,
		opacity .35s ease;
}


/* 中身 */
.table__list-inner {
	min-height: 0;
	overflow: hidden;
}


/* 開いた状態 */
.table__list-label:has(.table__list-check:checked)
+ .table__list-content {

	grid-template-rows: 1fr;
	opacity: 1;
}