@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

/* ===================== ハンバーガー ===================== */
body.active {
	height: 100%;
	overflow: hidden;
}
.menulist{margin:0 200px 150px 0;text-align:left;font-size: 20px;}
.listdown{
	background: url(/common/images/common/icon1.svg) no-repeat right 100px top 3px;
	background-size: 7px;transition: all 0.3s ease-in-out !important;
}
.listdown:hover{
	background: url(/common/images/common/icon8.svg) no-repeat right 100px top 10px;
	background-size: 14px;
}
.drawer_hidden {
	display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 100;
	cursor: pointer;
	right: 80px;
	top: 12px;
	width: 35px;
	height: 35px;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
	content: '';
	display: block;
	height: 2px;
	width: 28px;
	border-radius: 3px;
	background: #4B4B4B;
	transition: 0.3s;
	position: absolute;
	z-index: 999;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
	bottom: 9px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
	top: 9px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
	background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
	bottom: 0;
	transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
	top: 0;
	transform: rotate(-45deg);
}

/* メニューのデザイン*/
.nav_content {
	width: 100%;
	height: 100%;
	position: fixed;
	bottom:5000%;
	left: 0%; /* メニューを画面の外に飛ばす */
	z-index: 99;
	background: rgb(255, 255, 255);
	text-align: center;
	padding-top: 20px;
}

#drawer_input:checked ~ .nav_content {
	bottom: 0;/* メニューを画面に入れる */
	overflow: auto;
}

/* ===================== index 202307 ===================== */
body {
	-webkit-tap-highlight-color: transparent;
	overflow-x: hidden;
}

body,p.txt{
	font-family: 'Noto Serif JP',source-han-serif-japanese, serif;
	font-style: normal;
	font-weight: 200;
	font-weight: 500;
	color: #4B4B4B;
}

.hym{opacity:0;}
.link img{width: 30vw;max-width: 300px;}



@media print, screen and (min-width: 769px) and (max-width:1180px) {
	body.top {width:100vw;}
}

