@charset "UTF-8";

	.theme-bikyakupants img {
		max-width: 100%;
		width: 100%;
		height: auto;
	}
	.theme-bikyakupants {
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 16px;
		line-height: 1.75;
		color: #333;
		background-color: #fff;
	}
	
	h2 {
		font-family: 'Shippori Mincho', serif;
		text-align: center;
		font-size: 45px;
		font-weight: 300;
		line-height: 1.4;margin-bottom: 50px;
	}
	h2 span {
		color: #FFB4B4;
		vertical-align: baseline;
	}
	
	
	.main_color {color: #FA777D;}
	.accent_color {color: #FFB4B4;}
	.bg_color { background-color: #F5F5F5;}
	
	.theme-bikyakupants a {
		color: #fff;
		text-decoration: none;
	}
	
	.theme-bikyakupants Section {
		margin-top: 100px;
	}

	.theme-bikyakupants ol, .theme-bikyakupants ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
	.theme-bikyakupants *, .theme-bikyakupants ::before, .theme-bikyakupants ::after {
		box-sizing: border-box;
	}
	
	.Inner {
		width: 980px;
		margin: 0 auto;
	}
	.MenuSection.-upper {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 99;
		background-color: #FA777D;
	}

	.Menu_list {
		display: flex;
		/* gap: 20px; */
		align-content: center;
		align-items: center;
		justify-content: space-evenly;
		height: 55px;
	}
	.Menu_list > li {
		width: 190px;
		white-space: nowrap;
	}
	.MenuSection.-upper .Button {
		justify-content: start;
		/* height: 55px; */
		/* padding-left: 50px; */
		font-size: 16px;
	}
	.Button {
		display: grid;
		place-content: center;
		position: relative;
		text-align: center;
		line-height: 1;
		cursor: pointer;
	}
	.Button.-menu svg {
		width: 16px;
		height: 10px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 20px;
		margin: auto;
		fill: #fff;
		transition: transform 0.4s;
	}
	
	.Menu_list li a {
		display: grid;
		grid-auto-columns: 1fr;
		/* grid-auto-rows: 1fr; */
		grid-template-columns: 30px 170px;
		grid-template-rows: 1fr;
		gap: 0px 0px;
		grid-template-areas: "arrow menulist";
	}
	.arrow {
		grid-area: arrow;
		width: 20px;
	}
	.menulist {
		grid-area: menulist;
		text-align: left;
	}
	
	
	/* ------------------------------------------------------KV */
	.KV {
		z-index: 1;
		background-color: #fccacb;
		overflow: hidden;
		padding: 0;
    background-size: auto auto;
    width: 100%;
	}
	.KV h1 img {
    display: block;
    margin: auto;
    max-width: 1920px;
    width: 100%;
    height: 100%;
    padding: 0;
    max-height: 660px;
}
	
	/* ------------------------------------------------------intro */
	.intro_box {
		background-color: #F5F5F5;
		display: flex;
		flex-direction: row;
		padding: 60px;
	}
	#intro p {
		writing-mode: vertical-rl;
		font-size: 24px;
		letter-spacing: 10px;
		padding: 0 35px;
	}
	.intro_txt_box {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		margin-top: -42px;
	}
	.intro_txt_left {
		background-color: #ff404057;
		color: #fff;
		padding: 30px 40px;
	}
	.intro_txt_right {
		background-color: #ff404057;
		color: #fff;
		padding: 30px 28px;
	}
	.topic {
		font-family: 'Shippori Mincho', serif;
		font-size: 70px;
		text-align: center;
		color: #FFB4B4;
		line-height: 1;
		padding: 0 40px 0 40px;
	}

	/* ------------------------------------------------------about */
h3 {
	position: relative;
    background-color: #fa777d;
    color: #fff;
    text-align: center;
    font-weight: normal;
    font-size: 37px;
    line-height: 1.2;
    padding: 15px 0 20px;
	margin-bottom: 50px;
}
h3 span {
    font-size: 20px;
}
h3:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -35px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #fa777d transparent transparent transparent;
    border-width: 40px 40px 0 40px;
}
.about_box {
    display: flex;
    margin-bottom: 50px;
}
#about h4 {
    writing-mode: vertical-rl;
    font-size: 65px;
	font-weight: 300;
    font-family: 'Shippori Mincho', serif;
    letter-spacing: 10px;
    padding: 0 30px 0 0;
    margin: 0;
}
h4 span {
    color: #FFB4B4;
	vertical-align: baseline;
}
.h4_box{
	width: 170px;
}
h5 {
    font-size: 14px;
    font-weight: bold;
	margin: 20px 0 10px;
}
#about ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: center;
	padding: 0;
}
#about ul li {
    margin-right: 20px;
}
#about ul li:last-child {
    margin-right: 0px;
}

