@charset "utf-8";
:root {
	--text-color: #797070;
  --text-color02: #6398d9;
    --bg-color: #c8e1ff;
}
main .font-yumin {
    font-family: "yu-mincho-pr6n", sans-serif;
    /* font-weight: 600; */
    font-style: normal;
    paint-order: stroke;
    -webkit-text-stroke: var(--text-color) 1px;
}
html {
	scroll-behavior: smooth;
}
main {
    background-color: #c8e1ff59;
    padding-bottom: 8%;
}
#wrapper {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: var(--text-color);
    letter-spacing: 0.125rem;
    background-color: var(--bg-color);
    padding-bottom: 8%;
}
#wrapper img{
  width: 100%;
  height: auto;
}
#wrapper a {
	text-decoration: none;
	color: var(--text-color);
	display: block;
}
#wrapper .pc {
	display: none;
}
#wrapper span.br {
    display: block;
}
span.br_sp {
    display: block;
}
@media (min-width: 768px){
#wrapper {
	width: 780px;
	line-height: 32px;
	padding-bottom: 0;
}
#wrapper .sp {
    display:none;
}
#wrapper span.br_sp {
    display: unset;
}
main {
    padding-bottom: 0;
}
}
#wrapper .en-word {
  letter-spacing: 0.6rem;
  color: var(--text-color02);
  font-size: 65%;
}
#wrapper .section-tit {
  font-size: 140%;
}
/*もっと見るボタン（四角デザイン）*/
#wrapper .more_btn {
    width: fit-content;
    min-width: 45%;
    margin: 0 auto 5%;
}
#wrapper .more_btn a {
  position: relative;
  display: inline-block;
  margin: 0;
  border: solid 1px var(--text-color);
  border-radius: 100px;
  text-align: center;
  padding: 1.4rem 2.75rem 1.4rem 2.3rem;
  background-color: white;
  font-size: 1rem;
  font-weight: bold;
  min-width: 48vw;
  color: var(--text-color);
}
#wrapper .more_btn a:after {
  transition: all 0.2s;
  content: '';
  display: inline-block;
  position: absolute;
  right: 1.7rem;
  top: calc(50% - 0.25rem);
  width: 0.5rem;
  height: 0.5rem;
  border-top: solid 1px var(--text-color);
  border-right: solid 1px var(--text-color);
  transform: rotate(45deg);
}
@media (min-width: 768px){
#wrapper .more_btn {
    margin-bottom: 0;
    width: 350px;
}
#wrapper .more_btn a {
	border-radius: 12rem;
	padding: 31px 82px 30px 65px;
	font-size: 24px;
	font-weight: bold;
	min-width: 24.0rem;
	width: 351px;
}
#wrapper .more_btn a:after {
	width: 14px;
	height: 14px;
	right: 42px;
	top: calc(50% - 8px);
	border-top: solid 1.5px var(--text-color);
	border-right: solid 1.5px var(--text-color);
}
}
/*メイン*/
#main {
  background-image: url(/img_visu/page/2025/other/22_contents12/bg_main-menu.png);
  background-size: contain ;
  background-repeat: no-repeat;
  aspect-ratio: 780 / 2360;
  padding-top: 12%;
}
#main .main-tit {
  width: 80%;
  margin: 0 auto;
}
#main .main-p {
  margin-top: 8%;
}
#main h2 {
  font-size: 250%;
  /* font-weight: normal; */
  /* paint-order: stroke; */
  /* -webkit-text-stroke: var(--text-color) 1px; */
  margin-bottom: 2%;
}
#wrapper .scroll-container {
    position: relative;
    margin-bottom: 140px;
}
.scroll-container .scroll {
    position  : absolute;
    top : 50%;
    left : 50%;
    transform: translateX(-50%) ;
}
.scroll-container .scroll::after {
    content : '';
    display : inline-block;
    position : absolute;
    background-color: #79707066;
    right : 50%;
    bottom : -100px;
    transform : translateX(-50%);
    width : 1px;
    height: 80px;
}
#main .main-p02 {
  margin-bottom: 2em;
}
@media (min-width: 768px){
#main .main-p {
    font-size: 28px;
    margin-bottom: 40px;
}
#main h2 {
	font-size: 72px;
	margin-bottom: 50px;
}
#wrapper .en-word {
	font-size: 18px;
}
#wrapper .scroll-container {
	margin-bottom: 330px;
}
#wrapper .scroll-container .scroll::after {
	height: 185px;
	bottom: unset;
	top: 65px;
}
#main p {
	font-size: 26px;
	line-height: 1.6;
}
}
/*mainアニメーションver*/
#main .main-image {
	position: relative;
	aspect-ratio: 780 / 416;
}
#main .main-imageL {
  animation: yura02 5s ease-in-out infinite alternate;
  transition: 1s ease-in-out;
  width: 25%;
  max-width: 183px;
  position: absolute;
  top: 4%;
  left: 11%;
  transform-style: preserve-3d;
  transform-origin: top left 5px;
}
#main .main-imageC {
  animation: yura 5s ease-in-out infinite alternate;
  transition: 1s ease-in-out;
  width: 27%;
  max-width: 201px;
  position: absolute;
  top: 20%;
  left: 36%;
  transform-style: preserve-3d;
   transform-origin: top left 10px;
}
#main .main-imageR {
  animation: yura02 5s ease-in-out infinite alternate;
  transition: 1s ease-in-out;
  width: 24%;
  max-width: 164px;
  position: absolute;
  top: 10%;
  right: 9%;
  transform-style: preserve-3d;
  transform-origin: top right 10px;
}
@keyframes yura {
  0% {
    transform: perspective(4000px) translateZ(0px) rotateX(0deg) rotateZ(0deg);
  } 
  50% {
    transform: perspective(4000px) translateZ(5px) translateY(-2px) rotateX(16deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(4000px) translateZ(-5px) translateY(3px) rotateX(-8deg) rotateZ(0deg);
  }
}
@keyframes yura02 {
  0% {
    transform: perspective(4000px) translateZ(0px) rotateX(0deg) rotateZ(0deg);
  } 
  50% {
    transform: perspective(4000px) translateZ(5px) rotateX(15deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(4000px) translateZ(-5px) rotateX(-5deg) rotateZ(0deg);
  }
}
@media (min-width: 768px){
#main .main-imageL {
  left: 12%;
}
#main .main-imageR {
  right: 12%;
}
}
/*メニュー*/
menu {
  margin-top: 7%;
  margin-bottom: 6%;
  background-color: #ffffff40;
  padding: 6% 3.124% 2%;
}
menu ul {
  margin-top: 4%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}
