@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Kosugi+Maru&family=Sawarabi+Gothic&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 1em;
} /**/

img {
  max-width: 100%;
  vertical-align: bottom;/**/
}

a{
  color: #333;
  text-decoration: none;/**/
}
.babydoll_Logo{text-align:right ;margin-top: 10px;}
/*---------------------------------------------------------------------*/
.banner{display: none;}

.en{font-family:'Lilita One', cursive;}
.ttlen{
	font-size: 1.5rem;
	border-top:solid 1px #000;
	border-bottom:solid 1px #000;
	padding: 5px 0;
	/*letter-spacing: .02rem;*/
  }

.numbp{
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
}
.numbp_s{font-size: 1.5rem;}
.numbp_s2{
    font-size: .9rem;
    font-weight: 600;
}
.ttl{
	line-height: 1.8;
 font-weight: 600;
 font-size: .9rem;
}
.btn{
    background-color:#f2f2f2 ;
    font-size: 1.5rem;
    margin: 5% 15%;
    padding: 2% 0;
    color:#000;
    border: solid 1px #ccc;
    font-weight: 700;
    border-radius: 30px;
    letter-spacing: .15rem;
}
    
#container{
  position: relative;
  margin: 0 auto;
  text-align: center;}

#container2 {
  position: relative;
  margin: 0 auto;
  text-align: center;
  max-width:530px;
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 50px;
  overflow: hidden;  
  background-color:#fff ;
 /* border-radius: 20px;#FBF4E9*/
}
.main{background-color: #fff;position: relative;z-index: 99;}
section {
  position: relative;
 
}
#index{padding-top: 10%;}
.back{position:fixed;z-index: -1;height: 100vh;width: 100%;}
.flexbox {
  display: flex;
 flex-wrap: wrap;
}
.flexitem{
	flex-basis: 48%;
	align-items: center; 
	background-color: #F9F9F9;
	/*border: solid 1px #000;*/
	margin: 1%;
	border-radius: 10px;

}
.flexbox div{
	display: flex;
	align-items: center;
	font-size: 1rem;
	font-weight: 700;
	padding-left: 5%;
}

.flexbox_in{
  display: flex;
   width: 100%;
    align-items: flex-end;
   margin: 0 auto;
    text-align: center;
    padding-bottom: 5%;
    /**/
}
.slider.sitem{
    text-align: center;
    
}
.sitem_all{padding: 5%;border-radius: 10px;margin: 0 5%;background-color: #f0f0f0;}
.sitem img{text-align: center;margin: 0 auto;width: 70%;}
/*.in_ttl p{flex-basis: 50%;}*/
.in_ttl_txt{
    text-align: left;
    font-size: .8rem;
    flex-basis: 80%;
}
.in_num{
    text-align: right;
    font-size: 2rem;
    flex-basis: 20%;
}
.in_ul{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding:0 0 5% 0;/**/
    
}
.in_ul .in_price{
   
    font-size: 1.1rem;
    font-weight: 700;
    
}
.in_box1{flex-basis: 70%;text-align: left;}
.in_box2{ flex-basis: 20%;}
.in_ul li{
    list-style: none;
    border-bottom: solid 1px #ccc;
    padding: 10px 0; 
    font-weight: 500;
    font-size: .9rem;
   
}
.s_txt{font-size: .7rem;font-weight: 500;}


.right_ck{margin-left: 20px;}
.topttl{
	padding: 20px 0;
}

.icon {position: absolute;}
.fbox{margin-top: 30px;
	  text-align: left;
   }
.fbox .limited{font-weight: 400;font-size: .7rem;}
#top_intro{
  position: relative;
 
}


.itembox{padding:0 0 40px 0;}


.goodsName {
 
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  color:#000;
 
}




.text {
  text-align: left;
  line-height: 1.8;
  font-weight: 400;
  font-size: 1rem;
  padding: 0 6%;
  padding: 100px 6%;
}



.intro_ttl {
  padding: 0px 7.5%;
  line-height: 2;
  font-weight: 700;
	text-align: left;
	margin: 0 auto;
	width: 85%;
	
}
 .intro_ttl span {
  color: #000;
  display: inline-block;
  background-color: #fff;
  padding: 0 5px;
  line-height: 1.3;
  font-size: 1.5rem;
  border-radius: 2px;
  margin-bottom: 7px;
} 
 .intro_p {
  color: #000;
  font-size: 1.1rem;
  display: inline-table;
}

.coordi {
  padding: 50px 0;
}


#usp{padding-top: 20px;}


 .catch {
   display:flex;
   justify-content: flex-end;
     margin-bottom: 5%;
}

.catch p {
/*  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;*/
      display: inline-block;
    line-height: 1.8;
    font-weight: 600;
    font-size: 1.2rem;
    padding: 0 6%;
    width: 100%;   
}

.catch p span {
  padding: 3px 0 0 2px;
	 position: relative;
  background: linear-gradient(transparent 60%, #FCDE70 60%);
}
.point{
  padding: 50px 0;
  
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5px;
   row-gap: 5px; /*margin: 20px 0;*/
}
.point_1,.point_2,.point_3,.point_4{
	position: relative;
	
}

.p_text{
	position: absolute;
	z-index: 9;
	text-align: left;
	font-size: .9rem;
  font-weight: 700;
	line-height:1.5; 
  padding: 3px 0;
  -ms-writing-mode:verical-rl;
      writing-mode: vertical-rl;
      display: inline-block;
      background-color: #ffffffd1;
  letter-spacing: .05rem;
}

.p_text1{right: 3%;top:-15%;}
.p_text2{right:6%;bottom: 5%;}
.p_text3{left: -6%;top:-5%;}


.price_txt {
  text-align: left;
  line-height: 1.5;
  font-weight: 400;
  font-size: .9rem;
   padding-left: 10%; 
  position: relative;
 
}
.price_txt p{
	display: inline-table;
	text-align: left;
}
.price{font-size: 1.5rem;font-weight: 700;line-height: 1.2;}

.limited{font-size: .8rem;color: firebrick;}

.in_flex{
    display: flex;
    align-items: center;
    justify-content:center; 
    text-align: left;
}


.fitem_1{flex-basis: 20%;width: 20%;}
.fitem_3{flex-basis: 60%;width:55%;padding-left: 5%;}
hr {
  padding: 20px 0;
  overflow: visible;	
}
.hr2 {
  border-top: 1px solid #ccc;
	border-left: 0;
  text-align: center;
	border-bottom: none;
}

.hr2::after {
  content: 'Coordination';
  display: inline-block;
  position: relative;
  top: -35px;
  padding: 0 3px;
  background: #fff;
  color: #000;
  font-size: 1.6rem;
	font-family:'Lilita One', cursive; 
}

.view {
  margin-bottom: 30px;
  position: relative;
  width: 100%;
}

.coordi .intro_ttl{
    font-size: 1rem;
    font-weight: 500;
}
.view .intro_ttl{
	text-align: center;
	margin: 0 auto;
	width: 100%;
	padding:0 0 20px 0;
    
}

.slider2 {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.check{
  

  padding:2px 10px;
   /*  width: 60%;
    margin-top:20px;*/
    margin-left: 20%;
    font-size: .9rem;
    color: #333;
    font-weight: 700;
  background-color:#f0f0f0;
    border-radius: 20px;
    border:solid 1px #ccc;
}


.more {
  padding-bottom: 50px;
}
.more a {
  color: #fff;
}
.more .btn {
  font-size: 1.2rem;
}
.mimg_c5{border-radius: 50% 50% 0 0;margin-top: 30px;}



.point_4 img{border-radius: 50%;}


.point .en{
	color:#000;
	line-height: 1.8;
	background: linear-gradient(transparent 60%, yellow 60%);
	font-size: 1.5rem;
}

#intro_left,#intro_right {
   position: relative;
    width: calc((100% - 530px) / 2);
    -webkit-transition: opacity 0.5s ease 0s;
    transition: opacity 0.5s ease 0s;

}

#intro_left{
    background-image: url("../img/back.png");
    background-size: contain;
    background-position: center;
     filter: blur(.5px);/**/
	opacity: .7;
   
}
#intro_right{ 
    display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo{
   

    padding: 10%;
    width: 80%;
}
.logo_box{
    border-radius: 50%; 
    background-color: #fff;
    width: 60%
}
#back {
    display:flex;
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-size:cover;
    background-position:center; 
    z-index: -1;
    background-color:#3C80C0/*#BDCCD4 0B60B0*/;

    
}

 @media (max-width: 768px) {
  #container2{
    border:none;
    border-radius: 0;
    max-width: 100%;
    margin-bottom: 0px;
      
  }

  .view{width: 100%;}
 .banner{display: inline-block;margin-bottom: 30px;}
	.topttl{display: none;}
	.babydoll_Logo{display: none;}
    #back {
    display:block;
    position: relative;
        z-index: 1;
        background-color:#fff;
	

}
     
     #intro_left{
       height: 58vh;
         width: 100%;
         /*background-repeat: no-repeat;*/
         filter: blur(0px);
	   opacity: 1; 
         background-color: #3C80C0;
     }    
     
     #intro_right{
         width: 100%;
     }
     
  
} 


