@charset "UTF-8";

.container{
width: 100%;
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);

	padding: 0;
	text-align: center;
	margin-bottom: 30px;
}

.inner{
	width: 100%;
	padding: 0;
	text-align: center;
	margin-bottom: 30px;
}

/*--タイトルエリア--*/

.head-area{
	display: inline-block;
  position: relative;
	text-align: center;
	width: 90%;
	max-width: 1020px;
	padding-top: 40px;
	padding-bottom: 30px;
}

.ttl-main_guide,
.ttl-main_faq,
.ttl-main_sbsc,
.ttl-main_dataup,
.ttl-main_contact{
	text-align: left;
	font-weight: bold;
	font-size: 40px;
	margin-bottom: 30px;
}
@media only screen and (max-width: 767px){
.ttl-main_guide,
.ttl-main_faq,
.ttl-main_sbsc,
.ttl-main_dataup,
.ttl-main_contact{
	text-align: center;
	font-size: 30px;
	margin-bottom: 30px;
}}

.ttl-sub{
	text-align: left;
	font-weight: bold;
	font-size: 20px;
	color: #63AD56;
	margin-bottom: 8px;
}

.btn-area{
	display: inline-block;
  position: relative;
	text-align: left;
	max-width: 1020px;
}
@media only screen and (max-width: 767px){
.ttl-sub{
	text-align: center;
	font-size: 18px;
	color: #63AD56;
	margin-bottom: 4px;}
.btn-area{
	display: inline-block;
	text-align: center;
}}

.btn-head{
	display: inline-block;
	font-size: 15px;
	width: 230px;
	border-radius: 5px;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 20px;
	text-align: left;
	font-weight: 600;
  text-decoration: none;
	margin-bottom: 12px;
	margin-right: 10px;
	color: #fff;
	background-color: #265BA8;
}
@media only screen and (max-width: 767px){
.btn-head{
	margin-bottom: 10px;
}}


/*--　見出し　--*/

.ttl02{
	background: #001E57;
	color: #fff;
	font-size: 22px;
	text-align: left;
	max-width: 1020px;
	width: 100%;
	padding-left: 40px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-bottom: 20px;
}

.ttl03{
	color: #265BA8;
	font-size: 24px;
	text-align: left;
	padding-left: 40px;
	padding-top: 30px;
}
@media screen and (max-width:767px){
.ttl02{
	font-size: 20px;
	text-align: center;
	max-width: 1020px;
	width: 100%;
	padding-left: 0px;
	margin-bottom: 12px;
}
.ttl03{
	font-size: 20px;
	padding-left: 10px;
}}

/*--セクション--*/

