/*
Theme Name: meviy04_2
Description: Meviy Blog Template
Author: MASAtoshi OKA
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meviy04_2
Version: 4.0
*/
#header.header_kw{height: 50px; }
#header.header_kw .logo {
  top: 10px;
  left: 15px;
}
#header.header_kw .logoSub {
  right: 12px;
  top: 15px;
}
.header_kw .header_info_title{display: none;}
.header_kw .info_menu_area{display: none;}
#footer{height: auto;}

.page_shipping{
    margin-top: 50px;
    min-height: calc(100vh - 209px);
    box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
  #header.header_kw .logo{
    left: 3.6vw;
    top: 50%;
  }
	.page_shipping{margin-top: 17vw;}
    .header_kw .info_menu_area{display: block;}
}

#cp.page_shipping .sec_wrap{
	max-width: 1200px;
	box-sizing: border-box;
	padding: 40px 15px !important;
}

.mobile_only{display: none;}
@media screen and (max-width: 650px) {
	.mobile_only{display: inline;}
	.pc_only{display: none;}
}
h2.shipping_section_title{
    font-size: 26px;
    font-weight: 600;
    color: #000;
    text-align: center;
    margin: 15px auto 30px auto;
    display: block;
    float: none;
    width: 100%;
    max-width: 600px;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    padding: 10px;
}

#shipping_header{
    height: 600px;
    background-color: #ffc14f;
    text-indent: -100%;
}
#shipping_header h1{
    background: url(../images/shipping/economy-shipping_top_5.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;

}
@media screen and (max-width:  1200px){
    #shipping_header{
		height: auto;
		position: relative;
		background-repeat: no-repeat;
	}
	#shipping_header:before {
        content:"";
        display: block;
        padding-top: 50%;
	}
	#shipping_header h1{
		width: 100%;
		height: 100%;
		position: absolute;
		top:0;
		left: 0;
	}
}
.shipping_pattern{
    background: url(../images/shipping/kame_pattern_10.png);
    background-repeat: repeat;
    background-size: 200px;
}

.page_shipping .sec_wrap{
    padding: 30px 15px;
}

#shipping_cv{
    background: #ededed;
}
#shipping_cv .sec_wrap{
    padding: 15px;
    display: flex;
    justify-content: space-between;
}
.cv_left{
    width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cv_left img{width: 100%; height: auto;}

.cv_right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 5px 0;
    font-weight: 600;
}
.btn_estimate, .btn_signup{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px 0;
    font-size: 14px;
    text-align: center;
}
.btn_estimate a, .btn_signup a{
    display: block;
    float: none;
    margin: 5px auto;
    padding: 5px;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    width: 100%;
    max-width: 400px;
    -moz-border-radius:10px;
    border-radius:10px;
}
.btn_estimate a{
    background: #ffc600;
    color: #000;
}
.btn_signup a{
    background: #fff;
    color: #0a1464;
    border: 2px solid #0a1464;
}

@media screen and (max-width:  600px){
    #shipping_cv .sec_wrap{flex-direction: column;}
    .cv_left, .cv_right{
        width: 100%;
        float: none;
        margin: 10px auto;
    }
    .cv_left{max-width: 300px;}
    .cv_right{max-width: 400px;}
}

/* VOICE ------------------------------------ */
#shipping_voice{
  position: relative;
  background: #fff;
}
#shipping_voice:after{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 60px 50vw 0 50vw;
  border-color: #fff #ffa600 transparent #ffa600;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
#shipping_text{
  background: #ffa600;
  padding-top: 50px;
}