@media (max-width: 450px) {
   #intro_left{
       height: 58vh;
         width: 100%;
         background-repeat: no-repeat;/**/
         filter: blur(0px);
	   opacity: 1; 
         background-color: #3C80C0;
     } 
	.view .intro_p{font-size: 1rem;}
  
}

.site-header{z-index: 99;}
.gnav__menu__item {
  background-color:#fff;
  padding: 5px 10px;
  border-radius: 5px;
  text-align: center;
  border: solid 1px #ccc;
  /*font-size: 3rem;*/
  list-style: none;
  
  
}
.gnav__menu a{color:#000;}


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


/* --------------------------------------footer---------------------------------------- */
#gFooter .fLinkList li a {
  padding: 29px;
  display: block;
  color: #666;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  background-color: #e2e2e2;
}

#gFooter .fLinkList li a:hover {
  opacity: 0.7;
}

#gFooter address {
  padding: 35px 5px 56px;
  color: #666;
  font-size: .9rem;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #f0f0f0;
}

#gFooter {
  bottom: 0;
}/*# sourceMappingURL=layout.css.map */





/*---------------------------------slider サムネイル-----------------------------------------------------------------------------------------------------------------------*/

.slider6-wrap {
  width: 101%;
  margin: 0 auto;
  position: relative;
}
.slider-6 .slick-slide {
 /* height: 400px;*/
  overflow: hidden;
}
.slider-6 .slick-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumbs_dots,.thumbs_dots2,.thumbs_dots3,.thumbs_dots4 {
  margin:20px 0;
}
.thumbs_list li {
  display: inline-block;
  width:120px;
	margin: 0 10px;
  height: 140px;
  /*opacity: 0.8;*/
  cursor: pointer;
  transition: opacity 0.3s;	
	border-radius: 5px;
}