menu li {
  width: calc(94% / 3);
  margin-left: 3%;
  margin-bottom: 4%;
}
menu li:nth-child(3n+1) {
  margin-left: 0;
}
menu li a {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  /* padding: 0 1%; */
  box-shadow: 10px 10px 20px -8px #6398d914;
}
menu dt {
  font-size: 80%;
  letter-spacing: normal;
  margin: 3% 0 0;
}
menu dd {
    padding: 0;
}
menu dl {
  position: relative;
  padding-bottom: 10%;
}
menu dl:after {
    position: absolute;
    bottom: 5%;
    left: calc(50% - 0.25rem);
    display: block;
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-top: solid 1px var(--text-color);
    border-right: solid 1px  var(--text-color);
    transform: rotate(135deg);
    transition: all 0.2s;
}
@media (min-width: 768px){
menu {
	margin-top: 65px;
	padding-top: 65px;
}
#wrapper .section-tit {
	font-size: 42px;
}
menu ul {
	width: 703px;
	margin: 65px auto 0;
}
menu li {
	width: 217px;
	margin-left: 26px;
}
menu li a {
	border-radius: 20px;
}
menu dt {
	font-size: 20px;
}
menu dl:after {
	width: 12px;
	height: 12px;
}
}
/*アイテム*/
#wrapper h3.section-h3 {
  width: 50%;
  margin: 3% auto 0;
}

