@charset "utf-8";

:root {
  --color01: #001A72;
  --color02: #00a0e1;
  --color03: #887422;
  --color04: #DEEEF5;
  --outfit: "Outfit", sans-serif;
}
.anc {background: none;border: none;}

/* -----------------------------------------------------------
　common
----------------------------------------------------------- */

html {font-size: 62.5%;}

* {box-sizing: border-box;}
img {max-width: 100%;}
.fcred {color: #FF0000;}
.fwbold {font-weight: bold;}
.left {float: left;}
.right {float: right;}
.center {text-align: center;}
.alignright {text-align: right;}
.alignleft {text-align: left;}
.clear {clear: both;}
.italic {font-style: italic;}
figure img {display: block;}
.fs80 {font-size: 0.8em;}
.fs90 {font-size: 0.9em;}
.fs110 {font-size: 1.1em;}
.fs120 {font-size: 1.2em;}
.fs125 {font-size: 1.25em;}
.fs130 {font-size: 1.3em;}
.fs140 {font-size: 1.4em;}
.fs200 {font-size: 2em;}
.mt50 {margin-top: 50px!important;}
.mt100 {margin-top: 100px!important;}
.mb50 {margin-bottom: 50px!important;}
.mb100 {margin-bottom :100px!important;}
.count00 {
  text-align: center;
  font-size: 1.2em;
  color: #FF0000;
  margin: 100px auto;
}
.pen {
  opacity: 0.5;
  pointer-events: none;
}

input,textarea,select,option,button {font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
input::placeholder {color: #999999;}
input.err,textarea.err {
  background: #eaeaea!important;
  border: solid 1px #FF0000!important;  
}
a {
  color: inherit;
  text-decoration: none;
}
body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.6rem;
  line-height: 1.7;
  color: #333333;
}
body.open {overflow: hidden;}
@media screen and (min-width: 768px) {
  
  .sp_cont {display: none !important;}
  
}
a:hover {
  text-decoration: underline;
  color: inherit;
}
.hover_btn {
  transition: 0.5s;
  opacity: 1;
}
.hover_btn:hover {
  transition: 0.5s;
  opacity: 0.75;
}

/* -----------------------------------------------------------
  template
----------------------------------------------------------- */

/* :::::::::: header :::::::::: */

header .menu {display: none;}
header.header {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 180px;
  padding: 10px 20px;
  background: #EEEEEE;
  min-width: 1140px;
}
header.header::before {
  position: absolute;
  z-index: -1;
  display: block;
  content: "";
  width: 100%;
  height: 80px;
  background: var(--color01);
  top: 0;
  left: 0;
}
header.header .logo {
  display: inline-block;
  width: 125px;
  margin: 18px 0 0 15px;
}
header.header .member_info {
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 520px;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
  top: 10px;
  left: 190px;
}
header.header .member_info p:nth-of-type(1) {
  width: 260px;
  height: auto;
  font-size: 1.6rem;
  line-height: 1.2;
  background: #FFFFFF;
  border-radius: 4px;
  padding: 0.5em 10px;
}
header.header .member_info p:nth-of-type(2) {
  width: 240px;
  color: #FFFFFF;
  font-size: 1.8rem;
  line-height: 1.5;
  text-align: left;
}
header.header .member_info p:nth-of-type(2) > span {font-size: 1.8rem;}
header.header .member_info p:nth-of-type(2) > span > span {
  display: inline-block;
  font-size: 1.2em;
}
header.header .header_search {
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 380px;
  height: 60px;
  padding: 10px;
  background: #FFFFFF;
  line-height: 60px;
  border-radius: 4px;
  top: 10px;
  right: 20px;
}
header.header .header_search input {
  width: calc(100% - 40px);
  font-size: 2.6rem;
  line-height: 40px;
  padding: 0 0 0 20px;
}
header.header .header_search button {
  color: #333333;
  width: 40px;
  height: 40px;
  background: url("../img/common/ico_search.svg") no-repeat center / 70%;
  cursor: pointer;
} 
header.header .btn_list:nth-of-type(1) {
  position: absolute;
  display: inline-block;
  top: 100px;
  left: 20px;
}
header.header .btn_list:nth-of-type(1) li {
  position: relative;
  display: inline-block;
  min-width: 215px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  margin: 0 4px 0 0;
  background: #FFFFFF;
  border: solid 1px #333333;
  border-radius: 4px;
  vertical-align: top;
}
header.header .btn_list:nth-of-type(1) li:nth-child(1) > span ,
header.header .btn_list:nth-of-type(1) li:nth-child(2) > a {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 0 20px;
  transition: 0.5s;
}
header.header .btn_list:nth-of-type(1) li > span:hover ,
header.header .btn_list:nth-of-type(1) li:nth-child(2) > a:hover {
  opacity: 0.5;
  text-decoration: none;
}
header.header .btn_list:nth-of-type(1) li:nth-child(1) > span::before ,
header.header .btn_list:nth-of-type(1) li:nth-child(2) > a::before ,
header.header .btn_list:nth-of-type(1) li:nth-child(1) > span::after ,
header.header .btn_list:nth-of-type(1) li:nth-child(2) > a::after {
  display: inline-block;
  vertical-align: middle;
  content: "";
}
header.header .btn_list:nth-of-type(1) li:nth-child(1) > span::before {
  width: 1.8em;
  height: 1.8em;
  background: url("../img/common/ico_lang.svg") no-repeat center / contain;
  margin: 0 10px 3px 0;
}
header.header .btn_list:nth-of-type(1) li:nth-child(2) > a::before {
  width: 2em;
  height: 2em;
  background: url("../img/common/ico_guide.svg") no-repeat center / contain;
  margin: 0 10px 3px 0;
}
header.header .btn_list:nth-of-type(1) li.btn_lang > span::after {
  position: absolute;
  z-index: 1;
  width: 12px;
  height: 6px;
  background: url("../img/common/btn_ab.svg") no-repeat center / cover;
  margin: auto;
  inset: 0 20px 0 auto;
}
header.header .btn_list:nth-of-type(1) li.btn_lang {
  border: solid 1px #333333;
  cursor: pointer;
}
header.header .btn_list:nth-of-type(2) {
  position: absolute;
  display: inline-block;
  display:flex;
  justify-content: flex-end;
  align-items: stretch;
  top: 95px;
  right: 20px;
}
header.header .btn_list:nth-of-type(2) li {
  display: inline-block;
  width: 100px;
  background: #FFFFFF;
  margin: 0 4px;
  height: auto;
  min-height: 70px;
  border: solid 1px #333333;
  border-radius: 4px;
}
header.header .btn_list:nth-of-type(2) li a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 1.2rem;
  line-height: 1.3;
  text-align: center;
  padding: 45px 0 0;
  transition: 0.5s;
  border-radius: 4px;
}
header.header .btn_list:nth-of-type(2) li a:hover {
  opacity: 0.5;
  text-decoration: none;
}
header.header .btn_list li.btn_list_top a {background: url("../img/common/ico_top.svg") no-repeat top 10px center / auto 27px;}
header.header .btn_list li.btn_list_recommend a {background: url("../img/common/ico_recommend.svg") no-repeat top 10px center / auto 27px;}
header.header .btn_list li.btn_list_cart a {background: url("../img/common/ico_cart.svg") no-repeat top 10px center / auto 27px;}
header.header .btn_list li.btn_list_mypage a {background: url("../img/common/ico_mypage.svg") no-repeat top 10px center / auto 27px;}
header.header .btn_list li.btn_list_faq a {background: url("../img/common/ico_faq.svg") no-repeat top 10px center / auto 27px;}
header.header .btn_list li.btn_list_logout a {background: url("../img/common/ico_logout.svg") no-repeat top 10px center / auto 27px;}
header .cat_list {display: none;}
header.header .btn_list li.btn_list_cart {
  position: relative;
  z-index: 0;
}
header.header .btn_list li.btn_list_cart span {
  position: absolute;
  display: block;
  content: "";
  width: 18px;
  height: 18px;
  background: #F00;
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  top: 5px;
  right: 10px;
  pointer-events: none;
}
.btn_lang > a {
  position: relative;
  z-index: 2;
  display: none;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-decoration: none;
  border: solid 1px var(--color01);
  border-top: none;
  background: #FFFFFF;
  color: var(--color01);
}
.btn_lang > a:hover {
  background: var(--color01);
  color: #FFFFFF;
  opacity: 1;
}
.btn_lang.active > a {display: block;}
.btn_lang > a:nth-of-type(1) {border: solid 1px var(--color01);}

.bread_crumbs {width: 100%;}
.bread_crumbs > div {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  line-height: 1.3;
  padding: 10px 40px;
}
.bread_crumbs span {
  display: inline-block;
  font-size: 1.2rem;
}
.bread_crumbs span::after {
  content: ">";
  margin: 0 0.5em;
}
.bread_crumbs span:nth-last-child(1)::after {content: none;}

/* :::::::::: main :::::::::: */

main {
  display: block;
  width: 100%;
  min-width: 1140px;
  min-height: calc(100vh - 300px);
  overflow: hidden;
  padding: 120px 0 100px;
}
main.pt0 {padding: 0 0 100px;}
main.pb0 {padding: 120px 0 0;}
main.pt0.pb0 {padding: 0;}
main article {width: 100%;}
.box {
  width: 100%;
  max-width: 1280px;
  padding: 0 40px;
  margin: 0 auto;
}
.m_box {
  width: 100%;
  max-width: 1080px;
  padding: 0 40px;
  margin: 0 auto;
}
.box {
  width: 100%;
  max-width: 1280px;
  padding: 0 40px;
  margin: 0 auto;
}

/* :::::::::: footer :::::::::: */

footer {
  min-width: 1140px;
  padding: 40px 0 50px;
  background: #333333;
}
footer .box {
  color: #FFFFFF;
  text-align: center;
}
footer .box h2 {
  max-width: 400px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto 20px;
  text-align: center;
  color: #333333;
  font-size: 14px;
  font-weight: 700;
  background: #FFFFFF;
}
footer .box p {
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 1em;  
}
footer .box p span {
  font-size: 2rem;
  font-weight: 700;
}
footer .box .logo {
  width: 135px;
  margin: 30px auto 0;
}
footer .box .btn_contact {
  width: 290px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto 30px;
}
footer .box .btn_contact a {
  position: relative;
  z-index: 0;
  display: block;
  height: 100%;
  font-weight: 700;
  border: solid 1px #FFFFFF;
  border-radius: 2px;
  text-decoration: none;
  transition: 0.5s;
}
footer .box .btn_contact a::after {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 0.6em;
  height: 1.2em;;
  margin: auto;
  inset: 0 0.5em 0 auto;
  background: url("../img/common/btn_ar_w.svg") no-repeat center / contain;
}
footer .box .btn_contact a:hover {
  color: #333333;
  background: #FFFFFF;
}
footer .box .btn_contact a:hover::after {
  background: url("../img/common/btn_ar.svg") no-repeat center / contain;
}





/* -----------------------------------------------------------
 hX
----------------------------------------------------------- */



.h1_common {
  position: relative;
  z-index: 0;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  margin: 0 auto 50px;
  padding: 120px 0 0;
}
.h1_common span {
  position: absolute;
  display: block;
  font-family: var(--outfit);
  font-size: 8rem;
  font-weight: normal;
  color: var(--color01);
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
}

.h1_normal {
  color: var(--color01);
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  margin: 0 auto 50px;
}
.h2_common {
  color: #333333;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 50px;
  letter-spacing: 0.1em;
}
.h2_common > span {
  display: inline-block;
  margin: 0 0 0 1em;
}
.h2_common > span.h2_en {
  display: inline-block;
  font-size: 7rem;
  font-family: var(--outfit);
  font-weight: 300;
  margin: 0 0.25em 0 0;
}
.h2_common > span.h2_en:first-letter {color: var(--color02);}
.h2_table {
  color: var(--color01);
  font-size: 2.7rem;
  margin: 0 0 10px;
}
p.lead {
  font-size: 1.8rem;
  text-align: center;
  margin: 0 auto 50px;
}
p.lead_cart {
  font-size: 2rem;
  text-align: center;
  margin: 0 auto 40px;
}
.bg_a {background: var(--color04);}
.bg_b {background: var(--color02);}
.bg_c {background: #EEF6FA;}
.bg_w {background: #FFFFFF;}

/* -----------------------------------------------------------
 common_parts
----------------------------------------------------------- */

.ico_new {
  display: inline-block;
  width: 60px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #FFFFFF;
  font-size: 1.5rem;
  background: #FF0000;
  border-radius: 99px;
  vertical-align: middle;
  margin: 0 0 5px 20px;
}
.pagenation {
  position: relative;
  z-index: 0;
  text-align: center;
  margin: 30px auto 0;
  padding: 20px 100px;
}
.pagenation span ,
.pagenation a {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 2px;
  line-height: 40px;
  color: #C6C6C6;
  font-family: var(--outfit);
  font-size: 3rem;
  font-weight: 300;
}
.pagenation .trim {
  border: none;
  border-radius: 0;
}
.pagenation .current ,
.pagenation a:hover {
  color: var(--color01);
  text-decoration: none;
}
.pagenation .btn_prev,
.pagenation .btn_next {
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  background: var(--color01);
  border: solid 1px var(--color01);
  border-radius: 4px;
  margin: auto;
  top: 0;
  bottom: 0;
  transition: 0.3s;
}
.pagenation .btn_prev {left: 0;}
.pagenation .btn_next {right: 0;}
.pagenation .btn_prev:hover ,
.pagenation .btn_next:hover {
  color: var(--color01);
  background: #FFFFFF;
}
.pagenation .btn_prev::before ,
.pagenation .btn_next::before {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  border-left: solid 3px #FFFFFF;
  border-bottom: solid 3px #FFFFFF;
  transform: rotate(45deg);
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0.25em;
  right: 0;
}
.pagenation .btn_prev:hover::before ,
.pagenation .btn_next:hover::before {
  border-left: solid 3px var(--color01);
  border-bottom: solid 3px var(--color01);
}
.pagenation .btn_next::before {
  transform: rotate(-135deg);
  left: 0;
  right: 0.25em;
}

.cat_anc {
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1280px;
  padding: 0 40px;
  margin: auto;
  inset: 20px 0 auto;
}
.cat_anc li {
  width: 24%;
  margin: 0 1%;
  text-align: center;
}
.cat_anc li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 15px 20px 25px;
  color: #FFFFFF;
  font-size: 1.6rem;
  background: url("../img/common/btn_ab_w.svg") no-repeat bottom 10px center / 16px,var(--color01);
  border: solid 3px var(--color03);
  border-radius: 8px;
  transition: 0.5s;
  top: 0;
}
.cat_anc li a:hover {
  top: 8px;
  text-decoration: none;
}
.cat_anc li a span {font-size: 22px;}
.cat_anc li a span::before {
  display: inline-block;
  content: "";
  width: 36px;
  height: 36px;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}
.cat_anc li:nth-child(1) a span::before {background: url("../img/common/ico_special.svg") no-repeat center / 100%;}
.cat_anc li:nth-child(2) a span::before {background: url("../img/common/ico_category.svg") no-repeat center / 100%;}
.cat_anc li:nth-child(3) a span::before {background: url("../img/common/ico_point.svg") no-repeat center / 100%;}
.cat_anc li:nth-child(4) a span::before {background: url("../img/common/ico_present.svg") no-repeat center / auto 100%;}

main .cat_list {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 1120px;
  height: 80px;
  margin: 20px auto 70px;
}
main .cat_list > li {
  position: absolute;
  z-index: 0;
  width: 24.25%;
  margin: 0;
  top: 0;
}
main .cat_list > li:nth-child(1) {left: 0;}
main .cat_list > li:nth-child(2) {left: 25.25%;}
main .cat_list > li:nth-child(3) {right: 25.25%;}
main .cat_list > li:nth-child(4) {right: 0;}
main .cat_list > li > span {
  position: relative;
  z-index: 0;
  display: block;
  height: 60px;
  color: #333333;
  font-weight: bold;
  line-height: 1.5;
  padding: 10px 15px;
  background: #DEEEF5;
  cursor: pointer;
}
main .cat_list > li > span span {font-size: 22px;}
main .cat_list > li > span > span::before {
  display: inline-block;
  content: "";
  width: 40px;
  height: 40px;
  margin: 0 0.5em 0.2em 0;
  vertical-align: middle;
}
main .cat_list > li:nth-child(1) > span > span::before {background: url("../img/common/ico_special_b.svg") no-repeat center / 100%;}
main .cat_list > li:nth-child(2) > span > span::before {background: url("../img/common/ico_category_b.svg") no-repeat center / 100%;}
main .cat_list > li:nth-child(3) > span > span::before {background: url("../img/common/ico_point_b.svg") no-repeat center / 100%;}
main .cat_list > li:nth-child(4) > span > span::before {background: url("../img/common/ico_present_b.svg") no-repeat center / auto 100%;}
main .cat_list > li > span::before ,
main .cat_list > li > span::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  margin: auto;
  background: #333333;
}
main .cat_list > li > span::before {
  width: 18px;
  height: 2px;
  inset: 0 10px 0 auto;
}
main .cat_list > li > span::after {
  display: block;
  width: 2px;
  height: 18px;
  inset: 0 18px 0 auto;
}
main .cat_list > li > span.open::after {display: none;}
main .cat_list > li > ul {
  display: none;
  width: 100%;
  background: #EEEEEE;
  padding: 15px;
  margin: 10px 0 0;
  border-bottom: solid 2px #FFFFFF;
}
main .cat_list > li > ul li {
  display: inline-block;
  margin: 0 5px 5px 0;
}
main .cat_list > li > ul li a {
  display: block;
  font-size: 12px;
  padding: 0.25em 2em;
  background: #FFFFFF;
  border-radius: 99px;
  border: solid 1px #333333;
}
main .cat_list > li > .parent {
  background: none;
  padding: 0;
}
main .cat_list > li > .parent > li {
  display: block;
  width: 100%;
  background: #EEEEEE;
  padding: 0;
  border-bottom: solid 3px #FFFFFF;
  margin: 0;
}
main .cat_list > li > .parent > li > span {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  padding: 0;
  background: none;
}
main .cat_list > li > .parent > li > span a {
  display: block;
  width: calc(100% - 40px);
  background: none;
  border: none;
  font-size: 14px;
  text-decoration: underline;
  padding: 15px 0 15px 15px;
}
main .cat_list > li > .parent > li > span > span {
  position: relative;
  z-index: 1;
  display: block;
  width: 40px;
  cursor: pointer;
}
main .cat_list > li > .parent > li > span > span::after {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 1em;
  height: 0.5em;
  background: url("../img/common/btn_ab.svg") no-repeat center / contain;
  margin: auto;
  inset: 0 15px 0 auto;
}
main .cat_list > li > .parent > li > span.open > span::after {transform: rotateX(180deg);}
main .cat_list > li > .parent > li ul {
  display: none;
  padding: 10px 15px 15px;
}

.common_ranking {padding: 60px 0;}
.common_ranking .h2_common {margin: 0 auto;}
.ranking_slider {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto!important;
  padding: 80px 20px;
  overflow: hidden;
}
.ranking_slider .slick-track {
  display: flex;
  align-items: stretch;
}
.ranking_slider .slick-list {overflow: visible;}
.ranking_slider .slick-slide {
  position: relative;
  width: 32%;
  background: #FFFFFF;
  margin: 0 20px;
}
.ranking_slider .slick-slide a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 40px 30px 30px;
  transition: 0.5s;
}
.ranking_slider .slick-slide a:hover {
  text-decoration: none;
  opacity: 0.5;
}
.ranking_slider .slick-slide a > span {
  position: absolute;
  z-index: 1;
  display: block;
  width: 70px;
  height: 70px;
  line-height: 60px;
  text-align: center;
  font-family: var(--outfit);
  font-size: 4.8rem;
  font-weight: 300;
  margin: auto;
  top: -40px;
  left: 0.5em;
}
.ranking_slider .slick-slide a > span > span {font-size: 0.625em;}