@media only screen and (min-width:1000px) {
	#lineup.non_landscape_mobile{max-width: 1400px;width: 100%;padding: 100px 20px;margin: 0 auto;height: 950px;}
	.non_landscape_mobile .series1{float: left;border-right: 1.5px solid #C8C8C8;height: 950px;width: 50%;}
	.non_landscape_mobile .series1 img{margin: 7% 5% 11% -5%;width: 100%;}
	.non_landscape_mobile .link-list{position: relative;right: 0;margin: 0 auto;bottom: -30px;}
	.non_landscape_mobile .series2{float: left;width: 49%;height: 950px;}
	.non_landscape_mobile #series2_title{left: 10%;position: relative;height: 220px;}
	.non_landscape_mobile .series2 img{margin: 0 0 12% 15%;width: 68%;}
	ul.between{max-width: 1400px;text-align: center;margin: 0 auto;}
	.link img {width: 25vw;max-width: 400px;}
	#special_body{margin: 9vw auto;max-width: 1400px;padding: 0 20px;}
}
@media only screen and (max-width:999px) {
	.series-body {position: relative; width: 100%; min-height: 350px; margin: 0 auto; padding: 30px 0; box-sizing: border-box;}
	#lineup.non_landscape_mobile{width:1000px;margin:100px auto;}
	.non_landscape_mobile .series1{float: left;border-right: 1.5px solid #C8C8C8;height: 750px;}
	.non_landscape_mobile .series1 img{margin: 50px 20px 80px -20px;width: 500px;}
	.non_landscape_mobile #series2_title{left: 90px;position: relative;height: 220px;}
	.non_landscape_mobile .series2 img{margin: -50px 0 80px 90px;width: 400px;}
	ul.between{max-width: 1000px;text-align: center;}
}
@media only screen and (min-width: 769px) and (max-width:999px) {
	#special_body{margin: 60px 20px;}
}
@media print, screen and (min-width: 1064px) {
  #menulist02 li a{padding: 0 4vw 10px 0;}
}
@media print, screen and (min-width: 769px) {
	ul#menulist02 {max-width: 1416px;margin: 0 auto;width: 98.5%;white-space:nowrap;}
	#menulist02 li a{padding: 0 2vw 10px 0;}
	.between{display:flex;justify-content: space-between;}
	#landscape{display:none;}
	.movie_box,#movie_message2{margin: 50px 0;}
	#movie p{font-size: 22px;text-align: center;margin-top: 20px;letter-spacing: 0.05em;}
	#special_body li {margin: 0;}

	#special_body ul {
		display: flex;
		justify-content: flex-start;
		margin: 0 auto;
		gap: 124px;
	}
	.sticky {
		position: sticky;
		top: -1px;
		z-index: 10;
		width: 100%;
		margin: 0;
		padding: 0px;
		background: #fff;
		color: #fff;
	}
	.link-list {
		position: absolute;
		right: 90px;
		bottom: 0px;
		width: 390px;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		border: solid 1px #C8C8C8;
		background: url(/common/images/common/icon1.svg) no-repeat right 40px center;
		background-size: 7px;
		z-index: 20;
		border-radius: 5px;
		transition: all 0.3s ease-in-out;
	}
	.link-list:hover {
		background: url(/common/images/common/icon1.svg) no-repeat right 20px center;
		background-size: 7px;
	}
	sup{font-size:11px;padding-right: 6px;}
	#footer_precautions {
		background: url(/common/images/common/icon1.svg) no-repeat right 40px center;
		background-size: 7px;
		transition: all 0.3s ease-in-out;
	}
	#footer_precautions:hover {
		background: url(/common/images/common/icon1.svg) no-repeat right 20px center;
		background-size: 7px;
	}
	.bn_area.pc_only{width:100%;min-width:1000px;max-width:1400px;padding: 80px 20px 100px 20px;margin: 0 auto;}
}

@media print, screen and (max-width: 768px) {
	sup{font-size:7px;padding-right: 4px;}
	.link img{width: 60vw;min-width:300px;}
	.sub-menu {display: block;}
	.menu_l1{margin-top: -15px;}
	.movie_sp{text-align: center;margin: 20px 0 30px 0;letter-spacing: 0.05em;}
	.sp_mode{display:block;}
	#shop select {opacity: 0;width: 196px;}
	#special_body li {margin: 0 auto 30px;}
	#movie p{font-size: 16px;}
	#movie img{width: 90%;}
	#concept #concept_body_sp ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		text-align: center;
	}
	#concept #concept_body_sp li {
		display: inline-block;
		vertical-align: middle;
		width: 160px;
		height: 160px;
		margin: 10px 10px;
		font-size: 14px;
		line-height: 1.6em;
		transition: background-color .15s linear;
		-webkit-transition: background-color .15s linear;
		-moz-transition: background-color .15s linear;
		-ms-transition: background-color .15s linear;
	}
	.link-list {
		position: relative;
		left: 0;
		bottom: 2rem;
		width: 30rem;
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 11px;
		border: solid 1px #C8C8C8;
		background: url(/common/images/common/icon1.svg) no-repeat right 40px center;
		background-size: 7px;
		z-index: 20;
		border-radius: 5px;
	}
	.link-list:hover {
		background: url(/common/images/common/icon1.svg) no-repeat right 20px center;
		background-size: 7px;
	}
}

/*アコーディオン全体*/
.menu00 input {display: none; /*チェックボックスを隠す*/}

/*バー部分*/
.menu00 label,.menu00 div.label {
	cursor :pointer;
	display: block;
	text-decoration: none;
	color: #4B4B4B;
	line-height: 1;
	position: relative;
	margin: 0 0 0 20px;
	padding: 10px 0 2px 10px;
	background-color: #fff;
	font-size: 16px;
	height: 30px;
}

