@charset "utf-8";

/* ---------------------------------------------
- 縞鯵五目（ index ）
- CSパワーコーン（ cs-power_corn ）
- 桃色餌薬（ momoiro-eyaku ）
- 練生まんじゅう（ neri-nama-manjyu )
- 練生まんじゅう/4色覚（ nerinama-manjyu-attr )
- 誘拡散（ yukakusan )
----------------------------------------------------- */

/* ---------------------------------------------
- 縞鯵五目（ index ） 
--------------------------------------------- */

/* iOS系  BUG対策（背景固定） */
/* Chrome BUG対策（Blur効果） */
#shimaaji #wrap::before {
	content: "";
  display: block;
	margin: auto calc(50% - 50vw);
	width: 100vw;
	height: 100vh;
  background: url( ../site_images/prodCAT/shimaaji/category_shima-aji_BG.jpg);
  background: image-set( url( ../site_images/prodCAT/shimaaji/category_shima-aji_BG.webp));
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

#shimaaji #wrap::after {
	content: "";
  display: block;
	margin: auto calc(50% - 50vw);
	width: 100vw;
	height: 100vh;
  background-color: rgba(0,0,0,0.4);
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

.shimaaji {
  color: var(--white);
}


/* --- TOP --- */
.shimaaji_TOP {
  margin: 8% auto auto;
  width: 84%;
}

/* --- TITLE --- */
.shimaaji_TTL {
  margin: 15% auto 15%;
  width: 80%;
}

.shimaaji_TTL h2 {
  width: fit-content;
  font-family: "ShipporiMin", serif;
	font-weight: 400;
  font-size: var(--fs_18);
	line-height: 1;
  letter-spacing: 0.05em;
  text-align: left;
  position: relative;
}

.shimaaji_TTL h2::after {
  content: "";
  width: 2.5em;
  height: 1px;
  position: absolute;
  top: 60%;
  right: -3.5em;
  background-color: var(--white);
  opacity: 0.75;
}

/* --- TEXT --- */
.shimaaji_TXT {
  margin: -2% auto;
  width: 80%;
}

.shimaaji_TXT p {
  width: fit-content;
  font-family: "ShipporiMin", serif;
	font-weight: 400;
  font-size: var(--fs_17);
	line-height: 2;
  letter-spacing: 0.1em;
  text-align: left;
  position: relative;
}

/* --- LIST --- */
.shimaaji_LST {
  margin: 15% auto 30%;
  padding-top: 10%;
  width: 70%;
}

.shimaaji_LST h2 {
  margin: auto auto 25%;
  width: fit-content;
  font-family: "CrSC", serif;
  font-weight: 500;
  font-size: var(--fs_20);
	line-height: 1;
  letter-spacing: 0.05em;
}

.shimaaji_LST li {
  margin-bottom: 25%;
}

.shimaaji_LST li a:active,
.shimaaji_LST li a:hover {
  opacity: 0.6;
}

.shimaaji_LST li a .link-logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shimaaji_LST li a .link-logo h3 {
  width: 33%;
  margin: auto;
  margin-left: 0;
}

.shimaaji_LST li a .link-logo h3.one {
  width: 36%;
  margin: auto;
  margin-left: -8%;
}

.shimaaji_LST li a .link-logo h3.two {
  width: 42%;
  margin: auto;
  margin-left: -6%;
}

.shimaaji_LST li a .link-logo h3.three {
  width: 42%;
  margin: auto;
  margin-left: -6%;
}

.shimaaji_LST li a .link-logo h3.four {
  width: 42%;
  margin: auto;
  margin-left: -8%;
}

.shimaaji_LST li .link-logo p {
  padding-left: 2em;
  width: 60%;
  font-family: "ShipporiMin", serif;
	font-weight: 400;
  font-size: var(--fs_13);
	line-height: 1;
  letter-spacing: 0.05em;
  text-align: left;
  white-space: nowrap;
}



/* ---------------------------------------------
- CSパワーコーン（ cs-power_corn ）
--------------------------------------------- */

/* iOS系  BUG対策（背景固定） */
/* Chrome BUG対策（Blur効果） */
#CSpower-corn #wrap::before {
	content: "";
  display: block;
	margin: auto calc(50% - 50vw);
	width: 100vw;
	height: 100vh;
  background-color: var(--white);
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