.listinner {
    background-color: whitesmoke;
    padding: 25px;
    font-size: 14px;
}

/* ------------------------------------------------------lineup */
.lineup_area {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.lineup_box {
    text-align: center;
    width: 48%;
}
#lineup h4 {
	writing-mode: unset;
    font-size: 45px;
	font-weight: 300;
    /* letter-spacing: 10px; */
    font-family: 'Shippori Mincho', serif;
    padding: 0;
    margin: 0;
}
h4 span {
    color: #FFB4B4;
}

.h4_p_middle {
    margin: 0;
}
.h4_p_small {
    margin: 0;
	font-size: 14px;
}

.Lineup_list {
    display: flex;
    gap: 11px;
    /* margin: 35px 25px 0 0; */
}
.Lineup_list_color {
    color: #fa777d;
    margin: 10px 0;
}
/* .Product {
    position: relative;
    padding-bottom: 200px;
} */
.Product_name, .ProductsData_name {
    text-align: center;
    line-height: 1.5;
    margin-top: 10px;
	display: none;
}
.ProductsData_col {
    width: 100%;
    text-align: center;
    line-height: 1;
    color: #fa777d;
}
.ProductsData_price {
    display: block;
    width: 100%;
    height: 45px;
    color: #fa777d;
    margin-top: 10px;
}
.ProductsData_price s {
    display: block;
    font-size: 14px;
    color: #000;
}
.ProductsData_price span {
    display: block;
}
.Product_size {
    display: block;
    width: 100%;
    height: 40px;
    padding-left: 5px;
    border: 1px solid #fa777d;
    border-radius: 5px;
    color: #fa777d;
}
.Button.-cart {
    height: 40px;
    font-size: 15px;
    color: #fff;
    background-color: #fa777d;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
}
/* .Product .Button {
    position: absolute;
    left: 0;
}
.Product .Button.-cart {
    bottom: 60px;
} */
.Button.-detail {
    height: 40px;
    font-size: 15px;
    color: #fa777d;
    background-color: #fff;
    border: 1px solid #fa777d;
    border-radius: 5px;
	margin-top: 10px;
}
.Product .Button.-detail {
    bottom: 0;
}
.Button.-detail svg {
    width: 8px;
    height: 13px;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    fill: #333;
}
.w-full {
    width: 100%;
}

.BrandSize {
  border-color: #333;
  border-style: solid;
  border-width: 1px 0;
  margin-top: 35px;
}
.BrandSize.-active .BrandSize_state {
  transform: rotate(180deg);
}
.BrandSize.-active .BrandSize_state::after {
  opacity: 0;
}
.BrandSize_title {
  position: relative;
  text-align: center;
  padding: 13px 0;
  margin: 5px 0;
  background-color: #f5f5f5;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#lineup h4.BrandSize_title {
    font-size: 16px;
    font-family: 'Noto Sans JP';
    font-weight: normal;
    padding: 13px 0;
    margin: 5px 0;
}
.BrandSize_body {
  overflow: hidden;
  height: 0;
}
.BrandSize_state {
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  margin: auto;
  transition: transform 0.6s;
}
.BrandSize_state::before, .BrandSize_state::after {
  content: "";
  position: absolute;
  background-color: #333;
}
.BrandSize_state::before {
  width: 100%;
  height: 1px;
  top: 7px;
  left: 0;
}
.BrandSize_state::after {
  width: 1px;
  height: 100%;
  top: 0;
  left: 7px;
  transition: opacity 0.6s;
}
.BrandSize_table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 1px;
  font-size: 13px;
  background-color: #dcdcdc;
  margin-top: 3px;
  margin-bottom: 30px;
}
.BrandSize_table th,
.BrandSize_table td {
  vertical-align: middle;
  text-align: center;
  padding: 0.5em 0;
}
.BrandSize_table th {
    background-color: #eee;
    font-weight: normal;
}
.BrandSize_table td {
  background-color: #fff;
}
.table_title {
    margin-top: 10px;
    text-align: left;
    font-size: 14px;
}