/*開いたときに表示される部分*/
.menu00 ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: 1px;
}
.menu00 li {
	height: 0;
	overflow-y: hidden;
}
#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li,
#menu_bar04:checked ~ #links04 li {
	height: auto; /*開いたときに表示されるliの高さ*/
	opacity: 1;
	background: #fff;
	padding: 10px;
}

#menu_bar01:checked ~ #links01 li:last-child,
#menu_bar02:checked ~ #links02 li:last-child,
#menu_bar03:checked ~ #links03 li:last-child,
#menu_bar04:checked ~ #links04 li:last-child {
	margin-bottom: 50px;
}
#menu_bar11:checked ~ #links11 li,
#menu_bar12:checked ~ #links12 li,
#menu_bar13:checked ~ #links13 li,
#menu_bar14:checked ~ #links14 li {
	height: auto; /*開いたときに表示されるliの高さ*/
	opacity: 1;
	background: #fff;
	padding: 10px 0px;
}

#menu_bar11:checked ~ #links11 li:last-child,
#menu_bar12:checked ~ #links12 li:last-child,
#menu_bar13:checked ~ #links13 li:last-child,
#menu_bar14:checked ~ #links14 li:last-child {
	margin-bottom: 50px;
}

/*閉じた状態の矢印描画*/
.menu00 label:after{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top: #C8C8C8 2px solid;
	border-right: #C8C8C8 2px solid;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	position:relative;
	right: 2%;
	top: -15px;
	bottom: 15%;
	margin: auto;
}
/*開いた状態の矢印描画*/
.menu00 input[type=checkbox]:checked + label:after{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top: #C8C8C8 2px solid;
	border-right: #C8C8C8 2px solid;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	position:relative;
	right: 2%;
	top: -15px;
	bottom: 0;
	margin: auto;
}
#sm002{margin: 13.5% 0 0 20%;}

@media only screen and (orientation : landscape) and (max-width:1399px){
	.bn_area.pc_only{min-width: auto;max-width: none;}
	img.s1{display:none;}
	#sato-logo img{width:90%;}
}

@media only screen and (orientation : landscape) and  (min-width: 667px) and (max-width:768px) {
	#gNav{margin-top: -35% !important;}
	.menu_l1,.menu_l2,.menu_l3 {float:left;}
	.menu_l1{margin-left: 20px;margin-right: -100px;width: 320px}
	.menu_l2{width: 210px;margin-top:-15px;}
	.menu_l3{margin-top:-20px;}
	.menu_l3 img{width: 150px !important;}
	.menu_l3 a{height: 60px !important;margin: 0 !important;padding: 0 !important;}
	.menu_l3 li{height: 200px !important;}
	.link-list{width: 60rem;}
	#sm002{margin: 11% 0 3% 20%;}
	header nav{padding: 22rem 0 0;height: 200% !important;}
	.mobileview{width: 80% !important;margin: 0 auto !important;}
	#label04{width:250px;}
}


@media only screen and  (min-width: 769px) and (max-width:920px) {
	body.top {width: 100vw;}
	#landscape{display: flex; }
	#gNav .sub-menu {display: flex;flex-direction: column;}
	.menu-l0{margin-left: 20px;width: 250px;margin-top: -40px;}
	#sato-logo img{width:90%;}
}

@media only screen and (orientation: landscape) and  (min-width: 769px) and (max-width:920px) {
	body.top {width: 100vw;}
	#landscape{display: flex; }
	#gNav .sub-menu {display: flex;flex-direction: column;}
	.menu-l0{margin-left: 20px;width: 250px;margin-top: -40px;}
	.pc_nav{display:none;}
	#sm002{margin: 10% 55% 0 0;}
	.active #gNav {margin-top: -3% !important; height:0 !important;}
	.menu_l1,.menu_l2,.menu_l3 {float:left;text-align:left;}
	.menu_l1{margin-left: -231px;margin-right: -100px;width: 320px}
	.menu_l2{width: 230px;}
	.menu_l3 img{width: 150px !important;}
	.menu_l3 a{height: 70px !important;margin: 0 !important;padding: 0 !important;}
	.menu_l3 li{height: 200px !important;}
	.menu_l3 ul{margin: 7px 0 0 0 !important;}
	.active #gNav .sub-menu{position: static;}
	.active #gNav li{width: 250px;}
	.active .sub-menu li{left: 30px !important;}
}