.CSpower-corn {
  margin: auto;
  padding-top: 1%;
}

/* --- TOP --- */
.csp-corn-TOP {
  margin-bottom: 0;
  position: relative;
}

.csp-corn-TOP p {
  color: var(--white);
}

.csp-corn-TOP p:nth-of-type(1) {
  width: 100%;
  font-family: "ShipporiMin",serif;
  font-weight: 400;
  font-size: min(6.4vw,48px);
  text-align: center;
  position: absolute;
  top: 7.7%;
  left: 0;
}

.csp-corn-TOP p:nth-of-type(2) {
  width: 100%;
  font-family: "ShipporiMin",serif;
  font-weight: 600;
  font-size: min(10vw,75px);
  text-align: center;
  position: absolute;
  top: 15%;
  left: 0;
}

.csp-corn-TOP p:nth-of-type(3) {
  width: 100%;
  font-family: "ShipporiMin",serif;
  font-weight: 400;
  font-size: min(6vw,45px);
  text-align: center;
  
  position: absolute;
  top: 25%;
  left: 0;
}

.csp-corn-TOP h1 {
  width: 100%;
  font-family: "MGo2",sans-serif;
  font-weight: 400;
  font-size: var(--fs_18);
  text-align: right;
  color: var(--white);
  position: absolute;
  bottom: 3%;
  right: 5%;
}

/* icon */
.csp-corn-TOP__icon {
  width: 15%;
  position: absolute;
  top: 2%;
  left: 3%;
  z-index: 1;
}

/* --- TEXT --- */
.csp-corn-TXT {
  margin: 5% auto;
  padding: 5% 0;
  width: 85%;
  border-top: solid min(0.2vw,1.5px) var(--black);
  border-bottom: solid min(0.2vw,1.5px) var(--black);
} 

.csp-corn-TXT p {
  font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
} 

.csp-corn-TXT p:nth-of-type(1) {
  font-size: var(--fs_15);
} 

.csp-corn-TXT p:nth-of-type(2) {
  font-size: var(--fs_18);
} 


/* --- BG-TXT --- */
.csp-corn-BG-TXT {
  margin: auto;
  padding: 5% 0;
  width: 90%;
  background: url( ../site_images/prodCAT/shimaaji/cs-power-corn/cs-power-corn_03.jpg) no-repeat;
  background-size: cover;
  position: relative;
}

.csp-corn-BG-TXT p:nth-of-type(1) {
  margin: auto auto 5%;
  width: 100%;
  text-align: center;
  font-family: "ShipporiMin", serif;
  font-weight: 600;
  font-size: min(6.666667vw,50px);
  line-height: 1;
} 

.csp-corn-BG-TXT p:nth-of-type(2) {
  margin: auto;
  width: 80%;
  text-align: justify;
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 300;
  font-size: var(--fs_13);
  line-height: 1.3;
} 

/* --- INSERT --- */
.csp-corn-INSERT {
  margin: auto;
  padding: 5%;
  width: 100%;
  position: relative;
  z-index: 0;
} 

.csp-corn-INSERT__text {
  padding: 5% 0;
  width: 67.049808%;
  background-color: #ebe1a9;
  z-index: 0;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.45);
} 

.csp-corn-INSERT__text h2 {
  width: 100%;
  text-align: center;
  font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-size: var(--fs_18);
  line-height: 1;
  position: relative;
  z-index: 0;
  transform: translate(-5%, 0);
} 

.csp-corn-INSERT__text h2::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 65%;
  left: 50%;
  width: 85%;
  height: 100%;
  background: url( ../site_images/parts/other/paint10.png) no-repeat;
  background-size: contain;
  transform: translate(-50%,0) rotate(0deg) scale(1,0.75);
  z-index: -1;  
}

.csp-corn-INSERT__text p {
  margin: 4% auto 0;
  margin-left: 10%;
  width: 68%;
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 400;
  font-size: var(--fs_13);
  line-height: 1.2;
  text-align: justify;
} 

.csp-corn-INSERT__photo {
  width: 40%;
  position: absolute;
  top: auto;
  bottom: 13%;
  left: auto;
  right: 5%;  
  box-shadow: 5px 5px 10px rgba(0,0,0,0.45);
} 

