@charset "utf-8";

/*
==============
base.css
==============
*/

/* -----------------
■ デフォルトリセット
------------------- */
html,
body {
	margin: 0;
	padding: 0;
	font-size: 100%; }


h1,
h2,
h3,
h4,
p {
	margin: 0;
	font-size: 100%; }

ul,
li {
	margin: 0;
	padding: 0;
	list-style-type: none; }

body {
	min-height: 0; }


/* -----------------
■ フォント
------------------- */
.wrapper {
	font-family: UDShinGoPr, "UD新ゴ Pr", sans-serif;
	-webkit-text-size-adjust: 100%; }


/* -----------------
■ 全体
------------------- */
:root {
	--scrollbar: 0; }

a {
	transition: opacity .4s; }

a:hover {
	opacity: .6; }

img {
	max-width: 100%;
	vertical-align: middle; }

.js-fadein {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s, transform 0.6s; }

.js-fadein.is-view {
	opacity: 1;
  transform: translateY(0); }

html.is-modal {
	overflow: hidden;
	margin-right: var(--scrollbar); }


/* -----------------
■ ヘッダー
------------------- */
.header {
	display: flex;
	position: sticky;
	top: 0;
	padding: 24px 80px 20px;
	background-color: #fff;
	z-index: 99; }

.header h1 {
	margin-right: 49px; }

@media print, screen and (min-width: 769px)
{
	.gnav {
		display: block!important; }
}

.gnav ul {
	display: flex; }

.gnav li {
	margin-right: 50px;
	line-height: 0; }

.gnav li a {
	display: block;
	position: relative;
	padding: 9px 0; }

.gnav li.current a::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 0;
	width: 100%;
	height: 2px; }

.gnav li.current:nth-of-type(1) a::after,
.gnav li.current:nth-of-type(2) a::after {
	background-color: #00A29A; }

.gnav li.current:nth-of-type(3) a::after {
	background-color: #D9526D; }

.gnav li.current:nth-of-type(4) a::after {
	background-color: #03BCD7; }

.shop {
	margin-left: auto;
	cursor: pointer; }


/* -----------------
■ contents
------------------- */
.contents__head {
	text-align: center; }

.contents__head p {
	margin-top: 27px;
	color: #3E3A39;
	font-size: 18px;
	font-weight: 500;
	line-height: 2; }

.contents__title {
  max-width: 1192px;
  margin: 0 auto;
  padding: 22px 0 21px;
  text-align: center; }


/* -----------------
■ modal
------------------- */
.modal {
	display: none;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 99; }

.modal::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); }

.modal-inner {
	display: inline-block;
  position: relative;
  vertical-align: middle;
  text-align: left; }

.modal-inner2 {
	position: relative;
	width: 89.417vw;
  margin: 0 auto;
  padding: 70px 20px;
  background-color: #F3F4F4; }

.modal__close {
	position: absolute;
	top: -80px;
	right: 0;
	cursor: pointer;
	z-index: 1; }

.modal__head {
	text-align: center; }

.modal__body {
	margin-top: 75px; }

.modal__body-list {
	display: flex;
	justify-content: center;
	gap: 0 32px; }

.modal__body-text {
	margin-top: 80px;
	color: #3E3A39;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-align: center; }


/* -----------------
■ 汎用
------------------- */
.clearfix:after{
	content: ".";
	display: block; 
	clear: both; 
	height: 0; 
	font-size:0;	
	visibility:hidden; }

.spEle,
.spEleIn {
	display: none;}




/* ----------------------------------
■ SP
------------------------------------ */
@media print, screen and (max-width: 768px)
{
/* -----------------
■ 全体
------------------- */
body {
	min-height: 1px; }

img {
	width: 100%; }

.js-fadein {
  transform: translateY(8vw); }

html.is-modal {
	margin-right: 0; }

html.is-win.is-chrome {
	margin-right: 0; }

html.is-win.is-edg,
html.is-mac.is-chrome,
html.is-mac.is-firefox,
html.is-mac.is-safari {
	margin-right: 0; }


/* -----------------
■ ヘッダー
------------------- */
.header {
	display: block;
	position: sticky;
	padding: 1.2vw 0 0.935vw; }

.header h1 {
	margin-right: 0;
	text-align: center; }

.header h1 img {
	width: 30.667vw; }

.menu {
	position: absolute;
	top: 0;
	right: 0;
	width: 10.667vw;
	height: 100%;
	background-color: #00A29A; }

.menu .menu__icon {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6.4vw;
	height: 1px;
	transform: translate(-50%, -50%);
	background-color: #fff; }

.menu .menu__icon:before,
.menu .menu__icon:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 1px;
	margin-left: -3.2vw;
	background: #fff;
	transition: 0.3s; }

.menu .menu__icon:before {
	margin-top: -2.2vw; }

.menu .menu__icon:after {
	margin-top: 2vw; }

.header.is-open .menu .menu__icon {
	background: transparent; }

.header.is-open .menu .menu__icon:before,
.header.is-open .menu .menu__icon:after {
	margin-top: 0; }

.header.is-open .menu .menu__icon:before {
	transform: rotate(-45deg); }

.header.is-open .menu .menu__icon:after {
	transform: rotate(-135deg); }

.header.is-open .menu .menu__icon:before,
.header.is-open .menu .menu__icon:after {
	background-color: #fff; }


.gnav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background-color: #00A29A;
	z-index: 10; }

.gnav ul {
	display: block;
  padding: 7.5vw 0; }

.gnav li {
	margin-right: 0;
	text-align: center; }

.gnav li a {
	padding: 4.3vw 0; }

.gnav li.current a::after {
	display: none; }

.gnav li img {
	width: 42.667vw; }

.shop {
	position: absolute;
	top: 0;
	right: 10.667vw;
	width: 10.667vw; }


/* -----------------
■ contents
------------------- */
.contents__head p {
	margin-top: 6.4vw;
	font-size: 3.733vw;
	text-align: left; }

.contents__title {
	width: 89.333vw; }


/* -----------------
■ modal
------------------- */
.modal-inner2 {
	position: relative;
	width: 72.8vw;
  margin: 0 auto;
  padding: 9.6vw 0; }

.modal__close {
	top: -10.667vw;
	width: 10.667vw; }

.modal__head img {
	width: 49.6vw; }

.modal__body {
	margin-top: 9.067vw; }

.modal__body-list {
	display: block;
	width: 57.6vw;
	margin: 0 auto; }

.modal__body-list-item:nth-of-type(n+2) {
	margin-top: 4.267vw; }

.modal__body-text {
	margin-top: 12vw;
	font-size: 3.2vw; }


/* -----------------
■ SP 汎用
------------------- */
.pcEle,
.pcEleIn {
	display: none; }

.spEle {
	display: block; }

.spEleIn {
	display: inline-block; }


/* ■ SP | END------------------- */
}