@charset "utf-8";

/* common ----------------------------------------*/
*:after { display:none; }
ul:after { display:none; }
main { font-family:YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; }
.goth { font-family:YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; }
.mincho { font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "Times New Roman", Meiryo, serif; }
main .inner { max-width: 104rem; padding:0 2rem; margin:0 auto; color:#fff; }

p { margin:0; }
img { user-drag: none;-webkit-user-drag: none;-moz-user-select: none; }
.max { margin:0 calc(50% - 50vw); width:calc(100% + (50vw - 50%)); }
.btn { text-align:center; border:solid 1.5px #fff; }
.btn a { display:block; padding:0.5rem 2rem; color:#fff; font-weight: bold; }
.btn a i { margin-left:2rem; }
.big-btn { text-align:center; border:solid 2px #fff; margin:auto; }
.big-btn a { display:block; padding:0.5rem 2rem; color:#fff; font-size:2.4rem; font-weight: bold; }
.big-btn a i { margin-left:2rem; }

/* parts */
.tc { text-align:center; }
.anc { padding-top:10rem; margin-top:-10rem; }
.pc { display:block; }
.pc-only { display:block; }
.sp-only { display:none; }
.pc-inline { display:inline-block; }
.pc2 { display:block; }
.mid { display:none; }
.sp { display:none; }
.shadow { box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.6); }
.bold { font-weight: bold; }

/* カラー展開 */
.color { display:flex; }
.color div { width:5rem; height:5rem; border-radius:50%; background:#333; margin-right:2rem; border:solid 1px #fff; }
.color div:last-child { margin-right:0; }
.color .blk { background:#000; }
.color .wht { background:#fff; }
.color .brn { background:#8A533B; }
.color .org { background:#DC000C; }
.color .org2 { background:#E44112; }
.color .cam { background:#C38B19; }
.color .grn { background:#005726; }
.color .nev { background:#001650; }
.color .wine { background:#8C0040; }
.color .blue { background:#0E6EB8; }
.color .pink { background:#F5AB93; }



/* header 透明の場合 */
div.fs-l-page { margin-top:0!important; }
#header-new { background:none!important; transition:all .6s; }
main.fs-l-main { position:relative; }
.breadcrumbs { position:absolute; left:50%; top:10rem; transform:translateX(-50%); z-index:1; max-width:128rem; padding:0 2rem; margin:0 auto; }
#header-new.change-color { background:rgba(255,255,255,.8)!important; }
/* ここまで */

@media screen and (max-width:1024px){
  .pc2 { display:none; }
}
@media screen and (max-width:768px){  
  .mid { display:block; }
}
@media screen and (max-width:600px){
  .pc { display:none; }
  .pc-inline { display:none; }
  .sp { display:block; }
  .pc-only { display:none; }
  .sp-only { display:block; }
  
  .big-btn a { font-size:2rem; }
  .sp-max { margin:0 calc(50% - 50vw); width:calc(100% + (50vw - 50%)); }
}

h2 { font-size:3.6rem; text-align:center; }
h2.img-tt { font-size:2rem; line-height:1.2; }
h2.img-tt span { display:block; text-align:center; margin-top:1rem; }

/* mv ----------------------------------------*/
#mv { margin-top:0; }
#mv .mv-area { position:relative; }
#mv .mv-tx { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

/* catch ----------------------------------------*/
#catch { margin-top:0; padding:4rem 0 20rem; position:relative; background:#7EB0C9; }
#catch .sub { text-align:center; font-weight: bold; font-size:2rem; margin:5rem 0; }
#catch .t { font-size:3.6rem; text-align:center; font-weight: bold; }
#catch ul { display:flex; border-bottom:solid 1px #fff; border-top:solid 1px #fff; padding:2rem 0; }
#catch ul li { width:25%; border-left:solid 1px #fff; }
#catch ul li:first-child { border-left:none; }
#catch ul li a { display:block; text-align:center; color:#fff; font-size:2.4rem; line-height:1.2; font-weight: bold; }
#catch ul li a i { font-size:3rem; line-height:1; transition:all .4s; }
#catch ul li a:hover i { transform:translateY(1rem); }
#catch .icon { position:absolute; bottom:-5rem; left:50%; transform:translateX(-50%); z-index:1; }


/* sec01 ----------------------------------------*/
#sec01 { padding:20rem 0 15rem; background:#2284C7; position:relative; }
#sec01 .mv { margin-top:5rem; }
#sec01 ul { display:flex; justify-content:space-between; margin-top:5rem; }
#sec01 ul li {}
#sec01 ul li.img-area { width:55%; position:relative; }
#sec01 ul li.img-area .item {  }
#sec01 ul li.img-area .item:last-child { position:absolute; bottom:0; right:0; width:35%; }
#sec01 ul li.img-area .item:last-child img { object-fit:contain; }
#sec01 ul li.img-area .item img { border-radius:50%; }
#sec01 ul li.tx-area { width:40%; }
#sec01 ul li.tx-area .t { font-size:3.6rem; margin-bottom:2rem; }
#sec01 ul li.tx-area .tt { margin-bottom:2rem; font-weight: bold; font-size:2rem; }
#sec01 ul li.tx-area .tx { margin-bottom:3rem; }
#sec01 ul li.tx-area .kome { margin:1rem 0 2rem; font-weight: bold; }
#sec01 ul li.tx-area .price { font-size:4rem; margin-bottom:2rem; line-height:1.5; }
#sec01 ul li.tx-area .price span { font-size:75%; display:inline-block; vertical-align:bottom; }
#sec01 .icon { position:absolute; left:0; bottom:2rem; }
#sec01 .icon img { width:80%; }

/* sec02 ----------------------------------------*/
#sec02 { background:#7EB0C9; padding:10rem 0; position:relative; }
#sec02 .inner { position:relative; z-index:10; }
#sec02 ul.item-list { display:flex; justify-content:space-between; flex-wrap:wrap; margin-top:5rem; }
#sec02 ul.item-list li { width:45%; display:flex; flex-direction:column; }
#sec02 ul.item-list li:nth-of-type(n+3) { margin-top:3rem; }
#sec02 ul.item-list li .tt { font-size:2.4rem; font-weight: bold; margin-bottom:1rem; }
#sec02 ul.item-list li .tx { margin-bottom:2rem; }
#sec02 ul.item-list li .price-color { margin-top:auto; }
#sec02 ul.item-list li .price-color .cs { margin:1rem 0 2rem; }
#sec02 ul.item-list li .price-color .price { display:flex; align-items:center; }
#sec02 ul.item-list li .price-color .price p,#sec02 ul.item-list li .price-color .price div { width:50%; }
#sec02 ul.item-list li .price-color .price p { font-size:2.4rem; }
#sec02 ul.item-list li .price-color .price p span { font-size:75%; display:inline-block; vertical-align:bottom; }
#sec02 .big-btn { margin-top:5rem; max-width:40%; }
#sec02 .form { max-width:100rem; margin:0 auto; }
#sec02 .form .tc { margin:5rem 0; }
#sec02 h3 { text-align:center; font-size:3rem; font-weight: bold; margin-top:10rem; }
#sec02 h3 span { display:block; font-weight:normal; font-size:1.6rem; }

#sec02 .form ul.list { display:flex; justify-content:space-between; align-items:center; margin-top:3rem; }
#sec02 .form ul.list li { width:45%; }
#sec02 .form ul.list li.img { order:2; }#sec02 .form ul.list li.img { order:2; }
#sec02 .form ul.list li ul { display:flex; justify-content:space-between; flex-wrap:wrap; }
#sec02 .form ul.list li ul li { width:30%; }
#sec02 .form ul.list li ul li:nth-of-type(n+4) { margin-top:3rem; }
#sec02 .form ul.list li ul li a { display:block; font-weight: bold; color:#fff; text-align:center; }
#sec02 .form ul.list li ul li a p { text-align:center; }

#sec02 .color-area { max-width:100rem; margin:10rem auto; }
#sec02 .color-area ul.list { display:flex; justify-content:space-between; align-items:center; margin-top:3rem; }
#sec02 .color-area ul.list li {}
#sec02 .color-area ul.list > li:first-child { width:45%; }
#sec02 .color-area ul.list > li:last-child { width:53%; }
#sec02 .color-area ul.list li ul { display:flex; flex-direction:column; height:100%; }
#sec02 .color-area ul.list li ul li { text-align:center; display:flex; justify-content:space-between; }
#sec02 .color-area ul.list li ul li:nth-child(2) { margin-top:2rem; }
#sec02 .color-area ul.list li ul li a { 
  font-size:2rem;
  color:#fff;
  display:block;
  padding:2rem 0;
  font-weight: bold;
  border:solid 2px #fff;
  width:47%;
}
#sec02 .back-area {  }
#sec02 .back-area .back { position:absolute; z-index:1; }
#sec02 .back-area .back:nth-of-type(odd){ left:0; }
#sec02 .back-area .back:nth-of-type(even){ right:0; }
#sec02 .back-area .back:nth-child(1) { top:5%; left:10%; }
#sec02 .back-area .back:nth-child(2) { top:12%; right:5%; }
#sec02 .back-area .back:nth-child(3) { top:23%; }
#sec02 .back-area .back:nth-child(4) { top:33%; right:10%; }
#sec02 .back-area .back:nth-child(5) { top:50%; left:-3%; }
#sec02 .back-area .back:nth-child(6) { top:60%; right:5%; }
#sec02 .back-area .back:nth-child(7) { top:90%; left:5%; }

/* special ----------------------------------------*/
#special { padding:5rem 0 10rem; position:relative; background:#2284C7; }
#special .mv { margin-top:5rem; }
#special .wrap { max-width:94rem; margin:0 auto; }
#special h2.img-tt span {  }
#special .title { font-size:3.6rem; margin:5rem auto; display:flex; justify-content:center; align-items:center; font-weight: bold; }
#special .title img { margin-right:3rem; }
#special ul.list {  }
#special ul.list > li { width:100%; display:flex; justify-content:space-between; align-items:center; }
#special ul.list li img , #special ul.list li p { width:48%; }
#special ul.list li:first-child img { order:2; }
#special .box { border:solid 1px #fff; position:relative; margin:13rem 0 0; padding:7rem 4rem 4rem;}
#special .box p.tt { 
  position:absolute;
  top:-3rem;
  left:50%;
  transform:translateX(-50%);
  font-size:3.6rem;
  padding:0 4rem;
  background:#fff;
  color:#616161;
  height:6rem;
  line-height:6rem;
  font-weight: bold;
}
#special .box ul {  }
#special .box ul li { display:flex; justify-content:space-between; }
#special .box ul li div { width:48%; font-weight: bold; }
#special .box ul li div.img { position:relative; }
#special .box ul li div.img p { 
  position:absolute;
  background:#616161;
  color:#fff;
  padding:0 2rem;
  height:3rem;
  line-height:3rem;
  border-radius:10px;
  left:0;
  bottom:98%;
}
#special .box ul li div.img img { margin:auto; }
#special .box ul li:first-child div.img:after {
  content:"";
  display:block;
  border-style: solid;
  border-width: 2rem 1.5rem 0 1.5rem;
  border-color: #fff transparent transparent transparent;
  position:absolute;
  top:105%;
  left:50%;
  transform:translateX(-50%);
}
#special .box ul li:last-child { margin-top:5rem; }
#special .box .t2 { text-align:center; font-size:2.4rem; font-weight: bold; margin:5rem 0 2.5rem; }
#special .box .kome { font-weight: bold; }
#special h2.it2 { margin-top:10rem; }
#special .title.tt2 { margin:10rem 0 5rem; }
#special .title.tt2 img { transform: scale(-1, 1); }
#special ul.list2 {  }
#special ul.list2 li:first-child img { order:initial; }
#special ul.list2 li:last-child img { order:2; }
#special .big-btn { max-width:45rem; margin:7rem auto 0; }
#special ul.block { max-width:55rem; margin:0 auto; }
#special ul.block li { display:block; }
#special ul.block li .t { font-size:2.4rem; font-weight: bold; background:#FFDACE; text-align:center; line-height:7rem; margin-bottom:3rem; }
#special ul.block li .tx {}
#special ul.block li .tx span span { text-decoration:underline; }
#special .box2 { padding:7rem 4rem; }
#special .icon { position:absolute; bottom:-15rem; left:50%; transform:translateX(-50%); z-index:10; }

/* sec03 */
#sec03 { background:#7EB0C9; }
#sec03 .inner { max-width:94rem; }
#sec03 .box { border:solid 1px #fff; position:relative; padding:7rem 4rem 4rem;}
#sec03 .box p.tt { 
  position:absolute;
  top:-3rem;
  left:50%;
  transform:translateX(-50%);
  font-size:3.6rem;
  padding:0 4rem;
  background:#fff;
  color: #616161;
  height:6rem;
  line-height:6rem;
  font-weight: bold;
}
#sec03 .box ul {  }
#sec03 .box ul li { display:flex; justify-content:space-between; }
#sec03 .box ul li div { width:48%; font-weight: bold; }
#sec03 .box ul li div.img { position:relative; }
#sec03 .box ul li div.img p { 
  position:absolute;
  background:#D1CECE;
  color:#fff;
  padding:0 2rem;
  height:3rem;
  line-height:3rem;
  border-radius:10px;
  left:0;
  bottom:98%;
}
#sec03 .box ul li div.img img { margin:auto; }
#sec03 .box ul li:first-child div.img:after {
  content:"";
  display:block;
  border-style: solid;
  border-width: 2rem 1.5rem 0 1.5rem;
  border-color: #434343 transparent transparent transparent;
  position:absolute;
  top:105%;
  left:50%;
  transform:translateX(-50%);
}
#sec03 .box ul li:last-child { margin-top:5rem; }
#sec03 .box .t2 { text-align:center; font-size:2.4rem; font-weight: bold; margin:5rem 0 2.5rem; }
#sec03 .box .kome { font-weight: bold; }
#sec03 ul.block { max-width:55rem; margin:0 auto; }
#sec03 ul.block li { display:block; }
#sec03 ul.block li .t { font-size:2.4rem; font-weight: bold; background:#fff; color:#616161; text-align:center; line-height:7rem; margin-bottom:3rem; }
#sec03 ul.block li .tx {}
#sec03 ul.block li .tx span span { text-decoration:underline; }
#sec03 .box2 { padding:7rem 4rem; }
#sec03 .big-btn { max-width:45rem; margin:7rem auto 0; }

/* shop ----------------------------------------*/
#shop { padding:10rem 0; position:relative; background:#7EB0C9; }
#shop .inner {  }

#shop .father_icon { text-align:center; margin-bottom:5rem; }

#shop ul.brand { display:flex; justify-content:space-between; }
#shop ul.brand:after {display:none;}
#shop ul.brand li { width:48%; text-align:center; }
#shop ul.brand li p { text-align:center; font-weight: bold; margin-top: 2rem; }
#shop ul.brand li .btn { width:60%; margin:2rem auto 0; border:solid 1px #fff; }
#shop ul.brand li:first-child .btn { border-color:#fff; }
#shop ul.brand li:first-child .btn a { color:#fff; }
#shop ul.brand li .btn a { display:block; padding:1rem 2rem; color:#fff; font-weight: bold; font-size:2rem; }
#shop ul.brand li:first-child p { color:#fff; }
#shop ul.link { display:flex; align-items: flex-end; max-width:80%; margin:5rem auto 0; }
#shop ul.link li {}
#shop ul.link li .tt { background:#fff; color:#616161; font-size:2.8rem; font-weight: bold; text-align:center; }
#shop ul.link li .shop-list { padding:1rem 0; padding-left:2.5rem; margin-left:2.5rem; margin-top:1rem; border-left:solid 2px #fff; }
#shop ul.link li .shop-list p { line-height:2; }
#shop ul.link li .shop-list p a { font-size:1.8rem; color:#fff; font-weight: bold; }
#shop ul.link li.btn { margin-left:10rem; border-color:#fff; }
#shop ul.link li.btn a { color:#fff; padding:0.5rem 4rem; }
#shop .btn { background:none; border-radius:0; border:solid 1px #fff; }
#shop .btn2 { max-width:50rem; margin:5rem auto 0; border-color:#fff; }
#shop .btn2 a { color:#fff; }


/* slide */
.slick-list { overflow:initial; }
.slick-arrow { z-index:10; }
.slick-arrow i { font-size:6rem; color:#606060; }
.slick-arrow:before { display:none; }
.slick-prev, .slick-next { top:30%; }
.slick-prev { left:10%; }
.slick-next { right:10%; }
.slick-dots { margin-top:1rem; }
.slick-dots li { padding:0!important; }
.slick-dots li button { width:2rem; height:2rem; background:#606060; border-radius:50%; }
.slick-dots li.slick-active button { background:#fff; }
.slick-dots li button:before {
  content:"";
  display:none;
}

/*========================================
               responsive
========================================*/

@media screen and (max-width:1600px){
  #sec02 .back-area { opacity:.5; }
}
@media screen and (max-width:1200px){
  #sec01 .icon {  }
  #sec01 ul { position:relative; z-index:10; }
  #sec01 ul li.img-area { width:60%; }
  #sec01 ul li.img-area .item:first-child { width:75%; }
  #sec01 ul li.img-area .item:last-child { width:40%; }
  #sec01 ul li.tx-area { width:35%; }
}
@media screen and (max-width:1024px){
  
  /* common --------------------*/
  .max { margin:0; width:100%; }  
  
}

@media screen and (max-width:900px){
  h2 { font-size:3rem; }
  
  #catch .t { font-size:3rem; }
  #catch ul li a { font-size:1.8rem; }
  #catch ul li a i { font-size:2rem }
  
  #special .title { font-size:3rem; align-items:center; }
  #special .box p.tt , #sec03 .box p.tt { font-size:3rem; }
  #special .title.tt2 { margin-bottom:5rem; }
  
  #sec01 { padding:10rem 0 7rem; }
  #sec01 ul { align-items:flex-start; }
  #sec01 ul li.img-area { width:50%; }
  #sec01 ul li.tx-area { width:45%; }
  #sec01 ul li.tx-area .t { font-size:3rem; margin-bottom:1rem; }
  #sec01 ul li.tx-area .price { font-size:3.2rem; }
  #sec01 ul li.img-area .item:last-child { bottom:initial; top:100%; }
  
  #sec02 ul.item-list li { width:48%; }
  #sec02 ul.item-list li .tt { font-size:1.8rem; }
  #sec02 .big-btn { max-width:60%; }
  #sec02 .color-area ul.list li ul li a { font-size:1.6rem; }
  
  #sec03 ul.block li .t { font-size:2rem; margin-bottom:2rem; }
}

@media screen and (max-width:768px){
    
  /* shop --------------------*/
  #shop ul.brand li { width:45%; }
  #shop ul.brand li p { font-size: 1.5rem; }
  
  /* footer */
  #footer { margin-top:0!important; }
  
}

@media screen and (max-width:600px){
  
  /* common --------------------*/
  h2 { font-size:2.4rem; }
  section { margin:0; }
  
  #catch { padding:4rem 0 10rem; }
  #catch .sub { font-size:1.6rem; margin:3rem 0; }
  #catch ul { flex-wrap:wrap; justify-content:space-between; }
  #catch ul li { width:49%; border:solid 1px #fff; }
  #catch ul li a { padding:1rem 0; }
  #catch ul li:first-child { border-left:solid 1px #fff; }
  #catch ul li:nth-child(3) { border-left:solid 1px #fff; }
  #catch ul li:nth-of-type(n+3) { margin-top:1rem; }
  #catch .icon { width:25%; }
  
  /* special --------------------*/
  #special { padding-top:0; padding-bottom:15rem; }
  #special .title { font-size:2.2rem; margin-top:5rem; }
  #special .title img { width:15%; }
  #special ul.list { margin-top:5rem; }
  #special ul.list li img, #special ul.list li p.text { width:100%; }
  #special ul.list li , #special ul.list2 li { padding:0 2rem; }
  #special ul.list li p.text , #special ul.list2 li p.text { padding-top:0; margin-top:3rem; }
  #special .box { padding-top:10rem; }
  #special .box ul li { display:block; }
  #special .box ul li div { width:100%; }
  #special .box ul li div.tx { margin-top:1rem; }
  #special .box ul li div.img p { bottom:100%; }
  #special .box ul li:last-child { margin-top:12rem; }
  #special .box ul li:first-child div.img:after { display:none; }
  #special .box ul li { position:relative; }
  #special .box ul li:first-child:after {
    content:"";
    display:block;
    border-style: solid;
    border-width: 2rem 1.5rem 0 1.5rem;
    border-color: #fff transparent transparent transparent;
    position:absolute;
    top:105%;
    left:50%;
    transform:translateX(-50%);
  }
  
  #sec01 .mv , #special .mv{ margin:5rem calc(50% - 50vw) 0; width:100vw; }
  #sec01 .mv img, #special .mv img { height:30rem; width:100%; object-fit:cover; }
  
  /* sec01 --------------------*/
  #sec01 { padding-top:10rem; }
  #sec01 ul { display:block; }
  #sec01 ul li.img-area,#sec01 ul li.tx-area { width:100%; }
  #sec01 .color { justify-content:center; }
  #sec01 ul li.tx-area .t,#sec01 ul li.tx-area .kome { text-align:center; }
  #sec01 ul li.tx-area .price { text-align:center; }
  #sec01 ul li.img-area .item { padding:2rem; }
  #sec01 ul li.img-area .item img { margin:0 auto; }
  #sec01 ul.slick-dots { margin-top:0; }
  
  /* sec02 --------------------*/
  #sec02 { padding-top:15rem; padding-bottom:5rem; }
  #sec02 ul.item-list li { width:100%; padding:0 2rem; }
  #sec02 ul.item-list li:nth-of-type(n+2) { margin-top:3rem; }
  #sec02 ul.item-list li .price-color .cs { text-align:center; }
  #sec02 ul.item-list li .tt { font-size:2rem; }
  #sec02 .color { justify-content:center; }
  #sec02 .big-btn { max-width:80%; }
  #sec02 .form ul.list , #sec02 .color-area ul.list { display:block; }
  #sec02 .form ul.list > li , #sec02 .color-area ul.list li { width:100%!important; }
  #sec02 .form ul.list li ul , #sec02 .color-area ul.list li ul { margin-top:2rem; }
  #sec02 .color-area ul.list li ul li:nth-child(2) { margin:1rem 0; }
  #sec02 .color-area ul.list li ul li a { width:49%; }
  #sec02 .icon-last { bottom:-11rem; font-size:2.4rem; }
  #sec02 .back-area .back { max-width:60%; }
  
  #sec02 ul.slick-dots { display:flex; justify-content:center; bottom:-40px; }
  #sec02 ul.slick-dots li { width:auto; display:block; margin-top:0!important; }
  #sec02 .big-btn { margin-top:10rem; }
  
  /* sec03 --------------------*/
  #sec03 {  }
  #sec03 .box p.tt , #special .box p.tt{ width:70%; text-align:center; }
  #sec03 ul.block li .t { line-height:5rem; }
  
  /* shop --------------------*/
  #shop { padding-top:5rem; }
  #shop ul.brand { display:block; }
  #shop ul.brand li {width: 100%;}
  #shop ul.brand li:first-child { margin-bottom:5rem; }
  #shop ul.brand li p { font-size: 1.6rem; }
  #shop ul.brand li img { width:70%; }
  #shop ul.link { display:block; }
  #shop ul.link li .tt { width:30%; }
  #shop ul.link li .shop-list p a { font-size:2.4rem; }
  #shop ul.link li.btn { margin:5rem auto 0; }
    
}





/*============================================================
common animation
============================================================*/
.scroll-fadein {
  transform:translateY(100px);
  opacity:0;
  transition:.6s;
}
.scroll-fadein.active {
  transform:translateY(0)!important;
  opacity:1!important;
}