.ranking_slider .slick-slide figure {margin: 0 auto 30px;}
.ranking_slider .slick-slide p {
  font-size: 1.4rem;
  margin: 10px 0;
}
.ranking_slider .slick-slide p:nth-of-type(2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  height: 3em;
  overflow: hidden;
}


.ranking_slider .slick-slide .product_point {
  font-size: 2rem;
  margin: 20px 0 0;
}
.ranking_slider .slick-arrow {
  width: 20px;
  height: 40px;
  z-index: 2;
}
.slick-arrow::before {content: none!important;}
.ranking_slider .slick-prev {
  background: url("../img/common/btn_al.svg") no-repeat center / cover;
  left: 0;
}
.ranking_slider .slick-next {
  background: url("../img/common/btn_ar.svg") no-repeat center / cover;
  right: 0;
}
.ranking_slider .slick-prev:hover ,
.ranking_slider .slick-prev:focus {
  background: url("../img/common/btn_al.svg") no-repeat center / cover;
}
.ranking_slider .slick-next:hover ,
.ranking_slider .slick-next:focus {
  background: url("../img/common/btn_ar.svg") no-repeat center / cover;
}
.ranking_slider .slick-dots {bottom: 0;}
.ranking_slider .slick-dots li {
  width: 15px;
  height: 15px;
  background: #FFFFFF;
  border-radius: 50%;
  margin: 0 10px;
}
.ranking_slider .slick-dots li.slick-active {background: var(--color01);}
.ranking_slider .slick-dots button::before {content: none;}

.common_relation {padding: 60px 0;}
.common_relation .relation_list {padding: 0 40px 60px;}
.common_relation .relation_list .slick-slide {
  width: 18.4%;
  margin: 0 10px;
  float: left;
}
.common_relation .relation_list .slick-slide a {
  display: block;
  transition: 0.5s;
}
.common_relation .relation_list .slick-slide a:hover {
  opacity: 0.5;
  text-decoration: none;
}
.common_relation .relation_list .slick-slide a figure {
  position: relative;
  z-index: 0;
  margin: 0 auto 20px;
  overflow: hidden;
}
.common_relation .relation_list .slick-slide a p {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 1em;
}
.common_relation .relation_list .slick-slide a p:nth-of-type(2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 3em;
  font-weight: 500;
  overflow: hidden;
}
.common_relation .relation_list .slick-slide a .product_point {
  font-size: 2rem;
  font-weight: 700;
  margin: 20px 0 0;
}
.common_relation .relation_list .slick-arrow {
  width: 20px;
  height: 40px;
  z-index: 2;
}
.common_relation .relation_list .slick-prev {
  background: url("../img/common/btn_al.svg") no-repeat center / cover;
  left: 0;
}
.common_relation .relation_list .slick-next {
  background: url("../img/common/btn_ar.svg") no-repeat center / cover;
  right: 0;
}
.common_relation .relation_list .slick-prev:hover ,
.common_relation .relation_list .slick-prev:focus {
  background: url("../img/common/btn_al.svg") no-repeat center / cover;
}
.common_relation .relation_list .slick-next:hover ,
.common_relation .relation_list .slick-next:focus {
  background: url("../img/common/btn_ar.svg") no-repeat center / cover;
}
.common_relation .relation_list .slick-dots {
  left:0;
  right: 0;
  bottom: 0;
}
.common_relation .relation_list .slick-dots li {
  width: 15px;
  height: 15px;
  background: #FFFFFF;
  border-radius: 50%;
  margin: 0 10px;
}
.common_relation .relation_list .slick-dots li.slick-active {background: var(--color01);}
.common_relation .relation_list .slick-dots button::before {content: none;}

.common_checked {padding: 60px 0;}
.bg_a + .bg_a {margin-top: 0;}
.common_checked .h2_common {margin: 0;}

.checked_slider {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto!important;
  padding: 50px 20px 50px;
}
.checked_slider .slick-track {
  padding: 10px 0;
  margin-left: 0;
}
.checked_slider .slick-slide {
  position: relative;
  width: 18%;
  background: #FFFFFF;
  margin: 0 10px;
}
/*.checked_slider .slick-slide img {border-radius: 15px}*/
.checked_slider .slick-slide a {transition: 0.5s;}
.checked_slider .slick-slide a:hover {opacity: 0.5;}
.checked_slider .slick-arrow {
  width: 20px;
  height: 40px;
  z-index: 2;
}
.slick-arrow::before {content: none!important;}
.checked_slider .slick-prev {
  background: url("../img/common/btn_al.svg") no-repeat center / cover;
  left: 0;
}
.checked_slider .slick-next {
  background: url("../img/common/btn_ar.svg") no-repeat center / cover;
  right: 0;
}
.checked_slider .slick-prev:hover ,
.checked_slider .slick-prev:focus {
  background: url("../img/common/btn_al.svg") no-repeat center / cover;
}
.checked_slider .slick-next:hover ,
.checked_slider .slick-next:focus {
  background: url("../img/common/btn_ar.svg") no-repeat center / cover;
}
.checked_slider .slick-dots {bottom: 0;}
.checked_slider .slick-dots li {
  width: 15px;
  height: 15px;
  background: #FFFFFF;
  border-radius: 50%;
  margin: 0 10px;
}
.checked_slider .slick-dots li.slick-active {background: var(--color01);}
.checked_slider .slick-dots button::before {content: none;}
.common_link {padding: 100px 0;}
.common_link + .common_link {padding: 0 0 100px;}
.common_link .box {
  position: relative;
  z-index: 0;
}
.common_link ul {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: row;
  flex-wrap: wrap;
}
.common_link ul::before {
  display: block;
  content: "";
  width: 33%;
  order: 1;
}
.common_link ul::after {
  display: block;
  content: "";
  width: 33%;
  order: 2;
}
.common_link ul li {
  width: 33%;
  font-size: 2rem;
  line-height: 1.3;
  margin: 0 0 0.5%;
}
.common_link .common_category::before ,
.common_link .common_category::after ,
.common_link .common_category li {width: 24.5%;}

.common_link ul li a {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #EFEFEF;
  padding: 1.5em 2em 1.5em 1.5em;
  transition: 0.5s;
}
.common_link ul li a:hover {
  text-decoration: none;
  opacity: 0.5;
}
.common_link ul li a::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 10px;
  height: 20px;
  background: url("../img/common/btn_ar.svg") no-repeat center / cover;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 1.2em;
}

.faq_box {
  position: relative;
  z-index: 1;
  padding: 40px;
  border: solid 1px var(--color01);
  margin: 0 0 20px;
  background: #FFFFFF;
}
.faq_box::before {
  position: absolute;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-top: solid 1.5em var(--color01);
  border-left: solid 1em transparent;
  border-right: solid 1em transparent;
  top: 40px;
  right: 40px;
  pointer-events: none;
}
.faq_box.active::before {transform: rotateX(180deg);}
.faq_box dt {
  position: relative;
  padding: 0 50px 0 1.2em;
  color: var(--color01);
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  cursor: pointer;
}
.faq_box dt::before {
  position: absolute;
  content: "Q.";
  top: 0;
  left: 0;
}
.faq_box dd {
  display: none;
  position: relative;
  padding: 3em 0 0;
  font-weight: 500;
  font-size: 1.4rem;
  margin: 20px 0 0;
}
.faq_box dd::before {
  position: absolute;
  content: "A.";
  font-size: 2rem;
  top: 0;
  left: 0;
}

/* -----------------------------------------------------------
 form
----------------------------------------------------------- */

.form_caution {
  width: 100%;
  color: #333333;
  font-size: 1.8rem;
  text-align: center;
  background: var(--color02);
  border-radius: 20px;
  padding: 40px;
  margin: 0 auto 40px;
}
.auth_caution {
  width: 100%;
  color: #FF0000;
  font-size: 2.2rem;
  text-align: center;
  border: solid 1px #FF0000;
  padding: 40px;
  margin: 0 auto 40px;
}

