@charset "UTF-8";

/* ----------------------------------
OKIFUL / sp css
---------------------------------- */

html{
overflow-x : hidden;
overflow-y : auto;
}

.sp {display: none; }


@media screen and (max-width: 1099px), screen and (orientation: landscape) and (max-width: 1100px) {

.pc {display: none !important;}
.sp {display: block !important;}

body {font-size:1.5rem;}


/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}


/* sidebar [SP MENU]
------------------------------------------------------------- */

#sidebar {
display:block;
position: fixed;
right: -300px;
top: 0;
height: 100%;
width: 300px;
color: #fff;
transition: .35s ease-in-out;
overflow-y:auto;
}

#nav_sp {margin:0 0 100px 0;}

/* nav-toggle */
#nav-toggle {position: fixed;top: 16px;right: 10px;height: 32px;cursor:pointer;}
#nav-toggle > div {position: relative;width: 40px;}
#nav-toggle span {width: 100%;height: 4px;left: 0;display: block;background: #f60;position: absolute;transition: .35s ease-in-out;}

#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 12px;}
#nav-toggle span:nth-child(3) {top: 24px;}

/* サブメニューは開けない */
#nav_sp .sub-menu-head:after,
#nav_sp .sub-menu-nav {display: none;}
#nav-toggle {display: block;}

/* nav open */
.open {/*overflow: hidden;*/}
.open #overlay {display: block;}
.open #sidebar  {transform: translate3d(-300px,0,0);}

/* #nav-toggle close */
.open #nav-toggle span:nth-child(1) {top: 11px;transform: rotate(45deg);}
.open #nav-toggle span:nth-child(2) {width: 0;left: 50%;}
.open #nav-toggle span:nth-child(3) {top: 11px;transform: rotate(-45deg);}

/* z-index */
#overlay {z-index: 2;}
#sidebar {z-index: 300;}
#nav-toggle {z-index: 400;}




/* header
------------------------------------------------------------- */

