@charset "shift-jis";

/*==================================================
看板
===================================*/

#ar_coordinate .kanban_b {
  width: 100%;
  margin-top: -17%;
  text-align: center;
}

#ar_coordinate .kanban_b img {
  width: 57%;
}


#ar_coordinate {
  width: 900px;
  margin:  auto;
}

/*==================================================
アコーディオンメニュー
===================================*/
#ar_coordinate .contents {
  position: relative;
  width: 100%;
  padding:8% 0 ;
}
#ar_coordinate .accordion_menu,
#ar_coordinate .accordion_menu > dl,
#ar_coordinate .accordion_menu > dl > dt,
#ar_coordinate .accordion_menu > dl > dd {
    position: relative;
    width: 100%;
    text-align: center;
}
#ar_coordinate .accordion_menu > dl > dt,
#ar_coordinate .accordion_menu > dl > dd {
    padding: 20px 0;
}
#ar_coordinate .accordion_menu > dl:nth-of-type(n+1) {
    margin-top: 20px;
}

#ar_coordinate .accordion_menu > dl > dt {
    color: #fff;
    background-color: #c66f60;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.15em;
    cursor: pointer;
}
#ar_coordinate .accordion_menu > dl > dt::after {
    position: absolute;
    top: calc(50% - 8px);
    right: 4%;
    display: inline-block;
    content: "";
    width: 8px;
    height: 8px;
    border-right: solid 3px #fff;
    border-bottom: solid 3px #fff;
    transform: rotate(45deg);

}
#ar_coordinate .accordion_menu > dl > dt.open {
    color:#c66f60;
    background-color: #fff;
    border: solid 1px#c66f60;
}
#ar_coordinate .accordion_menu > dl > dt.open::after {
    border-color:#c66f60;
    transform: rotate(225deg);
    top: calc(50% - 4px);
}


#ar_coordinate .accordion_menu > dl > dd {
    display: none;
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: 0.1em;
}
#ar_coordinate .accordion_menu > dl > dd > img {
    width: auto!important;
    max-width: 750px;
}

/*==================================================
見出し
===================================*/
#ar_coordinate .ar_midashi {
  width: 47%;
  margin: 5% auto;
}
#ar_coordinate .ar_midashi h2 {
  font-size: 36px;
  font-weight: 600;
  color: #4c3407;
  text-align: center;
  background: linear-gradient(transparent 55%, #c3b396 0%);
}

/*==================================================
タブ::改修版
===================================*/
.tabMenu {
  display: flex;
  list-style: none;
}
.tabMenu:nth-of-type(2) {
  margin-top: 40px;
}
.tabMenu li {
  width: 100%;
  background: #eee;
  color: #aaa;
  flex-grow: 1;
  padding: 10px;
  border-left: #fff 2px solid;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  color: #fff;
}
.tabMenu li:first-child {
  border-left: none;
}
.tabMenu li .tab_text {
  padding: 6% 1%;
  text-align: center;
  font-size: 2rem;
}
.tabMenu .natural {
  background-color: #c6a360;
  
}
.tabMenu .urbern {
  background-color: #9bb9c8
}
.tabMenu .cafe {
  background-color: #4c3407;
}
.tabContent {
  display: none;
}
.tabContent.active {
  display: block;
}

/*==================================================
タブ
===================================*/
#ar_coordinate  #tab-A.a,#tab-B.b,#tab-C.c,#tab-D.d {
border-radius: 10px 10px 0 0;
color: #fff;
}
#ar_coordinate  .a,
#ar_coordinate  .a:hover,
#ar_coordinate  .a:focus {background-color: #c6a360!important; padding-bottom: 5%;}
#ar_coordinate  .b,
#ar_coordinate  .b:hover,
#ar_coordinate  .b:focus  {background-color: #9bb9c8!important; padding-bottom: 5%;}
#ar_coordinate  .c,
#ar_coordinate  .c:hover,
#ar_coordinate  .c:focus  {background-color: rgba(235 230 226)!important; padding-bottom: 5%;}
#ar_coordinate  .d,
#ar_coordinate  .d:hover,
#ar_coordinate  .d:focus  {background-color: #4c3407!important; padding-bottom: 5%;}


[role="tabpanel"][aria-hidden="true"] {
display: none;
}

/*==================================================
中身のスタイル
===================================*/

#ar_coordinate  .inside_container {
width: 80%;
padding: 40px 0;
margin: 0 auto;
}

#ar_coordinate  .inside_item {
width: 90%;
margin: 0 auto;
}

/*==================================================
テイスト見出し
===================================*/