.content{
	display: inline-block;
  position: relative;
	width: 90%;
	max-width: 1020px;
	text-align: center;
	margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.content p{
	padding: 20px 40px;
	text-align: left;
}
@media screen and (max-width:767px){
.content p{
	padding: 15px 10px;
	text-align: left;
}}

p.note-kids{
	margin: 0px auto 20px;
	text-align: left;
}
@media screen and (max-width:767px){
p.note-kids{
	text-align: center;
}}

/*--ご注文の流れ--*/

dl.container_orderflow,
dl.container_sbscguide{
width: 95%;
text-align: left;
margin-left: 10px;
margin-top: 20px;
padding-left: 30px;
border-left: 6px solid #265ba8;
box-sizing: border-box;
}

dt.ttl_orderflow,
dt.ttl_sbscguide{
font-size: 24px;
font-weight: 600;
color: #265ba8;
padding: 20px 0;
}
@media screen and (max-width:767px){
dt.ttl_orderflow,
dt.ttl_sbscguide{
font-size: 18px;
}}
dt.ttl_orderflow::before,
dt.ttl_sbscguide::before{
	content: '\f111';
	font: var(--fa-font-solid);
	margin-left: -45px;
	padding-right:20px;
}
@media screen and (max-width:767px){
dt.ttl_orderflow::before,
dt.ttl_sbscguide::before{
	margin-left: -42px;
	padding-right:20px;
}}

dd.wrap-dd_orderflow,
dd.wrap-dd_sbscguide{
display: flex;
width:100%;
}
.txt_orderflow,
.txt_sbscguide{
width:70%;
margin-bottom: 30px;
}
.txt_orderflow p,
.txt_sbscguide p{
padding: 0;
}
.note_orderflow,
.note_sbscguide{
display: inline-block;
background-color: #D7EBF1;
font-size: 14px;
border-radius: 10px;
text-align: left;
padding: 10px 15px;
margin-top: 20px;
}

.note_sbscguide02{
display: inline-block;
background-color: #D7EBF1;
font-size: 14px;
border-radius: 10px;
text-align: left;
padding: 10px 15px;
margin: auto 0;
}

.img_orderflow,
.img_sbscguide{
width:30%;
margin-left: 50px;
margin-bottom: 20px;
}
.img_orderflow img,
.img_sbscguide img{
max-width: 300px;
}

@media screen and (max-width:767px){
dd.wrap-dd_orderflow,
dd.wrap-dd_sbscguide{
flex-direction: column-reverse;
align-items: center;}
.txt_orderflow,
.txt_sbscguide{
width:100%;}
.img_orderflow,
.img_sbscguide{
width:90%;
margin-left: 0px;
text-align: center;}
.img_orderflow img,
.img_sbscguide img{
width: 100%;
}}


/*--お支払い方法--*/
.card_payment{
text-align: left;
}
img.img-card_payment{
margin-top: 15px;
margin-bottom: 15px;
margin-left: 35px;
min-width:320px;
}
@media screen and (max-width:767px){
img.img-card_payment{
width:100%;
margin-left: 0px;
}}

/*--配送について--*/
.free_delivery{
padding: 30px;
text-align: left;
}
img.img-track{
width: 120px;
margin-left: 5px;
margin-right: 36px;
vertical-align: middle;
}
@media screen and (max-width:767px){
img.img-track{
margin-bottom: 15px;
}}
.txt-free{
display: inline-block;
font-weight: 600;
vertical-align: middle;
}

/*--月々定額プランについて--*/

/*--作り直し・返金について--*/

img.mark-guarantee{
width: 50%;
min-width: 320px;
margin-top: 20px;
}

.txt-link{
	display: table;
	margin-left: auto;
	margin-right: 50px;
	padding: 14px 28px;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	color: #001E57;
	background-color: #fff;
	border: 2px solid #001E57;
	border-radius: 10px;
	transition: color .2s, background-color .2s;
}
@media screen and (max-width:767px){
.txt-link{
	font-size: 16px;
	padding: 10px 20px;
	margin-right: 30px;
}}

.txt-link:hover {
	color: #fff!important;
	background-color: #001E57;
	text-decoration: none;
}

/*--よくある質問ボタン--*/

.btn-faq{
	display: block;
	font-size: 16px;
	width: 240px;
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	background-color: #fff;
	font-weight: 600;
  text-decoration: none;
	border: 2px solid #333;
	margin: 10px auto 20px ;
}

.btn-faq::before {
	content: '\f086';
	font: var(--fa-font-solid);
	margin-right: 6px;
}

.btn-faq:hover {
	color: #fff;
	background-color: #265BA8;
	border: 2px solid #265BA8;
}

/*--お問い合わせボタン--*/

.btn-contact{
	display: block;
	font-size: 16px;
	width: 240px;
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	background-color: #fff;
	font-weight: 600;
  text-decoration: none;
	border: 2px solid #333;
	margin: 10px auto 20px ;
}

.btn-contact::before {
	content: '\f0e0';
	font: var(--fa-font-solid);
	margin-right: 6px;
}

.btn-contact:hover {
	color: #fff;
	background-color: #265BA8;
	border: 2px solid #265BA8;
}

/*=========================
　　　　　よくある質問
=========================*/

/*--　見出し　--*/

.ttl-fukidashi-b {
  position: relative;
  display: inline-block;
  padding: 15px;
  max-width: 380px;
  color: #fff;
  font-size: 20px;
	font-weight: bold;
  background: #265BA8;
	margin-bottom: 20px;
	-webkit-filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.4));
}
  @media only screen and (max-width: 767px) {
  .ttl-fukidashi-b {
  width: 80%;
  font-size: 16px; } }

