@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@400;500;700&family=Kaisei+Opti&family=Kaisei+Tokumin&display=swap');
/* CSS Document */
/*
Theme Name: よいシャット
Description: よいシャット用のテンプレートです
Version: 1.0
Author: 株式会社zekka
*/

/*共通*/

body {
	font-family: "M PLUS 1p", 'Montserrat', sans-serif;
  	font-weight: normal;
  	font-style: normal;
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: 1.8px;
	color: #111111;
	width: 100%;
	background-color: #F7F5F4;
}

a {
  	color: inherit;
  	text-decoration: none;
  	word-break: break-all;
}
a[target=_blank] {
  	text-decoration: underline;
  	text-decoration-thickness: from-font;
}
@media(min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

li {
  	list-style: none;
}

img {
  	max-width: 100%;
  	height: auto;
	width: 100%;
  	user-drag: none;
  	-webkit-user-drag: none;
  	-moz-user-select: none;
}


input {
  	outline: none;
}

::-moz-placeholder {
  	color: #555;
}

::placeholder {
  	color: #555;
}

i {
  	font-style: normal;
}

button {
  	outline: none;
}

h2 {
	font-family: "Bowlby One SC", "M PLUS 1p", 'Montserrat', sans-serif;
	font-size: 3rem;
}

.content-title {
  font-family: "Kaisei Opti", serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  position: relative;
}
@media screen and (max-width: 768px) {
  .content-title, .page-title {
    font-size: 1rem;
  }
}
.content-title::before {
  	content: attr(data-title);
  	display: block;
  	margin-bottom: 0.281em;
  	font-family: "Kaisei Opti", serif;
	font-weight: bold;
  	color: #fff;
  	line-height: 0.8;
  	letter-spacing: 0.15em;
  	text-transform: uppercase;
	text-shadow: 1px 1px 3px #111;
}

.content-title {
  	margin-bottom: 1.916em;
}
.content-title::before {
  	font-size: 3rem;
}
@media screen and (max-width: 1100px) {
	.content-title::before {
		font-size: 2rem;
	}
}

.sub-page .content-title {
	margin-bottom: 0;
	text-align: center;
}

.ttl-container {
	writing-mode: sideways-rl;
	-ms-writing-mode: tb-rl;
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	letter-spacing: 2.2px;
	padding: 1.5rem;
	text-align: center;
}
.ttl-container .content-title {
	margin: 0;
}
.ttl-container .content-title::before {
	margin-bottom: 0;
	margin-left: .5rem;
}

.text-container {
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	padding: 1.5rem;
}


@media screen and (max-width: 768px) {
  	.ttl-container .content-title::before {
		margin-left: 0;
  	}
	
	.text-container {
		padding: 1.2rem .8rem 1.8rem;
	}
}

/* Loading画像中央配置　*/
#splash_logo {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  	width: 260px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
	animation-name: fadeUpAnime;
	animation-duration: 5.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  	transform: translateY(500px);
  }

  to {
    opacity: 1;
  	transform: translateY(0);
  }
}



label .menu {
  position: absolute;
  right: -100px;
  top: -100px;
  z-index: 100;
  width: 200px;
  height: 200px;
  background: #FFF;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;
  
}

/*menu*/

/* overlay-styles.css */
.hamburger-overlay {
  	position: fixed;
  	top: 20px;
  	right: 10px;
  	z-index: 998;
  	width: 70px;
  	height: 70px;
	background-color: #fff;
	border-radius: 50%;
  	border: 1.8px solid #111;
	display: flex;
  	align-items: center;
  	justify-content: center;
  	cursor: pointer;
}
.hamburger-overlay div{
	display: flex;
  	align-items: center;
  	justify-content: center;
}

.hamburger-overlay__line {
  	position: absolute;
  	width: 32px;
  	height: 3px;
  	background-color: #333;
	transition: all .6s;
}

.hamburger-overlay__line:nth-of-type(1) { top: 35%; }
.hamburger-overlay__line:nth-of-type(2) { top: 50%; }
.hamburger-overlay__line:nth-of-type(3) { top: 65%; }

.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {
  	transform: translateY(10px) rotate(-45deg);
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) {
  	opacity: 0;
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) {
  	transform: translateY(-10px) rotate(45deg);
}

.nav-overlay {
  	position: fixed;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100vh;
  	background-color: rgba(255, 174, 0, 0.95);
  	visibility: hidden;
  	opacity: 0;
  	transition: all .6s;
  	z-index: 900;
}

.nav-overlay.active {
  	visibility: visible;
  	opacity: 1;
}

.nav-overlay__content {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	width: 100%;
  	text-align: center;
}

.nav-overlay__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-overlay__item {
  opacity: 0;
  transform: translateY(20px);
  transition: all .6s;
}

.nav-overlay.active .nav-overlay__item {
  opacity: 1;
  transform: translateY(0);
}

.nav-overlay.active .nav-overlay__item:nth-child(1) { transition-delay: 0.1s; }
.nav-overlay.active .nav-overlay__item:nth-child(2) { transition-delay: 0.2s; }
.nav-overlay.active .nav-overlay__item:nth-child(3) { transition-delay: 0.3s; }
.nav-overlay.active .nav-overlay__item:nth-child(4) { transition-delay: 0.4s; }

.nav-overlay__link {
  display: inline-block;
  padding: 20px;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  transition: color .3s;
}