header {width:100%;height:60px;text-align:center;background-color: rgba(255,255,255,0.0);position:fixed;z-index:100;transition: .3s;}
header h1 {width:160px;padding:10px 0 0 10px;transition: .3s;}
header a {color:#fff;text-decoration:none;}

#mainvisual {position:relative;height:100vh;background:url(../img/mainvisual.jpg) 50% 50% / cover;}
#mainvisual img {width:90%;margin:auto;padding:0;}


/* about
------------------------------------------------------------- */

#about {background:#fff;}
#about .inner {width:90%;padding:40px 5%;margin:auto;}

#about .step1 {width:100%;margin:0 0 70px 0;float:none;font-size:3rem;font-weight:700;text-align:center;}
#about .step2 {width:100%;margin:0 0 70px 0;float:none;font-size:3rem;font-weight:700;text-align:center;}

#about .step1 img {width:100%;max-width:440px;}
#about .step2 img {width:100%;max-width:440px;}

#about .fyc {display:block;width:100%;max-width:600px;margin:auto;}
#about p.lead {font-size:1.8rem;text-align:left;margin:40px 0 0 0;}


/* trouble
------------------------------------------------------------- */

#trouble {background:#cdd6dd;}
#trouble .inner {width:90%;padding:40px 5%;margin:auto;}

#trouble .title {display:block;width:100%;margin:0 auto 40px auto;}
#trouble .list {display:block;width:100%;max-width:600px;margin:0 auto 40px auto;}

#trouble .box1 {width:90%;padding:5%;margin:0 auto 40px auto;background:#fff;border-radius:10px;text-align:center;font-size:1.9rem;font-weight:500;box-sizing: border-box;}
#trouble .box1 .title {display:block;max-width:458px;padding:0 0 5px 0;margin:0 auto 40px auto;border-bottom:3px solid #000;}

#trouble dl.box2 {width:100%;margin:0 auto 40px auto;font-size:1.8rem;vertical-align:middle;}
#trouble dl.box2 dt {float:none;padding:0 0 0 0;text-align:center;}
#trouble dl.box2 dd {padding:30px 0 0 0;}

#trouble .box3 {width:90%;padding:5%;margin:0 auto 40px auto;background:rgba(255,255,255,0.5);border:1px solid #ccc;border-radius:10px;text-align:center;font-size:1.9rem;box-sizing: border-box;}
#trouble .box3 dl {width:100%;margin:0 auto 40px auto;font-size:2rem;font-weight:700;}
#trouble .box3 dl dt {float:none;padding:0 0 0 0;}
#trouble .box3 dl dd {padding:20px 0 0 0;}

#trouble .box3 ul {list-style:none;font-size:1.8rem;font-weight:700;}
#trouble .box3 ul li {display:inline-block;width:90%;background:#f60;color:#fff;padding:5%;margin:0 0 20px 0;text-align:center;}
#trouble .box3 ul li:last-child {margin:0;}


/* answer
------------------------------------------------------------- */

#answer {background:url(../img/answer_bg.jpg) 50% 50% / cover;}
#answer .inner {width:90%;padding:60px 5% 80px 5%;margin:auto;}
#answer .inner img {display:block;width:100%;max-width:600px;margin:auto;}


/* shipping
------------------------------------------------------------- */

#shipping {background:#fff;}
#shipping .inner {width:90%;padding:40px 5%;margin:auto;}

#shipping dl.explain {}
#shipping dl.explain dt {float:none;width:100%;}
#shipping dl.explain dt img {display:block;width:100%;max-width:520px;margin:auto;}
#shipping dl.explain dt p {width:90%;margin:30px auto;font-size:1.6rem;line-height:2;}
#shipping dl.explain dd {float:none;width:100%;}
#shipping dl.explain dd img {display:block;width:100%;max-width:520px;margin:auto;}

#shipping .nara {margin:60px 0;}
#shipping .nara img {display:block;width:70%;max-width:470px;margin:auto;}




/* answer2
------------------------------------------------------------- */

#answer2 {background:#ffc600;margin:0 0 40px 0;}
#answer2 .inner {width:90%;position:relative;padding:60px 5% 100px 5%;margin:auto;}

#answer2 dt {font-size:3.4rem;margin:0 0 20px 0;font-weight:900;text-align:center;color:#c31e1e;text-shadow: #fff 4px 4px 0;}
#answer2 dd {font-size:2rem;font-weight:700;text-align:center;}

#answer2 .illust {position:absolute;bottom:-70px;right:20%;}



/* about2
------------------------------------------------------------- */

#about2 {background:#fff;}
#about2 .inner {width:90%;position:relative;padding:60px 5%;margin:auto;}

#about2 .step1 {float:none;width:100%;margin:0 0 2em 0;}
#about2 .step2 {float:none;width:100%;margin:0 0 0 0;}

#about2 dl {display:table;margin:0 auto 30px auto;}
#about2 dl dt {float:left;margin:0 20px 0 0;}
#about2 dl dt img {width:100px;}

#about2 dl dd {font-size:2.2rem;font-weight:700;padding:10px 0 0 0;}

#about2 .step1 .arrow {display:block;width:100%;max-width:496px;margin:auto;}
#about2 .step1 .image {display:block;width:100%;max-width:496px;margin:auto;}
#about2 .step2 .arrow {display:block;width:100%;max-width:496px;margin:auto;}
#about2 .step2 .image {display:block;width:100%;max-width:496px;margin:auto;}




/* features
------------------------------------------------------------- */

#features {background:#fdf3e7;}
#features .inner {width:90%;position:relative;padding:10px 5%;margin:auto;}

#features h2 {width:100%;text-align:center;padding:80px 0 0 0;margin:0 0 20px 0;background:url(../img/features_bg.jpg) 0 0 / cover;}
#features h2 img {display:block;width:80%;max-width:600px;margin:auto;}


#features .boxA {width:100%;background:#fbefd7;margin:0 auto 30px auto;padding:20px;border:3px solid #000;border-radius:10px;box-sizing: border-box;}
#features .boxA dl dt {float:none;margin:0 0 0 0;text-align:center;}
#features .boxA dl dd {font-size:1.8rem;padding:20px 0 0 0;}
#features .boxA dl dd h3 {font-size:3.2rem;font-weight:900;color:#c31e1e;text-align:center;}
#features .boxA dl dd h3 span {font-size:2.6rem;}

#features .flex {display:flex;flex-wrap: wrap;justify-content: space-between;}

#features .boxB {width:100%;background:#fff;margin:0 0 30px 0;padding:30px;border:3px solid #000;border-radius:10px;box-sizing: border-box;}
#features .boxB dl dt {margin:0 0 20px 0;text-align:center;}
#features .boxB dl dd {font-size:1.6rem;}
#features .boxB dl dd h3 {font-size:3rem;font-weight:900;color:#c31e1e;text-align:center;}
#features .boxB dl dd h3 span {font-size:2.6rem;}



/* outline
------------------------------------------------------------- */

#outline {background:url(../img/outline_bg.jpg) 50% 50% / cover;}
#outline .inner {width:90%;position:relative;padding:80px 5% 120px 5%;margin:auto;color:#fff;}

#outline h2 {font-size:2.4rem;color:#fff;text-align:center;background:url(../img/outline_title_line.png) 50% 100% no-repeat;padding:0 0 50px 0;margin:0 0 80px 0;}

#outline .pict {float:none;display:block;width:100%;max-width:334px;margin:0 auto 30px auto;}
#outline table {float:none;width:100%;font-size:1.6rem;border-collapse: collapse;margin:0 0 50px 0;}
#outline table th {display:block;padding:10px;border-bottom:1px solid #fff;text-align:left;vertical-align:top;}
#outline table td {display:block;padding:10px 20px;border-bottom:1px solid #fff;}

#outline h3 {font-size:3rem;text-align:center;margin:0 0 30px 0;}

#outline ul {list-style:none;}
#outline ul li {border-bottom:1px solid #fff;padding:16px 0 16px 2em;}
#outline ul li:before {content:"● ";margin:0 0 0 -1em;}



/* flow
------------------------------------------------------------- */

#flow {background:#fff;}
#flow .inner {width:90%;position:relative;padding:80px 5%;margin:auto;}

#flow h2 {font-size:3rem;color:#333;text-align:center;background:url(../img/flow_title_line.png) 50% 100% no-repeat;padding:0 0 50px 0;margin:0 0 40px 0;letter-spacing:3px;}

#flow .pict {display:block;margin:auto;width:100%;max-width:1071px;}



/* otherservice
------------------------------------------------------------- */

h2#otherservice {height:180px;background:url(../img/otherservice_bg.jpg) 50% 50% / cover;color:#fff;text-align:center;vertical-align:middle;font-size:3rem;line-height:1;padding:0;display: flex;justify-content: center;align-items: center;}

.wrap {background:#fff;padding:5%;}
.otherservice {width:90%;background:#fff;margin:auto;display:flex;flex-wrap: wrap;justify-content: space-between;}
.otherservice dl {width:90%;padding:15px;border:8px solid #ccc;margin:0 0 10px 0;}
.otherservice dl dt {display:block;width:100%;height:initial;vertical-align:middle;color:#c00;border-bottom:2px solid #ccc;font-size:2.4rem;font-weight:700;padding:0 0 20px 0;text-align:center;}
.otherservice dl dd {padding:10px;margin:20px 0 0 0;font-size:1.8rem;line-height:2;}


/* faq
------------------------------------------------------------- */

/*#faq {background:#fff url(../img/faq_bg.jpg) 50% 100% no-repeat;background-size: contain;}*/
#faq {background:#fff;}
#faq .inner {width:90%;position:relative;padding:80px 5% 80px 5%;margin:auto;}

#faq h2 {font-size:3rem;color:#333;text-align:center;background:url(../img/flow_title_line.png) 50% 100% no-repeat;padding:0 0 50px 0;margin:0 0 40px 0;letter-spacing:10px;}

#faq dl {margin:0 0 0 0;}
#faq dt {padding: 14px 50px 14px 14px;margin:0 0 0 0;position: relative;font-size:1.7rem;cursor: pointer;border-bottom:2px solid #ccc;}
#faq dt:before {content:"● ";color:#cbd5dd;margin:0 0 0 -1em;}
#faq dt:hover {background:#f1f1f1;}
#faq dd {padding: 30px 40px 40px 50px;font-size:1.6rem;display: none;}



/* form
------------------------------------------------------------- */

/*#form {background:#e8edf1;color:#333;}*/
#form {background:url(../img/form_bg.jpg) 50% 50% / cover;}
#form .inner {width:90%;position:relative;padding:50px 0 50px 0;margin:auto;}

#form h2 {font-size:3rem;color:#333;text-align:center;background:url(../img/flow_title_line.png) 50% 100% no-repeat;padding:0 0 50px 0;margin:0 0 40px 0;letter-spacing:1px;}

#form dl {clear:both;margin:0 0 10px 0;}
#form dl dt {width:100%;float:none;padding:20px 0;text-align:left;font-size:1.8rem;font-weight:700;}
#form dl dd {width:100%;float:none;padding:10px;box-sizing: border-box;}

#form dl dt span {background:#ea1a0e;color:#fff;font-size:1.4rem;padding:3px 16px;}
#form dl dt span.option {background:#8b97a1;color:#fff;font-size:1.4rem;padding:3px 16px;}
#form dl dd p {}
#form dl dd input {font-size:1.7rem;width:100%;border:1px solid #ccc;padding:10px;box-sizing: border-box;}
#form dl dd textarea {font-size:1.7rem;width:100%;height:7em;border:1px solid #ccc;padding:10px;box-sizing: border-box;}
#form ::placeholder {color:#D1D1D1;font-size:1.6rem;}

#form .buttons {clear:both;margin:auto;padding:50px 0 0 0;}
#form .buttons input {display:table;width:300px;padding:15px 30px;margin:auto;background:#ff6c00;border:none;color:#fff;font-size:1.7rem;transition: 0.3s ease-in-out;}
#form .buttons input:hover {background:#d50000;cursor:pointer;}

#form .buttons2 {clear:both;margin:auto;padding:50px 0 0 0;text-align:center;}
#form .buttons2 input {display:table;width:250px;padding:15px 30px;margin:0 auto 10px auto;background:#ff6c00;border:none;color:#fff;font-size:1.7rem;}
#form .buttons2 input:hover {background:#d50000;cursor:pointer;}

#form .buttons2 .topback {display:table;width:250px;padding:15px 30px;margin:0 auto 10px auto;background:#ff6c00;border:none;color:#fff;font-size:1.6rem;text-decoration:none;}
#form .buttons2 .topback:hover {background:#d50000;cursor:pointer;}



/* footer
------------------------------------------------------------- */

footer {background:#d50000;padding:50px 0 50px 0;}
footer .inner {width:90%;padding:5%;margin:auto;}
footer .inner .logo {display:block;margin:30px auto 0 auto;}

footer ul {display:flex;flex-wrap: wrap; margin:auto;list-style:none;}
footer ul li {display:inline;width:50%;margin:0 0 10px 0;text-align:center;border-right:1px solid #ccc;box-sizing: border-box;}
footer ul li a {display:block;padding:10px 0;text-decoration:none;position: relative;border-bottom:1px solid #ccc;box-sizing: border-box;}
footer ul li:nth-child(2n) {border-right:none;}

footer ul li a::after {display:none;}
footer ul li a:hover::after {transform: scale(1, 1);}


.pagetop {display: none;position: fixed;bottom: 30px;right: 30px;z-index:1000;}
.pagetop a {display: block;}
.pagetop img {width:50px;}




/* END
------------------------------------------------------------- */
}