.form_err {
  color: #FF0000;
  font-size: 1.3rem;
  margin: 0 0 10px;
}
.form_checkbox + .form_err {text-align: center;}
.form_checkbox.checkbox_left + .form_err {text-align: left;}
.input_flow {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: 0 auto 40px;
}
.input_flow li {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32.5%;
  height: 90px;
  background: #BEBEBE;
}
.input_flow.column04 li {width: 24%;}
.input_flow li.current {background: var(--color01);}
.input_flow li::before,
.input_flow li::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-right: solid 35px #FFFFFF;
  right: 0;
}
.input_flow li::before {
  border-bottom: solid 45px transparent;
  top: 0;
}
.input_flow li::after {
  border-top: solid 45px transparent;
  bottom: 0;
}
.input_flow li span {
  color: #FFFFFF;
  font-size: 2rem;
  line-height: 1.3;
  padding: 0 35px 0 0;
}
.contact_form {
  width: 100%;
  margin: 0 auto 50px;
  text-align: left;
  border-top: solid 1px var(--color01);
}
.contact_form th ,
.contact_form td {
  display: block;
  border: solid 1px var(--color01);
  border-top: none;
}
.contact_form th {
  color: #333333;
  font-size: 2rem;
  font-weight: normal;
  background: var(--color04);
  padding: 0.5em 30px;
}
.contact_form th .must {
  display: inline-block;
  min-width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.1em;
  background: #FF0000;
  margin: 0 0 0 10px;
  vertical-align: middle;
}
.contact_form th .must + span {
  display: inline-block;
  font-size: 0.7em;
  margin: 0 0 0 10px;
  vertical-align: middle;
}
.contact_form th .deliv_date {
  display: inline-block;
  font-size: 0.8em!important;
  margin: 0 0 0 1em!important;
  color: #F00;
}
.contact_form td {padding: 15px 30px;}
.contact_form .n_wide {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.contact_form .n_wide dl + dl {margin: 0 0 0 40px;}
.contact_form td dl dt {
  display: inline-block;
  width: 5em;
  font-size: 1.8rem;
  padding: 30px 0 0 0;
  vertical-align: top;
}
.contact_form td dl dt.dt_no {width: 2em;}
.contact_form td dl dd {
  display: inline-block;
  width: calc(100% - 5.5em);
  font-size: 1.8rem;
  vertical-align: top;
}
.contact_form td.n_wide dl dt {width: 2.5em;}
.contact_form td.n_wide dl dd {width: calc(100% - 3em);}
.contact_form td dl.w_wide dt {
  width: 9em;
  padding: 18px 0.5em 0 0;
}
.contact_form td dl.w_wide dd {width: calc(100% - 9.5em);}
.contact_form td input[type="text"] ,
.contact_form td input[type="tel"] ,
.contact_form td input[type="email"] {
  display: inline-block;
  min-width: 100%;
  height: 60px;
  line-height: 60px;
  border: solid 1px var(--color01);
  padding: 0 1.5em;
  margin: 15px 0;
}
.contact_form td input[type="number"] {
  display: inline-block;
  width: 80px;
  height: 60px;
  line-height: 60px;
  border: solid 1px var(--color01);
  padding: 0 0.5em;
  margin: 15px 20px 15px 0;
  text-align: center;
}

.contact_form td input.input_n {min-width: 300px;}
.contact_form td textarea {
  display: block;
  width: 100%;
  height: 300px;
  border: solid 1px var(--color01);
  padding: 2em;
  margin: 15px 0;
}
.contact_form td.privacy {padding: 30px 40px;}
.form_checkbox {
  margin: 50px auto 30px;
  text-align: center;
}
.form_checkbox.checkbox_left {
  margin: 20px 0;
  text-align: left; 
}
.form_checkbox label {
  cursor: pointer;
  margin: 0 1em 0 0;
}
.form_checkbox label span::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  line-height: 1em;
  font-weight: bold;
  background: #FFFFFF;
  border: solid 2px #333333;
  vertical-align: middle;
  margin: 0 10px 3px 0;
}
.form_checkbox label input[type="checkbox"]:checked + span::before {content: "✔";}
.contact_form.confirm td {padding: 40px;}
.contact_form td .select_outer {
  position: relative;
  z-index: 0;
  display: inline-block;
  min-width: auto;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #FFFFFF;
  background: var(--color01);
  margin: 15px 0;
}
.contact_form td .select_outer::after {
  position: absolute;
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  border-right: solid 2px #FFFFFF;
  border-bottom: solid 2px #FFFFFF;
  transform: rotate(45deg);
  margin: auto;
  top: 0;
  bottom: 0.5em;
  right: 1em;
  pointer-events: none;
}
.contact_form td .select_outer select {
  display: block;
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  text-align: center;
  padding: 0 3.5em 0 1.5em;
}
.contact_form td .select_outer select option {
  color: #333333;
  text-align: left;
}
.contact_form .link_address {
  display: inline-block;
  min-width: 180px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 1.5rem;
  border: solid 1px var(--color01);
  margin: 0 0 0 30px;
}
.contact_form .link_address a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 1.5em;
}
.contact_form .link_address a::after {
  display: inline-block;
  content: "";
  width: 17px;
  height: 17px;
  background:url(../img/common/ico_target.svg) no-repeat center / cover;
  margin: 0 0 3px 5px;
  vertical-align: middle;
}
.thanks_box {text-align: center;}
.thanks_box h1 {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 800px;
  color: var(--color01);
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  margin: 0 auto 50px;
}
.thanks_box h1 span {
  display: block;
  font-family: var(--outfit);
  font-size: 6rem;
  font-weight: normal;
  color: var(--color01);
  margin: 0 auto 40px;
}
.thanks_box p {
  max-width: 600px;
  margin: 0 auto;
}
.thanks_box.questionnaire {padding: 70px 40px;}
.thanks_box.questionnaire h1 {border: none;}
.thanks_box.questionnaire::before,
.thanks_box.questionnaire::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
}
.deliv_thanks_box {
  text-align: center;
  padding: 70px 40px 80px;
  background: var(--color04);
}
.deliv_thanks_box h1 {
  font-family: var(--outfit);
  font-size: 6.2rem;
  font-weight: normal;
  color: var(--color01);
  margin: 0 auto 30px;
}
.deliv_thanks_box p {
  font-size: 2.4rem;
  font-weight: 700;
  max-width: 600px;
  margin: 0 auto;
}
.regist_box {
  position: relative;
  z-index: 0;
  padding: 70px;
  background: var(--color04);
}
.regist_box form {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.regist_box form > *:nth-child(1) {margin-top: 0;}
.regist_box .form_caption {
  font-size: 2rem;
  margin: 30px 0 10px;
}
.regist_box input {
  display: block;
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 2rem;
  background: #FFFFFF;
  border: solid 1px var(--color01);
  padding: 0 1.5em;
  margin: 0 0 10px;
}
.regist_box input[type="checkbox"] {display: none;}
.regist_box .form_err {margin: 0 0 20px;}

.regist_box h1 {
  color: var(--color01);
  font-size: 2.7rem;
  text-align: center;
  margin: 0 auto 40px;
  padding: 0 0 30px;
  border-bottom: solid 5px var(--color01);
}
.regist_box h1.hikitsugi01 ,
.regist_box h1.hikitsugi02 {
  position: relative;
  z-index: 0;
}
.regist_box h1.hikitsugi01::before ,
.regist_box h1.hikitsugi02::before {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 100px;
  height: 100px;
  margin: auto;
  top: -120px;
  left: 0;
  right: 0;
}
.regist_box h1.hikitsugi01::before {
  background: url("../img/common/ico_success.svg") no-repeat center / cover;
}
.regist_box h1.hikitsugi02::before {
  background: url("../img/common/ico_fail.svg") no-repeat center / 100%;
  margin: auto;
  top: -120px;
  left: 0;
  right: 0;
}
.regist_box h2 {
  color: var(--color01);
  font-size: 2.1rem;
  text-align: center;
  margin: 0 auto 30px;
  padding: 0 0 30px;
  border-bottom: solid 5px #FD593F; 
}
.regist_box h2.normal {
  padding: 30px 0 0;
  border: none; 
}
.regist_box dl {
  position: relative;
  z-index: 0;
  margin: 0 auto 30px;
}
.regist_box dl dt {
  font-size: 2rem;
  line-height: 1.5;
  text-align: center;
  padding: 20px;
  background: var(--color01);
  border-radius: 20px 20px 0 0;
}
.regist_box dl dd {
  padding: 40px;
  background: #FFFFFF;
  border-radius: 0 0 20px 20px;
}
.regist_box .caution_box {margin: 30px auto;} 
.regist_box .caution_box dt {
  background: #FF0000;
  padding: 10px 20px;
  color: #FFFFFF;
  font-weight: 700;
}
.regist_box .caution_box dd {
  padding: 30px;
  border: solid 4px #FF0000;
}
.regist_box .btn_common {margin: 20px auto 0;}
.regist_box .form_btn_list {margin: 20px auto 0;}
.regist_box .form_btn_list button.back {margin: 20px auto 0;}
.auth_ac {
  margin: 40px auto 20px;
  text-align: center;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}
.auth_ac + div {
  display: none;
  padding: 30px;
  background: var(--color04);
}
.auth_ac + div > p:nth-of-type(1) {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
}
.auth_ac + div h2 {
  text-align: left;
  border: none;
}

/* -----------------------------------------------------------
 button
----------------------------------------------------------- */ 

.btn_common {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 40px auto 0;
}
.btn_common button {
  background: var(--color01);
  padding: 15px 100px;
}
.btn_common button ,
.btn_common p {
  position: relative;
  z-index: auto;
  display: inline-block;
  min-width: 500px;
  max-width: 700px;
  line-height: 1.5;
  color: #FFFFFF;
  font-size: 2rem;
  cursor: pointer;
  transition: 0.3s;
}
.btn_common p a {
  position: relative;
  z-index: auto;
  display: block;
  width: 100%;
  height: 100%;
  padding: 15px 100px;
  background: var(--color01);
  transition: 0.5s;
}
.btn_common button:hover,
.btn_common p a:hover {
  text-decoration: none;
  opacity: 0.5;
}
.btn_common button::after,
.btn_common p a::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 10px;
  height: 20px;
  background: url("../img/common/btn_ar_w.svg") no-repeat center / auto 100%;
  border-radius: 99px;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 20px;
}
.form_btn_list {
  display: flex;
  flex-direction: column;
  margin: 60px auto 0;
  text-align: center;
}
.form_btn_list button {
  display: inline-block;
  color: #FFFFFF;
  background: var(--color03);
  margin: 0 auto 30px;
  padding-left: 1em;
  padding-right: 1em;
  transition: 0.5s;
}
.form_btn_list button.confirm {
  min-width: 500px;
  height: 60px;
  line-height: 60px;
  background: #707070;
  color: #FFFFFF;
  font-size: 2.7rem;
  font-weight: 500;
  border-radius: 99px;
  cursor: pointer;
}
.form_btn_list button.confirm:hover {opacity: 0.5;}
.form_btn_list button.back {
  position: relative;
  z-index: 0;
  min-width: 240px;
  height: 50px;
  line-height: 46px;
  color: var(--color01);
  background: #FFFFFF;
  padding: 0 50px;
  margin: 30px auto 0;
  font-size: 2rem;
  font-weight: 500;
  border: solid 2px var(--color01);
  transition: 0.5s;
  cursor: pointer;
}
.form_btn_list button.back:hover {opacity: 0.5;}
.form_btn_list button.back::before,
.form_btn_list button.back::after {
  position: absolute;
  display: block;
  content: "";
  margin: auto;
  top: 0;
  bottom: 0;
}
.form_btn_list button.back::before {
  width: 36px;
  height: 36px;
  background: var(--color01);
  border-radius: 50%;
  left: 8px;
  z-index: 1;
}
.form_btn_list button.back::after {
  width: 10px;
  height: 10px;
  border-top: solid 3px #FFFFFF;
  border-left: solid 3px #FFFFFF;
  left: 22px;
  z-index: 2;
  transform: rotate(-45deg);
}

.btn_back {
  text-align: center;
  margin: 60px auto 0;
}
.btn_back p {
  display: inline-block;
  width: auto;
  min-width: 300px;
  height: 60px;
  line-height: 54px;
  font-size: 2rem;
}
.btn_back p a {
  position: relative;
  z-index: 0;
  display: block;
  padding: 0 50px;
  width: 100%;
  height: 100%;
  color: var(--color01);
  background: #FFFFFF;
  border: solid 2px var(--color01);
  transition: 0.5s;
} 
.btn_back p a:hover {
  opacity: 0.5;
  text-decoration: none;
}
.btn_back p a::before,
.btn_back p a::after {
  position: absolute;
  display: block;
  content: "";
  margin: auto;
  top: 0;
  bottom: 0;
}
.btn_back p a::before {
  width: 36px;
  height: 36px;
  background: var(--color01);
  border-radius: 50%;
  left: 12px;
  z-index: 1;
}
.btn_back p a::after {
  width: 10px;
  height: 10px;
  border-top: solid 3px #FFFFFF;
  border-left: solid 3px #FFFFFF;
  left: 26px;
  z-index: 2;
  transform: rotate(-45deg);
}
.btn_back.no_mark p a::before,
.btn_back.no_mark p a::after {display: none;}
.btn_skip {
  text-align: center;
  margin: 60px auto 0;
}
.btn_skip p {
  display: inline-block;
  width: auto;
  min-width: 400px;
  height: 80px;
  line-height: 74px;
  font-size: 2.4rem;
}
.btn_skip p a {
  position: relative;
  display: block;
  padding: 0 50px;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border: solid 2px #333333;
  border-radius: 99px;
  transition: 0.5s;
  top: 0;
} 
.btn_skip p a:hover {
  top: 8px;
  text-decoration: none;
}
.btn_skip p a::before {
  position: absolute;
  display: block;
  content: "";
  margin: auto;
  top: 0;
  bottom: 0;
  width: 36px;
  height: 36px;
  background: url("../img/common/ico_skip.svg") no-repeat right 40% center / 40% , #333333;
  border-radius: 50%;
  right: 12px;
  z-index: 1;
}
.btn_skip p a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background: #333333;
  top: 8px;
  left: 0;
  right: 0;
  transition: 0.5s;
}
.btn_skip p a:hover::after {top: 0;}