.thumbs_list li:hover{
	transform: rotate(-5deg);
}
.thumbs_list li.slick-active {
  transform: rotate(-5deg);
  opacity: 1;
 font-size: 1.2rem;
	
	
}

.thumbs_list li:nth-child(n)::before{
	color: #333;
	font-family:'Lilita One', cursive;	/**/ 
	font-size: .9rem;
	margin-left: -50%;
	font-weight: 400;
	padding: 5px;
	
	
	/*background:#fff;*/
	}

.thumbs_list li:first-child::before{
	content: "Look 1.";/*sports*/
    
}
.thumbs_list li:nth-child(2)::before{
	content: "Look 2.";/*camp*/
   
	
}
.thumbs_list li:nth-child(3)::before{
	content: "Look 3.";/*Beach*/
  
	
}
.thumbs_list li:hover::before{
 	font-size: 1.2rem;
	font-weight: 400;
}
.thumbs_list li.slick-active::before{
 	font-size: 1.2rem;
	font-weight: 400;
	border: solid 1px #ccc;
	border-radius: 50%;
	background: #fff;
}

.arrow_box {
    /*display: flex;
    width: 100%;
    align-items: center;
    justify-content:center;
    
    justify-content: flex-end;
    margin: 20px 0 0;
    position: relative;*/
}

.prev-arrow,
.next-arrow {
    display: block;
    width: 20px;
    height: 20px;
    background: #ccc;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    position:absolute;
    bottom: 60%;
    z-index: 99;
}

.prev-arrow {
    transform: rotate(180deg);
    margin-right: 20px;
    left: 0%;
}
.next-arrow{
    right: 1%;
}
.prev-arrow::before,
.next-arrow::before{
    position:absolute;
    content: "";
    width:5px;
    height:5px;
    border-right: 2px solid #FFF;
    border-top: 2px solid #FFF;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    transform:rotate(45deg);
}


@media(max-width: 420px){
	.thumbs_list li {
  
  width:90px;
	margin: 0 10px;
  height: 110px;

}
	
}