@charset "UTF-8";

/* 基本レイアウト */

html  {
font-size: 62.5%;  }

* {
box-sizing: border-box;
margin: 0;
padding: 0; }

body {
background-color: #fff;
color: #333;	
font-family: 'Noto Sans JP', YuGothic,'Yu Gothic','Yu Gothic UI','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,sans-serif;
font-size: 1.8rem !important;
font-size: 18px !important;
line-height: 1.5;
margin: 0 !important;
position: relative; }

@media only screen and (max-width: 767px) {
body {
font-size: 1.6rem;
font-size: 16px; } }

br {
line-height: 0 !important; }
  
/* pc−sp 表示切替 */

@media only screen and (max-width: 767px) {
.pc {
display: none !important; }
.sp {
display: block !important; } }

@media only screen and (min-width: 768px) {
.pc {
display: block !important; }
.sp {
display: none !important; } }

/* コンテナ */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 影の指定 */
padding: 0; /* コンテンツと画面端の余白 */
}

section{
width: 100%;
padding: 0;
margin: 0;
text-align: center;
}

.content{
display: inline-block;
position: relative;
width: 95%;
max-width: 1080px;
text-align: center;
}

@media only screen and (max-width: 767px){
.content{
width: 96%;
max-width: 750px;
margin-top: 30px;
}}

/* 見出し周り */

.ttl-box-w{
padding-top: 30px;
padding-bottom: 30px;
margin: 0;
background: #fff;
text-align: center;
}

.d-arrow img{
width: 15%;
max-width: 150px;
margin: 0 auto 30px;
}

@media only screen and (max-width: 767px){
.ttl-box-w{
padding-top: 0px;
padding-bottom: 15px;
}
.d-arrow img{
width: 20%;
margin: 0 auto;
}}

/* 余白スペース */

.mt-2 {
  margin-top: 2rem; }

.mt-3 {
  margin-top: 3rem; }

.mt-4 {
  margin-top: 4rem; }

.mt-5 {
  margin-top: 5rem; }

.mt-6 {
  margin-top: 6rem; }
  @media only screen and (max-width: 767px) {
    .mt-6 {
      margin-top: 3rem; } }

.mt-9 {
  margin-top: 9rem; }
  @media only screen and (max-width: 767px) {
    .mt-9 {
      margin-top: 4.5rem; } }

.mb-2 {
  margin-bottom: 2rem !important; }
  @media only screen and (max-width: 767px) {
    .mb-2 {
      margin-bottom: 1rem !important; } }

.mb-3 {
  margin-bottom: 3rem !important; }

.mb-4 {
  margin-bottom: 4rem !important; }
  @media only screen and (max-width: 767px) {
    .mb-4 {
      margin-bottom: 2rem !important; } }

.mb-5 {
  margin-bottom: 5rem !important; }
  @media only screen and (max-width: 767px) {
    .mb-5 {
      margin-bottom: 3rem !important; } }

.mb-6 {
  margin-bottom: 6rem !important; }
  @media only screen and (max-width: 767px) {
    .mb-6 {
      margin-bottom: 3rem !important; } }

.mb-8 {
  margin-bottom: 8rem !important; }
  @media only screen and (max-width: 767px) {
    .mb-8 {
      margin-bottom: 4rem !important; } }

.mb-9 {
  margin-bottom: 9rem !important; }
  @media only screen and (max-width: 767px) {
    .mb-9 {
      margin-bottom: 4.5rem !important; } }

.mb-10 {
  margin-bottom: 10rem !important; }
  @media only screen and (max-width: 767px) {
    .mb-10 {
      margin-bottom: 5rem !important; } }

/* 背景色 */

.bg-bluepink {
background: rgba(148, 245, 254, 5.49);
background: linear-gradient(105deg, rgba(148, 245, 254, 0.5) 0%, rgba(254, 123, 253, 0.5) 100%);
}

.bg-gray {
background: #efefef;
}

.bg-white {
background: #fff;
}

/* テキスト周り */

.txt-center {
text-align: center; 
}

.txt-left {
text-align: left; 
}

h2 {
font-size: 60px;
margin-top: 20px;
}

h3 {
font-size: 42px;
margin-top: 20px;
margin-bottom: 10px;
}

h4 {
font-size: 38px;
margin-top: 20px;
margin-bottom: 10px;
}

	@media only screen and (max-width: 767px) {
	h2{
	font-size: 24px;
	margin-top: 10px;}
	h3{
	font-size: 21px;
	margin-top: 10px;}
	h4 {
	font-size: 19px;
	}}

