@charset "Shift_JIS";

/* --------------------------------------
?? common
------------------------------------------- */
.clearfix::after{content:"";display:block;clear:both;}
body{max-width:680px;}
.main_contents {margin: 16% 0;}

/*---------------------------------
???????? navi hum
-----------------------------------*/
article#item section.accordion ul li.purpose ul {display:table;border:#ccc 1px solid;border-bottom:none;width:100%;}
article#item section.accordion ul li.purpose ul li {display:table-cell;border-left:#ccc 1px solid;padding:5px 0 6px 6px;width:50%;background:url(//img.e87.com/s/common/images/arw_r_03.png) no-repeat 96.5% 50%;background-size:8px 12px;-webkit-background-size:8px 12px;-moz-background-size:8px 12px;vertical-align:middle;}
article#item section.accordion ul li.purpose ul li a:link, article#item section.accordion ul li.purpose ul li a:visited, article#item section.accordion ul li.purpose ul li a:hover, article#item section.accordion ul li.purpose ul li a:active {color:#000;text-decoration:none;}

/*---------------------------------
??? heading
-----------------------------------*/
h2._heading {font-size: min(4.8vw, 24px);color: #333;position: relative;text-align: center;z-index: -1;font-weight: 600;margin: 0 0 6%;line-height: 1.6;border-bottom: solid #5449AE 5px;}
h3._heading{color:#0e1953;width: 94%;position:relative;margin: 3% auto 0;border-bottom:1px solid #0e1953;text-align: center;padding-bottom: 4px;line-height: 1.2;}
h3._heading span._adjust_tx{font-size: min(4.9vw,18px);}
.heading_lead{font-weight: 500;font-size: 14px;color: #3c3c3c;line-height: 1.4;padding: 3% 3% 0;position: relative;z-index: 1;text-align: center;}

/*---------------------------------
?????? other
-----------------------------------*/
.form .img input {cursor: pointer;width: 64px;height: 40px;}
.form .img input[type="button"] {-webkit-appearance: none;appearance: none;}
input[type="text"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="password"], input[type="datetime"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"], input[type="number"], input[type="range"], input[type="color"] {border: 1px solid #bbb;border-radius: 3px;margin: 6px 0;padding: 7px 4px;-webkit-appearance: none;appearance: none;}
input[type="text"], input[type="search"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], textarea, select {max-width: 72%;font-size: 116%;padding: 1%;}
input[type="email"],input[type="text"] {width: 85%;max-width: 94%;}

/* --------------------------------------
??????? Catch main
------------------------------------------- */
#Catch .area_catch{padding: 6% 4% 4%;text-align: center;margin:0;}
#Catch .area_catch h1{font-size: min(4.8vw, 23px);font-family: 'Noto Serif JP', serif;color: #5449AE;-webkit-text-stroke: 8px #fff;text-stroke: 2px black;paint-order: stroke;text-align: center;line-height: 1.2;margin-bottom: 8px;font-weight: 600;}
#Catch .area_catch p{font-size: min(4.1vw, 16px);text-align: center;line-height: 1.4;-webkit-text-stroke: 6px #fff;text-stroke: 2px black;paint-order: stroke;}

/*---------------------------------
?? contents single
-----------------------------------*/
.common_bnr {margin: 4% 0 8%;position: relative;}
.submit_right {position: relative;}
.submit_button {text-align: center;width: 94%;margin: 0.5em auto;}
.submit_txt {width: 100%;font-size: min(5vw, 18px);line-height: 1.7;color: #333;margin: 1em 0;font-weight: bold;}
.submit_txt span {font-size: 15px;display: block;font-size: min(4.2vw, 16px);}
.submit_img {transition: 0.2s;position: relative;}
.button_txt {background-size: 100% 100%;font-size: 16px;font-weight: bold;color: #fff;border-radius: 5px;padding: 12px 16px 12px 24px;line-height: 1.4;position: relative;transition: 0.2s;}
.submit_button._tu .button_txt {border: 1px solid #C58CD9;background: #C58CD9;}
.submit_button._ex .button_txt {border: 1px solid #5449AE;background: #5449AE;}
.button_txt::before, .button_txt::after {position: absolute;top: 0;bottom: 0;right: 0;margin: auto;content: "";vertical-align: middle;}
.button_txt::after {left: 90%;box-sizing: border-box;width: 15px;height: 12px;border: 5px solid transparent;border-left: 8px solid #fff;}
.contents_single_submit {padding: 0 4%;align-items: stretch;margin-bottom:14%;}

/* -----------------------------------------------------------
?????? recommend product
----------------------------------------------------------- */
.wrap_title h2 {font-size: min(4.8vw, 18px);text-align: center;line-height: 1.4;position: relative;z-index: 0;color: #333;font-weight: 700;}
.area_recommend {padding: 4% 4% 0;margin: 16% 0 2%;}
.wrap_recommend {display: flex;justify-content: space-between;flex-wrap: wrap;padding:0 4%;}
.wrap_recommend .item_box {width: 48%;padding: 0;margin-bottom: 6%;}
.wrap_recommend .right dl.item_point dt {font-size: 16px;}
.wrap_recommend .item_img3_left {margin-right: 0;}
.wrap_recommend .item_img3_left img {width: 100%;}
.wrap_recommend .item_info dd.btn {font-size: 12px;padding: 4px;}
.wrap_recommend .otodoke {font-size: 11px;padding: 0px 10px;top: -10px;}
.wrap_recommend .item_info dt.item_name, section#item05 {padding: 0;}
section#item05 .wrap_recommend {padding: 15px 3%;}
.item_box dl.item_info {padding: 3% 3% 0;margin: 0;}
.item_info dt.item_name, .item_info dd.item_name {font-size: min(4vw, 15px);color: #333;line-height: 1.3;}
.item_info dd.price {margin: 3px 0 0;font-size: min(3.8vw, 14px);color: #333;}

/*---------------------------------
option txt color
-----------------------------------*/
.t_color{color:#111!important;}
input, select, textarea {-webkit-tap-highlight-color: rgba(0, 76, 126, 0.25);color: #111!important;font-family: sans-serif;font-size: 100%;line-height: 1.313;}

/*---------------------------------
h1??? main heading h1
-----------------------------------*/
#Mv{position:relative;}

/* -----------------------------------------------------------
????? intro
----------------------------------------------------------- */
.area_intro .heading_common {display: inline-block;position: relative;}
.area_intro .heading_common::before {content: unset;}
.area_intro .heading_common img {position: absolute;left: -112px;top: 25%;transform: translateY(-50%);}
.area_intro .wrap_img {text-align: center;}
.area_intro .wrap_noshi_heading .wrap_img._ro img {transform: rotate(180deg);}
.area_intro .right_img {padding:0 12%;}
.area_intro .right_img img {width: 100%;}
.area_intro .left_txt p{font-size: min(4.1vw, 16px);line-height: 1.6;color: #333;margin: 1em;}
.area_intro .left_txt p:last-child{margin-bottom:0;}
.adjust_txt_color {color: #5449AE;font-weight: bold;}
.area_intro {padding: 4%;background: #f5f4ff;margin: 0 auto 4%;}

/* -----------------------------------------------------------
???? point
----------------------------------------------------------- */
.area_point_icon {display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center;margin: 3% 0 4%;}
.area_point_icon span {font-size: 12px;text-align: center;width: 32%;display: inline-block;background: #ECD4F4;font-weight: bold;margin-bottom: 1%;display: flex;justify-content: center;align-items: center;padding: 4px 0 2px;line-height: 1.2;height: 2em;}
  
/*---------------------------------
?????? page top
-----------------------------------*/
#to-top {position: fixed;bottom: 12%;right: 3%;width: 60px;text-decoration: none;/* background-color: #d5305f; */display: block;text-align: center;opacity: 0;transition: 0.2s;color: #fff;line-height: 48px;font-size: 16px;z-index: 10;}  
#to-top img{width:100%;}  
#to-top.fade {opacity: 1;transition:0.2s;}
.wrap-top{position:relative;text-align: center;font-weight: bold;padding-top: 4px;}
.wrap-top::before {content:  '';width: 8px;height: 8px;display:  block;border-top: solid 2px;border-right: solid 2px;transform: rotate(-45deg);position:  absolute;top: 8px;left:  0;right:  0;margin:  auto;}
#to-top {position: fixed;bottom: 50px;right: 24px;width: 55px;text-decoration: none;display: block;text-align: center;opacity: 0;transition: 0.2s;color: #fff;line-height: 48px;font-size: 16px;z-index: 10;}
#to-top.fade {opacity: 1;transition:0.2s;}
.wrap-top{position:relative;text-align: center;font-weight: bold;padding-top: 4px;height: 50px;z-index:0;}
.wrap-top::before {content: '';width: 14px;height: 14px;display: block;border-top: solid 4px #333;border-right: solid 4px #333;transform: rotate(-45deg) translate(-50%,-50%);position: absolute;top: 37%;left: 54%;/* right: 0; */margin: auto;z-index: 1;}

/* -----------------------------
??? other bnr
-----------------------------------*/
.other_bnr{margin:4%;}