/*
Theme Name: iori products 2023
Text Domain: twentytwenty
Version: 1.1
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	border: 0;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}


body {
	font-size: 13px;
	font-size: 1.3rem;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
	line-height: 1.5;
	background: #FFF;
	letter-spacing: 0em;
	color: #4B474D;
}

@keyframes fadeIn {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}

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

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

a {
	text-decoration: none;
	color: #4B474D;
	outline: none;
}

a:focus,
*:focus {
	outline: none;
}

a:hover {
	color: #999;
}

a:link,
a:visited,
a:hover,
a:active {
	outline: 0;
}

a img {
	border: 0;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

h1 {
	font-family: "DIN Next LT W01 Bold";
}


/* clearfix */
.clearfix {
	*zoom: 1;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: "";
}

.clearfix:after {
	clear: both;
}

.clear {
	clear: both;
}


.dB {
	letter-spacing: -.4em;
}

.dBlock {
	display: inline-block;
	letter-spacing: 0.08em;
	vertical-align: top;
}

/*--------------------------------------------------------------
    Alignments
--------------------------------------------------------------*/

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/*--------------------------------------------------------------
    Font
--------------------------------------------------------------*/
.yu {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

.mont {
	font-family: 'Montserrat', sans-serif;
}

.gd {
	font-family: gooddog-new, sans-serif;
	font-weight: 400;
	font-style: normal;
}

/*--------------------------------------------------------------
    ALL
--------------------------------------------------------------*/
.pageCont h2 {
	font-size: 1.6rem;
	text-align: center;
	margin: 0 0 60px;
	font-family: 'Montserrat', sans-serif;
}

.fadein {
	opacity: 0;
	transform: translateY(20px);
	transition: all 1s;
}

a.anchor {
	display: block;
	padding-top: 170px;
	margin-top: -170px;
}

.page-header {
	text-align: center;
	margin: 20px auto 0;
	max-width: 1200px;
}

.page-header h2 {
	font-size: 1.6rem;
	text-align: center;
	margin: 0 0 60px;
	font-family: 'Montserrat', sans-serif;
}

@media screen and (max-width: 768px) {
	#site-content {
		padding: 68vh 0 0;
	}

	.br::after {
		content: "\A";
		white-space: pre;
	}

	.none {
		display: none;
	}

	a.anchor {
		display: block;
		padding-top: 80px;
		margin-top: -80px;
	}
}


/*--------------------------------------------------------------
    HEADER
--------------------------------------------------------------*/
header#site-header-caerula {
	position: fixed;
	z-index: 1;
	top: 25px;
	text-align: center;
	width: 100%;
	font-family: 'Montserrat', sans-serif;
	background: #fff;
	transition: all 0.5s ease;
}

.header {
	position: fixed;
	top: 0;
	width: 100%;
	padding: 25px 0 10px;
	background: #fff;
	transition: all 0.5s ease;
}

.hidden {
	background: none;
	transition: all 0.5s ease;
}

.logo,
.logo2 {
	margin: 0 auto 30px;
	max-width: 300px;
}

.logo img,
.logo2 img {
	max-width: 90px;
	width: 100%;
}
.logo2 img{

}

.nav-button {
	display: none;
	z-index: 9999;
}

.nav-wrap.open {
	display: block;
}

.nav-wrap.close {
	display: none;
}

.modal {
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99;
}

.modal__content {
	background: rgb(255, 255, 255, 0.95);
	position: absolute;
	width: 100%;
	height: 100vh;
	overflow-y: auto;
	padding-bottom: 80px;
}

.js-modal-close,
.js-modal-close span {
	display: inline-block;
	transition: all 0.4s;
	box-sizing: border-box;
}

.js-modal-close {
	z-index: 20;
	position: fixed;
	right: 15px;
	top: 15px;
	width: 32px;
	height: 26px;
}

.js-modal-close span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #707070;
}

.js-modal-close span:nth-of-type(1) {
	top: 0;
}

.js-modal-close span:nth-of-type(2) {
	top: 11px;
}

.js-modal-close span:nth-of-type(3) {
	bottom: 0;
}

.js-modal-close span:nth-of-type(1) {
	-webkit-transform: translateY(11px) rotate(-45deg);
	transform: translateY(11px) rotate(-45deg);
}

.js-modal-close span:nth-of-type(2) {
	opacity: 0;
}

.js-modal-close span:nth-of-type(3) {
	-webkit-transform: translateY(-11px) rotate(45deg);
	transform: translateY(-11px) rotate(45deg);
}

.instaCont {
	padding: 50px 0 0;
	position: relative;
}

.instaCont p {
	margin: 0 0 60px;
}

.instaCont li {
	margin: 0 0 70px 0;
	position: relative;
}

.instaCont li:nth-child(1) img {
	max-width: 60px;
}