span.red{
color:#ff0303;
}

span.large{
font-size: larger;
}

/* -- 00メインビジュアル -- */

.mv_img01 img{
width: 100%;
}

.mv_img02 img{
width: 92%;
margin-bottom: 20px;
}

/* -- 01身体に関わるたくさんの業種 -- */

.space01a{
margin-top: 6rem;
margin-bottom: 3rem;
}
@media only screen and (max-width: 767px){
.space01a{
margin-top: 3rem;
margin-bottom: 1.5rem;
}}

.space01b{
margin-top: 5rem;
margin-bottom: 3rem;
}
@media only screen and (max-width: 767px){
.space01b{
margin-top: 2.5rem;
margin-bottom: 1.5rem;
}}

.space01c{
margin-top: 3rem;
margin-bottom: 3rem;
}
@media only screen and (max-width: 767px){
.space01c{
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}}

.industry_list {
display: inline-flex;
justify-content: space-between;
}

.industry_list img{
margin: 5px auto;
max-width: 31%;
}

.industry_box {
border : solid 1px #f00;
padding: 15px;
margin-bottom: 20px;
}

ul {
list-style: none;
text-align: left;
font-size: 36px;
}

li
{
list-style-type: none;
background-image: url('../img/industry-check.png');
background-size: 30px;
background-repeat: no-repeat;
background-position: top 12px left 10px;
padding-left: 50px;
border-bottom: 2px dotted #ff0303;
}

	@media only screen and (max-width: 767px) {
	ul {
	font-size: 16px;
	}
	li 
	{
	background-size: 16px;
	background-position: top 4px left 0px;
	padding-left: 25px;
	}}

.industry_merit img{
width: 100%;
}

.btn-cta img{
width: 90%;
margin: 20px auto 50px;
}
@media only screen and (max-width: 767px) {
.btn-cta img{
margin: 20px auto 30px;
}}

/* -- 02７つの業界No.1 -- */

.space02a{
margin-top: 3rem;
}
.space02b{
margin-bottom: 3rem;
}
@media only screen and (max-width: 767px){
.space02a{
margin-top: 1.5rem;
}
.space02b{
margin-bottom: 1.5rem;
}}

.strength_title{
padding: 2px;
text-align: left;
margin-bottom: 10px;
background: rgba(148, 245, 254, 5.49);
background: linear-gradient(105deg, rgba(148, 245, 254, 0.5) 0%, rgba(254, 123, 253, 0.5) 100%);
}

.strength_title h4{
font-size: 36px;
margin: 6px 20px;
}

.strength_box{
padding: 10px;
background: #fff;
}

.strength_wrap{
display: flex;
margin: 10px;
}

.strength_mark{
width: 16%;
}

.strength_mark img{
width: 100%;
max-width: 150px;
}

.strength_txt{
font-size: 28px;
width: 84%;
text-align: left;
margin: auto 20px;
}

	@media only screen and (max-width: 767px) {
	.strength_title h4{
	font-size: 20px;
	margin: 6px 10px;
	}
	.strength_box{
	padding: 5px;
	}
	.strength_wrap{
	margin: 10px 5px;
	}
	.strength_mark{
	width: 18%;
	}
	.strength_mark img{
	width: 100%;
	max-width: 80px;
	}
	.strength_txt{
	font-size: 16px;
	width: 82%;
	margin: auto 5px;
	}}

/* -- 03取扱店になるメリット -- */

.space03{
margin-bottom: 2rem;
}
@media only screen and (max-width: 767px){
.space03{
margin-bottom: 1rem;
}}

.merit_box {
padding: 15px;
background: #fff;
width:80%;
margin: 60px auto;
}

.merit_list{
text-align: left ;
margin-left: 30px;
}
.merit_list01{
color:#d8b060;
font-size:22px ;
font-weight: 600;
}
.merit_list02{
color: #0a2956;
font-size:32px ;
font-weight: 600;
}
.merit_list03{
font-size:24px ;
margin-bottom: 30px;
}

	@media only screen and (max-width: 767px) {
	.merit_box {
	padding: 10px;
	width:100%;
	margin: 30px auto 50px;
	}
	.merit_list{
	margin-left: 20px;
	}
	.merit_list01{
	font-size:18px ;
	}
	.merit_list02{
	font-size:20px ;
	}
	.merit_list03{
	font-size:16px ;
	margin-bottom: 18px;
	}}

.parent{
position: relative;
}

.bg_insole01 img{
position: absolute;
bottom: 10%;
right: 10%;
width: 30%;
}

