@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ------------------------------------------------
OKIFUL / layout css
------------------------------------------------ */

* {margin: 0;padding: 0;}
html {font-size: 62.5%;width: 100%;}

body{
font-size: 1.7rem;
font-family:'Noto Sans JP', sans-serif;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#fff;
color:#000;
line-height:1.7;
width: 100%;
position: relative;
}

.clearfix::after {content: "";display: block;clear: both;}

img {vertical-align:top;}

/*
a:hover img{
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity:0.6;
}*/

a {color:#fff;}
a:visited {color:#fff;}


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

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

#mainvisual {position:relative;height:800px;background:url(../img/mainvisual.jpg) 50% 50% / cover;  display: flex;
  justify-content: center;
  align-items: center;}
#mainvisual img {padding:40px 0 0 0;}


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

#about {background:#fff;}
#about .inner {width:1200px;padding:80px 0;margin:auto;}

#about .step1 {width:440px;margin:0 0 70px 100px;float:left;font-size:4rem;font-weight:700;text-align:center;}
#about .step2 {width:440px;margin:0 100px 70px 0;float:right;font-size:4rem;font-weight:700;text-align:center;}

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


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

#trouble {background:#cdd6dd;}
#trouble .inner {width:1200px;padding:70px 0;margin:auto;}

#trouble .title {display:block;margin:0 auto 40px auto;}
#trouble .list {display:block;margin:0 auto 40px auto;}

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

#trouble dl.box2 {width:74%;margin:0 auto 40px auto;font-size:1.9rem;vertical-align:middle;}
#trouble dl.box2 dt {float:left;padding:0 40px 0 0;}
#trouble dl.box2 dd {padding:30px 0 0 0;}

#trouble .box3 {width:80%;padding:40px;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;}
#trouble .box3 dl {width:80%;margin:0 auto 40px auto;font-size:2.2rem;font-weight:700;}
#trouble .box3 dl dt {float:left;padding:0 40px 0 0;}
#trouble .box3 dl dd {padding:20px 0 0 0;}

#trouble .box3 ul {list-style:none;font-size:2.2rem;font-weight:700;}
#trouble .box3 ul li {display:inline-block;width:48%;background:#f60;color:#fff;padding:10px 0;margin:0 20px 0 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:1200px;padding:90px 0 120px 0;margin:auto;}



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

#shipping {background:#fff;}
#shipping .inner {width:1060px;padding:70px 0;margin:auto;}

#shipping dl.explain {}
#shipping dl.explain dt {float:left;width:500px}
#shipping dl.explain dt p {width:90%;margin:30px auto;font-size:1.5rem;line-height:2;}
#shipping dl.explain dd {float:right;width:500px}

#shipping .nara {margin:60px 0;}



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

#answer2 {background:#ffc600;}
#answer2 .inner {width:1200px;position:relative;padding:60px 0 60px 0;margin:auto;}

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

#answer2 .illust {position:absolute;bottom:-60px;right:-50px;}



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

#about2 {background:#fff;}
#about2 .inner {width:1200px;position:relative;padding:60px 0 60px 0;margin:auto;}

#about2 .step1 {float:left;width:496px;margin:0 0 0 60px;}
#about2 .step2 {float:right;width:496px;margin:0 60px 0 0;}

#about2 dl {margin:0 0 30px 0;}
#about2 dl dt {float:left;margin:0 20px 0 0;}
#about2 dl dd {font-size:3rem;font-weight:700;padding:30px 0 0 0;}

#about2 .step1 .image {margin:64px 0 0 0;}
#about2 .step2 .image {margin:30px 0 0 0;}


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

#features {background:#fdf3e7;}
#features .inner {width:1060px;position:relative;padding:60px 0 60px 0;margin:auto;}

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

#features .boxA {width:1060px;background:#fbefd7;margin:0 auto 30px auto;padding:10px;border:3px solid #000;border-radius:10px;box-sizing: border-box;}
#features .boxA dl dt {float:left;margin:0 20px 0 0;}
#features .boxA dl dd {font-size:2rem;padding:30px 0 0 0;}
#features .boxA dl dd h3 {font-size:3.8rem;font-weight:900;color:#c31e1e;}
#features .boxA dl dd h3 span {font-size:3rem;}

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

#features .boxB {width:510px;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;}

#features .icon5 {width:100%;max-width:323px;}




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

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

#outline h2 {font-size:5rem;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:left;width:334px;margin:0 30px 0 0;}
#outline table {float:right;width:700px;font-size:1.8rem;border-collapse: collapse;margin:0 0 70px 0;}
#outline table th {padding:12px;border-bottom:2px solid #fff;text-align:left;vertical-align:top;}
#outline table td {padding:12px;border-bottom:2px solid #fff;}

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

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



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

#flow {background:#fff;}
#flow .inner {width:1100px;position:relative;padding:80px 0 80px 0;margin:auto;}

#flow h2 {font-size:5rem;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;}

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



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

h2#otherservice {display:block;height:140px;background:url(../img/otherservice_bg.jpg) 50% 50% / cover;color:#fff;text-align:center;vertical-align:middle;font-size:5rem;padding:60px 0 0 0;}

.wrap {background:#fff;padding:50px 80px;}
.otherservice {width:1060px;background:#fff;margin:auto;display:flex;flex-wrap: wrap;justify-content: space-between;}
.otherservice dl {width:290px;padding:15px;border:8px solid #ccc;}
.otherservice dl dt {display:table-cell;width:290px;height:100px;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;}*/
#faq {background:#fff;}
#faq .inner {width:1100px;position:relative;padding:80px 0 80px 0;margin:auto;}

#faq h2 {font-size:5rem;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 20px;position: relative;font-size:2.2rem;cursor: pointer;border-bottom:2px solid #ccc;}
#faq dt:before {content:"● ";color:#cbd5dd;}
#faq dt:hover {background:#f1f1f1;}
#faq dd {padding: 30px 40px 40px 50px;font-size:1.8rem;display: none;}





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

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

#form h2 {font-size:5rem;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:4px;}

#form h3 {font-size:3rem;color:#333;text-align:center;margin:0 0 30px 0;letter-spacing:4px;}

#form dl {clear:both;margin:0 0 10px 0;}
#form dl dt {width:370px;float:left;padding:20px 10px 10px 10px;text-align:right;font-size:2rem;font-weight:700;}
#form dl dd {width:560px;float:right;padding:10px;}

#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:15px;}
#form dl dd textarea {font-size:1.7rem;width:100%;height:7em;border:1px solid #ccc;padding:15px;}
#form ::placeholder {color:#D1D1D1;font-size:1.7rem;}

#form .buttons {clear:both;margin:auto;padding:50px 0 0 0;}
#form .buttons input {display:table;width:300px;padding:20px 30px;margin:auto;background:#ff6c00;border:none;color:#fff;font-size:1.8rem;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;display:flex;width:60%;}
#form .buttons2 input {display:table;width:250px;padding:20px 30px;margin:0 auto 10px auto;background:#ff6c00;border:none;color:#fff;font-size:1.8rem;}
#form .buttons2 input:hover {background:#d50000;cursor:pointer;}

#form .buttons2 .topback {display:table;width:250px;padding:20px 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:80px 0 80px 0;}
footer .inner {width:1000px;margin:auto;}
footer .inner .logo {display:block;margin:30px auto 0 auto;}

footer ul {display:table;margin:auto;list-style:none;}
footer ul li {display:inline;margin:0 40px 0 0;}
footer ul li a {text-decoration:none;position: relative;display: inline-block;}

footer ul li a::after {position: absolute;bottom: -4px;left: 0;content: '';width: 100%;height: 2px;
background: #fff;transform: scale(0, 1);transform-origin: center top;transition: transform .3s;}
footer ul li a:hover::after {transform: scale(1, 1);}


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



/* Accoudion
------------------------------------------------ */


.toggle_btn {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	display: block;
	width: 30px;
	height: 30px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.toggle_btn:before, .toggle_btn:after {
	display: block;
	content: '';
	background-color: #ccc;
	position: absolute;
	width: 20px;
	height: 3px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.toggle_btn:before {
	width: 3px;
	height: 20px;
}
.toggle_title.selected .toggle_btn:before {
	content: normal;
}


/* effect
------------------------------------------------ */

 .fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 600ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}

/* 2つ目の要素に200msのdelayをかける */
.effect > .fadein:nth-of-type(2) {
-moz-transition-delay:200ms;
-webkit-transition-delay:200ms;
-o-transition-delay:200ms;
-ms-transition-delay:200ms;
}
/* 3つ目の要素に400msのdelayをかける */
.effect > .fadein:nth-of-type(3) {
-moz-transition-delay:400ms;
-webkit-transition-delay:400ms;
-o-transition-delay:400ms;
-ms-transition-delay:400ms;
}
/* 4つ目の要素に600msのdelayをかける */
.effect > .fadein:nth-of-type(4) {
-moz-transition-delay:600ms;
-webkit-transition-delay:600ms;
-o-transition-delay:600ms;
-ms-transition-delay:600ms;
}




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

#sidebar {
font-size: 1.7rem;
padding-top: 80px;background: #fff;text-align: center;
display:block;
position: fixed;
right: -400px;
top: 0;
height: 100%;
width: 400px;
color: #000;
transition: .35s ease-in-out;
overflow-y:auto;}

#nav_sp {margin:0 0 100px 0;}
#nav_sp ul {list-style: none;margin-left: 0;}
#nav_sp > ul > li {position: relative;}
#nav_sp a {color: #000 !important;text-decoration: none !important;display: block;padding: 15px 0;border-bottom:1px solid #666;transition: background-color .3s linear;}
#nav_sp a:hover {text-decoration:none !important;background: #f60;color:#000 !important;}

/* sub-menu */
#nav_sp .sub-menu-nav {
position: fixed;
background: #033560;
color: #fff;
top: 0;
padding-top: 20px;
left: 400px;
width: 0;
height: 100%;
overflow: hidden;
transition: width .2s ease-out;
}
#nav_sp .sub-menu-nav a,
#nav_sp .sub-menu:hover .sub-menu-nav {
width: 400px;
}

/* nav-toggle */
#nav-toggle {position: fixed;top: 22px;right: 30px;height: 32px;cursor:pointer;}
#nav-toggle > div {position: relative;width: 50px;}
#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: 15px;}
#nav-toggle span:nth-child(3) {top: 30px;}

#overlay {display: none;position: fixed;background: rgba(0,0,0,.6);width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;}


/* サブメニューは開けない */
#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(-400px,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;}