.btn_ac_box {
  margin: 20px 0 0;
  text-align: center;
}
.btn_ac_box a {
  display: inline-block;
  padding: 0.5em 40px;
  line-height: 1.3;
  font-size: 1.6rem;
  background: #FFFFFF;
  border: solid 2px var(--color01);
  border-radius: 99px;
}
.btn_ac_box a:hover {text-decoration: none;}
.btn_ac_box a[target="_blank"]::after {
  display: inline-block;
  content: "";
  width: 1.2em;
  height: 1.2em;
  background: url("../img/common/ico_target.svg") no-repeat center / cover;
  vertical-align: middle;
  margin: 0 0 0.25em 0.5em;
}

  
/* -----------------------------------------------------------
 subpage
----------------------------------------------------------- */

.editor_contents h2 {
  color: #333333;
  font-size: 2.4rem;
  font-weight: 700;
  padding: 0.5em 1em;
  margin: 40px 0 30px;
  line-height: 1.5;
  background: var(--color04);
}
.editor_contents.p_iframe h2 {
  color: #FFFFFF;
  background: var(--color01);
}

.editor_contents h3 {
  color: var(--color01);
  font-size: 2.1rem;
  font-weight: 700;
  padding: 0 0 0.25em;
  border-bottom: solid 2px var(--color01);
  margin: 30px 0 20px;
}
.editor_contents h4 {
  position: relative;
  color: var(--color01);
  font-size: 1.8rem;
  font-weight: 700;
  padding: 0 0 0 1.5em;
  margin: 30px 0 20px; 
}
.editor_contents h4::before {
  position: absolute;
  display: block;
  content: "";
  width: 1em;
  height: 1em;
  background: var(--color01);
  top: 0.3em;
  left: 0;
}
.editor_contents p {margin: 0 0 1em;}
.editor_contents table {
  width: auto;
  height: auto;
  margin: 0 0 1em;
  max-width: 100%;
  clear: both;
}
.editor_contents table th {
  background: #EAEAEA;
  padding: 0.5em 1em;
  border: solid 1px #333;
}
.editor_contents table td {
  padding: 0.5em 1em;
  border: solid 1px #333;
}
.editor_contents ul {margin: 0 0 1em 1.2em;}
.editor_contents ul li {
  list-style-type: disc;
  margin: 0 0 0.5em;
}
.editor_contents ol {margin: 0 0 1em 1.5em;}
.editor_contents ol li {
  list-style-type: decimal;
  margin: 0 0 0.5em;
}

/* -----------------------------------------------------------
 product
----------------------------------------------------------- */