.ttl-fukidashi-b:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 15px solid #265BA8;
}

.ttl-fukidashi-k {
  position: relative;
  display: inline-block;
  padding: 15px;
  max-width: 380px;
  color: #fff;
  font-size: 20px;
	font-weight: bold;
  background: #001E57;
	margin-bottom: 20px;
	-webkit-filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.4));
}
  @media only screen and (max-width: 767px) {
  .ttl-fukidashi-k {
  width: 80%;
  font-size: 16px; } }

.ttl-fukidashi-k:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 15px solid #001E57;
}

/*アコーディオン全体（薄青）*/
.accordion-area{
 list-style: none;
 width: 95%;
 max-width: 900px;
 margin:0 auto;
}

.accordion-area li{
  margin: 20px 0;
}

.accordion-area section {
	border-radius: 12px;
	background: #E8EDF5;
}

/*アコーディオン全体（白）*/
.accordion-area-w{
    list-style: none;
    width: 95%;
    max-width: 900px;
    margin:0 auto;
}

.accordion-area-w li{
  margin: 20px 0;
}

.accordion-area-w section{
	border-radius: 12px;
	background: #fff;
}

/*アコーディオンタイトル*/

.title {
  position: relative;
  cursor: pointer;
  font-size:16px;
	text-align: left;
  font-weight: 600;
  padding: 3% 70px 3% 60px;
  transition: all .5s ease;
}
  @media only screen and (max-width: 767px) {
  .title {
  font-size:16px;
	line-height: 1.5;
  padding: 3% 60px 3% 50px; } }

/*右側の開閉アイコン*/
.title::after{
  position: absolute;
  content:'\f13a';
	font: var(--fa-font-solid);
	font-size: 32px;
	color: #265BA8;
	top: 50%;
	transform: translate(0%, -50%);
  right: 30px;
}
  @media only screen and (max-width: 767px) {
.title::after{
  position: absolute;
	font-size: 28px;
  right: 20px;
}}

.title.close::after{
  position: absolute;
  content:'\f139';
	font: var(--fa-font-solid);
	font-size: 32px;
	color: #265BA8;
	top: 50%;
	transform: translate(0%, -50%);
  right: 30px;
}
  @media only screen and (max-width: 767px) {
.title.close::after{
	font-size: 28px;
  right: 20px;	
} }

/*　左側のQ　*/

.title::before{
  position: absolute;
  content:'\51';
	font: var(--fa-font-solid);
	font-size: 24px;
	color: #265BA8; 
  left: 20px;
}
  @media only screen and (max-width: 767px) {
.title::before{
	font-size: 20px;
  left: 20px;
}}

/*アコーディオン アンサー*/

.box {
  display: none;
	margin: 0;
}

.answer {
  position: relative;
  font-size:16px;
	font-weight:normal;
	text-align: left;
  padding: 3% 40px 3% 60px;
}
  @media only screen and (max-width: 767px) {
	.answer {
  font-size:16px;
	line-height: 1.5;
  padding: 3% 40px 3% 50px; } }

/*　左側のA　*/

.answer::before{
  position: absolute;
  content:'\41';
	font: var(--fa-font-solid);
	font-size: 24px;
	color: #e61874; 
  left: 20px;
}
  @media only screen and (max-width: 767px) {
	.answer::before{
	font-size: 20px;
  left: 20px;
} }

/*=========================
　　　月々定額プランについて
=========================*/

/*月々定額プランの解約料について*/
.table-cancel_sbsc{
margin-left: 40px;
border-collapse: collapse;
	width: 70%;
}
@media only screen and (max-width: 767px){
.table-cancel_sbsc{
	margin-left: 0px;
	width: 100%;
}}
.table-cancel_sbsc th,
.table-cancel_sbsc td{
	padding: 15px;
	border: 1px solid #333;
	font-size: 16px;
}

.table-cancel_sbsc th{
background: #f7f7f7;
}

/*ご利用規約*/

.box-policy_sbsc{
width: 80%;
background: #efefef;
padding: 30px 30px 30px 50px;
margin: 20px auto;
text-align: left;
}
@media only screen and (max-width: 767px){
.box-policy_sbsc{
width: 95%;
padding: 20px 20px 20px 40px;
}}