.nav-overlay__link:hover {
  color: #4a90e2;
}

/**/

/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #333;
  text-align: center;
  color: #fff;
}


/*ボタン*/
.btn,
.btn span {
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn {
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: 0;
    border-radius: 5px;
    border: none;
    font-size: 1em;
}
.btn::before {
    position: absolute;
    top: 7px;
    width: 100%;
    height: 100%;
    border: 1.8px solid #000;
    border-radius: inherit;
    box-sizing: inherit;
    box-shadow: 0 5px 0 0 rgba(0, 0, 0, .2);
    background-color: #cf7e00;
    content: '';
}
.btn span {
    width: 100%;
    padding: .9em 2em;
    border: 1.8px solid #333;
    border-radius: inherit;
    background-color: #ffae00;
    color: #000;
    font-weight: 600;
    line-height: 1.5;
	z-index: 1;
}
.btn span::after {
    display: inline-block;
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    content: '';
}
.btn:hover::before {
    transition: box-shadow .2s;
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, .2);
}

.btn4:hover span {
    transition: transform .2s;
    transform: translateY(2px);
}

/*背景*/
/*水色水玉*/
.dots {
	background-color: #a9dcf6;
	background-image:
    radial-gradient(#fff 10%, transparent 10%),
    radial-gradient(#fff 10%, transparent 10%);
	background-size: 40px 40px;
	background-position: 0 0, 20px 20px;
	background-repeat: repeat;
}
.dots-02 {
	background-color: #a9dcf6;
	background-image:
    radial-gradient(#fff 20%, transparent 10%),
    radial-gradient(#fff 20%, transparent 10%);
	background-size: 20px 20px;
	background-position: 10px 10px, 20px 20px;
	background-repeat: repeat;
	border: #333 solid 1.8px;
}
/*ピンクギザギザ*/
.giza {
	background-image:  linear-gradient(135deg, #ffe6f2 25%, transparent 25%), linear-gradient(225deg, #ffe6f2 25%, transparent 25%), linear-gradient(45deg, #ffe6f2 25%, transparent 25%), linear-gradient(315deg, #ffe6f2 25%, #fff8fc 25%);
  	background-position:  20px 0, 20px 0, 0 0, 0 0;
  	background-size: 40px 40px;
  	background-repeat: repeat;
	border: #333 solid 1.8px;
}
/*緑ストライプ*/
.stripe {
	background-image: linear-gradient(to right, #edefa0, #edefa0 10px, #dfe678 10px, #dfe678 );
  	background-size: 20px 100%;
	background-repeat: repeat;
	border: #333 solid 1.8px;
}
/*オレンジ菱形*/
.rhombus {
	background-image: linear-gradient(135deg, #fcdb88 25%, transparent 25%), linear-gradient(225deg, #fcdb88 25%, transparent 25%), linear-gradient(45deg, #fcdb88 25%, transparent 25%), linear-gradient(315deg, #fcdb88 25%, #ffe9a7 25%);
    background-position: 20px 0, 20px 0, 0 0, 0 0;
    background-size: 20px 20px;
    background-repeat: repeat;
	border: #333 solid 1.8px;
}
/*黄色斜めストライプ*/
.stripe_yellow {
	background: repeating-linear-gradient(-40deg, #fff8ae, #fff8ae 8px, #ffe100 8px, #ffe100 18px);
	border: #333 solid 1.8px;
}

/**/

/*menu*/
.hamb {
  	position: fixed;
  	cursor: pointer;
  	z-index: 300;
  	right: 40px;
  	top: 40px;
  	width: 35px;
  	height: 22px;
  	transform: translate(-50%, -50%);
}

.black-bg ul{
  	margin: 0;
  	padding: 0;
  	position: absolute;
  	left: 50%;
  	top: 50%;
  	transform: translate(-50%, -50%);
}

.black-bg ul li {
  text-align: center;
  padding: 20px 0;
}

.black-bg ul li a {
  color: #000;
  font-size: 18px; 
  font-weight: bold;
  display: block;
  text-decoration: none;
}

.black-bg ul li a:hover{
  color: #87c7bb;
}

.line {
  position: absolute;
  left: 0;
  width: 35px;
  height: 2px;
  background-color: #FFF;
  top: 0px;
}

.line:nth-child(2)  {
  top: 20px;
}

.black-bg {
  	position: fixed;
  	background: #FFFFFF;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 0%;
  	opacity: 0;
  	visibility: hidden;
  	overflow: hidden;
	z-index: 100;
}

.black-bg.open {
  opacity: 0.9;
  visibility: visible;
  height: 100%;
}

#hamb.active .line {
  background-color: #000;
}

/*アニメーション*/
.black-bg {
  transition: opacity 0.35s, visibility 0.35s, height 0.35s;
}

.animation {
  transition: all .6s;
}

.line:nth-child(1)  {
  top: 5px;
  animation: line01 .75s forwards;
}

.line:nth-child(2)  {
  bottom: 5px;
  animation: line02 .75s forwards;
}

#hamb.active .line:nth-child(1)  {
  animation: line01_2 .75s forwards;
}

#hamb.active .line:nth-child(2)  {
  animation: line02_2 .75s forwards;
}

@keyframes line01 {
  0% {
    transform: translateY(15px) rotate(45deg);
  }
  50% {
    transform: translateY(15px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes line02 {
  0% {
    transform: translateY(-15px) rotate(-45deg);
  }
  50% {
    transform: translateY(-15px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes line01_2 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(8px) rotate(0);
  }
  100% {
    transform: translateY(8px) rotate(45deg);
  }
}

@keyframes line02_2 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/**/

/**/

/*左と右を囲う全体のエリア*/
#wrapper{
	position: relative;/*position stickyの基点にするため relativeをかける*/
	display: flex;/*左エリア、右エリア横並び指定*/
	flex-wrap: wrap;/*ボックスの折り返し可*/
}
/*左エリア*/
#fixed-area{
/*左固定記述*/
  	position: -webkit-sticky;/*Safari用*/
  	position: sticky;
  	top:0;
	/*横半分50%　縦を100vhにする*/
	width: 38%;
	height: 100vh;
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	background-color: #fff8b0;
	padding: .6rem;
}
/*右エリア*/
#container{
	/*横半分50%にする*/
	width: 62%;
	max-width: 100%;
	display: flex;
  	flex-direction: column;
  	min-height: 100vh;
}

/*＝＝＝＝＝＝＝＝＝＝＝768px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:768px){
	#wrapper{
		display: block;/*display:flex;を解除*/
	}
	#fixed-area{
		position: relative!important;
		width: 100%;
		height: auto;
		padding-bottom: 0;
	}
	#container{
		width: 100%;/*横幅を100%にして1列に見せる*/
	}
	
	
}


/*page-top*/

#page-top {
  	position: fixed;
  	bottom: 20px;
  	right: 10px;
  	font-size: 14px;
  	line-height: 1;
  	z-index: 99;
}
#page-top a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
  	width: 70px;
	height: 70px;
	border: 1.8px solid #333;
  	text-align: center;
  	/*display: block;*/
  	transition: all .3s ease;
	background-color: #ffae00;
	box-shadow: 0 5px 0 0 rgba(0, 0, 0, .2);
	border-radius: 50%;
}
#page-top a:hover {
  	text-decoration: none;
  	opacity: .5;
}