.MoreSetup {
  border-color: #fff;
  border-style: solid;
  border-width: 1px 0;
}
.MoreSetup.-active .MoreSetup_state {
  transform: rotate(180deg);
}
.MoreSetup.-active .MoreSetup_state::after {
  opacity: 0;
}
.MoreSetup_title {
  position: relative;
  text-align: center;
  padding: 0;
  margin: 5px 0;
  background-color: #ffa32a;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border-radius: 50px;
}
#lineup h4.MoreSetup_title {
    font-size: 16px;
    font-family: 'Noto Sans JP';
    font-weight: normal;
    padding: 13px 0;
    margin: 10px 0;
	color: #fff;
}
.MoreSetup_body {
  overflow: hidden;
  height: 0;
  background-color: #fff;
}
.MoreSetup_state {
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  margin: auto;
  transition: transform 0.6s;
}
.MoreSetup_state::before, .MoreSetup_state::after {
  content: "";
  position: absolute;
  background-color: #fff;
}
.MoreSetup_state::before {
  width: 100%;
  height: 1px;
  top: 7px;
  left: 0;
}
.MoreSetup_state::after {
  width: 1px;
  height: 100%;
  top: 0;
  left: 7px;
  transition: opacity 0.6s;
}

.btn_area {
	display: flex;
    justify-content: center;
    margin: 100px -20px 0;
}
.btn_area .Button {
    margin-top: 43px;
}
.Button.-pink {
    color: #fff;
    background-color: #fa777d;
    width: 100%;
    margin: 0 20px;
}
.Button.-orange {
    color: #fff;
    background-color: #ffa32a;
    width: 100%;
    margin: 10px 0;
}
.Button.-round {
    border-radius: 8px;
    padding: 21px 1em 22px;
}

/* ------------------------------------------------------coordinate */
.coordinate_box {
    display: flex;
    gap: 45px;
    margin-bottom: 140px;
}
p.comment {
    background-color: #F5F5F5;
    padding: 45px 30px 30px 30px;
    width: 510px;
    margin-top: -46px;
}
.coordinate_img img {
    box-shadow: 30px 35px #FA777D;
}
.coordinate_img_right img {
    box-shadow: 30px 35px #FFB4B4;
}

.bx-wrapper .bx-viewport {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    left: 0;
    background: #fff;
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
    top: 30px;
}
.bx-wrapper .bx-controls-direction a {
    z-index: 90;
}

/* ------------------------------------------------------staff_coordinate */
.staff_coordinate_box {
    display: flex;
    gap: 45px;
    margin-bottom: 140px;
}
#staff_coordinate {
    text-align: center;
}
#staff_coordinate h2 {
    font-size: 26px;
}

#category_bnr {
	background-color: #FFB4B4;
}
#category_bnr .Inner {
    width: 700px;
    padding: 20px 0 46px;
}
#category_bnr h2 {
    font-size: 26px;
	color: #fff;
	margin: 20px;
}
#future h2 {
    font-size: 26px;
	margin: 20px;
}
h2.SeeMoreItemsSection_title {
    font-size: 26px;
    margin-bottom: 30px;
}
section.SeeMoreItemsSection {
    padding-bottom: 100px;
}