ul.policy-content_sbsc{
text-align: left;
font-size: 16px;
line-height: 1.6;
}

ul.policy-content_sbsc li{
list-style: disc!important;
}

.box-attent{
  display: inline-block;
  position: relative;
	font-size: 16px;
  padding: 20px 20px 20px 30px;
  text-align: left;
	line-height:1.6;
  color: #333;
	border: 2px solid #0075a9;
  border-radius: 0 10px 10px 10px;
  background: #D7EBF1;
	width:90%;
	margin-top: 60px;
}

.box-attent:before {
  content: '\f06a  複数ペアご利用の場合';
  font: var(--fa-font-solid);
  font-size: 16px;
  font-size: 1.6rem;
  position: absolute;
  top: -36px;
  left: -2px;
  height: 36px;
  padding: 8px 1em;
  color: #fff;
  border-radius: 10px 10px 0 0;
  background: #265BA8;
}

.box-attent ul li{
list-style: disc!important;
}

/*=========================
　　　　お問い合わせフォーム
=========================*/

.content_contact{
	display: inline-block;
  position: relative;
	width: 90%;
	max-width: 860px;
	font-size: inherit;
	text-align: left;
	padding-top: 40px;
}

.content_contact p{
	text-align: left;
}

.note{
	display: block;
	padding: 30px;
	background: #E8EDF5;
	font-size: 14px;
	margin-top: 30px;
	margin-bottom: 30px;
}

/*=========================
　　　データアップの手順
=========================*/

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 30px;
  padding-bottom: 0px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  max-width: 980px;
  margin: 0 auto;}
@media only screen and (max-width: 767px){
.tabs {
  margin-top: 20px;
  width: 100%;
  margin: 0 0;
	}}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/12);
  height: 40px;
  background-color: #d9d9d9;
  line-height: 1.4;
  font-size: 10px;
	padding: 6px 0;
  text-align: center;
  color: #565656;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
  display: none;
}
@media only screen and (max-width: 767px){
.tab_item {
  height: 40px;
  font-size: 10px;
}}

.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding-top: 40px;
	padding-bottom: 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#tab_01:target ~ #step-walk,
#tab_02:target ~ #step-beauty,
#tab_03:target ~ #step-room,
#tab_04:target ~ #step-golf,
#tab_05:target ~ #step-running,
#tab_06:target ~ #step-volleyball,
#tab_13:target ~ #step-baseball,
#tab_07:target ~ #step-soccer,
#tab_08:target ~ #step-tennis,
#tab_09:target ~ #step-basketball,
#tab_14:target ~ #step-handball,
#tab_10:target ~ #step-badminton,
#tab_11:target ~ #step-tabletennis,
#tab_12:target ~ #step-climbing{
display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs a:target + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}

.data-step{
max-width: 100%;
text-align: center;
}

/*各種データアップコンテンツ*/

