@charset "utf-8";
/*****************************************
共通
*****************************************/
.wrapper {
   width: 100%;
   margin: 0;
   padding: 0;
 }
.container {
   width: 100%;
   padding: 0;
}
#aoki_main * {
   box-sizing: content-box;
}
#aoki_main {
   width: 100%;
   line-height: 2;
   margin: 0 auto 120px;
	color: #55161a;
	font-size: 16px;
   font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
   font-feature-settings: "palt" 1;
   letter-spacing: 0.1rem;
}
#aoki_main .leadArea p,
#aoki_main .detail_text,
#aoki_main .note,
#aoki_main .cmn-recommend,
#aoki_main #bottom_recommend_area {
   font-family: Roboto,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,Osaka,MS Pゴシック,MS PGothic,sans-serif;
   font-feature-settings: "palt";
   letter-spacing: 0.05em;
}
#aoki_main ul,
#aoki_main ol {
	list-style: none;
}
#aoki_main a:hover,
#aoki_main a:focus {
	text-decoration: none;
}
#aoki_main .cmn-wrap {
   padding: 20px 0 98px;
   background-color: #fbf0ec;
}

/*------------ mv ------------*/
#aoki_main .mv {
   width: 1200px;
   margin: 0 auto;
   padding: 0 !important;
   box-sizing: border-box;
}
#aoki_main .mv p { width: 1200px; }
#aoki_main .mv a { display: block; }
#aoki_main .mv a:hover {
   opacity: .9;
   transition: .2s;
}
#aoki_main .mv a:hover img {
   opacity: 1;
}

/*------------ leadArea ------------*/
#aoki_main .leadArea {
   width: 1200px;
   margin: 0 auto;
   padding: 30px 0 0;
}
#aoki_main h1 {
   line-height: 1.8;
   margin-bottom: 10px;
   color: #a21822;
   font-size: 26px;
   font-weight: bold;
   text-align: center;
}
#aoki_main .leadArea p {
   line-height: 2;
   color: #55161a;
   font-size: 16px;
	text-align: center;
}

/*------------ contents ------------*/
#aoki_main .cmn-inner {
   width: 1200px;
   margin: 0 auto;
}

/* wrapping */
#aoki_main #wrapping {
   width: 670px;
   margin: 40px auto;
   padding: 10px;
   background: linear-gradient(to bottom,  #d8a794 0%,#ffe4da 50%,#cfa08e 100%);
   box-sizing: border-box;
}
#aoki_main .wrapping_inner {
   padding: 22px 40px 40px;
   background: #fff;
}
#aoki_main #wrapping .ttl {
   padding-bottom: 4px;
   border-bottom: 2px solid #a21722;
   color: #a21722;
   font-size: 24px;
   font-weight: bold;
   text-align: center;
}
#aoki_main .ttl span { position: relative; }
#aoki_main .ttl span::before,
#aoki_main .ttl span::after {
   content: "";
   position: absolute;
   top: 50%;
   width: 14px;
   height: 14px;
   margin-top: -7px;
   background: url(../_img/251128/wrapping_icon.webp) top center / 14px 14px no-repeat;
}
#aoki_main .ttl span::before { left: -34px; }
#aoki_main .ttl span::after { right: -34px; }
#aoki_main .detail {
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
}
#aoki_main .detail .img {
   width: 270px;
}
#aoki_main .wrap {
   width: 290px;
   margin-top: 20px;
}
#aoki_main .detail_text {
   line-height: 2.1;
   margin-bottom: 20px;
   font-size: 15px;
}
#aoki_main .detail .button a {
   position: relative;
   display: flex;
   width: 286px;
   height: 50px;
   justify-content: center;
   align-items: center;
   background: #a21822;
   color: #fff;
   font-size: 18px;
   font-weight: bold;
   box-sizing: border-box;
}
#aoki_main .detail .button a::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 20px;
   width: 11px;
   height: 14px;
   margin-top: -7px;
   background: url(../_img/251128/btn_arrow.webp) top center / 11px 14px no-repeat;
}
#aoki_main .detail .button a:hover {
   background: #c9232e;
   transition: .2s;
}

