@charset "UTF-8";

:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
    --base-color: #000;
    --link-color: #666;
    --linkhover-color: #999;
    --back-color: #F98827;
    --border-color: #ccc;
    --white-color: #fff;
}


body{
max-width:700px;
margin:0 auto!important;
}

/* 共通 */

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}


.sp-img{
display:none;
}

a {
    display:block;
    color: var(--link-color);
    text-decoration-line: none;
}
a:hover { 
    color: var(--linkhover-color);
}

.no-gutter{
margin-left: 0!important;
margin-right: 0!important;
padding-left: 0!important;
padding-right: 0!important;
}

#confirm .order-form-area{
background:none;
}

#confirm .conf-content input[type="image"]{
margin-bottom: 0px;
}

#thanks{
background:#FFF!important;
}

#thanks header h1,#thanks span{
color:#2A85FF;
}

#thanks img{
margin:20px auto;
width:40%;
display:block;
}


#thanks .green-header{
height:60px;
background-color:#2A85FF
}

header h1{
font-size:1.6rem;
text-align:center;
margin-top:40px;
}

section h2{
font-size:1.3rem;
}

header h1,section h2{
font-weight:bold;
}

.w-90{
max-width:90%;
}

.w-80{
max-width:80%;
}

.w-70{
max-width:70%;
}
/* 色 */

.bg-blue{
background:#DAF1FC;
}

.bg-white{
background:#FFF;
}

.bg-lightyellow{
background:#FFFAE6;
}

.bg-lightgray{
background:#FAFAFA;
}

.c-button{
cursor:pointer;
}

article{
position: relative;
}

.img-overlap1{
position: absolute;
left: 18%;
bottom: 28%;
max-width: 23%;
}

.img-overlap2{
position: absolute;
bottom: 28%;
right: 18%;
max-width: 23%;
}

.img-overlap3{
position: absolute;
bottom: 10%;
left: 18%;
max-width: 23%;
}

.img-overlap4{
position: absolute;
bottom: 10%;
right: 18%;
max-width: 23%;
}


/* コンテンツ */

.order-form-area{
background:#FAFAFA;
}

.order-form-area table{
width:80%;
margin:80px auto;
margin-top:0;
}

.order-form-area table th{
width:30%;
padding:18px 0;
}

.order-form-area table th p{
background: #2B85FF;
color: #FFF;
padding: 18px;
margin: 0;
}

.order-form-area table td p{
background: #FFF;
padding: 18px 10px;
margin: 0;
text-align:left;
}

.order-form-area table td{
width:70%;
padding:18px 0;
}

.order-form-area input[type="text"],
.order-form-area input[type="tel"],
.order-form-area input[type="email"],
.order-form-area select{
border: solid 1px #CCC;
}

.order-form-area input,.order-form-area select{
background: #FFF;
padding: 18px;
width: 100%;
-webkit-appearance: none;
}

.order-form-area input[type="image"],.conf-content input[type="image"]{
max-width:100%;
background:none;
margin:0 auto;
display:block;
margin-bottom: 60px;
}

th.plan-change {
text-align:right;
padding:0!important;
}

th.plan-change a{
color:#000;
display:inline;
}

th.plan-change a:hover{
text-decoration:none;
}

p.err{
font-size: 0.8rem;
color:#E5004C;
}

.slick-list{
margin-bottom:60px!important;
}



.polka {
background:#B0E5F7;
}

.polka2 {
background:#D9F0FB;
}


.consent-area{
margin-left:auto;
margin-right:auto;
max-width:450px;
}

.consent-area p{
margin-bottom:0;
text-align:left;
}

.consent-area label{
font-size:1.6rem;
font-weight:bold;
vertical-align: middle;
}

.consent-area input[type="checkbox"] {
  transform: scale(2);
  margin: 0 13px 0 0;
}

.scroll-box h3{
color:#ED1E79;
}

.scroll-box{
width: 90%;/* 横幅を200pxに指定 */
max-height: 350px;/* 横幅を200pxに指定 */
border: 1px solid #000;/* わかりやすくボーダーを引く */
overflow-y: scroll;/* 縦方向にスクロール可能にする */
padding:40px;
border-radius:10px;
margin:0 auto;
overflow-y: auto;
direction: ltr;
background:#FFF;
scrollbar-width: none;
scrollbar-color: #ff6347 #fffacd;
}

.scroll-box::-webkit-scrollbar {
width: 20px;
height:20px;
}

.scroll-box::-webkit-scrollbar-track{
background: none;
}

.scroll-box::-webkit-scrollbar-thumb{
border-radius: 5px;
background: #ED1E79;
}

.scroll-box th{
text-align:left;
}

.scroll-box{
text-align:left;
}

.scroll-box h2{
font-size:1.3rem;
margin-top: 30px;
font-weight:bold;
}

p.page-back img{
margin-bottom:60px;
max-width:90%;
}

.plan-select{
padding: 60px 40px;
background:#B0EBFF;
}

.plan-select h2{
color:#EC7300;
margin-top:60px;
margin-bottom:30px;
}

.image-gallery{
margin-bottom:35px;
}

.thanks-content{
padding-bottom:60px;
}

.bottom-fix img{
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

/* フッター */
footer{
text-align:center;
padding:18px;
font-size:0.8rem;
background:#2A85FF;
color:#FFF;
padding-bottom:200px;
}

footer a{
display:inline!important;
color:#FFF;
}

#thanks footer,#confirm footer,#low footer,#policy footer{
padding-bottom:25px;
}