.content_dataup{
	display: inline-block;
	width: 95%;
	max-width: 920px;
	text-align: center;
	margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.content_dataup h2{
display: inline-block;
border-bottom: solid 4px #e4bc18;
font-size: 28px;
}

.content_dataup h3{
font-size: 42px;
margin-top: 10px;
}

#walk{color:#24569d;}
#beauty{color:#c42f77;}
#room{color:#e64d23;}
#golf{color:#00a765;}
#running{color:#164f39;}
#volleyball{color:#75bc36;}
#baseball{color:#009900;}
#soccer{color:#00b3ad;}
#tennis{color:#7d799c;}
#basketball{color:#00547c;}
#handball{color:#0033cc;}
#badminton{color:#87cab0;}
#tabletennis{color:#00b6e3;}
#climbing{color:#6c7e58;}

@media screen and (max-width:767px){
.content_dataup{
margin-top: 30px;}
.content_dataup h2{
font-size: 24px;
line-height: 1.4;}
.content_dataup h3{
font-size: 32px;
margin-top: 10px
}}

.content_dataup p{
	padding: 15px 10px;
	text-align: center;
}
@media screen and (max-width:767px){
.content_dataup p{
  font-size: 16px;
	padding: 10px 5px;
	text-align: left;
}}

.container_dataup{
display:flex;
margin: 20px 0;
justify-content: center;
margin-bottom: 70px;
}
@media screen and (max-width:767px){
.container_dataup{
margin: 20px 0;
justify-content: center;
margin-bottom: 40px;
}}

.side-downarrow-pink,
.side-downarrow-blue,
.side-downarrow-blue02{
display:inline-block;
position: relative;
width:100px!important;
height: auto;
}
@media screen and (max-width:767px){
.side-downarrow-pink,
.side-downarrow-blue,
.side-downarrow-blue02{
width:50px!important;
height: auto;
}}


.side-downarrow-pink{
background: rgb(199,110,144);
background: linear-gradient(90deg, rgba(199,110,144,1) 0%, rgba(196,47,119,1) 100%);
}

.side-downarrow-blue,
.side-downarrow-blue02{
background: rgb(89,158,203);
background: linear-gradient(90deg, rgba(89,158,203,1) 0%, rgba(36,86,157,1) 100%);
}

.side-downarrow-pink img,
.side-downarrow-blue img,
.side-downarrow-blue02 img{
max-width: 78px;
margin-top: 30px;
}
@media screen and (max-width:767px){
.side-downarrow-pink img,
.side-downarrow-blue img,
.side-downarrow-blue02 img{
max-width: 40px;
margin-top: 20px;}
.side-downarrow-pink p,
.side-downarrow-blue p,
.side-downarrow-blue02 p{
display: none;
}}

.side-downarrow-pink p,
.side-downarrow-blue p{
color: #fff;
font-size:60px;
margin-top: 30px;
}

.side-downarrow-blue02 p{
color: #fff;
font-size:30px;
line-height: 1.2;
margin-top: 0px;
}

.side-arrowbottom-pink,
.side-arrowbottom-blue{
display: inline-block;
position: absolute;
bottom: -29px;
left: 0;
}

.side-arrowbottom-pink img,
.side-arrowbottom-blue img{
max-width: 100px;
}
@media screen and (max-width:767px){
.side-arrowbottom-pink,
.side-arrowbottom-blue{
bottom: -16px;
}
.side-arrowbottom-pink img,
.side-arrowbottom-blue img{
width: 44px;
}}

h4.ttl-step{
font-size: 22px;
text-align: left;
border-bottom: 4px dotted #e4bc18;
margin-bottom: 30px;
}

.wrap-movie01,
.wrap-photo01{
display: inline-block;
max-width: 820px;
width:100%;
padding: 20px 30px;
}
@media screen and (max-width:767px){
.wrap-movie01,
.wrap-photo01{
display: inline-block;
width:100%;
padding: 20px 15px;
}}

.wrap-movie01{
border: 2px solid #24569d;
}

.wrap-photo01{
border: 2px solid #c42f77;
}

.wrap-movie02{
display:flex;
}
@media screen and (max-width:767px){
.wrap-movie02{
flex-direction: column-reverse;
}}

.dataup-item01{
text-align:left;
flex-basis: 45%;
padding-right: 40px;
}
@media screen and (max-width:767px){
.dataup-item01{
text-align:left;
font-size: 16px;
padding-right: 0px;
}}

ul.dataup_steps{
list-style: none;
}
@media screen and (max-width:767px){
ul.dataup_steps{
margin-top:20px;}
ul.dataup_steps li{
font-size: 16px;
margin-bottom: 8px;
}}

.dataup-item02{
flex-basis: 55%;
}

.dataup-item02 img{
width: 100%;
}

.btn-movie{
display:inline-block;
border: 2px solid #ff0000;
font-size: 14px;
padding:5px 10px;
text-align: left;
margin-top: 20px;
background-color: #efefef;
}

.btn-upload{
display:inline-block;
font-size: 14px;
width: 80%;
padding:10px 30px;
text-align: center;
margin-top: 10px;
border-radius: 15px;
color: #fff;
background-color: #24569d;
}

@media screen and (max-width:767px){
.btn-movie{
font-size: 13px;
margin-top: 10px;}
.btn-upload{
font-size: 13px;
width: 80%;
padding:5px 20px;
margin-top: 10px;
}}