/* --- BG-TEXT2 --- */
.csp-corn-BG-TXT2 {
  margin: auto;
  padding: 5% 0;
  width: 90%;
  background: url( ../site_images/prodCAT/shimaaji/cs-power-corn/cs-power-corn_05.jpg) no-repeat;
  background-size: cover;
} 

.csp-corn-BG-TXT2 p:nth-of-type(1) {
  margin: auto auto 5%;
  width: 100%;
  text-align: center;
  font-family: "ShipporiMin", serif;
  font-weight: 600;
  font-size: min(6.8vw,51px);
  line-height: 1;
} 

.csp-corn-BG-TXT2 p:nth-of-type(2) {
  margin: auto;
  width: 80%;
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 300;
  font-size: var(--fs_13);
  line-height: 1.3;
  text-align: justify;
} 

/* --- USAGE --- */
.csp-corn-USAGE {
  margin: auto;
  padding: 15% 0 17%;
}

.csp-corn-USAGE__text {
  margin: auto auto 15%;
  position: relative;
}

.csp-corn-USAGE__text p:nth-of-type(1) {
  margin-bottom: 0.5em;
  font-family: "ShipporiMin", serif;
  font-weight: 600;
  font-size: var(--fs_18);
  line-height: 1;
  text-align: center;
}

.csp-corn-USAGE__text p:nth-of-type(2) {
  margin-bottom: 6%;
  font-family: "ShipporiMin", serif;
  font-weight: 600;
  font-size: min(6.667vw,50px);
  line-height: 1;
  text-align: center;
}

.csp-corn-USAGE__text p:nth-of-type(3),
.csp-corn-USAGE__text p:nth-of-type(4),
.csp-corn-USAGE__text p:nth-of-type(5) {
  margin-bottom: 1em;
  font-family: "ShipporiMin", serif;
  font-weight: 400;
  font-size: var(--fs_13);
  line-height: 1.3;
  text-align: center;
}

.csp-corn-USAGE__text p:last-child {
  margin-bottom: 0;
}

/* --- USAGE --- */
.csp-corn-USAGE__photo {
  margin: auto;
  width: 80%;
  display: flex;
  justify-content: space-between;
}

/* 1 */
.csp-corn-USAGE__photo--1 {
  width: min(33.334vw,250px);
  height: min(33.334vw,250px);
  box-shadow: 4.167vw 4.167vw 5.834vw #555;
}

/* 2 */
.csp-corn-USAGE__photo--2 {
  width: min(33.334vw,250px);
  height: min(33.334vw,250px);
  box-shadow: min(4.167vw, 31.2525px) min(4.167vw, 31.2525px) min(5.834vw,31px) #555;
  transform: translate(0%,50%);
}

/* --- BOT --- */
.csp-corn-BOT {
  margin: 18% auto auto;
  width: 100%;
}



/* -----------------------------------
- 桃色餌薬（ momoiro-eyaku ）
----------------------------------- */
/* 背景固定なし */

/* --- TOP --- */
.momoiro-TOP {
  margin: auto;
  padding: 7% 7% 15%;
  position: relative;
}

.momoiro-TOP::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #f8e9ee;
  clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 70%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.momoiro-TOP h1 {
  position: relative;
}

/* logo */
.momoiro-TOP h1 .logo {
  width: 30%;
  position: absolute;
  bottom: 5%;
  right: 5%;
}

/* icon */
.momoiro-TOP .icon {
  width: 25%;
  position: absolute;
  top: 7%;
  left: 10%;
}




/* --- TITLE --- */
.momoiro-TTL {
  margin: 5% auto auto;
  width: 100%;
}

.momoiro-TTL h2 {
  margin-bottom: 10%;
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 700;
  font-size: var(--fs_20);
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
}

.momoiro-TTL h2 span.f1 {
  display: inline-block;
  margin-bottom: 3%;
}

.momoiro-TTL h3 {
  margin-bottom: 24%;
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 500;
  font-size: var(--fs_16);
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
}

.momoiro-TTL h3 span.f1 {
  display: inline-block;
  margin-bottom: 3%;
}

.momoiro-TTL p {
  margin: auto;
  width: fit-content;
  font-family: "CrInfant", serif;
  font-weight: 500;
  font-size: min(8vw,60px);
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
  position: relative;
}

.momoiro-TTL p::before {
  content: "―";
  width: 1em;
  height: 1em;
  position: absolute;
  top: 0;
  left: -1em;
  transform: scale(0.8,1);
}