/* メディアクエリ */



@media (max-width: 767px) {
footer{
padding-bottom:145px;
}
#thanks footer,#confirm footer,#low footer,#policy footer{
padding-bottom:25px;
}
footer span{
display:block;
margin-bottom:16px;
}
.order-form-area table{
width:85%;
margin:30px auto 80px;
}
.order-form-area table th,.order-form-area table td{
width:100%;
display:block;
padding:0;
}
.order-form-area table th{
padding-top:20px;
background-color:inherit;
}
.order-form-area table th p{
padding:0;
color:#2B85FF;
background: unset;
}

.order-form-area input[type="text"], .order-form-area input[type="tel"], .order-form-area input[type="email"],.order-form-area select{
border-radius: 35px;
border: solid 2px #2B85FF;
}
.order-form-area input[type="image"],.conf-content input[type="image"]{
max-width:90%;
}
.consent-area input[type="checkbox"] {
transform: scale(1.8);
margin: 0 10px 0 0;
}
.consent-area p{
padding:0 25px;
}
.consent-area label{
font-size:1.2rem;
}
.thanks-content p{
text-align:left;
}
.scroll-box{
padding:30px 15px
}
.scroll-box h2{
font-size:0.9rem;
}

.scroll-box p{
font-size:0.8rem;
}
.slick-slide{
padding:0 3px;
}
.pc-img{
display:none;
}
.sp-img{
display:block;
}
}

@media (min-width: 576px) {
  .container {
    max-width: 100%!important;
  }
}

/* ##########################################
特定商取引法に基づく表記|プライバシーポリシー
########################################## */

.low-content td,.policy-content td{
line-height:2.0;
}

.policy-content th{
text-align:left;
}

.policy-content h1 span{
display:block;
font-size:1.4rem;
}

.scroll-box table,.policy-content table,.low-content table{
width:100%;
font-size:1rem;
}

.scroll-box table th,.policy-content table th,.low-content table th{
width:30%;
padding:20px;
border-bottom:solid 1px #666;
}

.scroll-box table td,.policy-content table td,.low-content table td{
text-align:left;
width:70%;
padding:20px;
border-bottom:solid 1px #666;
}


@media (max-width: 767px) {
.low-content h1,.policy-content h1{
font-size:2rem;
}
.scroll-box table th,.scroll-box table td,.policy-content table th,.policy-content table td
,.low-content table th,.low-content table td{
width:100%;
display:block;
}
.scroll-box table th,.policy-content table th,.low-content table th{
background:#666;
color:#FFF;
}
.thumnail .slick-track{
justify-content: center!important;
}
.bg-img{
background-image: url('../img/sp-bg-img.jpg');
background-size: cover;
background-position: 50% 0;
}

.bg-img2{
background-image: url('../img/sp-bg-img2.jpg');
background-size: cover;
background-position: 50% 0;
}
}


/* 共通 余白 */

/* ##########################################
margin,padding min10-max120 temp
########################################## */

.mt-10{
margin-top:10px;
}

.mt-20{
margin-top:20px;
}

.mt-30{
margin-top:30px;
}

.mt-40{
margin-top:40px;
}

.mt-50{
margin-top:50px;
}

.mt-60{
margin-top:60px;
}

.mt-70{
margin-top:70px;
}

.mt-80{
margin-top:80px;
}

.mt-90{
margin-top:90px;
}

.mt-100{
margin-top:100px;
}

.mt-110{
margin-top:110px;
}

.mt-120{
margin-top:120px;
}

.mb-10{
margin-bottom:10px;
}

.mb-20{
margin-bottom:20px;
}

.mb-30{
margin-bottom:30px;
}

.mb-40{
margin-bottom:40px;
}

.mb-50{
margin-bottom:50px;
}

.mb-60{
margin-bottom:60px;
}

.mb-70{
margin-bottom:70px;
}

.mb-80{
margin-bottom:80px;
}

.mb-90{
margin-bottom:90px;
}

.mb-100{
margin-bottom:100px;
}

.mb-110{
margin-bottom:110px;
}

.mb-120{
margin-bottom:120px;
}

.p-10{
padding:10px;
}

.p-20{
padding:20px;
}

.p-30{
padding:30px;
}

.p-40{
padding:40px;
}

.p-50{
padding:50px;
}

.p-60{
padding:60px;
}

.p-70{
padding:70px;
}

.p-80{
padding:80px;
}

.pt-10{
padding-top:10px;
}

.pt-20{
padding-top:20px;
}

.pt-30{
padding-top:30px;
}

.pt-40{
padding-top:40px;
}

.pt-50{
padding-top:50px;
}

.pt-60{
padding-top:60px;
}

.pt-70{
padding-top:70px;
}

.pt-80{
padding-top:80px;
}

.pt-90{
padding-top:90px;
}

.pt-100{
padding-top:100px;
}

.pt-110{
padding-top:110px;
}

.pt-120{
padding-top:120px;
}


.pb-10{
padding-bottom:10px;
}

.pb-20{
padding-bottom:20px;
}

.pb-30{
padding-bottom:30px;
}

.pb-40{
padding-bottom:40px;
}

.pb-50{
padding-bottom:50px;
}

.pb-60{
padding-bottom:60px;
}

.pb-70{
padding-bottom:70px;
}

.pb-80{
padding-bottom:80px;
}

.pb-90{
padding-bottom:90px;
}

.pb-100{
padding-bottom:100px;
}

.pb-110{
padding-bottom:110px;
}

.pb-120{
padding-bottom:120px;
}