#shipping_voice h2{
  font-size: 32px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 30px;
  color: #0a1464;
}
.voice_title img{
  display: block;
  width: 100%;
  max-width: 700px !important;
  float: none;
  margin: 0 auto 30px auto;
}
#shipping_voice .sec_wrap{padding-bottom: 0;}
.shipping_voice_wrap{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.shipping_voice_1, .shipping_voice_2{
    width: 50%;
    padding: 0 10px;
    text-align: center;
}
.shipping_voice_1 img, .shipping_voice_2 img{
    display: block;
    float: none;
    width: 240px;
    height: auto;
    margin: 30px auto 0 auto;
    padding-right: 40px;
}
.voice {
  display:inline-block;
  filter:drop-shadow(5px 5px 0 #0a1464);
  background: #005EAB;
  color: #fff;
  padding: 10px 15px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.voice::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: #005EAB;
  border-left-color: #005EAB;
}

/* .voice {
    text-align: center;
  position: relative;
  display: inline-block;
  margin: 1.5em auto;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  background: #0A1464;
  border: solid 3px #0a1464;
  box-sizing: border-box;
  -moz-border-radius:10px;
  border-radius:10px;
}

.voice:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #0a1464;
  z-index: 2;
}
.voice:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #0a1464;
  z-index: 1;
} */
@media screen and (max-width:  900px){
    .shipping_voice_wrap{
        flex-direction: column;
    }
    .shipping_voice_1, .shipping_voice_2{
    width: 100%;
    max-width: 600px;
    padding: 0 10px;
    text-align: center;
    float: none;
    margin: 0 auto 20px auto;
}
}

/* intro ------------------------------------- */

.h2_wrapper{
		height: auto;
		position: relative;
		margin: 0 auto;
    float: none;
    overflow: hidden;
	}
	.h2_wrapper:before {
        content:"";
        display: block;
        padding-top: 26.6%;
	}
	.h2_wrapper h2{
		width: 100%;
		height: 100%;
		position: absolute;
		top:0;
		left: 0;
    text-indent: -2000px;
    overflow: hidden;
	}

/* #shipping_text h2{
    display: block;
    margin: 0 auto 40px auto;
    color: #000;
    border: 4px solid #000;
    font-size: 42px;
    font-weight: 600;
    padding: 15px 0 0 0;
    text-align: center;
    width: 100%;
    max-width: 600px;
    line-height: 120% ;

}
#shipping_text h2 small{font-size: 16px;} */

#shipping_text p{
    color: #000;
    font-size: 22px;
    text-align: center;
    font-weight: 600;
}
#shipping_text p strong{
    font-size: 32px;
    font-weight: 800;
}
@media screen and (max-width:  900px){
    #shipping_text p{font-size: 18px;}
    #shipping_text p strong{font-size: 28px;}

}
@media screen and (max-width:  600px){
     #shipping_text p{font-size: 15px; text-align: left;}
    #shipping_text p br{display: none;}
    #shipping_text p strong{font-size: 22px;}
}
@media screen and (max-width:  450px){
    #shipping_text h2{font-size: 35px;}
}
/* EXAMPLE ------------------------------------- */
#shipping_case{
  background: #ffffff;
  /* background: linear-gradient(63deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); */
}
/* #shipping_case h2.shipping_section_title{
    color: #fff;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
} */
ul.shipping_example{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
ul.shipping_example > li{
    width: calc(50% - 10px);
    background: #fff;
    margin: 10px 0;
    padding: 0px;
    box-sizing: border-box;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
ul.shipping_example > li h4{
    font-size: 20px;
    padding: 5px;
    font-weight: 600;
    /* border: 2px solid #000;
    color: #000; */
    background: #ffc600;
    text-align: center;

}
.ex_wrap{
    display: flex;
    justify-content: space-between;
    padding: 15px;
}
.ex_left{
    width: 420px;
    font-size: 10px;
}
.ex_left img{
    width: 100%;
    height: auto;
}
.ex_right{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ex_right table{
    width: 100%;
    margin-top: 0px;
}
.ex_right td{
    vertical-align: bottom;
    color: #000;
    font-weight: 600;
    font-size: 16px;
}
.ex_right td.shipping_days{width: 130px;}

.price_arrow img{
    width: 200px;
    display: block;
    float: none;
    margin: 5px auto 0 auto;
}
.ex_right tr.shipping_normal td{}
.ex_right tr.shipping_economy td{}
.ex_right td.shipping_price{text-align: center;}

.shipping_days{vertical-align: bottom;}
.shipping_days img{
  width: 70px !important;
  height: auto;
  display: inline;
  padding-bottom: 7px;
}
.ex_right td.shipping_days strong{font-size: 1.3em;}
.ex_right .shipping_economy td.shipping_days strong{font-size: 1.5em;}

.ex_right tr.shipping_normal td.shipping_price strong{
  font-size: 1.4em;
}

.ex_right tr.shipping_economy td.shipping_price{
  background: linear-gradient(transparent 60%, #ffc600 60%);
}
.ex_right tr.shipping_economy td.shipping_price strong{
  font-size: 2em;
}
.ex_detail{padding: 0 15px 10px 15px;}
.ex_detail ul{list-style: none;}
.ex_detail ul li{
  display: inline-block;
  margin: 3px 3px 3px 0px;
  padding: 1px 5px !important;
  list-style-type: disc !important;
  font-size: 11px;
  font-weight: 600;
  border: #555 1px solid;
  color: #555;
  /* background: #828282;
  color: #fff; */
}
.ex_detail p{font-size: 11px;}
.ex_note{font-size: 12px; padding: 15px;}

@media screen and (max-width:  1000px){
    ul.shipping_example{flex-direction: column;}
    ul.shipping_example > li{
        width: 100%;
        max-width: 600px;
        margin: 15px auto;
    }
}
@media screen and (max-width:  600px){
  .ex_left{width: 360px;}
    .ex_right td{font-size: 12px;}
    .ex_right td.shipping_days{width: 120px;}
    .shipping_days img{width: 50px;}
}
@media screen and (max-width:  450px){
    .ex_left{width: 200px;}
}

/* ABOUT */
#shipping_about {background: #fff;}
#shipping_about img{
    max-width: 600px;
    height: auto;
    margin: 20px auto 60px;
}
#shipping_about p{
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin: 20px 0;
    color: #000;
}

#shipping_about p strong {
    font-size: 2em;
}
#shipping_about p span.highlight{
    background: linear-gradient(transparent 60%, #ffc600 60%);
}

@media screen and (max-width:  600px){
    #shipping_about img{max-width: 100%;}
    #shipping_about p{font-size: 16px; text-align: left;}
    #shipping_about p strong{font-size: 20px;}
}
/* お客さま事例 */
#shipping_customer{background: #fff;}
/* #shipping_customer h2.shipping_section_title{
    color: #fff;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
} */
ul.shipping_customer{
    display: flex;
    flex-direction: column;
}

ul.shipping_customer li {
    width: 100%;
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 15px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    color: #000;
    -moz-border-radius:10px;
    border-radius:10px;
}

ul.shipping_customer li img{
    width: 100% !important;
    height: auto;
}
.customer_left,
.customer_thumb,url(https://jp.meviy.misumi-ec.com/info/ja/wp-admin/)
.customer_right{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.customer_left{
    width: 200px;
}

.customer_left h4{
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.customer_thumb{
    width: 300px;
}
.customer_right{width: calc(100% - 500px);}
.customer_right p{
    font-size:40px;
    font-weight: 600;
    padding: 0 30px;
    text-decoration: underline;
  text-decoration-thickness: 15px;
  text-decoration-color: #ffc600;
  text-underline-offset: -8px;
  text-decoration-skip-ink: none;
}
@media screen and (max-width:  1000px){
  .customer_right p{
      font-size: 30px;
      padding: 0 15px;
    }
    .customer_right p br{display: none;}
}
@media screen and (max-width:  800px){
    ul.shipping_customer li{max-width:500px; margin: 15px auto;}
    ul.shipping_customer li{
        flex-direction: column;
}
    .customer_left,
    .customer_thumb{margin: 0 auto 15px auto;}
    .customer_right{width: 100%;}
    .customer_right p{
      font-size: 22px;
      text-align: center;
    }
}
@media screen and (max-width:  300px){
    .customer_thumb{width: 100%;}
}
@media screen and (max-width:  200px){
    .customer_left{width: 100%;}
}
/* よくある質問 --------------------------*/
.accordion-contetns {
  /* display: none */
}

.accordion-switch {
  /* cursor: pointer; */
  position: relative
}

/* .accordion-switch::after {
  content: "＋";
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%)
} */

@media screen and (max-width:1024px) {
  .accordion-switch::after {
    font-size: 10vw;
    right: 2.7777777778vw
  }
}

.accordion-switch.active::after {
  content: "－"
}


.qa {
  /* padding: 100px 0; */
  width: 100%
}

@media screen and (max-width:1024px) {
  .qa {
    /* padding: 16.7vw 0 */
  }
}

.qa__inner {
  margin: 0 auto;
  width: 1110px
}
.page_shipping .qa__inner{
    padding: 30px 0;
}

@media screen and (max-width:1024px) {
  .qa__inner {
    padding: 0 4.2vw;
    width: 100%
  }
}

.qa__sub-title {
  color: #001e6f;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px
}

@media screen and (max-width:1024px) {
  .qa__sub-title {
    /* font-size: 5.5vw;
    margin-bottom: 4.2vw */
  }
}

.qa__main-title {
  font-size: 34px;
  font-weight: 700
}

@media screen and (max-width:1024px) {
  .qa__main-title {
    /* font-size: 8vw;
    line-height: 1.5 */
  }
}

.qa__accordion-title {
  color: #fff;
  font-size: 20px;
  font-weight: 700
}

@media screen and (max-width:1024px) {
  .qa__accordion-title {
    font-size: 3.8888888889vw
  }
}

.qa__accordion-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 2
}

@media screen and (max-width:1024px) {
  .qa__accordion-text {
    font-size: 3.3333333333vw
  }
}

.qa__link-text {
  border-bottom: 1px solid #00207a;
  font-size: 16px;
  font-weight: 500;
  line-height: 2
}

@media screen and (max-width:1024px) {
  .qa__link-text {
    font-size: 3.3333333333vw
  }
}

.qa__format-title {
  font-size: 20px;
  margin-bottom: 15px
}

@media screen and (max-width:1024px) {
  .qa__format-title {
    font-size: 5.5555555556vw;
    margin-bottom: 4.1666666667vw
  }
}

.qa__more-btn {
  background-color: #001962;
  border-radius: 5px;
  color: #fff!important;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  padding: 15px 25px;
  position: relative;
  text-align: left;
  width: 220px
}

@media screen and (max-width:1024px) {
  .qa__more-btn {
    font-size: 5vw;
    width: 55.5555555556vw
  }
}

.qa__more-btn::after {
  content: "";
  background-image: url(..img/shipping/icon_arrow01.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  height: 16px;
  width: 8px
}

.qa .qa-titleArea {
  margin-bottom: 60px;
  text-align: center;
  width: 100%
}

@media screen and (max-width:1024px) {
  .qa .qa-titleArea {
    margin-bottom: 11.1vw
  }
}

.qa .qa-archive {
  margin-bottom: 40px;
  width: 100%
}

@media screen and (max-width:1024px) {
  .qa .qa-archive {
    margin-bottom: 11.1111111111vw
  }
}

.qa .qa-archive__item {
  margin-bottom: 30px;
  width: 100%
}

@media screen and (max-width:1024px) {
  .qa .qa-archive__item {
    margin-bottom: 4.1666666667vw
  }
}

.qa .qa-archive__item:last-of-type {
  margin-bottom: 0
}

.qa .qa-question {
  background-color: #000;
  padding: 25px 60px;
  position: relative;
  width: 100%
}

@media screen and (max-width:1024px) {
  .qa .qa-question {
    padding: 4.1666666667vw 12.5vw 4.1666666667vw 13.8888888889vw
  }
}

.qa .qa-question::before {
  content: "Q";
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%)
}

@media screen and (max-width:1024px) {
  .qa .qa-question::before {
    left: pxotvw(20);
    font-size: 6.6666666667vw
  }
}

.qa .qa-answer {
  background-color: #fff;
  padding: 30px 60px;
  position: relative;
  width: 100%
}

@media screen and (max-width:1024px) {
  .qa .qa-answer {
    padding: 8vw 4.1666666667vw 4.1666666667vw 12.5vw;
    min-height: 20vw
  }
}

.qa .qa-answer::before {
  content: "A";
  color: #00207a;
  font-size: 30px;
  font-weight: 700;
  position: absolute;
  left: 20px;
  top: 20px
}

@media screen and (max-width:1024px) {
  .qa .qa-answer::before {
    left: pxotvw(20);
    top: pxotvw(20);
    font-size: 6.6666666667vw
  }
}

.qa .qa-btnArea {
  text-align: right;
  width: 100%
}

@media screen and (max-width:1024px) {
  .qa .qa-btnArea {
    text-align: center
  }
}

.qa .qa-format {
  padding-top: 40px;
  width: 100%
}

@media screen and (max-width:1024px) {
  .qa .qa-format {
    padding-top: 11.1111111111vw
  }
}

.qa .qa-format__table {
  width: 100%
}

.qa .qa-format__th {
  background-color: #001e6f;
  border: 1px solid #001e6f;
  color: #fff;
  font-size: 12px;
  padding: 10px 20px;
  text-align: left;
  width: 50%
}

@media screen and (max-width:1024px) {
  .qa .qa-format__th {
    font-size: 3.3333333333vw;
    padding: 2.7777777778vw 5.5555555556vw
  }
}

.qa .qa-format__th:first-child {
  border-right: 1px solid #fff
}

.qa .qa-format__td {
  border: 1px solid #001e6f;
  color: #000;
  font-size: 12px;
  padding: 10px 20px
}

@media screen and (max-width:1024px) {
  .qa .qa-format__td {
    font-size: 3.3333333333vw;
    padding: 2.7777777778vw 5.5555555556vw
  }
}