.momoiro-TTL p::after {
  content: "―";
  width: 1em;
  height: 1em;
  position: absolute;
  top: 0;
  right: -1em;
  transform: scale(0.8,1);
}

/* --- TEXT --- */
.momoiro-TXT {
  margin: 15% auto 12%;
  width: 86%;
}

.momoiro-TXT p {
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 300;
  font-size: var(--fs_14);
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: justify;
}

/* --- INSERT --- */
.momoiro-INSERT {
  margin: auto;
  padding: 17% 7% 0;
  width: 100%;
  position: relative;
}

.momoiro-INSERT::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #f8e9ee;
  clip-path: polygon(0 16%, 100% 0%, 100% 65%, 0 81%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}



.momoiro-INS-BOX {
  margin: 2% auto auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.momoiro-INS-BOX .IMG {
  width: 48.75%;
}

/* --- IASS_TEXT --- */
#momoiro-eyaku .IASS_TXT {
  padding: 0 7%;
}

#momoiro-eyaku .IASS_TXT .text p {
  letter-spacing: 0;
}



/* ---------------------------------------------
- 練生まんじゅう（ neri-nama-manjyu )
--------------------------------------------- */

/* iOS系  BUG対策（背景固定） */
/* Chrome BUG対策（Blur効果） */
#neri-nama-manjyu #wrap::before {
	content: "";
  display: block;
	margin: auto calc(50% - 50vw);
	width: 100vw;
	height: 100vh;
  background-color: var(--white);
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

.neri-nama-manjyu {
  margin: auto;
  padding-top: 10%;
  width: 100%;
 
}


/* --- --- TOP --- --- */
.neri-nama-manjyu .TOP {
  margin: auto;

    position: relative;
}

.neri-nama-manjyu .TOP .text {
  margin: auto auto 11.6667% 5%;
  width: 64%;
}

.neri-nama-manjyu .TOP .image {
  position: relative;
}

/* icon */
.neri-nama-manjyu .TOP .RENEWAL {
  width: 25%;
  position: absolute;
  top: 5%;
  left: 5%;
}

/* --- --- TEXT --- --- */
/* TITLE */
.neri-nama-manjyu .TITLE {
  margin: 15% auto 12%;
  width: 90%;
}

.neri-nama-manjyu .TITLE p {
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 500;
  font-size: min(41.25px, max(5.5vw, 19.8px));
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: left;
}

.neri-nama-manjyu .TITLE p:nth-of-type(1) {
  margin-bottom: 5%;
}

/* TITLE-sub */
.neri-nama-manjyu .TITLE-sub {
  margin: auto auto 12%;
  width: 90%;
}

.neri-nama-manjyu .TITLE-sub p {
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 400;
  font-size: var(--fs_14-4);
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: left;
}

.neri-nama-manjyu .TITLE-sub p:nth-of-type(1) {
  margin-bottom: 2.5%;
}

/* TEXT */
.neri-nama-manjyu .TEXT {
  margin: auto;
  width: 90%;
}

.neri-nama-manjyu .TEXT p {
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 300;
  font-size: var(--fs_13);
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: justify;
  
}

/* --- --- BOTTOM --- --- */
.neri-nama-manjyu .BOTTOM {
  margin: auto;
}

/* photo */
.neri-nama-manjyu .BOTTOM .photo {
  margin: 12% auto;
}

/* text */
.neri-nama-manjyu .BOTTOM .text {
  margin: auto;
  width: 89%;
}

.neri-nama-manjyu .BOTTOM .text p {
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 300;
  font-size: var(--fs_13);
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: justify;
}



/* -----------------------------------------------------
- 練生まんじゅう/4色覚（ nerinama-manjyu-attr )
----------------------------------------------------- */
/* iOS系  BUG対策（背景固定） */
/* Chrome BUG対策（Blur効果） */
#neri-nama-manjyu-attr #wrap::before {
	content: "";
  display: block;
	margin: auto calc(50% - 50vw);
	width: 100vw;
	height: 100vh;
  background-color: var(--white);
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

.neri-nama-manjyu-attr {
  margin: auto;
  padding-top: 1%;
}


/* ------ TOP  ------ */
.manjyu-attr-TOP {
  margin: auto;
  width: 90%;
}