#ar_coordinate  .taste_midashi {
text-align: center;
font-size: 3rem;
padding: 4% 0;
color: #fff;
}

#ar_coordinate  .taste_midashi p {
font-size: 1.5rem;
padding-top: 10px;
}

#ar_coordinate  .c_v {
color: #fff!important;
}

/*==================================================
見出し
===================================*/

#ar_coordinate  .midashi {
text-align: center;
font-size:1.5rem;
color: #fff;
margin: 6% 0 4%;
font-weight: 600;
}

/*==================================================
スライダー
===================================*/
#ar_coordinate  img
{
width: 100%;
height: auto;
vertical-align: bottom;
}

#ar_coordinate  section
{
margin: 0 auto;
text-align: center;

}

#ar_coordinate  section .main_img,
#ar_coordinate  section .main_img2,
#ar_coordinate  section .main_img3,
#ar_coordinate  section .main_img4{
margin: 0 auto;
text-align: center;
}

#ar_coordinate  section .main_img img,
#ar_coordinate  section .main_img2 img,
#ar_coordinate  section .main_img3 img,
#ar_coordinate  section .main_img4 img{
width: 97%;
margin: 0 auto;
border: solid 10px #fff;
}

#ar_coordinate  section .sub_img ul,
#ar_coordinate  section .sub_img2 ul,
#ar_coordinate  section .sub_img3 ul,
#ar_coordinate  section .sub_img4 ul{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0 auto;
padding: 0px;
}

#ar_coordinate  section .sub_img ul li,
#ar_coordinate  section .sub_img2 ul li,
#ar_coordinate  section .sub_img3 ul li,
#ar_coordinate  section .sub_img4 ul li{
width:calc(98%/3);
margin: 0px;
padding-top: 1%;
}


#ar_coordinate  section .sub_img ul li img,
#ar_coordinate  section .sub_img2 ul li img,
#ar_coordinate  section .sub_img3 ul li img,
#ar_coordinate  section .sub_img4 ul li img{
cursor:pointer;
}

#ar_coordinate  section .sub_img ul dd,
#ar_coordinate  section .sub_img2 ul dd,
#ar_coordinate  section .sub_img3 ul dd,
#ar_coordinate  section .sub_img4 ul dd{
display: table-cell;
margin: 0px;
padding: 0px;
}

#ar_coordinate  .sub_img ul li img,
#ar_coordinate  .sub_img3 ul li img{
border: solid 1px #333;
}

#ar_coordinate  .sub_img ul li img:hover,
#ar_coordinate  .sub_img3 ul li img:hover {
border: solid 3px #333;
}

#ar_coordinate  .sub_img2 ul li img,
#ar_coordinate  .sub_img4 ul li img{
border: solid 1px #efefef;
}

#ar_coordinate  .sub_img2 ul li img:hover,
#ar_coordinate  .sub_img4 ul li img:hover {
  border: solid 3px #efefef;
}


/*==================================================
３カラムスライダー
===================================*/
#ar_coordinate  .item_box {
width: 100%;
margin:0 auto;
}
#ar_coordinate  .item_slider,
#ar_coordinate  .item_slider2,
#ar_coordinate  .item_slider3,
#ar_coordinate  .item_slider4 {
width:100%;
margin:0 auto;
}

#ar_coordinate  .item_slider img, 
#ar_coordinate  .item_slider2 img, 
#ar_coordinate  .item_slider3 img, 
#ar_coordinate  .item_slider4 img {
 width:100%;
 height:auto;
}

#ar_coordinate  .item_slider .slick-slide,
#ar_coordinate  .item_slider2 .slick-slide, 
#ar_coordinate  .item_slider3 .slick-slide, 
#ar_coordinate  .item_slider4 .slick-slide {
 margin:0 10px;
} 
.slick-prev {
  left: -15px!important;
  background-color: #fff!important;
  border-radius: 10px!important;
}
.slick-next {
  right: -15px!important;
  background-color: #fff!important;
  border-radius: 10px!important;
}

.item_box {
  width: 100%;
  margin: 0 auto;
}
.item_slider,
.item_slider2,
.item_slider3,
.item_slider4 {
  width:100%;
  margin:0 auto;
}

.item_slider img, 
.item_slider2 img, 
.item_slider3 img, 
.item_slider4 img {
   width:100%;
   height:auto;
}

.item_slider .slick-slide,
.item_slider2 .slick-slide, 
.item_slider3 .slick-slide, 
.item_slider4 .slick-slide {
   margin:0 10px;
} 