/* anchorLink */
#aoki_main .anchorLink {
   display: flex;
   justify-content: center;
   margin: 60px 0 114px;
}
#aoki_main .anchorLink a {
   position: relative;
   display: flex;
   width: 326px;
   height: 60px;
   align-items: center;
   justify-content: center;
   border-width: 2px;
   border-style: solid;
   border-radius: 100vw;
   background: #fff;
   font-size: 20px;
   font-weight: bold;
}
#aoki_main .anchorLink a::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 40px;
   width: 10px;
   height: 14px;
   margin-top: -7px;
   transform: rotate(90deg);
}
#aoki_main .anchorLink a:hover {
   opacity: .6;
   transition: .2s;
}
#aoki_main .anchorLink a[href^="#mens"] {
   color: #003523;
   border-color: #003523;
}
#aoki_main .anchorLink a[href^="#mens"]::after {
   background: url(../_img/251128/anchor_mens_arrow.webp) top center / 10px 14px no-repeat;
}
#aoki_main .anchorLink a[href^="#ladies"] {
   color: #a21822;
   border-color: #a21822;
}
#aoki_main .anchorLink a[href^="#ladies"]::after {
   background: url(../_img/251128/anchor_ladies_arrow.webp) top center / 10px 14px no-repeat;
}

/* category */
#aoki_main .category + .category {
   margin-top: 134px;
}
#aoki_main .category ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
#aoki_main .category ul li {
   display: flex;
   text-align: center;
}
#aoki_main .category h2 {
   position: relative;
   line-height: 1.3;
   margin-bottom: 40px;
   padding-bottom: 16px;
   border-bottom: 2px solid;
   font-size: 24px;
   text-align: center;
}
#aoki_main .category h2::after {
   content: "";
   position: absolute;
   top: -53px;
   left: 50%;
   width: 70px;
   height: 36px;
   margin-left: -35px;
}
#aoki_main #mens h2::after {
   background: url(../_img/251128/mens_ttl_icon.webp) top center / 70px 36px no-repeat;
}
#aoki_main #ladies h2::after {
   background: url(../_img/251128/ladies_ttl_icon.webp) top center / 70px 36px no-repeat;
}
#aoki_main .category h2 strong {
   font-size: 38px;
}
#aoki_main #mens h2,
#aoki_main #mens a { 
   color: #003523;
}
#aoki_main #ladies h2,
#aoki_main #ladies a {
   color: #a21822;
}
#aoki_main h2 .note {
   display: block;
   margin-top: 4px;
   font-size: 12px;
   font-weight: normal;
}
#aoki_main .category a {
   position: relative;
   display: block;
   width: 280px;
   margin: 0 auto;
   padding: 20px 30px;
   background-color: #fff;
   border-radius: 10px;
   box-sizing: border-box;
   box-shadow: 3px 2px 7px 0px #cdc2be;
}
#aoki_main .category a::after {
   content: "";
   position: absolute;
   bottom: 12px;
   right: 12px;
   width: 14px;
   height: 18px;
}
#aoki_main #mens a::after {
   background: url(../_img/251128/anchor_mens_arrow.webp) bottom center / 14px 18px no-repeat;
}
#aoki_main #ladies a::after {
   background: url(../_img/251128/anchor_ladies_arrow.webp) bottom center / 14px 18px no-repeat;
}
#aoki_main .category a:hover {
   box-shadow: 1px 1px 2px 0px #cdc2be;
   transform: scale(0.98);
   transition: .2s;
}
#aoki_main .category a:hover img {
   opacity: 0.9;
}
#aoki_main .item_img {
   margin-top: -30px
}
#aoki_main .item_name {
   display: flex;
   min-height: 100px;
   line-height: 1.4;
   align-items: center;
   justify-content: center;
   margin-top: 28px;
   font-size: 24px;
   font-weight: bold;
}
#aoki_main .item_name span {
   display: inline-block;
   font-size: 15px;
}
#aoki_main .item_img img {
   width: auto;
   height: 160px;
}

/*------------ cmn-recommend ------------*/
#aoki_main .cmn-recommend {
   padding: 80px 0 50px;
}
#aoki_main .cmn-recommend h2 {
   margin: 0 auto 47px;
   color: #171717;
   font-size: 26px;
   font-weight: bold;
   text-align: center;
}
#aoki_main .cmn-recommend .bnr_box {
   display: flex;
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;
   justify-content: space-between;
   -webkit-box-pack: justify;
}
#aoki_main a.bnr_img {
   display: block;
}
#aoki_main .bottom_newitem {
   display: none;
}
#aoki_main #bottom_recommend_area h2 {
   color: #171717;
}