.instaCont li:nth-child(2) img {
	max-width: 90px;
}

.instaCont li:nth-child(3) img {
	max-width: 180px;
}

.instaTop a {
	border: solid 1px;
	padding: 10px 20px;
	display: block;
	max-width: 180px;
	margin: 15px auto 42px;
}

.modalCopy,
.modalCopy2 {
	position: fixed;
	text-align: center;
	bottom: 10px;
	font-size: 1.0rem;
	color: #9EA3A6;
	margin: 0 auto;
	left: 0;
	right: 0;
}

.instaCont li {
	vertical-align: top;
	position: relative;
}

.instaCont li a {
	display: inline-block;
}

.instaCont li img {
	margin: 0 0 30px;
	vertical-align: top;
}

.instaCont li span {
	text-align: center;
	font-size: 2.5rem;
	position: relative;
	display: block;
	margin: 0;
}

.instaCont li span.dashicons-instagram {
	margin-right: 30px;
	margin-left: -5px;
}

.instaTop {
	margin: 80px 0 0;
}

.instaTop a {
	color: #9EA3A6;
	padding: 5px 10px;
	display: block;
	max-width: 120px;
}


/*アコーディオン*/
.acd-check {
	display: none;
}

.acd-label {
	cursor: pointer;
}

.acd-content {
	opacity: 0;
	transition: .5s;
	visibility: hidden;
	display: none;
}

.acd-check:checked+.acd-label+.acd-content {
	opacity: 1;
	padding: 10px;
	visibility: visible;
	display: block;
}

.acd-content a {}

.acd-line {
	width: 1px;
	height: 25px;
	margin: 0 auto 5px;
	background: #4B474D;
	text-align: center;
}

.acd-line2 {
	width: 1px;
	height: 15px;
	margin: 5px auto 5px;
	background: #4B474D;
	text-align: center;
}


@media screen and (min-width: 769px) {

	.nav-wrap {
		display: block !important;
	}

	.logo2,
	.modalCopy {
		display: none;
	}

	.nav li {
		margin: 0 3% 0 0;
		font-size: 1.5rem;
		letter-spacing: 0;
	}

	.nav li:nth-child(5) {
		margin-left: 3%;
		margin-right: 2%;
	}

	.nav li:nth-child(6) {
		margin-right: 25px;
	}

	.nav li:nth-child(8) {
		margin-right: 0;
	}

	.nav li:nth-child(7) span,
	.nav li:nth-child(8) span {
		font-size: 2.3rem;
	}

	.nav li:nth-child(7) img {
		max-width: 20px;
		width: 100%;
	}

	.nav,
	.logo {
		z-index: 999;
		position: relative;
	}

	.instaCont {
		padding: 200px 0 0;
	}

	.instaCont p {
		color: #9EA3A6;
		margin: 0 0 100px;
	}

}

@media screen and (min-width: 999px) {
	.nav li {
		margin: 0 4% 0 0;
	}
}

@media screen and (max-width: 768px) {
	header#site-header-caerula {
		top: 15px;
	}

	.header {
		padding: 15px 0 10px;
		height: 55px;
	}

	.logo img,
	.logo2 img {
		max-width: 70px;
	}

	.logo2 {
		margin-top: 15px;
		margin-bottom: 0;
	}

	.nav-button {
		display: block;
		cursor: pointer;
	}

	.nav-wrap {
		position: fixed;
		left: 0;
		top: 0;
		display: none;
		z-index: 10;
		background-color: rgba(255, 255, 255, 1);
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.nav {
			height: 100%;
			position: relative;
			overflow-x: hidden;
			overflow-y: auto;
		}

		li {
			display: block;
			margin: 0 0 0 0;

			a {
				font-size: 18px;
			}
		}
	}

	.nav {
		margin: 80px 0 0;
		position: relative;
	}

	.nav li {
		display: block !important;
		width: 100%;
		margin: 0 0 32px;
		font-size: 1.6rem;
		position: relative;
	}

	.nav li:nth-child(6) {
		margin: 0 20px 60px 0;
		display: inline-block !important;
		width: 30px;
	}

	.nav li:nth-child(7) {
		margin: 0 0 60px 0;
		display: inline-block !important;
		width: 30px;
	}

	.nav li:nth-child(8) {
		margin: 0 0 60px;
		display: inline-block !important;
		width: 30px;
	}

	.nav li:first-child {
		padding-top: 20px;
	}

	.nav li span.dashicons {
		font-size: 3rem;
	}

	.menuOnline {
		0
	}

	.instaCont li:first-child {
		margin: 0 0 30px;
	}

	.instaCont img {
		display: inline-block;
	}

	.instaCont div {
		position: absolute;
		right: 10%;
		top: 0;
	}

	.instaCont span.dashicons {
		font-size: 2.8rem;
	}

	/*メニューボタン*/
	.nav-button,
	.nav-button span {
		display: inline-block;
		transition: all 0.4s;
		box-sizing: border-box;
	}

	.nav-button {
		z-index: 20;
		position: fixed;
		right: 15px;
		top: 15px;
		width: 32px;
		height: 26px;
	}

	.nav-button span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: #707070;
	}

	.nav-button span:nth-of-type(1) {
		top: 0;
	}

	.nav-button span:nth-of-type(2) {
		top: 11px;
	}

	.nav-button span:nth-of-type(3) {
		bottom: 0;
	}

	.nav-button.active span:nth-of-type(1) {
		-webkit-transform: translateY(11px) rotate(-45deg);
		transform: translateY(11px) rotate(-45deg);
	}

	.nav-button.active span:nth-of-type(2) {
		opacity: 0;
	}

	.nav-button.active span:nth-of-type(3) {
		-webkit-transform: translateY(-11px) rotate(45deg);
		transform: translateY(-11px) rotate(45deg);
	}
}

