/*
Theme Name: iishiko
Template: customify
*/

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24
}

body{
	font-family:Avenir, "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}

#page{
	overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
	font-family: 'Zen Maru Gothic', serif;
}

.full-width{
	width:100vw;
	margin:0 calc(50% - 50vw);
}


/* ----------------------------------------
 * header
 * ---------------------------------------- */
.site-img-logo {
	width:200px!important;
}

ul.nav-ec{
	display:flex;
	margin:0;
	padding:0;
	list-style:none;
}

ul.nav-ec li{
	margin:0 0 0 0.4em;
}

#page-titlebar{
	background:linear-gradient(45deg, #8dc7ec,#99f0d4,#9ddfa3);
  background-size: 200% 200%;
  animation: bg-gradient 10s ease infinite;
}

.btn-basic{
	background:linear-gradient(45deg, #8dc7ec,#99f0d4,#9ddfa3);
  background-size: 200% 200%;
  animation: bg-gradient 10s ease infinite;
	color:#000;
	font-family: 'Zen Maru Gothic', serif;
	padding:0.5em 2em;
	border-radius:100vh;
	display:inline-block;
}

.btn-basic.virtical{
	padding: 2em 0.5em;
}


/* ----------------------------------------
 * Home
 * ---------------------------------------- */

/* -------------------
 * Loading
 * -------------------- */

#loading-wrapper { 
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(255,255,255,1); 
	color:#111;
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  transition: all 0.3s; 
  z-index: 9999;
	font-size:12px;
	font-weight:bold;
} 

#loading-wrapper.completed {
animation-name: loadingComplete;
animation-fill-mode:forwards;
animation-duration:1.2s;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0.7s;
animation-direction:normal;
}

@keyframes loadingComplete{
  0% {
    background-color:rgba(255,255,255,1);
	  opacity:1;
  }

  80% {
    background-color:rgba(255,255,255,0);


  }
  100% {
    background-color:rgba(0,0,0,0);
	  opacity:0;
		pointer-events:none;
  }

}

.loader {
  width: 30px;
  height: 68px;
margin-bottom:6px;
}

/* -------------------
 * Swiper - Hero
 * -------------------- */

section#hero{

}

.swiper-hero {
	max-width:calc(100vw - 16rem);
	margin:0 auto 0 auto;
	position:relative;
}

.swiper-hero .swiper-wrapper,
.swiper-hero .swiper-slide{
	border-top-left-radius:4rem;
	border-bottom-left-radius:4rem;
	border-bottom-right-radius:4rem;
}

.swiper-hero .swiper-slide-active img,
.swiper-hero .swiper-slide-duplicate-active img,
.swiper-hero .swiper-slide-prev img{
animation: zoomUp 8.5s linear 0s normal both;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}
.swiper-hero .swiper-slide {
            overflow: hidden;
}
.swiper-hero .swiper-slide img {
  height: auto;
  width: 100%;
}




.swiper-hero .bg{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	  background:linear-gradient(45deg, #8dc7ec,#99f0d4,#9ddfa3);
  background-size: 200% 200%;
  animation: bg-gradient 10s ease infinite;
	left:-8rem;
	top:6rem;
	border-bottom-right-radius:4rem;
}

@keyframes bg-gradient{
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.swiper-hero .copy{
	position:absolute;
	right:-5rem;
	top:50%;
	z-index:1;
	writing-mode: vertical-rl;
font-family: 'Zen Maru Gothic', serif;
	font-size:1.5rem;
	transform:translatey(-50%);
	white-space:nowrap;
}

@media screen and (max-width: 768px) {
.swiper-hero {
	max-width:calc(100vw - 5rem);
	margin:0 4rem 0 auto;
	position:relative;
}
	
	.swiper-hero .swiper-wrapper,
.swiper-hero .swiper-slide{
	border-top-left-radius:1rem;
	border-bottom-left-radius:1rem;
	border-bottom-right-radius:1rem;
}

	.swiper-hero .copy{
		right:-3rem;
		top:0;
		transform:translatey(0);
		font-size:1rem;
	}

	.swiper-hero .bg{
		top:3rem;
		border-bottom-right-radius:1rem;
	}

}


/* -------------------
 * Swiper - Reccomended
 * -------------------- */
section#recommended .inner{
background-image:url(images/home/bg-recommended.jpg);
background-size:cover;
background-position:50% 50%;
background-repeat:no-repeat;
border-top-right-radius:4rem;
border-bottom-right-radius:4rem;
display:flex;
top:0;
align-items:center;
justify-content:center;
width:100%;
height:calc(100% - 4rem);

margin-bottom:4rem;
position:absolute;

}

section#recommended .bg{

	
width:calc(100% - 4rem);
	margin-top:4rem;
	height:calc(100% - 4rem);
	  background:linear-gradient(45deg, #8dc7ec,#99f0d4,#9ddfa3);
  background-size: 200% 200%;
  animation: bg-gradient 10s ease infinite;
	left:0rem;
	bottom:0rem;
	border-bottom-right-radius:3rem;

		
}

.swiper-recommended{
overflow:hidden;
position:relative;
}

.swiper-recommended .swiper-pagination .swiper-pagination-bullet-active  {
        background-color: #8ae295;
	}
.swiper-recommended .swiper-button-next ,
.swiper-recommended .swiper-button-prev {
	background-color: #8ae295;
	color:#fff;
	width:36px;
	height:36px;
	border-radius:100vh;
	padding:5px;
	top:50%;
	}
.swiper-recommended .swiper-button-next:after ,
.swiper-recommended .swiper-button-prev:after{
		font-size:16px;
	}


/* -------------------
 * About
 * -------------------- */

#about .container{
	display:flex;
	flex-direction:row-reverse;
	justify-content:center;
}