/*****************************************
PC only
*****************************************/
@media screen and (min-width: 769px) {
  .sp {
      display: none;
   }
   #aoki_main .anchorLink li + li {
      margin-left: 18px;
   }
   #aoki_main .category ul li + li {
      margin-left: 26px;
   }
   #aoki_main .category ul li:nth-of-type(5) {
      margin-left: 0;
   }
   #aoki_main .category ul li:nth-child(n+5) {
      margin-top: 56px;
   }

   /*------------ cmn-recommend ------------*/
   #aoki_main .cmn-recommend h2 {
      display: flex;
      align-items: center;
      justify-content: center;
   }
   #aoki_main .cmn-recommend h2::before,
   #aoki_main .cmn-recommend h2::after {
      content: "";
      border-bottom: 2px solid #333;
   }
   #aoki_main .cmn-recommend h2::before {
      margin-right: 20px;
      padding-left: 120px;
   }
   #aoki_main .cmn-recommend h2::after {
      margin-left: 20px;
      padding-right: 120px;
   }

   /*------------ bottom_recommend_area ------------*/
   #aoki_main #bottom_recommend_area .bottom_newitem,
   #aoki_main #bottom_recommend_area .bottom_service {
      width: 1200px !important;
   }
   #bottom_recommend_area .bottom_service {
      margin-top: -60px !important;
      padding-top: 0 !important;
   }
   #aoki_main #bottom_recommend_area .bottom_bnrBox a {
      display: block;
      width: 24% !important;
   }
   #aoki_main #bottom_recommend_area .bottom_bnrBox a + a {
      margin-left: 12px !important;
   }
}