.recommend {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: 0!important;
  background: url("../img/common/ico_recommend_btn_w.svg") no-repeat center / 54%,#DBD5BC;
  border-radius: 50%;
  bottom: 15px;
  right: 15px;
}
.recommend.checked {background: url("../img/common/ico_recommend_btn_w.svg") no-repeat center / 54%,#887422;}
.archive_data {
  width: 100%;
  margin: 0 auto 30px;
  background: var(--color02);
}
.archive_data > div {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  height: 60px;
  margin: 0 auto;
  padding: 0 40px;
}
.archive_data > div > p {
  display: inline-block;
  font-size: 2rem;
  width: 5em;
  color: #FFFFFF;
}
.archive_data > div > div {
  display: inline-block;
  width: calc(100% - 6em);
  text-align: right;
}
.archive_data > div > div p,
.archive_data > div > div form {
  display: inline-block;
  color: #FFFFFF;
}
.archive_data > div > div button {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: var(--color01);
  text-align: center;
  background: #FFFFFF;
  border: solid 1px var(--color01);
  border-radius: 50%;
  margin: 0 0 0 0;
  cursor: pointer;
  transition: 0.5s;
}
.archive_data > div > div button.current {
  background: var(--color01);
  color: #FFFFFF;
}
.btn_order {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  max-width: 1280px;
  padding: 0 40px;
  margin: 0 auto 30px;
}
.btn_order button {
  position: relative;
  display: inline-block;
  min-width: 160px;
  height: 100%;
  line-height: 1.5;
  margin: 0 5px;
  padding: 0.5em 20px;
  color: var(--color01);
  background: #FFFFFF;
  border: solid 1px var(--color01);
  cursor: pointer;
  transition: 0.5s;
}
.btn_order button:hover ,
.btn_order button.current {
  background: var(--color01);
  color: #FFFFFF;
}

.archive_list {overflow: hidden;}
.archive_list li {
  width: 18.4%;
  margin: 0 2% 40px 0;
  float: left;
}
.archive_list li:nth-child(5n) {margin: 0 0 40px;}
.archive_list li:nth-child(5n+1) {clear: both;}
.archive_list li a {transition: 0.5s;}
.archive_list li a:hover {
  text-decoration: none;
  opacity: 0.5;
}
.archive_list li figure {
  position: relative;
  margin: 0 auto 10px;
  border: solid 1px #707070;
  overflow: hidden;
}
.archive_list li p {font-size: 1.4rem;}
.archive_list li .p_point {
  color: var(--color01);
  font-weight: 700;
  font-size: 2rem;
}
.archive_list li .p_name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 3em;
  overflow: hidden;
}
.archive_list + .pagenation {margin: 0 auto 100px;}
.product_box01 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 auto 60px;
}
.product_box01 .products_img {
  width: 60%;
  overflow: hidden;
}
.product_box01 .products_img ul li {overflow: hidden;}
.product_box01 .products_img ul li img {
  display: block;
  width: 100%;
}
.product_box01 .products_img .product_thumb {width: 100%;}
.products_img .slick-list {overflow: visible;}
.product_thumb .slick-track {transform:unset!important;}
.product_box01 .products_img .product_thumb li {
  margin: 10px 5px 0;
  cursor: pointer;
  border: solid 1px #eee;
}
.product_box01 .products_img .product_thumb li.slick-current {border:solid 2px var(--color01);}
.product_box01 .products_img + div {width: 35%;}
.product_box01 p {margin: 0 0 1em;}
.product_box01 .products_err {
  padding: 10px;
  border: solid 1px #FF0000;
  color: #FF0000;
}
.product_box01 .p_cat {
  font-size: 1.4rem;
  font-weight: 500;
}
.product_box01 .p_brand {
  font-size: 1.6rem;
  font-weight: 700;
}
.product_box01 .p_name {
  font-size: 1.8rem;
  margin: 0 0 1em;
  font-weight: 500;
}
.product_box01 .p_num {
  font-size: 1.4rem;
  font-weight: 700;
}
.product_box01 .p_point {
  font-size: 2rem;
  color: var(--color01);
  margin: 0 0 1em;
  font-weight: 700;
}
.product_box01 .p_kikan {
  color: var(--color01);
  font-size: 0.9em;
  margin: 0 0 0.5em;
  padding: 0.5em 2em;
  border: solid 1px var(--color01);
}
.product_box01 .p_kikan:nth-of-type(1) {margin: 2em 0 0.5em;}
.p_tag {margin:0 0 3em;}
.p_tag li {
  position:relative;
  display:inline-block;
  min-width: 80px;
  text-align: center;
  padding:0.25em 2em;
  font-size:0.8em;
  line-height:1.2;
  color: #e65e5f;
  border: solid 1px #e65e5f;
  margin:5px auto;
  z-index:0;
}
.p_tag li.p_tag01 {color: #e65e5f;border: solid 1px #e65e5f;}
.p_tag li.p_tag02 {color: #66c1e3;border: solid 1px #66c1e3;}
.p_tag li.p_tag03 {color: #3b5b87;border: solid 1px #3b5b87;}
.p_tag li.p_tag04 {color: #1FB90B;border: solid 1px #1FB90B;}
.product_box01 .recommend_button {margin: 0px 0 30px;}
.product_box01 .recommend_button .recommend {
  position: static;
  display: inline-block;
  vertical-align: middle;
}
.product_box01 .recommend_button .recommend + span {
  display: inline-block;
  color: #333333;
  padding: 0 0 0 10px;
  cursor: pointer;
}
.product_box01 .recommend_button .recommend + span::after {content: "お気に入りに追加";}
.product_box01 .recommend_button .recommend.checked + span::after {content: "お気に入りから削除";}
.product_box01 .recommend_button button {
  cursor: pointer;
  font-weight: 700;
  padding: 0 0 0 0.5em;
}
.product_box01 .select_outer {
  position: relative;
  z-index: 0;
  display: inline-block;
  min-width: auto;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border: solid 1px #707070;
  border-radius: 2px;
  margin: 15px 0;
}
.product_box01 .select_outer::after {
  position: absolute;
  display: block;
  content: "";
  width: 8px;
  height: 8px;
  border-right: solid 2px #333333;
  border-bottom: solid 2px #333333;
  transform: rotate(45deg);
  margin: auto;
  top: 0;
  bottom: 0.25em;
  right: 1em;
  pointer-events: none;
}
.product_box01  select {
  width: 100%;
  text-align: center;
  padding: 0 3.5em 0 1.5em;
}
.product_box01  select option {
  text-align: left;
}
.product_box01 form .btn_common {
  width: 100%;
  margin: 0;
}
.product_box01 form button {
  width: 100%;
  min-width: 100%;
  color: #FFFFFF;
  font-size: 1.8rem;
  font-weight: 700;
  padding: 1em;
  background: var(--color03);
  border: solid 1px var(--color03);
  margin: 20px 0 0;
  cursor: pointer;
}
.product_box01 form button:hover {opacity: 0.5;}
.product_box01 form button::before {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 1.6em;
  height: 1.6em;
  background: url("../img/common/ico_cart_btn_w.svg") no-repeat center / contain;
}
.product_box01 form button::after {display: none;}
.product_box02 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 auto 80px;
}
.product_box02 > div {width: 48%;}
.product_box02 > .brand_box {
  text-align: center;
  padding: 20px 40px;
  border: solid 1px #EFEFEF; 
}
.product_box02 > .brand_box > img {margin: 0 auto 1em;}
.product_box02 > .brand_box dt {
  font-size: 2rem;
  margin: 0 auto 1em;
}
.product_box02 > .brand_box dd {
  font-size: 1.4rem;
  text-align: left;
}
.product_box02 > .spec_box {
  background: #EFEFEF;
  padding: 20px 30px;
}
.product_box02 > .spec_box dt {
  font-size: 1.8rem;
  margin: 0 0 1em;
}
.product_box02 > .spec_box dd ul li {
  position: relative;
  font-size: 1.2rem;
  min-height: 1em;
  margin: 0 0 1em;
  padding: 0 0 0 11em;
}
.product_box02 > .spec_box dd ul li span {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 11em;
}
.editor_contents .userguide li {
  position: relative;
  list-style-type: none;
  padding: 0 0 0 1.2em;
}
.editor_contents .userguide li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "◎";
}

.title_category {
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 700;
  margin: 60px 0 20px;
  padding: 0.15em 0.75em;
  line-height: 1.7;
  background: var(--color02);
}
.parent_list + .btn_common {
  width: 370px;
  height: 60px;
  margin: 0 0 60px auto;
}
.parent_list + .btn_common a {
  position: relative;
  z-index: 0;
  display: block;
  height: 100%;
  line-height: 60px;
  color: var(--color01);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: solid 1px var(--color01);
  border-radius: 5px;
  transition: 0.5s;
}
.parent_list + .btn_common a:hover {
  color: #FFFFFF;
  background: var(--color01);
}
.parent_list + .btn_common a::after {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 0.6em;
  height: 1.2em;
  background: url("../img/common/btn_ar.svg") no-repeat center / contain;
  inset: 0 1em 0 auto;
  margin: auto;
}
.parent_list + .btn_common a:hover::after {background: url("../img/common/btn_ar_w.svg") no-repeat center / contain;}

/* -----------------------------------------------------------
 cart
----------------------------------------------------------- */

.cart_table {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  padding: 30px 0;
  margin: 0 auto 30px;
  border-top: solid 1px var(--color01);;
}
.cart_table:nth-last-of-type(1) {
  border: none;
  padding: 30px 0 0;
  margin: 0 auto;
}
.cart_table > .cart_figure {width: 200px;}
.cart_table > .cart_figure figure {
  border: solid 1px #BEBEBE;
  overflow: hidden;
}
.cart_table > .cart_product {
  width: calc(100% - 520px);
  text-align: left;
  padding: 0 30px;
}
.cart_table > .cart_point {
  width: 320px;
  font-size: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cart_table > .cart_point p {
  width: 100%;
  color: #FFFFFF;
  font-size: 1.6rem;
  padding: 0.5em 1em;
  background: var(--color02);
}
.deliv_caution {
  font-size: 1.1em;
  font-weight: 700;
  text-align: center;
  padding: 0.5em;
  border: solid 1px #F00;
  color: #F00;
  margin: 20px auto;
}
.cart_table > .cart_deliv {width: 320px;}
.cart_table > .cart_product p {margin: 0 0 0.5em;}
.cart_table > .cart_product .products_err {color: #FF0000;}
.cart_table > .cart_product .p_brand {font-size: 1.4rem;}
.cart_table > .cart_product .p_spec {font-size: 1.4rem;}
.cart_table > .cart_product .p_num {font-size: 1.4rem;}
.cart_table > .cart_product .p_count {display: inline-block;}
.cart_table > .cart_product input {
  width: 60px;
  height: 40px;
  text-align: center;
  padding: 0 10px;
  border: solid 1px #BEBEBE;
}
.cart_table > .cart_product button {
  display: inline-block;
  color: #FF0000;
  text-decoration: underline;
  cursor: pointer;
  margin: 0 0 0 20px;
} 
.contact_form .cart_table {
  margin: 0;
  border: none;
  border-bottom: solid 1px #BEBEBE;
}
.cart_table:nth-last-of-type(1) {border: none;}
.contact_form .cart_table > .cart_deliv span {
  display: inline-block;
  width: 6em;
}
.contact_form .cart_table > .cart_deliv select {
  display: block;
  color: #333333;
  font-size: 1.8rem;
  border: solid 1px #707070;
  padding: 0 1.5em 0 0.5em;
}
.contact_form .cart_table > .cart_deliv select option {border-radius: 0;padding: 0.5em;}
.contact_form .cart_table > .cart_deliv .select_outer {
  background: none;
  height: 30px;
  line-height: 30px;
  margin: 0;
}
.contact_form .cart_table > .cart_deliv .select_outer::after {
  width: 0;
  height: 0;
  transform: none;
  border-top: solid 0.6em #333333;
  border-left: solid 0.4em transparent;
  border-right: solid 0.4em transparent;
  right: 0.25em;
  top: 0.2em;
  bottom: 0;
}
.contact_form iframe {
  width: 100%;
  height: 300px;
  padding: 0.5em;
  border: solid 1px var(--color01);
  overflow-y: scroll;
}
.contact_form .use_point {width: 100%;}
.contact_form .use_point th {
  display: table-cell;
  color: var(--color01);
  width: 12em;
  background: var(--color04);
  padding: 0.5em 1em;
  border: solid 1px var(--color01);
  font-size: 1.6rem;
}
.contact_form .use_point td {
  display: table-cell;
  width: calc(100% - 12em);
  padding: 0.5em 1em;
  border: solid 1px var(--color01);
  font-size: 1.6rem;
}
.point_box {
  text-align: center;
  padding: 30px 40px;
  margin: 0 auto 30px;
  background: var(--color04);
}
.point_box > div:nth-of-type(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  padding: 0 0 30px;
  border-bottom: dotted 2px var(--color01);
}
.point_box > div:nth-of-type(1) span {
  font-size: 3.2rem;
  margin: 0 30px;
}
.point_box > div:nth-of-type(1) .recalc {
  display: inline-block;
  min-width: 180px;
  height: 50px;
  line-height: 50px;
  color: var(--color01);
  padding: 0 50px;
  background: url("../img/common/ico_recalc.svg") no-repeat left 20px center / auto 50%,#FFFFFF;
  border: solid 1px var(--color01);
  cursor: pointer;
}
.point_box > div:nth-of-type(2) {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 1.4rem;
  padding: 20px 0 0;
}
.point_box > div:nth-of-type(2) span {
  font-size: 2rem;
  margin: 0 0 0 40px;
}

.point_caution {
  padding: 1em;
  font-size: 1.2em;
  color: #F00;
  text-align: center;
  margin: 20px auto;
  border: solid 1px #f00;
}


.cart_btn_list {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: 0 auto 80px;
}
.cart_btn_list .btn_common {width: 48%;}
.cart_btn_list button {
  display: block;
  width: 100%;
  min-width: auto;
  font-weight: 700;
  background: var(--color03);
  border: solid 2px var(--color03);
}
.cart_btn_list .btn_common_w button {
  color: var(--color01);
  border: solid 2px var(--color01);
  background: #FFFFFF;
}
.cart_btn_list .btn_common_w button::before {background: #333333;}
.cart_btn_list .btn_common_w button::after { 
  width: 1.6em;
  height: 1.6em;
  background: url(../img/common/btn_ar_w.svg) no-repeat center / auto 60% , var(--color01);
  left: 20px;
  right: auto;
  transform: rotate(180deg);
}
.dl_mypage {
  text-align: center;
  padding: 30px 40px;
  border: solid 1px var(--color01);
  margin: 40px auto;
}
.dl_mypage02 dd {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dl_mypage dt {
  font-size: 1.8rem;
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: dashed 2px var(--color01);
}
.dl_mypage dt span {font-size: 2.4rem;}
.dl_mypage dd p {font-size: 2rem;}
.dl_mypage dd p span {margin: 0 0 0 1.5em;}
.dl_mypage.dl_point dd {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
.dl_mypage dd .pont_pereod {
  display: inline-block;
  min-width: 300px;
  height: 40px;
  line-height: 40px;
  color: #FFFFFF;
  background: var(--color02);
  padding: 0 20px;
  margin: 20px auto 0;
}
.dl_mypage dd .btn_mypage {
  display: inline-block;
  min-width: 250px;
  height: 50px;
  line-height: 50px;
}
.dl_mypage dd .btn_mypage a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  font-size: 1.4rem;
  background: var(--color01);
  padding: 0 30px;
  transition: 0.5s;
}
.dl_mypage dd .btn_mypage a:hover {
  text-decoration: none;
  opacity: 0.5;
}
.dl_mypage dd .btn_mypage a::after {
  position: absolute;
  display: block;
  content: "";
  width: 0.5em;
  height: 1em;
  background: url("../img/common/btn_ar_w.svg") no-repeat center / cover;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 10px;
  
}
.table_point {width: 100%;}
  
.table_point th {
  color: #FFFFFF;
  font-size: 1.6rem;
  text-align: center;
  background: var(--color01);
  padding: 0.5em;
}
.table_point td {
  font-size: 1.6rem;
  text-align: center;
  padding: 0.5em;
  border-bottom: solid 1px var(--color01);
}
.table_point td:nth-of-type(3) {width: 30%;}
.table_point td:nth-of-type(3) p {
  width: calc(100% - 75px);
  text-align: left;
}
.table_point td figure {
  display: inline-block;
  width: 60px;
  margin: 0 5px 0 0;
  vertical-align: middle;
  border: solid 1px #CCC;
}
.table_point td p {
  display: inline-block;
  vertical-align: middle;
}
.table_point td:nth-of-type(1) span {
  display: inline-block;
  min-width: 90px;
  line-height: 1.3;
  text-align: center;
  padding: 0.25em 0.5em;
  border: solid 1px var(--color01);
}
.table_point caption {
  caption-side: top;
  text-align: left;
}
.dl_mypage + .h2_common {
  font-size: 1.8rem;
  margin: 80px auto 0;
}
.btn_mypage {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.btn_mypage.center {justify-content: center;}
.btn_mypage li {
  position: relative;
  width: 48%;
  line-height: 1.3;
  font-size: 2rem;
  text-align: center;
}
.btn_mypage li::after {
  position: absolute;
  display: block;
  content: "";
  margin: auto;
  top: 0;
  bottom: 0;
}
.btn_mypage li::after {
  width: 10px;
  height: 20px;
  background: url("../img/common/btn_ar_w.svg") no-repeat center / cover;
  right: 20px;
}
.btn_mypage li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  padding: 1em 2em;
  background:  var(--color01);
  transition: 0.5s;
}
.btn_mypage li a:hover {
  text-decoration: none;
  opacity: 0.5;
}
.deliv_box {
  background: var(--color04);
  padding: 30px 40px;
}
.deliv_box ul li {
  position: relative;
  z-index: 0;
  background: #FFFFFF;
  padding: 50px 40px 40px;
  margin: 0 auto 30px;
}
.deliv_box ul li .deliv_status {
  position: absolute;
  display: inline-block;
  min-width: 160px;
  height: 40px;
  line-height: 40px;
  color: #FFFFFF;
  font-size: 1.4rem;
  text-align: center;
  padding: 0 20px;
  background: #707070;
  top: 40px;
  right: 40px;
}
.deliv_box ul li .deliv_status02 {background: var(--color01);}
.deliv_box ul li table {margin: 20px 0 0;}
.deliv_box ul li table th {
  color: var(--color01);
  font-size: 1.8rem;
  line-height: 1.3;
  text-align: center;
  padding: 1em;
  border-top: solid 1px var(--color01);
  border-bottom: solid 1px var(--color01);
}
.deliv_box ul li table td {
  font-size: 1.4rem;
  padding: 20px 20px 0;
}
.deliv_box ul li table td:nth-of-type(1) {
  width: 200px;
  padding: 20px 0 0;
}
.deliv_box ul li table td:nth-of-type(2) {width: 200px;}
.deliv_box ul li table td:nth-of-type(3) {width: calc(100% - 320px);}
.deliv_box ul li table td:nth-of-type(4) {
  width: 120px;
  font-size: 2.4rem;
  text-align: center;
}
.deliv_box ul li table td figure {
  border: solid 1px #707070;
  overflow: hidden;
}
.deliv_box ul li table td p {margin: 0 0 0.5em;}
.deliv_box ul li table td .p_brand {font-size: 1.6rem;}
.deliv_box ul li table td .p_name {font-size: 1.8rem;}
.deliv_box ul li table td .p_spec {margin: 0;}
.device_table {
  width: 100%;
  text-align: center;
}
.device_table th {
  color: var(--color01);
  border-top: solid 1px var(--color01);
  border-bottom: solid 1px var(--color01);
  padding: 20px
}
.device_table td {
  border-bottom: solid 1px var(--color01);
  padding: 20px;
  vertical-align: middle;
}
.device_table td:nth-of-type(1) {width: 160px;padding: 40px;}
.device_table td:nth-of-type(2) {width: calc(100% - 280px);}
.device_table td:nth-of-type(3) {width: 120px;}
.device_table td:nth-of-type(2) table {
  width: 100%;
  text-align: left;
}
.device_table td:nth-of-type(2) table th {
  width: 10em;
  border: solid 1px var(--color01);
  padding: 0.25em 1em;
  background: #F4F4F4;
}

.device_table td:nth-of-type(2) table td {
  width: calc(100% - 10em);
  border: solid 1px var(--color01);
  padding: 0.25em 1em;
}
.device_table td:nth-of-type(3) input[type="checkbox"] + span::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  color: var(--color01);
  border: solid 1px var(--color01);
  margin: 0 auto;
  cursor: pointer;
  line-height: 1.2;
}
.device_table td:nth-of-type(3) input[type="checkbox"]:checked + span::before {content: "✔";}

/* -----------------------------------------------------------
 static
----------------------------------------------------------- */

.tab_form {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: 0 0 30px;
}
.tab_form li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48%;
  cursor: pointer;
  background: var(--color04);
}
.tab_form li.active {
  position: relative;
  background: var(--color01);
  border: none;
}
.tab_form li.active::after {
  position: absolute;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-top: solid 24px var(--color01);
  border-left: solid 60px transparent;
  border-right: solid 60px transparent;
  margin: auto;
  left: 0;
  right: 0;
  top: 100%;
}
.tab_form li label {padding: 20px;}
.tab_form li input[type="radio"] + span::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  border: double 3px var(--color01);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 0.5em 7px 0;
}
.tab_form li input[type="radio"]:checked + span::before {
  border: solid 2px #FFFFFF;
  background: #FFFFFF;
}
.tab_form li span {
  color: var(--color01);
  font-size: 2rem;
  line-height: 1.2;
  cursor: pointer;
}
.tab_form li.active span {color: #FFFFFF;}
.tab_content {display: none;}
.tab_content.active {display: block;}
.cart_caution {
  visibility: hidden;
  height: 0;
  padding: 0!important;
  width: 100%;
  padding: 0.5em 0;
  text-align: center;
  color: #FFFFFF;
  background: #ff0000;
}
.cart_caution p {
  visibility: hidden;
  height: 0;
  padding: 0!important;
  
  
  
  max-width: 1280px;
  padding: 0 40px;
  margin: 0 auto;
  line-height: 1.5;
}


/* -----------------------------------------------------------
 login
----------------------------------------------------------- */

header.header_login {
  position: relative;
  z-index: 20;
  height: 90px;
  padding: 12px 30px;
  background: #FFFFFF;
}
header.header_login .logo {
  width: 460px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header.header_login .logo img {
  display: block;
  width: 140px;
}
header.header_login .logo img:nth-of-type(2) {width: 290px;}
header.header_login .menu_box {display: contents;}
header.header_login .btn_close {display: none;}
header.header_login .btn_lang {
  position: absolute;
  z-index: 1;
  width: 260px;
  margin: auto;
  inset: 15px 30px 0 auto;
}
header.header_login .btn_lang span {
  position: relative;
  z-index: 1;
  display: block;
  height: 60px;
  line-height: 60px;
  font-weight: 700;
  padding: 0 20px 0 60px;
  border: solid 1px #333333;
  border-radius: 4px;
}
header.header_login .btn_lang span::before ,
header.header_login .btn_lang span::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  display: block;
  content: "";
  margin: auto;
}
header.header_login .btn_lang span::before {
  width: 30px;
  height: 30px;
  background: url("../img/common/ico_lang.svg") no-repeat center / contain;
  inset: 0 auto 0 10px;
}
header.header_login .btn_lang span::after {
  width: 12px;
  height: 6px;
  background: url("../img/common/btn_ab.svg") no-repeat center / contain;
  inset: 0 10px 0 auto;
}
header.header_login .btn_lang a {text-align: center;}
main.login {padding: 140px 0 160px;}
main.login::before {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  display: block;
  content: "";
  width: 100%;
  aspect-ratio: 1600 / 970;
  background: url("../img/sub/bg_login.png") no-repeat top center / 100%;
  inset: 100px 0 auto;  
}
footer.login {padding: 40px 0;}
footer.login p {margin: 20px auto;}
footer.login .logo {margin: 20px auto;}
footer.login .btn_contact {
  width: 370px;
  height: 60px;
  line-height: 60px;
}
footer.login .btn_contact a {font-size: 1.8rem;}
main.login .head {
  text-align: center;
  margin: 0 auto 120px;
}
main.login .head img {
  display: block;
  margin: 0 auto 30px;
}


main.login .head > span:nth-of-type(1) {
  display: flex;
  justify-content: center;
  font-size: 8vw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  font-family: var(--outfit);
  text-align: center;
  margin: 0 auto 0.3em;
}
main.login .head > span:nth-of-type(1) span {display: block;color: #001A72;text-shadow: 1px 1px 10px rgba(255,255,255,1);}
main.login .head > span:nth-of-type(1) span:nth-child(2) {color: #004495;}
main.login .head > span:nth-of-type(1) span:nth-child(3) {color: #0068B3;}
main.login .head > span:nth-of-type(1) span:nth-child(4) {color: #007BC2;}
main.login .head > span:nth-of-type(1) span:nth-child(5) {color: #00A0E1;}
main.login .head > span:nth-of-type(1) span:nth-child(6) {color: #44B9E9;}
main.login .head > span:nth-of-type(1) span:nth-child(7) {color: #6EC9ED;}
main.login .head > span:nth-of-type(1) span:nth-child(8) {color: #44B9E9;}
main.login .head > span:nth-of-type(1) span:nth-child(9) {color: #009CDE;}
main.login .head > span:nth-of-type(1) span:nth-child(10) {color: #007BC2;}
main.login .head > span:nth-of-type(1) span:nth-child(11) {color: #0068B3;}

main.login .head > span:nth-of-type(2) {
  display: block;
  font-family: var(--outfit);
  font-size: 40px;
  font-weight: 300;
}
main.login .login_box {
  background: #FFFFFF;
  padding: 30px 50px 100px;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
}
main.login .login_box .bread_crumbs > div {padding: 0;}
main.login .login_box h1 {
  position: relative;
  z-index: 0;
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  padding: 30px 0 50px;
  margin: 0 auto 30px;
  border-bottom: solid 1px #333333;
}
main.login .login_box h1.success::before ,
main.login .login_box h1.failed::before {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 100px;
  height: 100px;
  margin: auto;
  top: -100px;
  left: 0;
  right: 0;
}
main.login .login_box h1.success::before {background: url("../img/common/ico_success.svg") no-repeat center / cover;}
main.login .login_box h1.failed::before {background: url("../img/common/ico_fail.svg") no-repeat center / 100%;}
main.login .login_box h1 + p ,
main.login .login_box h2 + p {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  margin: 0 auto 100px;
}
main.login .login_box h2 {
  font-size: 27px;
  font-weight: 500;
  margin: 0 auto 30px;
  text-align: center;
}
main.login .login_box form {
  max-width: 700px;
  margin: 0 auto;
}
main.login .login_box form .form_checkbox {font-size: 20px;}
main.login .login_box form input {
  display: block;
  width: 100%;
  max-width: 600px;
  font-size: 20px;
  padding: 15px;
  margin: 0 auto;
  background: #FFFFFF;
  border: solid 1px #333333;
  border-radius: 2px;
}
main.login .login_box form input.input_auth {
  padding: 15px 15px 15px 60px;
  background: url("../img/sub/ico_login_b.svg") no-repeat left 20px center / auto 60%,#FFFFFF;
}
main.login .login_box form .form_checkbox input {display: none;}
main.login .login_box form .form_caption ,
main.login .login_box form .form_err {
  width: 100%;
  max-width: 600px;
  margin: 5px auto 0;
}
main.login .login_box form .form_caption {margin: 20px auto 0;}
main.login .login_box form .form_caption span {
  font-size: 22px;
  margin: 0 1em 0 0;
}
main.login .login_box form .btn_common button {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  font-size: 32px;
  font-weight: bold;
  background: var(--color03);
  border-radius: 4px;
}
main.login .login_box form .btn_common button::after {
  width: 16px;
  height: 32px;
}
main.login .login_box form .btn_login button::before {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 1.5em;
  height: 1.5em;
  background: url("../img/sub/ico_login.svg") no-repeat center / contain;
  margin: auto;
  inset: 0 auto 0 30px;
}
main.login .login_box .editor_contents h2 ,
main.login .login_box .editor_contents p {
  font-size: inherit;
  text-align: inherit;
  font-weight: inherit;
}






/* -----------------------------------------------------------
 home
----------------------------------------------------------- */

main.home {padding: 0;}
.home .kv {
  position: relative;
  z-index: 0;
  padding: 80px 0 0;
}
.home .kv h1 {
  color: #FFFFFF;
  font-size: 30px;
  font-weight: 300;
  font-family: var(--outfit);
  text-align: center;
  background: var(--color03);
  line-height: 1.2;
  padding: 0.5em 40px;
}
.home .kv div img {
  display: block;
  margin: 0 auto;
}
.home .home_special {
  padding: 80px 0 100px;
  background: linear-gradient(to bottom,  #ffffff 0%,#00a0e1 80%,#001a72 100%); 
}
.home .home_special .box > ul {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.home .home_special .box > ul:nth-of-type(1) {
  justify-content: center;
  margin: 0 auto 2%;
}
.home .home_special .box > ul:nth-of-type(2) {margin: 0 auto 2%;}
.home .home_special .box > ul li img {
  display: block;
  width: 100%;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
}
.home .home_special .box > ul:nth-of-type(2) > li {width: 49%;}
.home .home_special .box > ul:nth-of-type(2) > li:nth-child(2) {width: 49%;}
.home .home_special .box > ul:nth-of-type(2) > li:nth-child(2) ul li:nth-child(1) {margin: 0 0 3.4%;}
.home .home_special .box > ul:nth-of-type(3) li {width: 32%;}
.home .home_special .box > ul li a {transition: 0.5s;}
.home .home_special .box > ul li a:hover {opacity: 0.5;}
.home .area_bg {
  padding: 80px 0;
  background: #EEEEEE;
}
.home .area_bg .box > ul {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.home .area_bg .box > ul li {width: 49%;}
.home .area_bg .box > ul li img {
  display: block;
  width: 100%;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
}
.home .area_bg .box > ul li a {transition: 0.5s;}
.home .area_bg .box > ul li a:hover {opacity: 0.5;}





/* -----------------------------------------------------------
 special
----------------------------------------------------------- */

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.special {padding: 0 0 120px;}
.special .head_area {
  color: #FFFFFF;
  padding: 100px 0;
}
.special01 .head_area {padding: 50px 0;}
.special02 {
  background: rgba(0, 15, 67, 1);
  padding: 0;
}
.special03 {
  background: var(--color04);
  padding: 0;
}
.special01 .head_area {background: url("../img/special/kv_select01.jpg") no-repeat center / cover;}
.special02 .head_area {
  aspect-ratio: 1600 / 767;
  position: relative;
  z-index: 1;
  background: url("../img/special/kv_select02.png") no-repeat bottom center / cover;
  padding: max(7vw ,100px) 0 200px;
}
.special03 .head_area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  aspect-ratio: 1600 / 767;
  background: url("../img/special/kv_select03.jpg") no-repeat top center / cover;
  padding: max(2vw ,40px) 0 0;
}
.special .h1_en {
  text-align: center;
  margin: 30px auto 50px;
}
.special01 .h1_en {margin: 30px auto;}

.special .h1_en > span {
  display: block;
  line-height: 1.3;
}
.special .h1_en > span:nth-of-type(1) {margin: 0 auto 20px;}
.special .h1_en > span:nth-of-type(2) {
  font-size: 70px;
  font-family: var(--outfit);
  font-weight: 300;
  line-height: 1.2;
} 
.special .h1_en > span:nth-of-type(2) .en_title {
  display: inline-block;
  margin: 0 0.2em;
}
.special .h1_en > span:nth-of-type(2) .en_title:first-letter {
  font-size: 100px;
  /*color: var(--color02);*/
}
.special .h1_en > span:nth-of-type(3) {
  font-size: 40px;
  font-family: var(--outfit);
  font-weight: 300;
  letter-spacing: 0.25em;
} 
.special03 .h1_en {margin: 0px auto 0;}
.special03 .h1_en > span:nth-of-type(1) {margin: 0 auto;}


.special h1 {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin: 0 auto 50px;
}
.special01 h1 {margin: 0 auto 30px;}

.special .lead {
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  margin: 0 auto 80px;
}
.special h1 + .lead {
  line-height: 2.25;
  margin: 0 auto;
}
.special .btn_product {
  width: 470px;
  height: 100px;
  line-height: 100px;
  margin: 0 auto;
}
.special .btn_product a {
  position: relative;
  z-index: 0;
  height: 100%;
  display: block;
  border: solid 1px #FFFFFF;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 700;
  transition: 0.5s;
}
.special .btn_product a::before {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 0.5em;
  height: 1.5em;
  background: url("../img/common/btn_ar_w.svg") no-repeat center / contain;
  transform: rotate(180deg);
  margin: auto;
  inset: 0 auto 0 20px;
}
.special .btn_product a:hover {
  color: var(--color01);
  background: #FFFFFF;
}
.special .btn_product a:hover::before {background: url("../img/common/btn_ar.svg") no-repeat center / contain;}

.special01 {background: var(--color01);}
.special01 h2 {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  margin: 0 auto 30px;
}
.special01 h2 > span {
  display: block;
  font-size: 75px;
  font-weight: 300;
  font-family: var(--outfit);
  margin: 0 auto 20px;
}
.special01 h2 > span > span {display: inline-block;}
.special01 h2 > span > span::first-letter {color: var(--color02);}

.special01 .sports_slider {
  color: #FFFFFF;
  padding: 90px 0;
  background: linear-gradient(45deg,  rgba(0,0,0,1) 0%,rgba(0,26,114,1) 20%,rgba(0,160,225,1) 80%,rgba(125,185,232,1) 100%); 
  overflow: hidden;
}
.special01 .sports_slider .tab_menu {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  width: 800px;
  margin: 0 auto 150px;
}
.special01 .sports_slider .tab_menu li {
  width: 195px;
  height: 40px;
  line-height: 40px;
  color: var(--color01);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  background: #FFFFFF;
  border: solid 1px var(--color01);
  border-radius: 5px;
  cursor: pointer;
  margin: 0 0 5px;
}
.special01 .sports_slider .tab_menu li:hover ,
.special01 .sports_slider .tab_menu li.active {
  color: #FFFFFF;
  background: var(--color01);
}
.special01 .sports_slider .tab_menu::after {
  position: absolute;
  display: block;
  content: "AISIN SPORTS　AISIN SPORTS　AISIN SPORTS　AISIN SPORTS　AISIN SPORTS　AISIN SPORTS　AISIN SPORTS";
  text-align: center;
  font-size: 200px;
  color: #FFFFFF;
  width: 60em;
  font-weight: 300;
  font-family: var(--outfit);
  margin: auto;
  top: 80px;
  left: 0;
  animation: scroll 60s linear infinite;
  opacity: .2;
}
.special01 .sports_slider .tab_content {
  width: 800px;
  margin: 0 auto;
}
.special01 .sports_slider .tab_content .s_slider {
  position: relative;
  z-index: 2;
  margin: 0 auto 30px;
  aspect-ratio: 800 / 550;
}
.special01 .sports_slider .tab_content .s_slider::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: "";
  width: 800px;
  height: auto;
  background: url("../img/special/bg_slider.png") no-repeat top center / contain;
  aspect-ratio: 800 / 526;
  inset: auto;
  margin: auto;
}
.special01 .sports_slider .tab_content .s_slider li {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
}
.special01 .sports_slider .tab_content .s_slider li.show  {
  opacity: 1;
  visibility: visible;
}
.special01 .sports_slider .tab_content .s_slider li figure {
  position: absolute;
  width: 100%;
  aspect-ratio: 800 / 550;
  inset: 0;
  perspective: 1000px;
}
.special01 .sports_slider .tab_content .s_slider li figure img {
  display: block;
  margin: 0 auto;
  transition: 1s ease-in-out;
  transform-style: preserve-3d;
  transform: rotateY(-360deg);
  border-radius: 10px;
}
.special01 .sports_slider .tab_content .s_slider li.show figure img {transform: rotateY(0deg);}

.special01 .sports_slider .tab_content .s_slider .btn_change {
  position: absolute;
  z-index: 0;
  width: 80px;
  height: 80px;
  margin: 0;
  background: url("../img/special/btn_s_slider.svg") no-repeat center / contain;
  top: auto;
  bottom: 0;
  right: 0;
  cursor: pointer;
}
.special01 .sports_slider .tab_content .s_slider .sport_detail {
  position: absolute;
  z-index: 0;
  width: 80px;
  height: 80px;
  margin: 0;
  background: url("../img/special/btn_detail.svg") no-repeat center / contain;
  top: auto;
  bottom: 0;
  left: 0;
  cursor: pointer;
}
.special01 .sports_slider .tab_content .s_slider li .modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  inset: 0;
  transition: 1s 0.5s;
  perspective: 1000px;
}
.special01 .sports_slider .tab_content .s_slider .modal_show .modal {
  opacity: 1;
  visibility: visible;
}
.special01 .sports_slider .tab_content .s_slider .modal .modal_bg {
  position: absolute;
  z-index: -1;
  display: block;
  content: "";
  background: rgba(0,0,0,0.75);
  width: 100%;
  height: 100%;
  margin: auto;
  inset: 0;
}
.special01 .sports_slider .tab_content .s_slider .show.modal_show figure img {transform: rotateY(360deg);}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  aspect-ratio: 600 / 786;
  width: 61svh;
  height: 80svh;
  max-width: 600px;
  max-height: 786px;
  border-radius: 15px;
  overflow: hidden;
  border: solid 8px var(--color01);
  transition: 1s ease-in-out;
  transform-style: preserve-3d;
  transform: rotateY(-360deg);
  padding: 0 3em;
  font-size: min(2.35svh , 23px);
  color: #333333;
}
.special01 .sports_slider .tab_content .s_slider .modal_show .modal > div:nth-of-type(1) {
  transform: rotateY(0deg);
}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1)::before {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.7);
  border-radius: 10px;
  inset: 0;
}
.special01 .sports_slider .tab_content .s_slider li .modal img {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  inset: 0;
}
.special01 .sports_slider .tab_content .s_slider .modal_show .modal img {
  transform: rotateY(0deg);
}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) > dl {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: 1s 1s;
}
.special01 .sports_slider .tab_content .s_slider .modal_show .modal > div:nth-of-type(1) > dl {opacity: 1;}

.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) > dl > dt {
  font-size: 2em;
  font-weight: 700;
  margin: 0 auto 0.5em;
  line-height: 1.2;
  text-align: center;
}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) > dl > dt > span {
  display: block;
  font-size: 0.4em;
  font-weight: 300;
  font-family: var(--outfit);
}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) > dl > dd {margin: 0 auto 1em;}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) > dl > dd dl {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  font-weight: 700;
  line-height: 1.3;
  border-top: dotted 2px #333333;
  margin: 0 auto;  
}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) > dl > dd dl:nth-last-of-type(1) {
  margin: 0 auto 1.5em;  
  border-bottom: dotted 2px #333333;
}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) > dl > dd dl dt {padding: 0.75em 0.5em;}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) > dl > dd dl dd {
  text-align: right;
  padding: 0.75em 0.5em;
}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) dl dd > div {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color01);
  line-height: 1.5;
  background: #DEEEF5;
  border-radius: 10px;
  padding: 1.5em 5%;
}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) dl dd > div p {
  position: absolute;
  z-index: 1;
  inset: -0.65em 0 0;
  margin: auto;
  font-size: 1.2em;
  font-weight: 700;
}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) .modal_close {
  position: relative;
  z-inde: 3;
  width: 12em;
  margin: 0 auto;
  color: #FFFFFF;
  line-height: 1.3;
  font-size: 0.75em;
  font-weight: 700;
  text-align: center;
  padding: 1em 1em 0.75em;
  background: var(--color03);
  border-radius: 99px;
  cursor: pointer;
  opacity: 0;
  transition: 1s 1s;
}
.special01 .sports_slider .tab_content .s_slider .modal_show .modal > div:nth-of-type(1) .modal_close {opacity: 1;}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) .modal_close::before,
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) .modal_close::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 1.2em;
  height: 2px;
  background: #FFFFFF;
  margin: auto;
  inset: 0 auto 0 2em;
}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) .modal_close::before {transform: rotate(45deg);}
.special01 .sports_slider .tab_content .s_slider li .modal > div:nth-of-type(1) .modal_close::after {transform: rotate(-45deg);}
.special01 .sports_slider .tab_content h3 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 auto 20px;
  text-align: center;
}
.special01 .sports_slider .tab_content p {
  max-width: 800px;
  text-align: center;
  margin: 0 auto 40px;
}
.special01 .sports_slider .tab_content .team_btn {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.special01 .sports_slider .tab_content .team_btn li {
  width: 49%;
  height: 60px;
  line-height: 60px;
}
.special01 .sports_slider .tab_content .team_btn li a {
  position: relative;
  z-index: 0;
  display: block;
  height: 100%;
  color: var(--color01);
  background: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  border-radius: 5px;
  border: solid 1px var(--color01);
  text-decoration: none;
  transition: 0.5s;
}
.special01 .sports_slider .tab_content .team_btn li a:hover {opacity: 0.5;}
.special01 .sports_slider .tab_content .team_btn li a::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 1.5em;
  height: 1.5em;
  background: url("../img/special/ico_target.svg") no-repeat center / contain;
  margin: auto;
  inset: 0 15px 0 auto;
}
.special01 .sports_slider .tab_content .team_btn li:nth-child(2) a::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 1.45em;
  height: 0.75em;
  background: url("../img/common/btn_ab_w.svg") no-repeat center / contain;
  margin: auto;
  inset: 0 15px 0 auto;
}
.special01 .sports_slider .tab_content .team_btn li:nth-child(2) a {
  background: var(--color01);
  color: #FFFFFF;
}
.special01 .activity_gift {background: var(--color01);}
.special01 .activity_gift .m_box {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  padding: 100px 40px 0;
}
.special01 .activity_gift section {
  position: relative;
  z-index: 0;
  padding: 70px 0;
  margin: 0 0 15px;
}
.special01 .activity_gift section > p img {display: block;}
.special01 .activity_gift section:nth-of-type(1) {background: url("../img/special/basketball_bg.jpg") no-repeat bottom left / cover;}
.special01 .activity_gift section:nth-of-type(2) {background: url("../img/special/wrestling_bg.jpg") no-repeat bottom left / cover;}
.special01 .activity_gift section:nth-of-type(3) {background: url("../img/special/sailing_bg.jpg") no-repeat bottom left / cover;}
.special01 .activity_gift section:nth-of-type(4) {background: url("../img/special/sumo_bg.jpg") no-repeat bottom left / cover;}
.special01 .activity_gift section:nth-of-type(5) {background: url("../img/special/volleyball_bg.jpg") no-repeat bottom left / cover;}
.special01 .activity_gift section:nth-of-type(6) {background: url("../img/special/judo_bg.jpg") no-repeat bottom left / cover;}
.special01 .activity_gift section > div {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 1000px;
  color: #FFFFFF;
  padding: 0 40px;
  margin: 0 auto;
}
.special01 .activity_gift section > div h3 {
  font-size: 20px;
  font-weight: 700;
  padding: 100px 0 0;
}
.special01 .activity_gift section > div h3 span {
  display: block;
  font-size: 1.4em;
}
.special01 .activity_gift section > div ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 570px;
}
.special01 .activity_gift section > div ul li {width: 31%;}
.special01 .activity_gift section > div ul li a {
  text-decoration: none;
  transition: 0.5s;
}
.special01 .activity_gift section > div ul li a:hover {opacity: 0.5;}
.special01 .activity_gift section > div ul li figure {
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 10px;
}
.special01 .activity_gift section > div ul li p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
}
.special01 .activity_gift section > div ul li figure + p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  height: 5em;
  overflow: hidden;
}
.special01 .activity_gift section > div ul li .p_point {
  font-size: 24px;
  text-align: center;
  margin: 0 auto 5px;
}
.special01 .activity_gift section > div .btn_common {
  width: 370px;
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  font-weight: 700;
}
.special01 .activity_gift section > div .btn_common a {
  position: relative;
  z-index: 0;
  display: block;
  height: 100%;
  color: var(--color01);
  background: #FFFFFF;
  text-decoration: none;
  border-radius: 5px;
  transition: 0.5s;
}
.special01 .activity_gift section > div .btn_common a::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 0.6em;
  height: 1.2em;
  background: url("../img/common/btn_ar.svg") no-repeat center / contain;
  margin: auto;
  inset: 0 1em 0 auto;
}
.special01 .activity_gift section > div .btn_common a:hover {opacity: 0.5;}
.special01 .activity_gift section > p {
  position: absolute;
  z-index: 0;
  inset: auto auto 0 10px;
}  
.special01 .activity_gift + div {padding: 120px 40px 0;}