/*footer*/
footer {
	width: 94.65%;
	margin: 0 auto;
	background: repeating-linear-gradient(-40deg, #fff8ae, #fff8ae 8px, #ffe100 8px, #ffe100 18px);
	border: #333 solid 1.8px;
	margin-bottom: .5rem;
	margin-top: auto;
	padding: 1.5rem;
}
.footer-info {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.footer-info:not(:last-of-type) {
	margin-bottom: 2.42rem;
}
.footer-logo {
	width: 42.57%;
	display: flex;
	align-items: center;
}
.footer-logo img {
	width: 68.268%;
}
.footer-menu-info {
	width: 57.43%;
}

.footer-menu {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.mini {
	text-align: end;
	font-size: 80%;
}
small {
	font-size: 70%;
}
.footer-menu li:not(:last-of-type) {
	margin-right: 1rem;
}

/*＝＝＝＝＝＝＝＝＝＝＝768px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:768px){
	
	.footer-info {
		flex-direction: column;
	}
	.footer-logo,
	.footer-menu-info {
		width: 100%;
	}
	.footer-logo img {
		margin: 0 auto;
		margin-bottom: 1.5rem;
	}
	
	.footer-info:not(:last-of-type) {
		margin-bottom: 1.8rem;
	}
	.footer-info.footer-bottom .footer-logo {
		order: 2;
		margin: 1.5rem 0 0;
		justify-content: center;
	}
}


/*左固定エリア*/

/*main-container*/

.header {
	width: 100%;
	height: 8vh;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	padding: 20px;
}
	.header h1 {
		width: 100%;
	}
	.header img {
		max-width: 100%;
		height: auto;
		width: 25%;
		display: block;
	}

.main-container {
	position: relative;
	width: 100%;
	max-width: 100%;
}

.main-container .fv {
	vertical-align: top;
	margin-top: .2rem;
	margin-bottom: .2rem;
}

.sales-container,
.sns-container {
	width: 100%;
	display: flex;
	font-family: "Kaisei Decol", "Dela Gothic One", 'Montserrat', sans-serif;
	font-size: clamp(16px, 1.8vw, 30px);
	font-weight: bold;
	white-space: nowrap;
}
.sales-item,
.sns-item {
	flex: 1;
	margin-bottom: .2rem;
	margin-right: .2rem;
	text-align: center;
}
.sales-item:nth-child(2),
.sns-item:nth-child(2) {
	margin-right: 0;
}
.sales-item a,
.sns-item a {
	padding: .3rem 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sns-item a::before {
	content: "";
	display: inline-block;
  	width: 35px;
  	height: 35px;
  	background: url("img/instagram-icon.png") no-repeat;
  	background-size: contain;
	margin-right: 5px;
}
.sns-item:nth-child(2) a::before {
	content: "";
	display: inline-block;
  	width: 35px;
  	height: 35px;
  	background: url("img/x-icon.png") no-repeat;
  	background-size: contain;
	margin-right: 5px;
}

.sales-container {
	display: block;
}
.sales-item {
	margin-right: 0;
	padding: .5rem;
}

.bottom {
	width: 100%;
	height: 5vh;
	flex-grow: 1;
  	overflow: auto;
}

/*＝＝＝＝＝＝＝＝＝＝＝768px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:768px){
	
	.header {
		padding: 10px;
		height: 5vh;
	}
	
	.bottom {
		display: none;
	}
	
	.sales-item a, .sns-item a {
		padding: 1rem 0;
	}
}


/*左固定エリア*/

/*右エリア*/
.inner {
	width: 94.65%;
	margin: 0 auto;
	margin-bottom: .2rem;
	padding: 1.5rem;
}
.inner_2column {
	width: 94.65%;
	margin: 0 auto;
	margin-bottom: .2rem;
	display: flex;
}
.inner-left {
	flex: 20%;
    margin-right: .2rem;
}
.inner-right {
	flex: 80%;
}


.box-white {
  	padding: 60px 6.551% 92px;
  	border-radius: 10px;
}
.box-white.is-page404 {
  	padding-top: 56px;
  	padding-bottom: 32px;
}


/*contact*/
#contact .area-01 {
	display: block;
	padding-top: 1.8rem;
}
#contact .box-white {
	padding-bottom: 3%;
}

.contact-wrapper {
  	padding-bottom: 8px;
	max-width: 586px;
    margin: 0 auto;
}
.contact-wrapper p {
  	font-size: 0.875rem;
  	line-height: 2.857;
}
.contact-wrapper a {
  	text-decoration: underline;
  	text-decoration-thickness: from-font;
}

.contact-wrapper form {
  	margin-top: 50px;
}
.contact-wrapper form strong {
  	color: #DA1725;
	margin-left: 5px;
}

.text-red {
  	color: #DA1725;
}

div.smf-form .smf-item {
	margin-bottom: 1.3rem;
}
div.smf-form .smf-item:nth-child(6) {
	margin-bottom: .5rem;
}
div.smf-form .smf-item__col--label {
	margin-bottom: .5rem;
}
div.smf-form .smf-item__description {
	margin-top: 0;
}
div.smf-form .smf-checkboxes-control {
	margin-bottom: 2rem;
}

div.smf-form .smf-item .smf-text-control__control,
div.smf-form .smf-item .smf-textarea-control__control {
  	width: 100%;
  	padding: 4px 10px;
  	background-color: #fff;
  	border: 1.8px solid #333;
  	outline: none;
	border-radius: 0;
}
div.smf-form .smf-item .smf-text-control__control:hover, div.smf-form .smf-item .smf-text-control__control:active, div.smf-form .smf-item .smf-text-control__control:focus,
div.smf-form .smf-item .smf-textarea-control__control:hover,
div.smf-form .smf-item .smf-textarea-control__control:active,
div.smf-form .smf-item .smf-textarea-control__control:focus {
  	border-color: #333;
}
div.smf-form .smf-item .smf-textarea-control__control {
  resize: vertical;
}

.smf-action {
	 text-align: center;
} 
.smf-action .smf-button-control {
  display: inline-block;
  width: 100%;
  max-width: 220px;
  margin-bottom: 1em;
  background-size: 200%;
  background-image: linear-gradient(to right, #333 0%, #333 50%, transparent 50%, transparent 100%);
  border: 3px solid #333;
  border-radius: 5px;
  color: #fff;
  transition: 0.2s linear;
}
.smf-action .smf-button-control:hover {
  background-position: right;
  color: #333;
}
.smf-action .smf-button-control .smf-button-control__control {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 100%;
  padding: 7px;
  background: transparent;
  border: none;
  color: inherit;
}

/* start：プラグイン｜Snow Monkey Formsの設定 */
@media (min-width: 640px) {
  .smf-form--simple-table .smf-item {
    display: flex;
  }
}
.smf-form--simple-table .smf-item {
  margin-bottom: 0;
  margin-top: 0;
  padding: 1rem 0;
}

.smf-form--simple-table + .smf-action {
  margin-bottom: 1.8rem;
  margin-left: 0;
  margin-right: 0;
  margin-top: 1.8rem;
  text-align: center;
}

/* end：プラグイン｜Snow Monkey Formsの設定 */
/*=======================================================
  640px以上の設定（snow-monkey-form用）
=======================================================*/
@media (min-width: 640px) {
  div.smf-form--simple-table .smf-item__col--label {
    flex-basis: 8.75em;
  }
  div.smf-form--simple-table .smf-item__col--controls {
    flex-basis: calc(100% - 8.75em);
    max-width: calc(100% - 8.75em);
  }
}




/*area-01*/
.area-01 {
	margin-top: 5rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
#main .area-01 {
	display: block;
}

/**/

/*area-02*/
.area-02 {
	display: flex;
	justify-content: center;
	align-items: center;
}
.area-02 .text-container {
	width: 75%;
	margin: 0 auto;
	padding: 0;
}
/**/

/*area-03*/
.main .area-03 {
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.area-03 .text-container {
	max-width: 100%;
	padding: 0;
}
.area-03 video {
	width: 100%;
	height: auto;
}
/**/

/*area-04*/
.area-04 {
}
.area-04 .text-box {
	margin-bottom: 1.8rem;
	text-align: center;
	line-height: 2.5;
	letter-spacing: 1.5px;
}
.area-04 .text-box:nth-child(2) {
	margin-bottom: 0;
}

.area-04 .text-box .big {
	font-size: 1.5rem;
	font-weight: bold;
	font-family: "Kaisei Decol";
}
.area-04 .text-box .big:first-of-type {
	font-size: 2.8em;
}

/**/

/*area-05*/
.area-05 {
	
}
.area-05 .text-container {
	text-align: center;
}
.area-05 .text-container .text-item {
	margin-bottom: .5rem;
}
.area-05 .text-container .text-item span,
.area-05 .text-container .text-item-logo span {
	font-family: "Kaisei Opti", serif;
	font-weight: bold;
	font-size: 1.5em;
}
.area-05 .text-item-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 1.75rem;
	width: 100%;
	max-width: 100%;
}
.area-05 .text-item-logo p {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.86vw;
}
.area-05 .text-item-logo img {
	width: 80%;
}

/**/

/*area-06*/
.area-06 {
	padding: 1.5rem;
	text-align: center;
}
.area-06 .content-title {
	margin: 1.5rem 0;
}
.area-06 .component-01 {
	width: 79.85%;
	margin: 0 auto;
	margin-bottom: 1.5rem;
}
.area-06 .component-01-item {
	display: flex;
	margin-bottom: 1.8rem;
}
.area-06 .component-01-item img {
	width: 32.75%;
	text-align: center;
	margin: 0 auto;
	border-radius: 50%;
	border: 1.8px solid #333;
}
.area-06 .component-01-item .text-box {
	width: 67.25%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.area-06 .component-01-item .text-box .ttl,
.area-06 .component-01-box .text-box .ttl {
	font-size: 1.8rem;
	font-weight: bold;
}
.area-06 .component-01-box .text-box .text-item {
	text-align: justify;
}

.area-06 .component-01-box .text-box ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background-color: #fff;
	border-radius: 20px;
	margin: 1.5rem 0;
	padding: 1rem;
}
.area-06 .component-01-box .text-box li {
	margin: .8rem;
	border: 1.8px #333 solid;
}

.area-06 .component-box {
	margin: 0 auto;
	display: flex;
}
.area-06 .component-box li {
	margin-right: .8rem;
	padding: .8rem;
}
.area-06 .component-box li:last-child {
	margin-right: 0;
}
.area-06 .component-box img {
	border-radius: 50%;
	border: 1.8px #333 solid;
}
.area-06 .component-box .ttl {
	font-size: 1.2rem;
	font-weight: bold;
}

/**/

/*area-07*/


.area-07 .point-ttl {
	margin-bottom: 1.8rem;
	text-align: center;
}
.area-07 .point-ttl h3 {
	font-size: 1.5rem;
}
.area-07 .point .point-item {
	margin-bottom: 1rem;
	display: flex;
}
.area-07 .point .point-item-icon,
.area-07 .point .point-item-box {
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.area-07 .point .point-item-icon {
	width: 20%;
	margin-right: 1.2rem;
	align-items: center;
}
.area-07 .point .point-item-icon img {
	border: 1.8px solid #111;
	border-radius: 50%;
}
.area-07 .point .point-item-box {
	width: 80%;
}
.area-07 .point .point-item-ttl {
	margin-bottom: .3rem;
	font-family: "Kaisei Opti", serif;
	font-weight: bold;
	font-size: 1.8em;
	border-bottom: 3px solid #111;
}
.area-07 .point .point-item-text {
	line-height: 1.3;
}

@media screen and (max-width:768px){
	.area-07 .point {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 15px;
		grid-row-gap: 15px;
	}
	.area-07 .point .point-item {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	.area-07 .point .point-item-box,
	.area-07 .point .point-item-icon {
		width: 100%;
		text-align: justify;
	}
	.area-07 .point .point-item-icon {
		margin: 0;
		margin-bottom: 1rem;
		padding: 0 .5rem;
	}
	
}

/**/

/*area-08*/
.area-08 {
	padding: 1.5rem;
}
.area-08 .content-title {
	margin: 1.5rem 0;
	text-align: center;
}
.area-08 .content-title::before {
	font-size: 2.6rem;
}
.area-08 .text-box {
	margin-bottom: 1rem;
}
.area-08 .text-box span {
	font-size: .8rem;
}
/**/

/*area-09*/
.area-09 .ttl-container {
	order: 2;
	margin-right: 0;
}
.area-09 .text-container {
	order: 1;
	padding: 0;
	margin-right: .2rem;
}
.area-09 .text-box {
	width: 100%;
	padding: 1.5rem;
	text-align: center;
}
.area-09 .text-box:first-child {
	margin-bottom: .2rem;
}
.area-09 .text-box span {
	font-size: 1.45rem;
	font-weight: bold;
	font-family: "Kaisei Opti", serif;
}
.area-09 .text-box p:nth-child(2) {
	margin-bottom: .8rem;
}

.area-09-b .inner-left,
.area-09-b .inner-right {
	flex: 50%;
}

.area-09-b .text-container .text-item {
	font-family: "Kaisei Opti", serif;
	font-weight: bold;
	font-size: 1.5rem;
	text-align: center;
	margin-bottom: 1rem;
}
.area-09-b .text-box .name {
	padding-bottom: .5rem;
	margin-bottom: .5rem;
	border-bottom: 1.8px solid #111;
}
.area-09-b .text-box .text {
	text-align: justify;
}

/**/

/*area-10*/
.area-10 * {
    min-width: 0;
    min-height: 0;
}
.area-10 .text-container {
	display: block;
}
.area-10 h3 {
	margin-bottom: 1.5rem;
	display: flex;
    justify-content: center;
    align-items: center;
	font-size: 1.5rem;
	font-family: "Kaisei Opti", serif;
	font-weight: bold;
}
.area-10 h3::before {
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url('img/swipe.png');
    background-position: center;
    background-size: contain;
	margin-right: .3rem;
}

/*how-to-slider*/
.area-10 .slider-item {
	width: 100%;
	padding: 0 3rem;
	margin-bottom: 1.3rem;
}
.area-10 .slider-item img {
	margin-bottom: .5rem;
	border: #111 solid 1.8px;
}
.area-10 .slider-item .text .ttl {
	margin: 1.2rem 0 0.5rem 0;
	padding-bottom: .5rem; 
	border-bottom: 1.8px solid #111;
	font-weight: bold;
}

.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: 42%;
    cursor: pointer;
    outline: none;
    border-top: 1.8px solid #111;
    border-right: 1.8px solid #111;
    height: 18px;
    width: 18px;
}
.slick-prev {
    left: 4.5%;
    transform: rotate(-135deg);
}
.slick-next {
    right: 4.5%;
    transform: rotate(45deg);
}
.slick-prev:before, .slick-next:before {
	display: none;
}

.slick-dots {
	position: relative;
	z-index: 3;
    text-align: center;
}
.slick-dots li {
    display:inline-block;
	margin:0 5px;
}
.slick-dots button {
    color: transparent;
    outline: none;
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 50%;
    background: #ccc;
}

/**/

/*area-11*/
.area-11 .ttl {
	margin-bottom: 1.5rem;
	text-align: center;
	line-height: 1.3;
}
.area-11 .insta-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(auto, 1fr));
	grid-column-gap: 15px;
	grid-row-gap: 15px;
}
.area-11 .insta-list li {
	overflow: hidden;
}
.area-11 .insta-list .instagram-media.instagram-media-rendered {
	min-width: 100% !important;
	width: 100% !important;
}

.area-11 .sns-box {
	margin: 1.5rem 0 0;
}

.area-11 .sns-item a {
	padding: 1rem;
}

/**/

/*area-12*/
.area-12 .inner-left,
.area-12 .inner-right {
	flex: 50%;
	padding: 1.5rem;
	text-align: center;
}
.area-12 .content-title {
	margin-bottom: 1.5rem;
}
.area-12 .content-title::before {
	font-size: 1.45rem;
}

.area-12 .text-container {
	padding: 0;
}
.area-12 .text-container img {
	width: 80%;
	border-radius: 50%;
	margin: 1.5rem 0;
	border: 1.8px solid #333;
}

.area-12 .text-box .name {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	font-weight: bold;
	border-bottom: 1.8px #333 solid;
	line-height: 1.3;
}
.area-12 .text-box .name p:first-child {
	font-size: .7rem;
}
.area-12 .text-box .name p:last-child {
	font-size: 1.5rem;
}
.area-12 .text-box .text {
	text-align: justify;
}


/**/

/*area-13*/
.area-13 .content-title {
	text-align: center;
	margin: 1.5rem 0;
}

.area-13 .img-box {
	margin-bottom: 1.5rem;
}
.area-13 .img-box p {
	text-align: end;
	font-size: .8rem;
}

.area-13 .overview table {
	width: 100%;
}
.area-13 .overview th,
.area-13 .overview td {
	display: block;
	text-align: justify;
}
.area-13 .overview th {
	background-color: #fff;
	color: #FDBE00;
	padding: .5rem;
}
.area-13 .overview td {
	padding: 1rem .5rem;
}
.area-13 .overview li {
	list-style-type: disc;
	list-style-position: inside;
	padding-left: .5rem;
}

/**/

/*area-14*/
.store-box,
.brand-box {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: repeat(2, 1fr); */
    grid-column-gap: 25px;
    grid-row-gap: 25px;
}
.store-item a,
.brand-item a {
	aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

/*area-16*/
.brand-item a {
	aspect-ratio: 2 / 1;
}
.brand-group {
	margin: 2rem 0;
}

.area-16 .content-title {
	margin-bottom: 1.175em;
}



/*＝＝＝＝＝＝＝＝＝＝＝768px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:768px){
	.inner {
		padding: 1.8rem 1rem;
	}
	
	.inner-left {
		margin-right: 0;
		margin-bottom: .2rem;
	}
	
	.ttl-container {
		writing-mode: horizontal-tb;
	}
	
	.area-01 {
		margin-top: 0;
	}
	.area-02 .text-container {
		width: 100%;
	}
	.area-04.inner_2column,
	.area-07.inner_2column,
	.area-09.inner_2column,
	.area-09-b.inner_2column,
	.area-10.inner_2column,
	.area-12.inner_2column {
		flex-direction: column;
	}
	.area-05 .text-container {
		padding: 0;
	}
	.area-05 .text-item-logo {
		display: block;
	}
	.area-05 .text-container .text-item span {
		font-size: 1.2rem;
	}
	.area-05 .text-item-logo p {
		font-size: 1.2rem;
	}
	
	.area-06 .component-01,
	.area-06 .component-01-item .text-box {
		width: 100%;
	}
	.area-06 .component-01-item {
		flex-direction: column;
	}
	.area-06 .component-01-item img {
		width: 67.25%;
		margin-bottom: 1.5rem;
	}
	.area-06 .component-01-box .text-box p {
		display: flex;
		flex-direction: column;
		margin-bottom: 1.5rem;
	}
	.area-06 .component-01-box .text-box .ttl {
		line-height: 1.2;
	}
	.area-06 .component-box {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.area-06 .component-box li {
		width: 67.25%;
		margin-right: 0;
	}
	
	.area-07 .ttl-container,
	.area-09 .ttl-container {
		order: 1;
	}
	.area-07 .text-container,
	.area-09 .text-container {
		order: 2;
		margin-right: 0;
	}
	
	.area-08 .text-box {
		text-align: justify;
	}
	
	.area-09 .text-box {
		padding: 1.8rem 1rem;
	}
	.area-09 .text-box span {
		font-size: 1.25rem;
	}
	
	.area-10 h3 {
		font-size: 1.175rem;
	}
	.area-10 h3::before {
		width: 35px;
		height: 35px;
	}
	
	
	.area-11 .insta-list {
		width: 100%;
		grid-template-columns: repeat(1, minmax(auto, 1fr));
	}
	.area-11 .sns-container {
		display: block;
	}
	.area-11 .sns-item {
		margin-right: 0;
		margin-bottom: 1rem;
	}

        .store-box,
	.brand-box {
		grid-template-columns: repeat(2, 1fr);
	}
	
}



/*news-list*/
.cat-list {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: flex-end;
  	align-items: center;
  	font-size: 0.8125rem;
  	color: #555555;
}
.cat-list > li {
  	min-width: 40px;
  	padding: 8px;
  	margin-bottom: 0.5em;
  	background-color: #ffae00;
	color: #333;
	border: 1px solid #333;
  	text-align: center;
  	line-height: 1;
}
.cat-list > li:not(:last-of-type) {
  	margin-right: 0.923em;
}

.news-list > li {
  	padding-bottom: 18px;
  	border-bottom: 1.8px solid #333;
}
.news-list > li:not(:last-of-type) {
  	margin-bottom: 16px;
}
.news-list a {
  	align-items: flex-start;
  	padding-left: 3.193%;
  	position: relative;
}
.news-list a::after {
  	content: "";
  	width: 0;
  	height: 0;
  	border-style: solid;
  	border-width: 0 0 14px 14px;
  	border-color: transparent transparent #333333 transparent;
  	position: absolute;
  	bottom: 0;
  	right: 0;
}
.news-list .text {
  	flex: 1 1 0;
  	line-height: 1.687;
}
.news-list .date {
  	font-size: 0.8125rem;
  	color: #808080;
}

@media screen and (max-width: 768px) {
	.topics {
		padding-top: 2rem;
	}
	.topics .content-wrapper {
		display: block;
	}
	.topics .content-title,
	.topics .news-list {
		width: 100%;
	}
}

/*news*/
.sub-page .area-02 {
	display: block;
}

/*news page*/
.news-wrapper {
	
}
.news-wrapper .box-white {
  	padding: 2%;
}
.news-wrapper .main-content {
  	width: 100%;
}

.news-title {
  	margin-bottom: 1em;
  	font-family: "Kaisei Opti", serif;
  	font-size: 1.25rem;
  	font-weight: 400;
	color: #333;
 	line-height: 2.25;
  	letter-spacing: 0.15em;
	border-bottom: #333 solid 1px;
  	text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  	.news-title {
    	font-size: 1.125rem;
  	}
}

.wp-pagenavi {
  display: flex;
  justify-content: flex-end;
  margin-top: 42px;
}
.wp-pagenavi span, .wp-pagenavi a {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 40px;
  	height: 40px;
  	border: 1px solid #444444;
  	font-size: 0.9375rem;
  	font-weight: 500;
  	transition: 0.3s ease-in;
}
.wp-pagenavi span:not(:last-child), .wp-pagenavi a:not(:last-child) {
  	margin-right: 2.622%;
}
@media screen and (max-width: 768px) {
  .wp-pagenavi span, .wp-pagenavi a {
    font-size: 0.875rem;
  }
}
.wp-pagenavi span:hover, .wp-pagenavi a:hover {
  	background-color: #ffae00;
  	color: #FFFFFF;
}
.wp-pagenavi span.current {
  	background-color: #ffae00;
  	color: #FFFFFF;
}
.wp-pagenavi a {
	background-color: #FFFFFF;
  	color: #666666;
}
.wp-pagenavi a.nextpostslink, .wp-pagenavi a.previouspostslink {
  	width: auto;
  	padding: 5px 1.2em;
}


.sidebar .box-white {
  	padding: 0;
	padding-top: 36px;
}
.sidebar .item {
  	padding: 0 3.773%;
  	padding-bottom: 36px;
}
.sidebar .item:not(:last-of-type) {
  	margin-bottom: 42px;
}
.sidebar-list {
  	padding: 0 7.718%;
  	font-weight: 500;
  	color: #555555;
}
.sidebar-list a {
  	display: inline-block;
  	padding-right: 1em;
  	line-height: 2.562;
}
.sidebar-list a::before {
  	content: "-";
  	display: inline-block;
  	margin-right: 0.5em;
}



/*-- single -----------*/
.post .box-white {
  	padding-right: 5.882%;
  	padding-left: 5.882%;
}
.post-header {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: space-between;
  	align-items: center;
  	margin-bottom: 2px;
  	font-size: 0.875rem;
  	color: #555555;
}
.post-header time {
  	margin-bottom: 0.5em;
}
.post-header .cat-list {
  	font-size: 0.875rem;
}
@media screen and (max-width: 768px) {
  	.post-header .cat-list {
    	font-size: 0.8125rem;
  	}
}

.post-header .cat-list > li {
  	padding-right: 18px;
  	padding-left: 18px;
}
.post-title {
  	margin-bottom: 0.718em;
  	font-size: 2rem;
	font-family: "Kaisei Opti", serif;
  	font-weight: bold;
  	line-height: 1.468;
}
@media screen and (max-width: 768px) {
  	.post-title {
    	font-size: 1.375rem;
  	}
}

.post-wrapper {
  	line-height: 1.75;
  	letter-spacing: 0.11em;
}
.post-wrapper > * {
  	margin-bottom: 36px;
}
.post-wrapper h2 {
  	margin-bottom: 1.5em;
  	font-size: 1.25rem;
  	font-weight: bold;
  	line-height: 1.5;
}
@media screen and (max-width: 768px) {
  	.post-wrapper h2 {
    	font-size: 1.125rem;
  	}
}

.post-wrapper .images-wrapper {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: space-between;
}
.post-wrapper .images-wrapper.col2 {
  	margin-bottom: 0;
}
.post-wrapper .images-wrapper.col2 > a {
  	width: 47.46%;
  	margin-bottom: 36px;
}
.post .eyecatch {
  	height: 0;
    padding-top: 59.841%;
    position: relative;
    overflow: hidden;
}
.post .eyecatch img {
  	width: 100%;
  	position: absolute;
  	top: 50%;
  	left: 0;
  	transform: translateY(-50%);
}

.lb-outerContainer {
  	background-color: transparent;
}

.lightbox .lb-image {
  	border: none;
}

.page-nav {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: space-between;
  	align-items: center;
  	padding: 10px 10px;
  	margin-top: 28px;
  	border-top: 1.8px dashed #111;
  	border-bottom: 1.8px dashed #111;
  	font-size: 0.875rem;
  	font-weight: 500;
  	color: #111;
}
@media screen and (max-width: 768px) {
  .page-nav {
    font-size: 0.8125rem;
  }
}
.page-nav > li {
  min-width: 5em;
}
.page-nav > li:first-of-type a::after {
  right: auto;
  left: 0;
  transform: translateY(-50%) rotate(-135deg);
}
.page-nav a {
  display: inline-block;
  min-width: 5em;
  padding: 5px 14px;
  position: relative;
}
.page-nav a.to-archive {
  font-weight: bold;
  color: #333;
}
.page-nav a.to-archive::after {
  content: none;
}
.page-nav a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid #666666;
  border-right: 1px solid #666666;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
}


#news .area-01,
#single .area-01 {
	display: block;
}


/*404*/
#page-404.area-01 {
	display: block;
	padding-top: 58px;
}
#page-404 .btn-wrapper {
    margin: 58px 0;
}