/*****************************************
SP only
*****************************************/
@media screen and (max-width: 768px) {
   .pc {
      display: none;
   }
   .wrapper {
      padding: 0;
      margin: 0 0 50px;
   }
   .container {
      padding-left: 0;
      padding-right: 0;
   }
   #aoki_main .cmn-wrap {
      padding: 0 0 15.66vw;
   }

   /*------------ mv ------------*/
   #aoki_main {
      max-width: 768px;
      width: 100%;
      line-height: 1.5;
      margin: 0 auto;
      font-size: 4.2666666vw;
      letter-spacing: 0.05rem;
   }
   #aoki_main .mv {
      width: 100%;
   }
   #aoki_main .mv p {
      width: 100%;
   }

   /*------------ leadArea ------------*/
   #aoki_main .leadArea {
      width: 100%;
      margin: 0 auto;
      padding: 4.66vw 0 0;
      box-sizing: border-box;
   }
   #aoki_main h1 {
      margin-bottom: 1.33vw;
      font-size: 4.8vw;
   }
   #aoki_main .leadArea p {
      line-height: 1.9;
      font-size: 3.46vw;
      text-align: left;
   }

   /*------------ contents ------------*/
   #aoki_main .cmn-inner {
      width: 100%;
      padding: 0 15px;
      box-sizing: border-box;
   }
   #aoki_main #wrapping {
      width: 100%;
      margin: 3.33vw auto 0;
      padding: 2.66vw;
   }
   #aoki_main .wrapping_inner {
      padding: 5vw 4vw 5.33vw;
   }
   #aoki_main #wrapping .ttl {
      border-width: 1px;
      font-size: 4.2vw;
   }
   #aoki_main .ttl span::before,
   #aoki_main .ttl span::after {
      width: 2.66vw;
      height: 2.66vw;
      margin-top: -1.33vw;
      background-size: 2.66vw 2.66vw;
   }
   #aoki_main .ttl span::before { left: -5.3vw; }
   #aoki_main .ttl span::after { right: -5.3vw; }
   #aoki_main .detail {
      flex-wrap: wrap;
      margin-top: 2.2vw;
   }
   #aoki_main .detail .img {
      width: 51%;
   }
   #aoki_main .wrap {
      display: contents;
   }
   #aoki_main .detail_text {
      width: 49%;
      line-height: 1.66;
      margin-top: 2vw;
      margin-bottom: 5.5vw;
      font-size: 3.33vw;
   }
   #aoki_main .detail .button {
      width: 100%;
   }
   #aoki_main .detail .button a {
      width: 100%;
      height: 10.66vw;
      font-size: 3.59vw;
   }
   #aoki_main .detail .button a::after {
      right: 8vw;
      width: 1.86vw;
      height: 2.53vw;
      margin-top: -1.26vw;
      background-size: 1.86vw 2.53vw;
   }

   /* anchorArea */
   #aoki_main .anchorLink {
      margin: 10.66vw 0 18vw;
      justify-content: space-between;
   }
   #aoki_main .anchorLink li {
      width: 48.5%;
   }
   #aoki_main .anchorLink a {
      width: 100%;
      height: 11.2vw;
      font-size: 3.8vw;
      border-width: 1px;
      box-sizing: border-box;
   }
   #aoki_main .anchorLink a::after {
      right: 5.33vw;
      width: 1.86vw;
      height: 2.53vw;
      margin-top: -1.5vw;
   }
   #aoki_main .anchorLink a[href^="#mens"]::after,
   #aoki_main .anchorLink a[href^="#ladies"]::after {
      background-size: 1.86vw 2.53vw;
   }

   /* category */
   #aoki_main .category + .category {
      margin-top: 23.33vw;
   }
   #aoki_main .category h2 {
      line-height: 1.4;
      margin-bottom: 6.66vw;
      padding-bottom: 2.66vw;
      border-width: 1px;
      font-size: 4.1vw;
   }
   #aoki_main .category h2::after {
      top: -9.66vw;
      left: 50%;
      width: 11.6vw;
      height: 6vw;
      margin-left: -5.6vw;
   }
   #aoki_main #mens h2::after,
   #aoki_main #ladies h2::after  {
      background-size: 11.6vw 6vw;
   }
   #aoki_main .category h2 strong {
      font-size: 6vw;
   }
   #aoki_main h2 .note {
      font-size: 2.66vw;
   }
   #aoki_main .category ul {
      justify-content: space-between;
   }
   #aoki_main .category ul li {
      width: 48%;
   }
   #aoki_main .category ul li:nth-of-type(n+3) {
      margin-top: 6.66vw;
   } 
   #aoki_main .category a {
      width: 100%;
      padding: 5.33vw 3.2vw 3.5vw;
      border-radius: 5px;
      box-shadow: 2px 2px 4px 0px #c9b7b1;
   }
   #aoki_main .category a::after {
      right: 1.33vw;
      bottom: 1.33vw;
      width: 2.4vw;
      height: 3.2vw;
   }
   #aoki_main #mens a::after,
   #aoki_main #ladies a::after {
      background-size: 2.4vw 3.2vw;
   }
   #aoki_main .item_img {
      margin-top: -7vw;
   }
   #aoki_main .item_img img {
      width: auto;
      height: 25.33vw;
   }
   #aoki_main .item_name {
      min-height: 20vw;
      margin-top: 5.33vw;
      font-size: 4.3vw;
   }
   #aoki_main .item_name span {
      font-size: 3.06vw;
   }
   
   /* cmn-recommend */
   #aoki_main .cmn-recommend {
      margin-top: 13.33vw;
   }
   #aoki_main .cmn-recommend h2 {
      margin: 4.3vw 0 3.3vw;
      font-size: 6vw;
   }
   #aoki_main .cmn-recommend .bnr_box {
      width: 100%;
      flex-wrap: wrap;
   }
   #aoki_main .cmn-recommend .bnr_box .bnr_img {
      width: 48%;
   }
   #aoki_main .cmn-recommend .bnr_box .bnr_img a {
      display: block;
   }
   #aoki_main .cmn-recommend .bnr_box .bnr_img:nth-of-type(n+3) {
      margin-top: 4vw;
   }
   #bottom_recommend_area {
      padding-top: 0 !important;
   }
   #bottom_recommend_area .bottom_service {
      padding-right: 15px;
      padding-left: 15px;
      box-sizing: border-box;
   }
   
}

/*****************************************
Tablet only (min-width:576px)
*****************************************/
@media screen and (min-width: 576px) {
   .container {
      width: 100%;
   }
}