.special02 h1 + .lead {font-size: 18px;}
.special02 .bg_history {
  padding: 50px 0 0;
  background: linear-gradient(to bottom,  rgba(0,15,67,1) 0%,rgba(32,124,202,1) 20%,rgba(0,160,225,1) 50%,rgba(255,255,255,1) 100%); 
}
.special02 .bg_history > .box {
  position: relative;
  z-index: 0;
  max-width: 1060px;
  padding: 0 40px 120px 210px;
}
.special02 .bg_history > .box::before {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 110px;
  height: 100%;
  background: linear-gradient(to bottom,  rgba(0,160,225,1) 0%,rgba(0,160,225,1) 35%,rgba(222,238,245,1) 85%,rgba(222,238,245,0) 100%); 
  inset: -80px auto 0 40px;
}
.special02 .anc_history {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0 auto 50px;
}
.special02 .anc_history li {
  width: 105px;
  height: 40px;
  margin: 0 0 10px;
}
.special02 .anc_history li:nth-last-child(1) {width: auto;}
.special02 .anc_history li a {
  display: block;
  height: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color03);
  padding: 0 0.25em;
  background: #FFFFFF;
  border: solid 2px var(--color03);
  border-radius: 5px;
  text-decoration: none;
}
.special02 .anc_history li a span {
  font-family: var(--outfit);
  font-size: 2em;
  font-weight: 300;
  margin: 0 0.25em 0 0;
}
.special02 .anc_history li:nth-last-child(1) a {font-size: 16px;}
.special02 .anc_history li:nth-last-child(1) a span {font-size: 1.5em;}
.special02 .anc_history li a:hover {
  color: #FFFFFF;
  background: var(--color03);
}
.special02 .history_box {
  position: relative;
  z-index: 1;
  margin: 0 0 100px;
}
.special02 .history_box > div {
  position: relative;
  z-index: 2;
  background: #DEEEF5;
  padding: 40px 70px 60px;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(50px);
  transition: 0.5s 0.5s;
}
.special02 .history_box h2 {
  position: absolute;
  z-index: 1;
  color: #FFF;
  font-size: 80px;
  font-weight: 300;
  line-height: 1;
  font-family: var(--outfit);
  text-align: left;
  /*text-shadow: -1px -1px 0 #FFF,1px -1px 0 #FFF,-1px 1px 0 #FFF,1px 1px 0 #FFF,0 -1px 0 #FFF,0 1px 0 #FFF,-1px 0 0 #FFF,1px 0 0 #FFF;*/
  margin: auto;
  inset: 50px auto auto -155px;
  transform: rotate(90deg);
  transform-origin: bottom left;
}
.special02 .history_box h2::before ,
.special02 .history_box h2::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  background: var(--color03);
}
.special02 .history_box h2::before {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  inset: 50% auto 0 -70px;
}
.special02 .history_box h2::after {
  width: 0;
  height: 8px;
  inset: 70% auto 0 -48px;
  transform: rotate(-90deg);
  transform-origin: bottom left;
  transition: 0.5s;
}
.special02 .history_box .history_head {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto 90px;
}
.special02 .history_box .history_bg {
  position: absolute;
  z-index: -1;
  width: calc(100% + 140px);
  height: 350px;
  background: #222222;
  border-bottom: solid 10px var(--color03);
  inset: -40px auto auto -70px;
  border-radius: 10px 10px 0 0;
}
.special02 .history_box .history_head + .history_head .history_bg {border-radius: 0;}