.slick-prev, 
.slick-next {
   position: absolute;
   top: 35%;
   cursor: pointer;
   outline: none;
   border-top: 2px solid #666;
   border-right: 2px solid #666;
   height: 10px;
   width: 10px;
   z-index: 20;
}
.slick-prev {
   left: -1.5%;
   transform: rotate(-135deg);
}
.slick-next {
   right: -1.5%;
   transform: rotate(45deg);
}

.slick-dots {
   text-align:center;
 margin:20px 0 0 0;
}

.slick-dots li {
   display:inline-block;
 margin:0 5px;
}

.slick-dots button {
   color: transparent;
   outline: none;
   width:8px;
   height:8px;
   display:block;
   border-radius:50%;
   background:#ccc;
}

.slick-next:before {
  color: #333!important;
  content: '';
    position: absolute;
    top: 50%;
    right: 24%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 4px solid #333333;
    border-right: 4px solid #333333;
    transition-duration: .6s;
}

.slick-prev:before {
  color: #333!important;
  content: '';
  position: absolute;
  top: 50%;
  right: 9%;
  transform: translateY(-50%) rotate(-138deg);
  width: 8px;
  height: 8px;
  border-top: 4px solid #333333;
  border-right: 4px solid #333333;
  transition-duration: .6s;
}

/*==================================================
ボタン
===================================*/
#ar_coordinate  .ar_btn {
width: 100%;
margin: 0 auto;
padding: 2% 0;
text-align: center;
}

#ar_coordinate  .ar_btn h3 {
font-size: 1.65rem;
letter-spacing: 1px;
color: #333;
}

#ar_coordinate  .ar_btn p {
font-size: 1rem;
padding-top: 5px;
}

#ar_coordinate .btn_hover a {
display: block;
position: relative;
margin: 0 auto;
padding: 1em 0;
width: 70%;
font-size: 18px;
font-weight: 700;
transition: 0.3s;
}

#ar_coordinate .btn_hover .bg_n {
background-color: #fff!important;
color: #333;
}

#ar_coordinate .btn_hover .bg_m {
background-color: #fff!important;
color: #333;
}

#ar_coordinate .btn_hover .bg_w {
background-color: #fff!important;
color: #333;
}

#ar_coordinate .btn_hover .bg_v {
background-color: #fff!important;
color: #fff;
}


#ar_coordinate  .btn_hover a::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 23px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50vh;
  transition-duration: .6s;
  border: solid 2px #333;
}

#ar_coordinate  .btn_hover a::after {
content: '';
position: absolute;
top: 50%;
right: 38px;
transform: translateY(-50%) rotate(45deg);
width: 10px;
height: 10px;
border-top: 4px solid #333333;
border-right: 4px solid #333333;
transition-duration: .6s;
}

#ar_coordinate  .btn_hover .bg_n:hover{
background-color: #e1e1e1!important;
color: #333!important;
}
#ar_coordinate  .btn_hover .bg_m:hover{
background-color: #e1e1e1!important;
color: #333!important;
}
#ar_coordinate  .btn_hover .bg_w:hover{
background-color: #e1e1e1!important;
}
#ar_coordinate  .btn_hover .bg_v:hover{
background-color: #e1e1e1!important;
color: #fefefe!important;
}

#ar_coordinate  .btn_hover a:hover::before{
background-color: #efefef!important;
}

#ar_coordinate  .btn_hover a:hover::after {
right: 30px;
transition: .6s;
}

/*--------------------------------------
ここからARアイテムリスト
--------------------------------------*/
#ar_coordinate .pc_none {
  display: none;
}

/*全体*/
#ar_coordinate .wrap {
width: 100%;
margin: 10% auto;
}

#ar_coordinate .wrap .item_area {
  width: 900px;
  margin: 0 auto;
}

#ar_coordinate .wrap .btn {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

#ar_coordinate .wrap .btn .shousai {
  color: #4da2f2;
  margin: 30px 0;
}

#ar_coordinate .wrap .btn .entry {
  margin-bottom: 60px;
}

#ar_coordinate .wrap .btn .shousai span{
  font-size: 20px;
}

#ar_coordinate .arrow_r {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  text-decoration: none;
}
#ar_coordinate .arrow_r:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #4da2f2;
  border-right: solid 2px #4da2f2;
  position: absolute;
  top: 50%;
  right: -10px;
  margin-top: -4px;
  transform: rotate(45deg);
  transition-duration: .4s;
}

#ar_coordinate .arrow_r:hover::before {
  right: -20px;
  transition: .4s;
}