/* -- 04 STここがすごい！ -- */

.space04a{
margin-top: 5rem;
}
.space04b{
margin-bottom: 3rem;
}
@media only screen and (max-width: 767px){
.space04a{
margin-top: 2rem;
}
.space04b{
margin-bottom: 1.5rem;
}}

.tech_img img{
width: 100%;
max-width: 1100px;
margin: 10px auto 30px;
}

.tech_txt-center{
font-size: 42px;
text-align: center;
}

.tech_txt-center02{
font-size: 42px;
text-align: center;
}

.tech_txt-left01{
font-size: 42px;
text-align: left;
margin-bottom: 10px;
border-bottom: 3px solid #CCC;
}

.tech_txt-left02{
font-size: 38px;
text-align: left;
}

	@media only screen and (max-width: 767px) {
	.tech_img img{
	margin: 10px auto 30px;
	}
	.tech_txt-center{
	font-size: 20px;
	}
	.tech_txt-center02{
	font-size: 22px;
	text-align: left;
	}
	.tech_txt-left01{
	font-size: 20px;
	}
	.tech_txt-left02{
	font-size: 18px;
	text-align: left;
	}}

/* -- 05今なら特別キャンペーン -- */

.campaign_box {
width: 75%;
padding: 1em;
margin: 20px auto;
background: #fff;
}

.campaign_special {
border-radius: 100vh;
width: 50%;
padding: 10px;
margin: 10px auto 0;
color: #fff;
font-size: 2.6vw;
font-weight: 600;
background-color: #ff0303;
}

.campaign_wrap {
display: flex;
padding: 20px;
}
.campaign_icon01 {
width: 30%;
text-align: center;
}
.campaign_icon01 img{
width:90%;
max-width: 150px;
}

.campaign_txt{
width: 70%;
text-align: left;
margin: auto 0 ;
padding-left: 30px;
font-size: 38px;
font-weight: 600;
}

.campaign_icon02 img{
margin: 20px;
width: 20%;
max-width: 80px;
}

.campaign_icon-txt{
font-size: 24px;
font-weight: 600;
}

	@media only screen and (max-width: 767px) {
	.campaign_box {
	width: 85%;
	padding: 10px;
	margin: 10px auto;
	background: #fff;
	}

	.campaign_special {
	border-radius: 100vh;
	width: 60%;
	padding: 10px;
	margin: 10px auto 0;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	background-color: #ff0303;
	}

	.campaign_wrap {
	display: flex;
	padding: 10px;
	}
	.campaign_icon01 {
	width: 20%;
	text-align: center;
	}
	.campaign_icon01 img{
	max-width: 80px;
	}

	.campaign_txt{
	width: 80%;
	text-align: left;
	margin: auto 0 ;
	padding-left: 15px;
	font-size: 20px;
	}

	.campaign_icon02 img{
	max-width: 50px;
	}
	.campaign_icon-txt{
	font-size: 18px;
	}}

/* -- 06よくある質問 -- */

.space06{
margin-top: 4rem;
margin-bottom: 2rem;
}
@media only screen and (max-width: 767px){
.space06{
margin-top: 2rem;
margin-bottom: 1rem;
}}

.faq_box {
padding: 20px;
margin: 20px auto;
background: #fff;
text-align: left;
}

.faq_wrap{
display: flex;
}

.faq_icon{
width: 12%;
}

.faq_icon img{
width: 100%;
max-width: 90px;
}

.faq_q{
width: 88%;
margin: auto 0 ;
}
.faq_q p{
font-size: 28px;
font-weight: 600;
}

.faq_a p{
font-size: 30px;
}

	@media only screen and (max-width: 767px) {
	.faq_icon img{
	max-width: 50px;
	}
	.faq_q p{
	font-size: 16px;
	font-weight: 600;
	margin-left: 10px;
	}
	.faq_a p{
	font-size: 16px;
	}}

/* -- 07代理店の声 -- */

.space07a{
margin-top: 3rem;
}
.space07b{
margin-bottom: 5rem;
}
@media only screen and (max-width: 767px){
.space07a{
margin-top: 1.5rem;
}
.space07b{
margin-bottom: 2.5rem;
}}

h2.voice_ttl{
font-size: 60px;
}

p.voice_ttl-sub{
font-size: 38px;
}

h3.voice-number{
display: inline-block;
font-size: 28px;
font-weight: 600;
background-color: #fff;
padding: 12px 20px;
}

.voice_slide{
display: inline-block;
width:100%;
max-width: 980px;
margin: 20px auto;
height: 600px;
overflow: auto;
}