.special02 .history_box h3 {
  padding: 100px 0 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 auto 10px;
}
.special02 .history_box h3 > span:nth-of-type(1) {
  position: absolute;
  z-index: -1;
  display: block;
  width: 370px;
  margin: auto;
  inset: 0 0 auto;
}
.special02 .history_box h3 > span:nth-of-type(2) {
  display: block;
  color: #FFFFFF;
  font-size: 42px;
}
.special02 .history_box .history_head {
  opacity: 0;
  transition: 1s 1s;
}
.special02 .history_box .history_head p {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 30px;
}
.special02 .history_box .history_head figure img {
  display: block;
  width: 100%;
}
.special02 .history_box .history_product {
  position: relative;
  z-index: 0;
  padding: 60px 50px 50px;
  background: #FFFFFF;
  border: solid 1px #333333;
  border-radius: 10px;
  box-shadow: 10px 10px 0 0 #333333;
  opacity: 0;
  transform: translateY(50px);
  transition: 1s;
}
.special02 .history_box .history_product > p {
  font-weight: 700;
  margin: 0 0 50px;
  opacity: 0;
  transform: translateY(50px);
  transition: 0.5s 1s;
}
.special02 .history_box .history_product > .pop {
  position: absolute;
  z-index: 1;
  width: 300px;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  padding: 1.25em;
  background: var(--color01);
  border-radius: 99px;
  margin: auto;
  opacity: 1;
  inset: -60px 0 auto;
  transform: translateY(0) scale(0);
} 
.special02 .history_box .history_product > .pop::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: "";
  width: 30px;
  height: 30px;
  background: var(--color01);
  margin: auto;
  transform: rotate(-45deg);
  inset: calc(100% - 20px) 0 auto;
  border-radius: 0 0 0 4px;
}

.special02 .history_box .history_product > div > div {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.special02 .history_box .history_product dl {
  width: 32%;
  opacity: 0;
  transform: translateY(50px);
}
.special02 .history_box .history_product dl:nth-of-type(1) {transition: 0.5s 1s;}
.special02 .history_box .history_product dl:nth-of-type(2) {transition: 0.5s 1s;}
.special02 .history_box .history_product dl:nth-of-type(3) {transition: 0.5s 1s;}
.special02 .history_box .history_product dt {
  position: relative;
  z-index: 0;
  color: var(--color01);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  padding: 0 20px;
  margin: 0 auto 20px;
}
.special02 .history_box .history_product dt::before ,
.special02 .history_box .history_product dt::after {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2em;
  margin: auto;
  background: var(--color01);
}
.special02 .history_box .history_product dt::before {
  inset: -100% auto -100% 10px;
  transform: rotate(-25deg);
}
.special02 .history_box .history_product dt::after {
  inset: -100% 10px -100% auto;
  transform: rotate(25deg);
}
.special02 .history_box .history_product dd a {
  text-decoration: none;
  transition: 0.5s;
}
.special02 .history_box .history_product dd a:hover {opacity: 0.5;}
.special02 .history_box .history_product dd figure {margin: 0 auto 10px;}
.special02 .history_box .history_product dd figure img {width: 100%;}
.special02 .history_box .history_product dd p {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  margin: 0 0 15px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  height: 3.9em;
  overflow: hidden;
}
.special02 .history_box .history_product dd .p_point {
  font-size: 15px;
  font-weight: 700;
}
.special02 .history_box .btn_other {
  width: 370px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  margin: 60px auto 0;
  opacity: 0;
  transform: translateY(50px);
  transition: 0.5s 1s;
}
.special02 .history_box .btn_other a {
  position: relative;
  z-index: 0;
  display: block;
  height: 100%;
  color: var(--color01);
  font-size: 18px;
  font-weight: 700;
  background: #FFFFFF;
  border: solid 2px var(--color01);
  border-radius: 5px;
  text-decoration: none;
  transition: 0.5s;
}
.special02 .history_box .btn_other a:hover {
  color: #FFFFFF;
  background: var(--color01);
}
.special02 .history_box .btn_other a::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 0.6em;
  height: 1.2em;
  background: url("../img/common/btn_ar.svg") no-repeat center / contain;
  margin: auto;
  inset: 0 1em 0 auto;
}
.special02 .history_box .btn_other a:hover::after {background: url("../img/common/btn_ar_w.svg") no-repeat center / contain;}

.special02 .btn_product a {
  border: solid 1px var(--color01);
  color: var(--color01);
}
.special02 .btn_product a::before {background: url("../img/common/btn_ar.svg") no-repeat center / contain;}
.special02 .btn_product a:hover {
  color: #FFFFFF;
  background: var(--color01);
}
.special02 .btn_product a:hover::before {background: url("../img/common/btn_ar_w.svg") no-repeat center / contain;}

.special02 .history_box:nth-last-of-type(1) .history_head h3 {padding: 0;}
.special02 .history_box:nth-last-of-type(1) .history_head h3 span:nth-of-type(1) {
  position: static;
  font-size: 110px;
  font-weight: 300;
  color: var(--color03);
  margin: 0 auto;
}
.special02 .history_box:nth-last-of-type(1) .history_head h3 span:nth-of-type(2) {
  color: #333333;
  font-size: 42px;
  font-weight: 700;
}