.manjyu-attr-TOP p {
  margin: 20% auto;
  width: 95%;
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  font-size: min( 6.3vw, 47.25px);
  letter-spacing: 0.3em;
  line-height: 1.6;
  text-align: left;
}

.manjyu-attr-TOP p::after {
  content: "";
  display: inline-block;
  margin-right: -0.3em;
}

/* ------ INSERT  ------ */
.manjyu-attr-INSERT {
  margin: auto;
  width: 90%;
}

/* ------ TITLE  ------ */
.manjyu-attr-TTL {
  margin: 20% auto 20%;
  width: 90%;
}

.manjyu-attr-TTL p {
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 400;
  font-size: var(--fs_18);
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

.manjyu-attr-TTL p {
}

.manjyu-attr-TTL p:nth-of-type(2) {
  margin: 5% auto 5%;
  font-size: var(--fs_18);
}

/* --- TEXT --- */
.manjyu-attr-TXT {
  margin: auto auto 20%;
  width: 90%;
}

.manjyu-attr-TXT p {
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 300;
  font-size: var(--fs_13);
  letter-spacing: 0.05em;
  line-height: 2;
  text-align: left;
  white-space: nowrap;
}

/* --- BOT --- */
.manjyu-attr-BOT {
  margin: 18% auto auto;
  width: 100%;
}



/* ----------------------------------------
- 誘拡散（ yukakusan )
---------------------------------------- */

/* iOS系  BUG対策（背景固定） */
/* Chrome BUG対策（Blur効果） */
#yukakusan #wrap::before {
	content: "";
  display: block;
	margin: auto calc(50% - 50vw);
	width: 100vw;
	height: 100vh;
  background-color: var(--white);
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

/* --- --- TOP --- --- */
.yukakusan_TOP {
  margin: auto;
  width: 100%;
  padding: 28% 0 10%;
  background-color: #233d0c;
  position: relative;
}

.yukakusan_TOP h1 {
  margin: auto;
  width: 50%;
  margin-bottom: 28%;
}

.yukakusan_TOP .PHOTO {
  margin: auto;
  width: 100%;
}

/* --- --- TITLE --- --- */
.yukakusan_TTL {
  width: 100%;
  padding-top: 25%;
  border-bottom: solid 1px #233d0c;
}

.yukakusan_TTL h2 {
  margin-bottom: 25%;
  padding-left: 6%;
  font-family: "Satsuki-Min", serif;
  font-weight: 500;
  font-size: var(--fs_18);
  letter-spacing: 0.05em;
  line-height: 1;
}

.yukakusan_TTL h2 span.f1 {
  display: inline-block;
  margin-bottom: 6%;
}

/* Photo */
.yukakusan_TTL .INS_PHOTO {
  width: 100%;
  padding: 6% 0;
  background-color: #233d0c;
  position: relative;
}

/* --- --- TEXT --- --- */
.yukakusan_TXT {
  margin: auto;
  width: 90%;
  padding-top: 22%;
}

.yukakusan_TXT p {
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  font-size: var(--fs_13);
  letter-spacing: 0.08em;
  line-height: 2.2;
  text-align: justify;
  
}

/* --- --- TEXT2 --- --- */
.yukakusan_TXT2 {
  margin: 18% auto;
  width: 90%;
}

.yukakusan_TXT2 p {
  margin: auto;
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  font-size: var(--fs_12);
  letter-spacing: 0.08em;
  line-height: 2.2;
  text-align: justify;
  position: relative;
}

.yukakusan_TXT2 p::before,
.yukakusan_TXT2 p::after {
  display: inline-block;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #233d0c;
}

.yukakusan_TXT2 p::before {
  position: absolute;
  top: max(-6vw,-45px);
  left: 0;
  transform: scale(1,0.7);
}

.yukakusan_TXT2 p::after {
  position: absolute;
  bottom: max(-6vw,-45px);
  left: 0;
  transform: scale(1,0.7);
}

/* --- --- IASS --- --- */
.yukakusan a .IASS_TXT {
  margin: 8% auto 25%;
  width: 98%;
}

/* --- link対策(PC・SP)@media制御 --- */
/* for PC */
@media (hover: hover) {
  a.link.IASS:hover {
    opacity: 0.6;
    text-decoration: none;
  }

}

/* for SP */
@media (hover: none) {
  a.link.IASS:active {
    opacity: 0.6;
    text-decoration: none;
  }

}