/*--------------------------------------------------------------
    FOOTER
--------------------------------------------------------------*/
#site-footer-caerula {
	position: relative;
}

.footLogo.footLogo-caerula {
	max-width: 24px;
	top: auto;
	bottom: 20px;
}

.footer {
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	margin: 60px 0 0;
}

.footInfo {
	font-size: 1.8rem;
}

.footInfo p {
	margin: 0 0 15px;
}

.footInfo p span {
	font-size: 1.2rem;
	margin: 0 5px 0 5px;
}

.footStore {
	margin: 50px auto 0;
}

.footStore label {
	border: solid 1px;
	padding: 8px;
}

.footStore a {
	border: solid 1px;
	padding: 5px 10px;
}

.footCopy-caerula {
	text-align: center;
	font-size: 1.0rem;
	color: #9EA3A6;
	/* margin: 10% auto 10px; */
	margin: 5% auto 10px;
}

@media screen and (max-width: 767px) {
	.footCopy-caerula {
		margin-top: 40%;
	}
	.footLogo.footLogo-caerula {
		bottom: 40px;
		left: 50%;
		transform: translateX(-50%);
	}
}

/*--------------------------------------------------------------
    TOP
--------------------------------------------------------------*/
.bg-slider {
	width: 100vw;
	height: 100vh;
	background-position: center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sbi_photo_wrap {
	display: flex;
	flex-wrap: wrap;
}

.sbi_photo {
	position: relative;
	width: 100%;
}

.sbi_photo:before {
	content: "";
	display: block;
	padding-top: 100%;
}

.svg-inline--fa path {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: cover;
}

@media only screen and (max-width: 768px) {
	.bg-slider {
		background-position: top center;
		background-size: contain;
		background-repeat: no-repeat;
	}
}

/*--------------------------------------------------------------
    WHAT
--------------------------------------------------------------*/
.what {
	max-width: 1200px;
	margin: 0 auto 0;
	padding: 60px 30px;
}

.what ul {
	text-align: center;
}

/*
.what ul > li{
	width: 30%;
	margin: 0 5% 0 0;
}

.what ul > li:last-child{
	margin-right: 0;
}
*/
.whatInsta {
	text-align: center;
	margin: 0 0 30px;
}

.whatInsta1 img {
	max-width: 100px;
}

.whatInsta2 img {
	max-width: 80px;
}

.whatInsta3 img {
	max-width: 110px;
}

.whatMore {
	margin: 30px auto 0;
	font-size: 1.2rem;
	letter-spacing: 0;
	text-align: center;
	max-width: 110px;
	vertical-align: middle;
}

.whatMore a {
	border: solid 1px;
	padding: 6px 10px;
	display: block;
	font-family: 'Montserrat', sans-serif;
}

.whatMore a:hover {
	color: #999;
}

.whatMore img {
	width: 100%;
	max-width: 16px;
	margin-left: 8px;
	vertical-align: middle;
}

.whatMore a:hover img {
	zoom: 1;
	opacity: 0.5;
	filter: alpha(opacity=50);
}

.eapps-instagram-feed-posts-grid-load-more {
	display: none;
}

@media only screen and (max-width: 768px) {
	.what ul>li {
		width: 100%;
		margin: 0 0 50px 0;
	}
}


/*--------------------------------------------------------------
    CONCEPT
--------------------------------------------------------------*/
.concept {
	padding: 60px 4% 60px;
}

.conceptLogo {
	text-align: center;
}

.conceptLogo img {
	width: 100%;
	max-width: 150px;
}

.conceptTxtJp {
	text-align: center;
	max-width: 600px;
	margin: 30px auto 30px;
	letter-spacing: 0.1em;
	line-height: 2.2;
	font-size: 1.4rem;
}

.conceptTxtEn {
	max-width: 500px;
	margin: 30px auto 30px;
	letter-spacing: 0.1em;
	line-height: 2.2;
	font-size: 1.3rem;
	text-align: center;
}

@media only screen and (max-width: 768px) {
	.concept {
		padding: 60px 2% 4%;
	}

	.conceptTxtEn {
		max-width: 340px;
	}
}

/*--------------------------------------------------------------
    COLLECTIONS
--------------------------------------------------------------*/
.collections {
	margin: 0 auto 0;
	padding: 60px 0 100px;
	overflow: hidden;
	z-index: 0;
	position: relative;
}

.swiper-container li img {
	width: 100%;
}

.swiperBlock {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}

.swiperBlock h3 {
	margin: 40px 0 0;
	font-size: 1.4rem;
}

.swiperSide1 {
	width: 48%;
	max-width: 580px;
}

.swiperSide2 {
	width: 48%;
	max-width: 580px;
	float: right;
}

.collectionTxt {
	text-align: center;
	margin: 20px 0 0;
}

.collectionTxt-iori img {
	width: 100%;
	max-width: 54px;
}

.collectionTxt-tabito img {
	width: 100%;
	max-width: 80px;
}

.collectionTxt p {
	margin: 10px 0 0;
}

.collectionMenu {
	text-align: center;
	margin: 0 0 100px;
}

.collectionMenu ul {
	margin: 0 0 40px;
	font-size: 1.6rem;
}

.collectionMenu ul li a {
	display: inline-block;
	padding: 5px 20px;
}

.collectionBtn {
	text-align: center;
}

.collectionBtn a {
	border: solid 1px;
	padding: 8px 40px;
	display: inline-block;
}

.collectionDetail {
	text-align: center;
	margin: 300px auto 0;
	max-width: 1200px;
	overflow: hidden;
}

.collectionDetail h1 {
	font-size: 1.8rem;
	margin: 0 0 40px;
}

.collectionDetail ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.collectionDetail li {
	/* width: 50%; */
	/* display: flex; */
}

.collectionDetail li img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


.collectionCre {
	line-height: 2.5;
	margin: 80px 0;
	font-size: 1.4rem;
}

.collectionMargin {
	margin: 0 0 60px;
}

@media screen and (max-width: 767px) {
	.collectionDetail ul {
		grid-template-columns: 1fr;
		grid-auto-rows: 1fr;
	}
}

@media only screen and (min-width: 769px) {
	.slider {
		letter-spacing: -.4em;
	}

	.slider li {
		letter-spacing: 0.08em;
		display: inline-block;
		width: 33.333333%;
	}

	.slider {
		margin: 0 0 60px;
	}
}

@media only screen and (max-width: 768px) {
	.swiperSide1 {
		width: 100%;
		max-width: 768px;
	}

	.swiperSide2 {
		width: 100%;
		max-width: 768px;
		float: none;
	}

	.collectionTxt-iori {
		margin-bottom: 50px;
	}

	/* Slider */
	.slider {
		margin: 0 auto 60px;
		width: 100%;
	}

	.slider img {
		height: auto;
		width: 100%;
	}

	/*slick*/
	.slick-prev:before,
	.slick-next:before {
		color: #000;
	}

	.slick-slider {
		position: relative;
		display: block;
		box-sizing: border-box;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-touch-callout: none;
		-khtml-user-select: none;
		-ms-touch-action: pan-y;
		touch-action: pan-y;
		-webkit-tap-highlight-color: transparent;
	}

	.slick-list {
		position: relative;
		display: block;
		overflow: hidden;
		margin: 0;
		padding: 0;
	}

	.slick-list:focus {
		outline: none;
	}

	.slick-list.dragging {
		cursor: pointer;
		cursor: hand;
	}

	.slick-slider .slick-track,
	.slick-slider .slick-list {
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	.slick-track {
		position: relative;
		top: 0;
		left: 0;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.slick-track:before,
	.slick-track:after {
		display: table;
		content: '';
	}

	.slick-track:after {
		clear: both;
	}

	.slick-loading .slick-track {
		visibility: hidden;
	}

	.slick-slide {
		display: none;
		float: left;
		height: 100%;
		min-height: 1px;
	}

	[dir='rtl'] .slick-slide {
		float: right;
	}

	.slick-slide img {
		display: block;
	}

	.slick-slide.slick-loading img {
		display: none;
	}

	.slick-slide.dragging img {
		pointer-events: none;
	}

	.slick-initialized .slick-slide {
		display: block;
	}

	.slick-loading .slick-slide {
		visibility: hidden;
	}

	.slick-vertical .slick-slide {
		display: block;
		height: auto;
		border: 1px solid transparent;
	}

	.slick-arrow.slick-hidden {
		display: none;
	}

	.collectionDetail {
		margin: 200px auto 0;
	}

	.collectionDetail li {
		width: 100%;
	}
}