.special02 .history_box:nth-last-of-type(1) .history_head figure {
  width: 70%;
  margin: 0 auto;
}
.special02 .history_box:nth-last-of-type(1) .history_product > .pop {
  width: 380px;
  background: var(--color03);
} 
.special02 #anc60 + .history_box .history_product > .pop::after {background: var(--color03);}
.special02 #anc60 + .history_box .history_product dt {color: var(--color03);}
.special02 #anc60 + .history_box .history_product dt::before ,
.special02 #anc60 + .history_box .history_product dt::after {background: var(--color03);}


.special02 .history_box.fadein h2::after {width: 140px;}
.special02 .history_box.fadein > div {
  opacity: 1;
  transform: translateY(0);
}

.special02 .history_box.fadein .history_head {opacity: 1;transform: translateY(0);}
.special02 .history_box .history_product.fadein {opacity: 1;transform: translateY(0);}
.special02 .history_box .history_product.fadein > .pop {animation: popIn .6s cubic-bezier(.175,.885,.32,1.275) 0.5s forwards;}
.special02 .history_box .history_product.fadein > p {opacity: 1;transform: translateY(0);}
.special02 .history_box .history_product.fadein dl {opacity: 1;transform: translateY(0);}
.special02 .history_box .history_product.fadein + .btn_other  {opacity: 1;transform: translateY(0);}

@keyframes popIn {
  0% {transform: scale(0);}
  60% {transform: scale(1.1);}
  80% {transform: scale(.9);}
  100% {transform: scale(1);}
}

.special03 h1 {
  color: #333333;
  margin: 0 auto 30px;
}
.special03 h1 + .lead {
  color: #333333;
  margin: 50px auto;
}

.special03 .heading {
  position: relative;
  z-index: 2;
  padding: 50px 0 0 50px;
}
.special03 .map_box .box {
  position: relative;
  z-index: 1;
}
.special03 .heading01 {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
}

.special03 .heading h2 {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 0.5em;  
}
.special03 .heading h2 span {
  position: absolute;
  z-index: -1;
  display: block;
  color: #FFFFFF;
  font-family: var(--outfit);
  font-weight: 300;
  line-height: 0.8;
  font-size: 150px;
}
.special03 .heading.heading01 h2 span {
  transform: rotate(90deg);
  transform-origin: bottom left;
  inset: -2em auto auto 0;
}
.special03 .heading.heading02 h2 span {inset: auto 0 0 auto;}

.special03 .heading h2 + p {
  font-size: 20px;
  font-weight: 500;
}
.special03 .heading h2 + p + p {
  font-size: 20px;
  margin: 0.5em 0 0;
}
.special03 .heading.heading02 {
  padding: 0 50px 20px 0;
  text-align: right;
}
.special03 .heading.heading02 .btn_common {
  width: 360px;
  height: 50px;
  margin: 20px 0 0 auto;
}
.special03 .heading.heading02 .btn_common a {
  position: relative;
  z-index: 0;
  display: block;
  height: 100%;
  color: var(--color01);
  font-size: 19px;
  font-weight: 700;
  line-height: 54px;
  background: #FFFFFF;
  text-decoration: none;
  border: solid 1px var(--color01);
  border-radius: 5px;
  transition: 0.5s;
}
.special03 .heading.heading02 .btn_common a:hover {opacity: 0.5;}
.special03 .heading.heading02 .btn_common a::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 1.2em;
  height: 1.2em;
  margin: auto; 
  background: url("../img/common/ico_target_b.svg") no-repeat center / contain;
  inset: 0 0.5em 0 auto;
}
.special03 .heading.heading02 h2 + p {font-size: 18px;}


.special03 .heading p span {
  display: block;
  font-size: 0.7em;
}

.special03 .tab_menu {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto 100px;
}
.special03 .tab_menu li {
  position: relative;
  z-index: 1;
  width: 360px;
  height: 60px;
  line-height: 60px;
  color: var(--color01);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  background: #FFFFFF;
  border: solid 2px var(--color01);
  border-radius: 4px;
  cursor: pointer;
  margin: 0 10px;
}
.special03 .tab_menu li.active {
  color: #FFFFFF;
  background: var(--color01);
}
.special03 .tab_menu li::before,
.special03 .tab_menu li::after {
  position: absolute;
  z-index: 0;
  display: none;
  content: "";
  margin: auto;
}
.special03 .tab_menu li::before {
  width: 2px;
  height: 30px;
  background: var(--color01);
  inset: 100% 0 auto;
}
.special03 .tab_menu li::after {
  width: 15px;
  height: 15px;
  background: var(--color01);
  inset: calc(30px + 100%) 0 auto;
  border-radius: 50%;
}
.special03 .tab_menu li.active::before,
.special03 .tab_menu li.active::after {display: block;}

.special03 .tab_content,.special03 .tab_content.active {display: block;}

.special03 .tab_content {
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  background: url("../img/special/bg_japan.png") no-repeat top 800px center / 100%;
}
.special03 .tab_content + .tab_content {background: url("../img/special/bg_abroad.png") no-repeat top 800px center / 100%;}
.special03 .tab_content.active {
  max-height: 100%;
  opacity: 1;
}
.special03 .map_box {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto 100px;
}
.special03 .map_box figure {
  position: relative;
  z-index: 1;
}
.special03 .map_box figure img {
  display: block;
  width: 100%;
}
.special03 .map_box ul {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  inset: 0 auto 0 0;
  margin: auto;
}
.special03 .map_jp figure,
.special03 .map_jp ul ,
.special03 .map_world figure,
.special03 .map_world ul  {aspect-ratio: 1600 / 958;}

.special03 .map_box ul li {
  position: absolute;
  z-index: 1;
}
.special03 .map_box ul li.open {z-index: 2;}
.special03 .map_box ul li > span {
  display: block;
  width: min(3vw , 40px);
  height: auto;
  aspect-ratio: 49 / 52;
  background: url("../img/special/map_pin.svg") no-repeat center / contain;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-200px);
  transition: 0.5s 0.5s;
}
.special03 .map_box ul li.open > span {background: url("../img/special/map_pin_on.svg") no-repeat center / contain;}
.special03 .tab_content.active .map_box.fadein ul li > span {transform: translateY(0);opacity: 1;}
.special03 .map_box ul li div {
  position: absolute;
  z-index: 0;
  width: 300px;
  padding: 20px 30px 30px;
  color: var(--color01);
  text-align: center;
  background: #FFFFFF;
  border: solid 1px var(--color01);
  margin: auto;
  inset: auto -500px 70px;
  border-radius: 4px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
}
.special03 .map_box ul li.open div {
  opacity: 1;
  visibility: visible;
}
.special03 .map_box ul li div::after {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: #FFFFFF;
  border: solid 1px var(--color01);
  border-top: none;
  border-left: none;
  margin: auto;
  inset: auto 0 -11px;
  transform: rotate(45deg);
}
.special03 .map_box ul li div > p:nth-of-type(1) {
  font-size: 18px;
  font-weight: var(--outfit);
  font-weight: 300;
  letter-spacing: 0.2em;
  line-height: 1.5;
  margin: 0 auto 10px;
}
.special03 .map_box ul li div > p:nth-of-type(1) span {
  display: block;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
}
.special03 .map_box ul li div > p:nth-of-type(2) {
  color: #333333;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.special03 .map_box ul li div > p:nth-of-type(2) span:nth-of-type(1) {
  display: inline-block;
  color: var(--color02);
  font-size: 2em;
  font-weight: var(--outfit);
  font-weight: 300;
  vertical-align: middle;
  margin: 0 0.2em 0.2em 0;
}
.special03 .map_box ul li div > p:nth-of-type(2) span:nth-of-type(2) {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
}
.special03 .tab_content + .tab_content .map_box ul li div > p:nth-of-type(3) a {text-decoration: underline;}

.special03 .map_box ul li div .btn {
  width: 100%;
  height: 35px;
  line-height: 35px;
  margin: 10px auto 0;
}
.special03 .map_box ul li div .btn a {
  position: relative;
  z-index: 0;
  display: block;
  height: 100%;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: var(--color01);
  background: #FFFFFF;
  border: solid 1px var(--color01);
  border-radius: 5px;
  transition: 0.5s;
}
.special03 .map_box ul li div .btn a::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 0.6em;
  height: 1.2em;
  background: url("../img/common/btn_ar.svg") no-repeat center / contain;
  margin: auto;
  inset: 0 1em 0 auto;
}
.special03 .map_box ul li div .btn a:hover {opacity: 0.5;}


.special03 .tab_content + .tab_content .map_box ul li div .btn a {
  color: #FFFFFF;
  background: var(--color01);
}
.special03 .tab_content + .tab_content .map_box ul li div .btn a::after {
  width: 1.2em;
  height: 0.6em;
  background: url("../img/common/btn_ab_w.svg") no-repeat center / contain;
}
.special03 .map_box ul li div .btn a:hover {opacity: 0.5;}







.special03 .map_box ul li div > span {
  position: relative;
  cursor: pointer;
  display: block;
  width: 140px;
  height: 30px;
  line-height: 30px;
  margin: 30px auto 0;
  text-align: center;
  background: var(--color03);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  border-radius: 99px;
}
.special03 .map_box ul li div > span::before,
.special03 .map_box ul li div > span::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 1em;
  height: 2px;
  background: #FFF;
  margin: auto;
  inset: 0 auto 0 1em;
}
.special03 .map_box ul li div > span::before {transform: rotate(45deg);}
.special03 .map_box ul li div > span::after {transform: rotate(-45deg);}
.special03 .map_box.map_jp ul li:nth-child(1) {left: 63%;top: 10%;} 
.special03 .map_box.map_jp ul li:nth-child(2) {left: 67%;top: 35%;} 
.special03 .map_box.map_jp ul li:nth-child(3) {left: 72%;top: 52%;} 
.special03 .map_box.map_jp ul li:nth-child(4) {left: 61%;top: 61%;} 
.special03 .map_box.map_jp ul li:nth-child(5) {left: 55%;top: 54%;} 
.special03 .map_box.map_jp ul li:nth-child(6) {left: 53%;top: 66%;} 
.special03 .map_box.map_jp ul li:nth-child(7) {left: 30%;top: 75%;} 
.special03 .map_box.map_world ul li:nth-child(1) {left: 60%;top: 23%;} 
.special03 .map_box.map_world ul li:nth-child(2) {left: 79%;top: 28%;} 
.special03 .map_box.map_world ul li:nth-child(3) {left: 15%;top: 68%;} 
.special03 .map_box.map_world ul li:nth-child(4) {left: 38%;top: 60%;} 
.special03 .map_box.map_world ul li:nth-child(5) {left: 25%;top: 80%;} 



.special03 .area_box {
  position: relative;
  z-index: 10;
  margin: 150px auto 0;
}
.special03 .area_box_half {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.special03 .area_box_half .area_box {
  width: 45%;
}
.special03 .heading + .area_box ,
.special03 #anc0201 + .area_box {margin: 20px auto 0;}
.special03 .area_box > div {
  position: relative;
  z-index: 2;
  padding: 50px 70px;
}
.special03 .area_box:nth-of-type(even) {background: var(--color01);}
.special03 .area_box::before {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  margin: auto;
  inset: 0;
}
.special03 .area_box:nth-of-type(even)::before {display: none;}
.special03 .area_box::after {
  position: absolute;
  z-index: -10;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--color01);
  margin: auto;
  inset: 0;
  transform: rotate(3deg);
}
.special03 .area_box:nth-of-type(even)::after  {
  z-index: 1;
  background: #FFFFFF;
}
.special03 .area_box h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 20px;
}
.special03 .area_box h3 span {
  display: block;
  color: #333333;
  height: 1em;
  font-size: 60px;
  font-weight: 300;
  font-family: var(--outfit);
  line-height: 1.2;
}
.special03 .area_box h3 span::first-letter {color: var(--color02);}
.special03 .area_box ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.special03 .area_box ul li {width: 29%;}
.special03 .area_box_half .area_box ul {justify-content: center;}
.special03 .area_box_half .area_box ul li {width: 70%;}
.special03 .area_box ul li a {
  text-decoration: none;
  transition: 0.5s;
}
.special03 .area_box ul li a:hover {opacity: 0.5;}
.special03 .area_box ul li figure {margin: 0 0 20px;}
.special03 .area_box ul li figure img {
  display: block;
  width: 100%;
}
.special03 .area_box ul li p {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  height: 3.6em;
  overflow: hidden;
}
.special03 .area_box ul li .p_point {
  font-size: 24px;
  font-weight: 700;
  height: auto;
  margin: 15px 0 0;
}
.special03 .area_box .btn_area {
  width: 370px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  margin: 50px 0 0 auto;
}
.special03 .area_box_half .area_box .btn_area {margin: 50px auto 0;}
.special03 .area_box .btn_area a {
  position: relative;
  z-index: 0;
  display: block;
  height: 100%;
  color: var(--color01);
  font-size: 18px;
  font-weight: 700;
  border: solid 1px var(--color01);
  border-radius: 5px;
  text-decoration: none;
  transition: 0.5s;
}
.special03 .area_box .btn_area a::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 0.6em;
  height: 1.2em;
  background: url("../img/common/btn_ar.svg") no-repeat center / contain;
  margin: auto;
  inset: 0 1em 0 auto;
}
.special03 .area_box .btn_area a:hover {
  color: #FFFFFF;
  background: var(--color01);
}
.special03 .area_box .btn_area a:hover::after {background: url("../img/common/btn_ar_w.svg") no-repeat center / contain;}



.special03 .tab_content > .box:nth-last-of-type(1) {padding: 120px 40px;}
.special03 .btn_product {margin: 0 auto;}
.special03 .btn_product a {
  border: solid 1px var(--color01);
  background: var(--color01);
}
.special03 .btn_product a::before {background: url("../img/common/btn_ar_w.svg") no-repeat center / contain;}
.special03 .btn_product a:hover {
  color:  var(--color01);
  background: #FFFFFF;
}
.special02 .btn_product a:hover::before {background: url("../img/common/btn_ar.svg") no-repeat center / contain;}
.fade.totop {
  opacity: 0;
  transform: translateY(100px);
  transition: 1s;
}
.fade.fadein.totop {
  opacity: 1;
  transform: translateY(0);
}