#about h2{
	writing-mode: vertical-rl;
	font-family: 'Zen Maru Gothic', serif;
	margin-left:1em;
}

#about .description{
	writing-mode: vertical-rl;
	height:20em;
	white-space:nowrap;
	font-family: 'Zen Maru Gothic', serif;
}

#about .about01{
	position:absolute;
	right:0;
	max-width:35vw;
	z-index:0;
}
#about .about02{
	position:absolute;
	left:0;
	max-width:30vw;
	z-index:0;
}

@media screen and (max-width: 768px) {
	#about .about01{
		max-width:30vw;
		right:-5vw;
	}
	#about .about02{
	max-width:25vw;	
	}
}


/* -------------------
 * Commercial Law
 * -------------------- */

dl.law {
display: flex;
flex-flow: row wrap;
width: 100%;
margin:0;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}

dl.law dt {
flex-basis: 11em;
padding: 0.8em 1.2em;
background-color: #f5f5f5;
border-bottom: 1px solid #eee;
margin:0;
}

dl.law dd {
flex-basis: calc(100% - 11em);
padding: 0.8em 1.2em;
background-color:rgba(255,255,255,0.7);
border-bottom: 1px solid #eee;
margin:0;
}

dl.law dt:first-of-type,
dl.law dd:first-of-type{
border-top: 1px solid #eee;
}

@media screen and (max-width: 559px) {
dl.law {
flex-flow: column;
display:block;
}
dl.law dt,
dl.law dd{
		border:0px;
	}
}


/* ----------------------------------------------------------------------
 * お問い合わせ
 * ---------------------------------------------------------------------- */

dl.contact {
display: flex;
flex-flow: row wrap;
width: 100%;
margin:0;
}

dl.contact dt {
flex-basis: 16em;
padding: 0.8em 0em;
border-bottom: 1px solid #eee;
margin:0;
}

dl.contact dd {
flex-basis: calc(100% - 16em);
padding: 0.8em 0em;
border-bottom: 1px solid #eee;
margin:0;
}

dl.contact dt:first-of-type,
dl.contact dd:first-of-type{
border-top: 1px solid #eee;
}

@media screen and (max-width: 559px) {
	dl.contact {
		flex-flow: column;
		display:block;
	}
	dl.contact dt{
		border:0px;
		padding-bottom:0.2em;
	}
	dl.contact dd{
		border:0px;
		padding-top:0.2em;
	}
}

span.required{
	background-color:#e14552;
	border-radius:0.2em;
	padding:0.15em 0.5em;
	font-size:75%;
	color:#fff;
	margin-left:0.4em;
}

span.unrequired{
	background-color:#bbb;
	border-radius:0.2em;
	padding:0.15em 0.5em;
	font-size:75%;
	color:#333;
	margin-left:0.4em;
}


/* ----------------------------------------
 * Product Kin-Maguro
 * ---------------------------------------- */

.hero-container{
	position:relative;
	margin-bottom:15%;
}

.hero-container .hero-maguro{
	position:absolute;
	bottom:-30%;
	width:55vw;
	left:3vw;
	z-index:1;
}

.hero-container .hero-logo{
	position:absolute;
	right:3vw;
	top:-15%;
	width:30vw;
}


section#intro{
	position:relative
}

section#intro .bg-intro{
	position:absolute;
	top:50%;
	transform:translate(0, -50%);
	max-width:30vw;

}	

section#intro .intro-content{
	position:relative;
	z-index:1;
}