.page404-text-box p:not(:last-child) {
    margin-bottom: 2.3em;
}
.page404-text-box a {
    text-decoration: underline;
    text-decoration-thickness: from-font;
}

/*policy*/
.privacy-wrapper {
  	max-width: 574px;
  	margin: 0 auto;
  	font-size: 0.9375rem;
}
.privacy-wrapper > * {
  	margin-bottom: 1.8em;
}
.privacy-wrapper h2 {
  	margin-bottom: 1.35em;
  	font-size: 1.25rem;
}
.privacy-wrapper ul {
	padding-left: 20px;
  	list-style-type: decimal;
  	list-style-position: outside;
}
.privacy-wrapper .privacy-company p {
	margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  	.privacy-wrapper h2 {
    	font-size: 1.125rem;
  	}
}

/*company*/
#company .box-white {
	padding: 2%;
}
.company-title {
	margin-bottom: 2em;
    font-family: "Kaisei Opti", serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #333;
    line-height: 2.25;
    letter-spacing: 0.15em;
    border-bottom: #333 solid 1px;
    text-transform: uppercase;
}

.company-info {
  	padding-right: 10px;
  	padding-bottom: 30px;
	flex: 1;
}
.company-info dl {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.company-info dl:not(:last-of-type) {
  margin-bottom: 24px;
}
.company-info dt {
  	width: 6.625em;
	padding: 3px;
  	margin-right: 2em;
  	background-color: #333333;
  	text-align: center;
	color: #fff;
}
.company-info dd {
  flex: 1 1 0;
}

.company-about {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-bottom: 122px;
}
.company-about .text-wrapper {
  flex: 1 1 0;
  margin-left: 8.432%;
}
.company-about .text-wrapper * {
  margin-bottom: 1em;
}
.company-about .text-wrapper *:last-child {
  margin-bottom: 0;
}
.company-about .text-wrapper p {
  margin-bottom: 2em;
}
.company-about .text-wrapper h2 {
  margin-bottom: 0.875em;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  .company-about .text-wrapper h2 {
    font-size: 1.125rem;
  }
}
.company-about .images-wrapper {
  width: 35.119%;
}
.company-about .images-wrapper img {
  width: 100%;
}

.company-info-wrapper {
  
}