#wrapper #bra h3.section-h3 {
    max-width: 372px;
}
#wrapper .item-container {
  margin-top: 15%;
  background-image: url(/img_visu/page/2025/other/22_contents12/bg-section.png);
  background-size: contain;
  background-repeat: no-repeat;
  aspect-ratio: 780 / 2462;
}
#wrapper .item-container h4 {
  font-size: 85%;
}
#wrapper .item-container h4 .font-yumin {
  font-size: 160%;
  line-height: 2;
  /* font-weight: bold; */
}
#wrapper .model {
  margin: 3% 8% 7%;
  position: relative;
}
#wrapper .model-comment {
  position: absolute;
  width: 55%;
  top: 48%;
  left: -11%;
}
#wrapper .model-comment img[src="/img_visu/page/2025/other/22_contents12/comment-long.png"] {
  max-width: 352px;
}
#wrapper .model-comment img[src="/img_visu/page/2025/other/22_contents12/comment-short.png"] {
  width: 90%;
  max-width: 339px;
}
#wrapper .model-comment img {
    opacity: 0.9;
}
#wrapper .model-comment p {
  position: absolute;
  width: fit-content;
  font-size: 65%;
  text-align: left;
  left: 13%;
  top: 50%;
  line-height: 1.6;
}
#wrapper .point {
  margin-top: 8%;
  margin-bottom: 12%;
}
#wrapper .point h5 {
  margin-top: 1%;
  margin-bottom: 3%;
  color: #FFF;
  font-weight:900;
  -webkit-text-stroke: 2px var(--text-color02);
  text-stroke: 2px #FFF;
  paint-order: stroke;
}
#wrapper .point-icon ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  width: 75%;
  margin: 0 auto 5%;
}
#wrapper .point-icon li {
	width: calc(94% / 4);
	margin-left: 3%;
}
#wrapper .point-icon li:nth-child(3n+1) {
  margin-left: 0;
}
#wrapper .point-image {
	padding: 0 3.124%;
}
#wrapper .scroll_container {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 2%;
    margin-left: 2%;
    margin-top: 0.5em;
}
#wrapper .item_box {
    display: inline-block;
    width: calc(100% / 1.75);
    margin: 1%;
    vertical-align: top;
    white-space: normal;
    /* text-align: left; */
    background-color: #ffffff40;
    padding: 5%;
}
#wrapper .item_box .more_btn {
    width: fit-content;
    min-width: unset;
    margin: 10% auto 0%;
}
#wrapper .item_box .more_btn a {
	min-width: 14em;
	/* border-radius: 25px; */
	padding: 1rem 2.75rem 1rem 2.3rem;
}
@media (min-width: 768px){
#wrapper .scroll_container {
    overflow-x: unset;
    overflow-y: auto;
    white-space: unset;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    margin-left: auto;
    /* padding-left: 0.2em; */
    width: 90%;
    margin: 0 auto;
}
#wrapper .item_box {
    margin: 2% 4% 0 0;
    max-width: 215px;
    padding: 34px 0;
}
#wrapper .item_box a {
	width: 190px;
	margin: 0 auto;
}
#wrapper .item_box:nth-of-type(3n) {
    margin-right: 0;
}
#wrapper .item_box:last-of-type {
    margin-right: 0;
}
}
#wrapper .item-container h4 span.br {
	line-height: 1rem;
}
/*商品ごと微調整*/

#wrapper #item01 .point-image {
	margin: 0 auto;
	padding: 0;
}
#wrapper #item02 .model-comment {
  top: 54%;
}
#wrapper #item02 .point-image {
	padding: 0 0 0 3.124%;
	margin-top: -12%;
}
#wrapper #item06 .model-comment {
  left: unset;
  right: -8%;
  top: 5%;
}
#wrapper #item06 .model-comment p {
  left: 22%;
}
#wrapper .modelContainer {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  margin: 3% 3.124% 0;
}
#wrapper .modelBox {
  width: calc(96.5% / 2);
}
#wrapper .modelBox:first-child {
  margin-right: 3.5%;
}
#wrapper .modelBox .model {
  width: 100%;
  margin: 0;
}
#wrapper #item08 .model-comment {
  width: 30%;
  top: 3%;
  left: unset;
  right: -5%;
  max-width: 189px;
}
#wrapper #item07 .point-image {
	padding: 0 5%;
	max-width: 678px;
}
#wrapper #item08 .point-image {
	padding: 0 5%;
	max-width: 703px;
	margin: 0 auto;
}
#wrapper #item07 .more_btn, #wrapper #item09 .more_btn {
	margin-top: 10%;
}
#wrapper #item07 .more_btn a, #wrapper #item09 .more_btn a {
	min-width: 13em;
	/* border-radius: 15px; */
	padding: 1rem 2.75rem 1rem 2.3rem;
}
#wrapper #item02 h3.section-h3, #wrapper #item06 h3.section-h3, #wrapper #item07 h3.section-h3, #wrapper #item08 h3.section-h3, #wrapper #item09 h3.section-h3 {
    margin-bottom: 4%;
}
#wrapper #item05.item-container {
	aspect-ratio: 780 / 2743;
}