section#kodawari{
	background-image:url(images/product/kin-maguro/bg-kodawari.jpg);
	background-size:cover;
	background-position:50% 50%;
	background-repeat:no-repeat;
}

section#kodawari .kodawari-container{
	width:100%;
	writing-mode: vertical-rl;
	height:20em;
	font-family: 'Zen Maru Gothic', serif;
	display:flex;
	flex-direction:column;
	justify-content:center;
	color:#fff;
}

section#kodawari .kodawari-container h2{
	
}

section#kodawari .kodawari-container ol{
list-style-type:cjk-ideographic;
margin:0;
padding:0;
}

section#kodawari .kodawari-container ol li {
margin:1.8em 0 0em 1em;
padding:0;
}


section#kodawari .kodawari-content{
	position:relative;
	z-index:1;
}

section#kodawari .kodawari-content:before{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#5ba8d9;
	content:"";
	left:-0.75rem;
	top:-0.75rem;
	z-index:-1;
	opacity:0.65;
	border-top-left-radius:1rem;
	border-bottom-left-radius:1rem;
	border-bottom-right-radius:1rem;
}

section#kodawari .kodawari-content:after{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#68c170;
	content:"";
	right:-0.75rem;
	top:0.75rem;
	z-index:-1;
	opacity:0.65;
	border-top-left-radius:1rem;
	border-bottom-left-radius:1rem;
	border-bottom-right-radius:1rem;
}

section#flow .row div[class^="col-"] > figure{
	position:relative;
	z-index:1;
	margin:0 0 1rem;
}

section#flow .row div[class^="col-"] > figure:before{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	top:0.5rem;
	left:0.5rem;
	border-top-left-radius:1.25rem;
	border-bottom-left-radius:1.25rem;
	border-bottom-right-radius:1.25rem;
	background:linear-gradient(45deg, #8dc7ec,#99f0d4,#9ddfa3);
	z-index:-1;
}

section#flow .row div[class^="col-"] > figure img{
	border-top-left-radius:1rem;
	border-bottom-left-radius:1rem;
	border-bottom-right-radius:1rem;
}


section#sale01{
	background-image:url(images/product/kin-maguro/bg-sale01.jpg);
	background-size:cover;
	background-position:50% 50%;
	background-repeat:no-repeat;	
}

section#sale02{
	position:relative;
}

section#sale02 .bg-sale02{
	position:absolute;
	bottom:0;
	right:0;
	transform:translate(0, 0);
	max-width:30vw;
}	

section#sale02 table.price{
	background-color:transparent;
	border:1px solid #ddd;
	border-collapse:collapse;
}


section#sale02 table.price td,
section#sale02 table.price th{
	border:1px solid #ddd;
	padding:0.2em;
	background-color:transparent;
}

section#sale02 table.price th{
	background-color:#f5f5f5;
	text-align:center;
}

section#sale02 table.price td{
	text-align:center;
}

section#sale02 table.price tr td:last-child{
	text-align:right;
}



figure.bg-gradient{
	position:relative;
	z-index:1;
	margin:0;
}

figure.bg-gradient:before{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	top:0.5rem;
	left:0.5rem;
	border-top-left-radius:1.25rem;
	border-bottom-left-radius:1.25rem;
	border-bottom-right-radius:1.25rem;
	background:linear-gradient(45deg, #8dc7ec,#99f0d4,#9ddfa3);
	z-index:-1;
}

figure.bg-gradient img{
	border-top-left-radius:1rem;
	border-bottom-left-radius:1rem;
	border-bottom-right-radius:1rem;
}


/* ------------------------------
 * WP Pagenavi
 * ------------------------------ */

.wp-pagenavi {
    margin: 0  20px 0;
    font-size: 12px;
	text-align:center;
}
.wp-pagenavi a {
    color: #4a4a4a;
}
.pages {
    margin-right: 20px;
	display:none;
}
.wp-pagenavi .current,
.wp-pagenavi a.page {
    margin: 0 3px 6px 3px;
    display: inline-block;
    border: solid 1px #ddd;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
	background:#fff;
	color:#777;
}
.wp-pagenavi .current {
    border: 1px solid #444;
    background: #444;
    color: #fff;
}
.wp-pagenavi a.page:hover {
    background:#444;
    color: #fff;
	border-color:#444;
}
.wp-pagenavi .first,
.wp-pagenavi .extend {
    margin-right: 10px;
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink{
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .first,
.wp-pagenavi .last{
	    margin: 0 6px 6px 0;
    display: inline-block;
    border: solid 1px #ddd;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
	background:#fff;
	color:#777;
}