@media only screen and (min-width: 769px) and (max-width:999px) {
	.non_landscape_mobile{display:none;}
	.landscape_mobile{display:block;}
	.link-list{right: 7%;width: 350px;}
}
@media only screen and (min-width: 1000px){
	.non_landscape_mobile{display:block;}
	.landscape_mobile{display:none;}
}

@media only screen and (min-width:916px) and (max-width:1049px) {
	.fortab{top: -30px !important;left: 170px !important;}
}

@media only screen and (min-width:916px) {
	.forpc{display:initial;}
	.formobile{display:none;}
}

@media only screen and (max-width:915px) {
	.forpc{display:none;}
	.formobile{display:block;color: #484848;}
}

@media only screen and (min-width:1415px) {
	#title_menu1{
		width:130px;
		padding-top: 14px;
		padding-left: clamp(0px, calc(18px - 1vw), 18px);
		}
}

@media only screen and (max-width:1414px) {
	#title_menu1{width:130px;padding: 14px 0 0 18px;}
}
@media only screen and (min-width:901px) {
	#title_menu2{font-size: 17px;letter-spacing: 0.03em;position: relative;top: 23px;left: 20px;color: #484848;}
}

@media only screen and (max-width:900px) {
	#title_menu2{
		font-size: 17px;
		position: relative;
		top: 10px;
		left: 20px;
		width: 220px;
		color: #484848;
		display: block;
		line-height: 1.3;
	}
}




/* ===================== index 202307 animation===================== */
.fade {
	transition: all 2000ms;
	opacity: 0;
	visibility: hidden;
	transform: translate(0px, 50px);
}
.fadein {
	opacity: 1;
	visibility: visible;
	transform: translate(0px, 0px);
} 

.scroll_right {
	-webkit-transition: 0.8s ease-in-out;
	-moz-transition: 0.8s ease-in-out;
	-o-transition: 0.8s ease-in-out;
	transition: 0.8s ease-in-out;
	transform: translateX(100px);
	opacity: 0;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
}
.scroll_right.on {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
}
.name {
	opacity:0;
	animation-name:anime;
	animation-duration:1s; 
	animation-delay:1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes anime {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	} 
}

#icon1{
	display: block;
	margin-top: 65%;
	height: 50%;
	margin-right: 0px;
	transition: all 0.3s ease-in-out;
}
#icon1:hover, #icon1_link:hover + #icon1{margin-right: -20%;}
.square{
	position: relative;
	height: 28.5px; 
	border-radius: 3%; 
	margin: 1px 0 0 0;
	float: left;
	background: url(/common/images/common/icon1.svg) no-repeat right 40px  bottom 9px;
	background-size: 6px;
	transition: all 0.3s ease-in-out;
}

.square:hover{
	background: url(/common/images/common/icon1.svg) no-repeat right 20px  bottom 9px;;
	background-size: 6px;
}
.square-inner{
	float: left;
	margin: 3px 10px;
	letter-spacing: 0.05em;
}

.circle {
	position: relative;
	width: 150px;
	height: 150px; 
	background-color: white;
	border-radius: 50%; 
	margin: 0x;
	text-align: center;
}
.circle-inner {
	 position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 200px;
	letter-spacing: 0.05em;
}

select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