.Button.-round2 {
    border-radius: 50px;
    padding: 21px 1em 22px;
    width: 70%;
    margin: 30px auto 0;
}
.summer_setup_area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.summer_setup_area img {
    width: 385px;
    height: 450px;
}
.summer_setup_area_txt {
    width: 590px;
}
.summer_setup_area p {
    background-color: #F5F5F5;
    padding: 80px 0 80px 80px;
}
.grey {
    filter: invert(50%) sepia(0%) saturate(11%) hue-rotate(143deg) brightness(101%) contrast(93%);
}

.future_box {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: row;
}
.future_box a {
    width: 33%;
    padding: 10px;
}

.SeeMoreItemsSection_list {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(3, 230px);
    gap: 20px;
    margin-top: 35px;
}
.SeeMoreItemsSection_link {
    display: grid;
    place-content: center;
    height: 40px;
    line-height: 1;
    color: #fff;
    background-color:#fa777d;
	border-radius: 7px;
}


/* アニメーション ---------------------------------------------------------------------------- */
.style_area_img {
    position: relative;
}
img.pico_01, img.pico_03, img.pico_05, img.pico_07, img.pico_09 {
    position: absolute;
    top: 0;
}
img.pico_02, img.pico_04, img.pico_06, img.pico_08, img.pico_10 {
    position: absolute;
    top: 0;
    left: 310px;
}
#sec01 .style_area_img p, #sec03 .style_area_img p, #sec05 .style_area_img p {
    position: absolute;
    bottom: 60px;
}
#sec04 .style_area_img p {
    position: absolute;
    bottom: 0;
}

@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
.blinking {
    animation: blink 0.6s ease-in-out infinite alternate;
}


.FadeSlideUp {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
}
    
    
.FadeSlideUp.-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 1.5s, transform 0.8s;
}
    
.ZoomOut {
    transform: scale(1.5);
}
    
.ZoomOut.-active {
    transform: scale(1);
    transition: transform 0.5s;
}
    
.ZoomIn {
    opacity: 0;
    transform: scale(0.5);
}
    
.ZoomIn.-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1.5s, transform 1s;
}


.SlideUp {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
}
.SlideUp.-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 1.2s, transform 0.6s;
}

.SlideDown {
    opacity: 0;
    transform: translate3d(0, -50px, 0);
}
.SlideDown.-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 1.2s, transform 0.6s;
}
.ScaleUpTopRight {
    opacity: 0;
}
.ScaleUpTopRight.-active {
    -webkit-animation: ScaleUpTopRight 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: ScaleUpTopRight 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes ScaleUpTopRight {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
            opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
            opacity: 1;
  }
}
@keyframes ScaleUpTopRight {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
            opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
            opacity: 1;
  }
}
     
.TrackingIn {
    opacity: 0;
    font-size: 20px;
    letter-spacing: 1em;
}
            
.TrackingIn.-active {
    opacity: 1;
    letter-spacing: normal;
	transition: opacity 1.2s, transform 0.6s;
}
            
.FadeInLeft {
    opacity:0;
    transform: translatex(-100px);
}
.FadeInLeft.-active {
    opacity:1;
    transform: translatex(0);
    animation-delay: 1s;
	transition: opacity 1.2s, transform 0.6s;
}
.FadeInRight {
    opacity:0;
    transform: translatex(+100px);
}
.FadeInRight.-active {
    opacity:1;
    transform: translatex(0);
    animation-delay: 1s;
	transition: opacity 1.2s, transform 0.6s;
}



.modal_wrap{
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: none;
    z-index:999999;
}
.modal_regist_finish{
    position: absolute;
    top: 43%;
    left: 52%;
    margin-left: -260px;
    margin-top: -50px;
    background: #fff;
    border-radius: 6px;
    padding: 26px 20px 14px;
    width: 440px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}
.modal_btn_arr {
    display: block;
    width: 50%;
    padding: 4px;
    margin: 0 auto;
}
.regist_finish_text{
    font-size: 1.6rem;
    color: #333;
    padding-bottom: 6%;
}
.regist_finish_text2 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 26px;
}
#modal-close {
    background: #fa777d;
}
.modal_btn_cart {
    font-size: 1.3rem;
    color: #fa777d;
    cursor: pointer;
    border: solid 1px #fa777d;
    border-radius: 3px;
}