#wrapper #item06.item-container {
    aspect-ratio: 780 / 2850;
}
#wrapper #item07.item-container, #wrapper #item08.item-container, #wrapper #item09.item-container {
	background-image: url(/img_visu/page/2025/other/22_contents12/bg-section02.png);
	background-size: contain;
	aspect-ratio: 780 / 2082;
}
#wrapper #item08.item-container {
    /* aspect-ratio: 780 / 2200; */
    margin-top: -10%;
}
#wrapper #item09.item-container {
    aspect-ratio: 780 / 100;
}
/*#wrapper #item09.item-container {
    aspect-ratio: 780 / 1820;
}*/
@media (min-width: 768px){
#wrapper #bra h3.section-h3 {
	/* margin-bottom: 45px; */
}
#wrapper .item-container h4 {
	font-size: 24px;
	line-height: 2.2;
}
#wrapper .item-container h4 .font-yumin {
	font-size: 42px;
	line-height: 2.25;
}
#wrapper .model {
  width: 656px;
}
#wrapper .model-comment img[src="/img_visu/page/2025/other/22_contents12/comment-short.png"] {
	width: 339px;
}
#wrapper .model-comment img[src="/img_visu/page/2025/other/22_contents12/comment-long.png"] {
	width: 352px;
}
#wrapper .model-comment p {
	font-size: 20px;
	left: 50px;
}
#wrapper .point h5 {
	font-size: 28px;
	-webkit-text-stroke: 4px var(--text-color02);
}
#wrapper .point-icon li {
	width: 105px;
}
#wrapper .item_box .more_btn a {
	font-size: 15px;
	padding: 12px 35px 12px 20px;
	min-width: unset;
	width: 190px;
}
#wrapper .item_box .more_btn a:after {
	width: 10px;
	height: 10px;
	right: 19px;
	top: calc(50% - 5px);
}
#wrapper .item_box .more_btn {
	margin-top: 20px;
}
#wrapper #item01 .item_box {
	max-width: 270px;
}
#wrapper #item01 .item_box:nth-of-type(2n) {
    margin-right: 0;
}
#wrapper #item02 .point-image {
    width: 764px;
    padding: 0;
    margin-left: auto;
}
#wrapper #item06 .item_box {
	max-width: 270px;
	margin-right: 0;
}
#wrapper #item01 .model, #wrapper #item02 .model, #wrapper #item05 .model, #wrapper #item08 .model {
	margin-top: 5px;
}
#wrapper #item07 .modelContainer {
	margin-top: 25px;
}
#wrapper #item03 .point-image {
	width: 709px;
	padding: 0;
	margin: 0 auto;
}
#wrapper #item04 .point-image {
	width: 702px;
	padding: 0;
	margin: 0 auto;
}
#wrapper #item05 .point-image {
	width: 696px;
	padding: 0;
	margin: 0 auto;
}
#wrapper #item06 .point-image {
	width: 729px;
	padding: 0;
	margin: 0 auto;
}
#wrapper #item07 .point-image {
	padding: 0;
	margin: 0 auto;
}
#wrapper #item07 .more_btn a, #wrapper #item09 .more_btn a {
	font-size: 18px;
	padding: 20px 35px 20px 20px;
	min-width: unset;
	width: 270px;
}
#wrapper #item01 .model-comment p {
	left: 50px;
}
#wrapper #item03 .model-comment p {
	left: 55px;
	top: 53%;
}
#wrapper #item04 .model-comment p {
	left: 52px;
	top: 49%;
}
#wrapper #item05 .model-comment p {
	left: 60px;
	top: 49%;
}
#wrapper #item06.item-container {
    aspect-ratio: 780 / 2580;
}
#wrapper .modelContainer {
	width: 656px;
	margin: 0 auto;
}
#wrapper #item07 .more_btn, #wrapper #item09 .more_btn {
	padding-right: 23px;
}
#wrapper #item07.item-container {
	aspect-ratio: 780 / 1980;
}
}
/*その他特集*/
#wrapper .more_btn.endAll {
/*    margin-top: -20%;*/ /*ショーツ掲載後に表示*/
    margin-top: 16%;/*ショーツ掲載後に削除*/	
    margin-bottom: 10%;
}
#wrapper #other .item_box {
	background: unset;
	padding: 0;
}
@media (min-width: 768px){
#wrapper .more_btn.endAll {
/*    margin-top: -220px;*/ /*ショーツ掲載後に表示*/
    margin-top: 100px;	/*ショーツ掲載後に削除*/
    margin-bottom: 100px;
}
#wrapper #other .scroll_container {
	justify-content: flex-start;
	margin-top: 20px;
	padding-bottom: 80px;
}
#wrapper #other .item_box {
	max-width: 336px;
	margin-right: 30px;
	margin-bottom: 15px;
}
#wrapper #other .item_box:nth-of-type(2n) {
	margin-right: 0px;
}
#wrapper #other .item_box a {
	width: unset;
}
}
/*入荷まち*/
#wrapper .model.comming {
	position: relative;
}
#wrapper .model.comming:after {
	white-space: pre;
	content: "近日公開\A COMMING SOON";
	color: #fff;
	/* font-size: 150%; */
	text-align: center;
	align-content: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
}
#wrapper .c_up {
    margin-top: 15%;
}
@media (min-width: 768px){
#wrapper .model.comming:after {
	font-size: 30px;
}
}