.voice_box-p, .voice_box, .voice_box-last{
padding: 20px;
background: #fff;
text-align: left;
}

.voice_box-p{
margin: 0 5px 20px;
}

.voice_box {
margin: 20px 5px;
}

.voice_box-last {
margin: 20px 5px 0;
}

.voice_wrap{
display: flex;
}

.voice_partner{
width: 65%;
}
.voice_txt01{
font-size: 22px;
}
.voice_txt02{
font-size: 26px;
font-weight: 600;
}

.voice_photo{
width: 35%;
text-align: right;
}

.voice_photo img{
width: 100%;
max-width: 250px;
}

.voice_icon{
width: 12%;
}

.voice_icon img{
width: 100%;
max-width: 80px;
}

.voice_q{
width: 88%;
margin: auto 0 ;
}
.voice_q p{
font-size: 28px;
font-weight: 600;
}

.voice_a p{
font-size: 30px;
}

	@media only screen and (max-width: 767px) {
	h2.voice_ttl{
	font-size: 26px;
	}
	p.voice_ttl-sub{
	font-size: 20px;
	}
	h3.voice-number{
	display: inline-block;
	font-size: 20px;
	padding: 12px 20px;
	}
	.voice_slide{
	margin: 0 auto;
	height:500px;
	}

	.voice_partner{
	width: 65%;
	}

	.voice_txt01{
	font-size: 14px;
	}
	.voice_txt02{
	font-size: 14px;
	}
	.voice_photo{
	width: 35%;
	}

	.voice_photo img{
	max-width: 150px;
	}

	.voice_icon{
	width: 15%;
	}

	.voice_icon img{
	width: 100%;
	max-width: 50px;
	}

	.voice_q{
	width: 85%;
	margin: auto 0 ;
	}
	.voice_q p{
	font-size: 16px;
	margin-left: 10px;
	}

	.voice_a p{
	font-size: 16px;
	}

	.voice_box-last {
	margin: 20px 5px 70px;
	}}

/* スライダー */

.swiper-container {
width: 100%;
height: auto;
margin: 0.5rem auto;
overflow:hidden;
}

	@media only screen and (max-width: 767px) {
	.swiper-container {
	width: 92%;
	height: 500px;
	}}

/*各スライドのスタイル*/

.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}

/*サムネイルのスタイル*/
.swiper-thumbnail {
margin-top: 20px;
height: 60px;
}

	@media only screen and (max-width: 767px) {
	.swiper-thumbnail {
	margin-top: 0px;
	height: 80px;
	}}

.swiper-thumbnail .swiper-slide {
  opacity: 0.5;
  transition: opacity 0.5s;
}

.slide-thum {
display: inline-block;
font-size: 18px;
padding: 10px 20px;
background-color: #fff;
}
	@media only screen and (max-width: 767px) {
	.slide-thum {
	font-size: 12px;
	font-weight: 600;
	margin-top: 10px;
	padding: 10px;
	}}

/*アクティブなときのスタイル*/
.swiper-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}

/*矢印ボタンの色を変更*/
.swiper-button-next,
.swiper-button-prev {
  color: #212121;
}

/* -- 08始めてみませんか -- */

h2.start_ttl{
font-size: 60px;
line-height: 1.4;
color: #ff0303;
text-align: center;
}

.bg_insole02 img{
position: absolute;
top: -25%;
right: -5%;
width: 30%;
}

.start_box {
border-radius: 10px;
padding: 10px 20px;
margin: 10px;
background: #fff;
text-align: left;
}

.start_wrap{
display: flex;
}

.start_icon{
width: 20%;
text-align: center;
margin: auto 0;
}

.start_icon img{
width: 100%;
max-width: 100px;
}

.start_txt{
width: 80%;
padding-left: 20px;
margin: auto 0 ;
font-size: 34px;
font-weight: 600;
}

	@media only screen and (max-width: 767px) {
	h2.start_ttl{
	font-size: 24px;
	}

	.start_box {
	padding: 20px;
	margin: 10px;
	}

	.start_icon{
	width: 18%;
	}

	.start_icon img{
	width: 100%;
	max-width: 80px;
	}

	.start_txt{
	width: 82%;
	padding-left: 10px;
	margin: auto 0 ;
	font-size: 18px;
	}}

.copyright{
text-align: center;
padding: 30px;
}

.copyright p{
font-size: 16px;
}
@media only screen and (max-width: 767px) {
.copyright p{
font-size: 10px;
}}