/* 最新のsafari用 */
_::-webkit-full-page-media, _:future, :root #icon1 {
	display: block;
	position: relative;
	top: 65%;
}
/* 古いsafari用 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, #icon1 {
	display: block;
	position: relative;
	top: 65%;
	}
}

@media only screen and (min-width:1401px) {
	#shop select {
    		opacity: 0;
    		width: 280px;
    		height: 50px;
    		margin-bottom: -5px;
	}
}

@media only screen and (min-width:1201px)  and (max-width:1400px) {
	#shop select {
		opacity: 0;
		width: 18vw;
		height: 4vw;
		margin-bottom: -10px;
	}
}

@media only screen and (max-width:1200px) {
	#shop select {
		opacity: 0;
		width: 196px;
		height: 40px;
		margin-bottom: -10px;
	}
}


/*==================================================
スライダーのためのcss
===================================*/
.slider-PC {
	margin: 30px auto 0;
	max-width: 1400px;
	width:100%;
}
.slider-PC .slick-list {
	margin: 0 0 0 0;
}

.slider-PC .slick-img img {
	height: auto;
	width: 85%;
	margin: 0;
}
.slider-PC .next-arrow {
	bottom: 0;
	cursor: pointer;
	margin: auto;
	position: absolute;
	top: 0;
	width: 40px;
	right: 10px;
}

.slider-PC .prev-arrow{
	bottom: 0;
	cursor: pointer;
	margin: auto;
	position: absolute;
	top: 0;
	width: 40px;
	left: 10px;
}

.slider-PC .slide-dots li {
    margin: 0 -5px;
}

.sp .slider {
	margin: 30px auto 0;
	width: 70%;
}
.sp .slick-img img {
	height: auto;
	width: 100%;
}
.sp .slick-dots {
	bottom: -30px;
}
.sp .next-arrow {
	bottom: 0;
	cursor: pointer;
	margin: auto;
	position: absolute;
	top: 0;
	width: 30px;
	right: -40px;
}
.sp .prev-arrow{
	bottom: 0;
	cursor: pointer;
	margin: auto;
	position: absolute;
	top: 0;
	width: 30px;
	left: -40px;
} 
.sp .slick-dots li button:before {
	background-color: #d3d3d3;
}
.sp .slick-dots li.slick-active button:before {
    opacity: 1;
	background-color: #DB4252;
}
.slider-PC .slide-dots li button::before {
	background-color: #d3d3d3;
	top:20px;
}
.slider-PC .slide-dots li.slick-active button:before {
	opacity: 1;
	background-color: #DB4252;
	top:20px;
}
.sp .slide-dots li button::before{
	background-color: #d3d3d3;
	top:0;
	bottom: -15px;
}
.sp .slide-dots li.slick-active button::before {
	background-color: #DB4252;
}

.slider-PC .slide-dots li button::before {
    top: 20px;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background-color: #DB4252;
    border: 1px solid #DB4252;
    border-radius: 50%;
    margin: 0;
    cursor: pointer;
    transition: background-color .5s ease;
}

.slider-PC .slide-dots li.slick-active button:before {
    opacity: 1;
    top: 20px;
    width: 8px;
    height: 8px;
    background-color: #d3d3d3;
    border: 1px solid #d3d3d3;
    border-radius: 50%;
   margin: 0;
    cursor: pointer;
    transition: background-color .5s ease;
}

.sp .slide-dots li button::before{
    top: 20px;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    background-color: #DB4252;
    border: 1px solid #DB4252;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .5s ease;
}

.sp .slide-dots li.slick-active button::before {
    opacity: 1;
    top: 20px;
    width: 6px;
    height: 6px;
    background-color: #d3d3d3;
    border: 1px solid #d3d3d3;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .5s ease;
}

.sp button {
    background: none;
    border: none;
    outline: none;
    padding: 0 12px;
}

.top {
    opacity: 0;
    animation: fade cubic-bezier(.215, .61, .355, 1) 1s forwards;
}

#index_contents0 {
    opacity: 0;
    animation: fade cubic-bezier(.215, .61, .355, 1) 10s forwards;
    animation-delay: 10s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}