#ar_coordinate .wrap .btn .entry span{
  font-size: 20px;
  padding: 20px 45px 20px 30px;
  font-weight: bold;
  color: #fff;
  background-color: #bf0000;
  border-radius: 50px;
  box-shadow: 0 10px 15px 0 rgba(0, 0, 0, .4);
  transition-duration: .3s;
}

#ar_coordinate .wrap .btn .entry p {
  font-size: 15px;
  color: #ba4a4a;
  margin: 0px 0 30px;
}

#ar_coordinate .wrap .btn .entry a {
  position: relative;
}

#ar_coordinate .wrap .btn .entry a:hover span {
  background-color: #ba4a4a;
  transition: .3s;
}

#ar_coordinate .wrap .btn .entry img {
  width: 15%;
  position: absolute;
  top: -11px;
  right: 10px;
}

/*tab*/
#ar_coordinate label span {
font-size: 13px;
}
#ar_coordinate .tab_menu{
width: 165px;
margin-bottom: 5px;
text-align: center;
font-size: 18px;
border: solid #3333 2px;
position: relative;
display: inline-block;
padding: 2%;
color: #333;
margin-right: 1.5%;
}
#ar_coordinate .tab_menu:nth-of-type(5), 
#ar_coordinate .tab_menu:nth-of-type(10){
margin-right: 0;
}  
#ar_coordinate .tab_menu:hover {
opacity: 0.8;
}
#ar_coordinate .tab_item {
display: none;
}
#ar_coordinate input:checked + .my_checkbox {
background-color:#b4b4b4;
color:#fff;
}
#ar_coordinate input[type=radio]:checked + .my_checkbox::before {
border-color: #666;
}
#ar_coordinate input[type=radio]:checked + .my_checkbox::after {
opacity: 1;
transform: scale3d(1,1,1);
}
/* ラジオボタン */
#ar_coordinate input[type=radio] {
display: none;
}
#ar_coordinate .my_checkbox {
width: 165px;
margin-bottom: 5px;
text-align: center;
font-size: 18px;
color: #333;
border: solid #3333 2px;
padding: 2%;
margin-top: 2%;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
position: relative;
border-radius: 5px;
}
#ar_coordinate .my_checkbox::before {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
content: '';
display: block;
height: 16px;
left: 5px;
margin-top: -8px;
position: absolute;
top: 50%;
width: 16px;
}
#ar_coordinate .my_checkbox::after {
background: #1e92fe;
border-radius: 50%;
content: '';
display: block;
height: 10px;
left: 9px;
margin-top: -4px;
opacity: 0;
position: absolute;
top: 50%;
transform: scale3d(.3,.3,1);
transition: transform .2s ease-in-out, opacity .2s ease-in-out;
width: 10px;
}




/* ラジオボタンがチェックされたら、コンテンツを表示 */
#tab01:checked ~ #tab_content_01,
#tab02:checked ~ #tab_content_02,
#tab03:checked ~ #tab_content_03,
#tab04:checked ~ #tab_content_04,
#tab05:checked ~ #tab_content_05,
#tab06:checked ~ #tab_content_06,
#tab07:checked ~ #tab_content_07,
#tab08:checked ~ #tab_content_08,
#tab09:checked ~ #tab_content_09,
#tab10:checked ~ #tab_content_10{
display: block;
}
#ar_coordinate .tab_item ul{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 1%;
text-align: center;
margin: 3% 0 7%;
}
#ar_coordinate .tab_item ul li{
padding: 0;
margin-right: 1%;
}
#ar_coordinate .tab_item ul li:nth-child(5n){
margin-right: 0;
}
#ar_coordinate .tab_item ul li img{
width: 96%;
}


/*もっと見るボタン*/
#ar_coordinate .item_area .read_more {
width: 300px;
margin: 7% auto;
padding: 1% 0;
text-align: center;
border: 1px solid #333;
border-radius: 10px;
transition-duration: 0.3s;
display: block;
}
#ar_coordinate .item_area .read_more:hover{
background-color: #333;
color: #fff!important;
transition: 0.3s;
}
#ar_coordinate .item_area .read_more span {
font-size: 20px;
color: #333;
font-weight: bold;
} 
#ar_coordinate .item_area .read_more:hover span {
color: #fff;
transition: 0.3s;
}
#ar_coordinate .col5{
width: 900px;
margin: auto;
margin-top:2%;
}
#ar_coordinate .item_area .toggle{
display: none;
}

/*商品名*/
#ar_coordinate .item_area .item_name {
font-size: 12px;
text-align: left;
margin-left: 1%;
}