@charset "UTF-8";
/* CSS Document */

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2019/07/03
* Last update : 2019/07/08
* Made by     : Murata Hiroyuki
* Updated by  : Murata Hiroyuki
*
**********************************************************************/


/*************************************************************************************************************************
* reset
*************************************************************************************************************************/
html{ height: 100%; overflow-y: scroll;}
body{ height: 100%; margin: 0; padding: 0; font-family: YakuHanJP_Noto, 'Noto Sans JP', sans-serif; text-align: justify; text-justify: inter-ideograph; -webkit-text-size-adjust: 100%;}
img{ width: 100%; max-width: 100%; height: auto; border: 0; vertical-align: bottom;}
svg{ vertical-align: bottom;}
form{ margin: 0; padding: 0;}
button, input, select, textarea{ font-family: inherit; font-size: 100%;}
p{ margin: 0; padding: 0;}
a, a:hover{ text-decoration: none; outline: none;}
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; font-size: 0; line-height: 0;}
ul, ol, dl, dt, dd{ margin: 0; padding: 0;}
li{ margin: 0; padding: 0; list-style: none;}
table{ border: 0; border-collapse: collapse; border-spacing: 0;}
caption, th{ text-align: left;}
header, nav, main, article, aside, section, footer{ display: block;}
*{ box-sizing: border-box;}


/*************************************************************************************************************************
* common
*************************************************************************************************************************/
html{ font-weight: 500; font-size: 15px;}

@media print, screen and (min-width: 1000px){
  html{ font-size: 14px;}
}



/*************************************************************************************************************************
* firstview
*************************************************************************************************************************/
.firstview{ height: 530px; position: relative; overflow: hidden; background-color: #ffe100; }/* background: url("../img/bg_dot.png") repeat 0 0/20px 20px;*/
.firstview__title{ background: #006934; width: 100%; height: 393px; position: absolute; top: 30px; left: 0; border-top: 6px solid #d2ac6f; border-bottom: 6px solid #d2ac6f;}
.firstview__title::after{ content: ""; background: url("../img/fv_people.svg") no-repeat 0 0/contain; width: 339px; height: 123px; position: absolute; bottom: -86px; left: 50%; transform: translateX(-50%);}
.firstview__title h1{ background: url("../img/fv_title_sp.svg") no-repeat 0 0/contain; width: 339px; height: 285px; position: absolute; top: 46px; left: 50%; transform: translateX(-50%);}

@media print, screen and (min-width: 520px){
  .firstview__title h1::before{ content: ""; background: url("../img/fv_items.svg") no-repeat 0 0/contain; width: 519px; height: 285px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); overflow: auto; text-indent: 1; white-space: normal;}
}

@media print, screen and (min-width: 740px){
  .firstview{ height: 650px;}
  .firstview__title{ height: 470px; top: 40px; border-top-width: 10px; border-bottom-width: 10px;}
  .firstview__title::after{ width: 500px; height: 180px; bottom: -114px;}
  .firstview__title h1{ background-image: url("../img/fv_title_pc.svg"); width: 740px; height: 406px; top: 45px;}
  .firstview__title h1::before{ display: none;}
}



/*************************************************************************************************************************
* content
*************************************************************************************************************************/
.content{ padding: 40px 0 60px;}

@media print, screen and (min-width: 1000px){
  .content{ padding: 80px 0 120px;}
}



/* steps
*************************************************************************************************************************/
.steps{ display: flex; justify-content: space-between; width: calc(100% - 60px); margin: 0 auto; position: relative;}
.steps::after{ content: ""; width: calc(100% - 60px); height: 1px; border-bottom: 2px dotted #000; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,1px);}

.steps__list{ height: 35px; font-weight: 700; font-size: 14px; line-height: 1; position: relative;}
.steps__list::after{ content: ""; background: #fff; width: 16px; height: 16px; border: 5px solid #666666; border-radius: 50%; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,50%); box-sizing: border-box; z-index: 2;}

.steps__list--active{ color: #e7380d;}
.steps__list--active::after{ width: 22px; height: 22px; border-color: #e7380d;}

@media print, screen and (max-width: 330px){
  .steps__list{ font-size: 13px;}
}

@media print, screen and (min-width: 1000px){
  .steps{ justify-content: flex-start; background: #fafafa; width: 900px; margin: 0 auto; border: 1px solid #ddd;}
  .steps::after{ display: none;}

  .steps__list{  width: calc(100% / 3); height: 60px; padding: 0 0 0 15px; font-size: 15px; line-height: 58px; text-align: center;}
  .steps__list::after{ display: none;}
  .steps__list::before{ content: ""; background: #fafafa; width: 42px; height: 42px; position: absolute; top: 50%; right: -21px; border-top: 1px solid #d5d5d5;  border-right: 1px solid #d5d5d5; transform-origin: center; transform: translateY(-50%) scaleX(.5) rotate(45deg);}
  .steps__list:last-child::before{ display: none;}
  
  .steps__list:nth-child(1){ z-index: 3;}
  .steps__list:nth-child(2){ z-index: 2;}
  .steps__list:nth-child(3){ z-index: 1;}
  
  .steps__list--active{ background: #e7380d; color: #fff;}
  .steps__list--active::before{ background: #e7380d; border: none;}
}



/* lead
*************************************************************************************************************************/
.lead__text{ margin: 40px 0 0; padding: 0 16px; line-height: 1.7; text-align: center;}
.lead__confirm{ margin: 40px 0 0; padding: 0 16px; line-height: 1.7; text-align: center;}
.lead__thanks{ margin: 45px 0 0; padding: 0 16px; line-height: 1.7; text-align: center;}
.lead__thanks strong{ display: block; margin: 0 0 15px; font-weight: 700; font-size: 18px;}
.lead__start{ margin: 40px 16px 20px 16px; padding: 60px 0 0 0; position: relative; line-height: 1.7; text-align: center; border-bottom: 1px solid #000;}
.lead__start::before{ content: ""; background: url("../img/icon_closed.svg") no-repeat 0 0/contain; width: 40px; height: 40px; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.lead__start strong{ display: block; margin: 0 0 15px; font-weight: 700; font-size: 18px;}
.lead__closed{ padding: 60px 16px 0; position: relative; line-height: 1.7; text-align: center;}
.lead__closed::before{ content: ""; background: url("../img/icon_closed.svg") no-repeat 0 0/contain; width: 40px; height: 40px; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.lead__closed strong{ display: block; margin: 0 0 15px; font-weight: 700; font-size: 18px;}

@media print, screen and (max-width: 330px){
  .lead__closed{ font-size: 14px;}
}

@media print, screen and (max-width: 330px){
  .lead__closed{ font-size: 14px;}
}

.form__list.top{ padding: 0 16px 16px 16px;}
@media print, screen and (min-width: 1000px){
  .lead__text{ width: 900px; margin: 55px auto 0; padding: 0; font-size: 15px; line-height: 2;}
  .lead__confirm{ width: 900px; margin: 55px auto 0; padding: 0; font-size: 15px; line-height: 2;}
  .lead__thanks{ margin: 90px 0 0; padding: 0; font-size: 15px; line-height: 2;}
  .lead__thanks strong{ margin: 0 0 25px; font-size: 24px;}
  .lead__thanks br{ display: none;}
  .lead__start{ width: 600px; margin: 60px auto 30px auto;}
  .lead__start strong{ font-size: 24px;}
	.form__list.top{ width: 500px; margin: 0 auto 50px auto; padding: 0;}
  .lead__closed{ padding: 60px 0 0; font-size: 15px; line-height: 2;}
  .lead__closed strong{ margin: 0 0 25px; font-size: 24px;}
  .lead__closed .brSP{ display: none;}
}



/* form
*************************************************************************************************************************/
.form{ margin: 40px 0 0;}
.form__title{ margin: 0 16px; padding: 0 0 0 13px; border-left: 5px solid #000; font-weight: 700; font-size: 16px; line-height: 1.5;}
.form__list.second{ margin-top: 40px;}
.form__list-item{ margin: 0 0 20px 0; font-size: 15px; text-indent: -1.3em;
padding-left: 1.3em !important; }

@media print, screen and (max-width: 999px){
	form .form__list-item { text-indent: inherit; margin-left: 16px; padding-left: 0 !important; }
}

.form__list-item::before{ content: "●"; margin: 0 5px 0 0; color: #e7380d;}
.form__box{ margin: 35px 0 0;}
.form__inner{ background: #fafafa;}
.form__col-term{ background: #e6e6e6; padding: 9px 16px;}
.form__col-desc{ padding: 20px 16px;}
@media print, screen and (max-width: 999px){
	.form__col-desc{ background: #fafafa; }
}

.form__optional{ display: inline-block; background: #0071bc; margin: 0 0 0 10px; padding: 2px 8px; font-size: 11px; color: #fff;}
.kids-second{ display: none !important; margin: 40px 0 0 0;}
.kids-second.visible{ display: block !important;}

.form__name{ display: flex; align-items: center;}
.form__name dt{ width: 36px; margin: 0 10px 0 0; text-align: right;}
.form__name dt:nth-of-type(2){ margin: 0 10px 0;}
.form__name dd{ width: calc((100% - 102px) / 2);}

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

.input__text{ background: #fafafa; height: 44px; padding: 0 10px; border: 2px solid #ccc; border-radius: 6px; font-size: 15px; line-height: 1.5; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.input__text--default{ width: 100%;}
.input__text--postcode{ width: calc(100% - 141px);}
.input__text--pref,
.input__text--tel{ width: 100%;}
.input__text--dob{ width: calc(100% - 1rem - 10px); margin: 0 10px 0 0; text-align: center;}
.input__text--num{ width: 45px; margin: 0 10px 0 0; text-align: center;}

.btn__search--address{ display: block; background: #4d4d4d; width: 125px; height: 44px; border-radius: 6px; font-weight: 700; line-height: 44px; color: #fff; text-align: center;}

.form__radio{ display: flex; justify-content: space-between;}
.form__radio li{ width: calc(50% - 8px); position: relative;}
.input__radio{ opacity: 0; width: 100%; height: 44px;}
.label__radio{ display: flex; justify-content: center; align-items: center; background: #4d4d4d; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 6px; color: #fff; cursor: pointer; transition: background .1s linear;}
.input__radio:checked + .label__radio{ background: #e7380d;}
#gender-m:checked + .label__radio{ background: #2fa6c1;}
#gender-f:checked + .label__radio{ background: #e25990;}

.form__dob{ display: flex;}
.form__dob--year{ width: calc(100% - 180px); max-width: 100px;}
.form__dob--month,
.form__dob--day{ width: 70px; margin: 0 0 0 20px;}

.textarea__remarks{ background: #fafafa; width: 100%; height: 100px; padding: 10px; border: 2px solid #ccc; border-radius: 6px; font-size: 15px; line-height: 1.5; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0;}
input[type=number]{ -moz-appearance:textfield;}

::placeholder{ color: #b3b3b3;}
.input__text--dob::placeholder,
.input__text--num::placeholder{ text-align: center;}

.form__text{ margin: 20px 0 0; padding: 0 16px; line-height: 1.7;}
.form__text br{ display: none;}

.form__button{ display: block; height: 50px; border: none; font-size: 700px; font-size: 18px; line-height: 50px; color: #fff; text-align: center; cursor: pointer; transition: background .2s linear; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.form__button--submit{ background: #e7380d; width: calc(100% - 72px); max-width: 303px; margin: 30px auto 0;}
.form__button--submit:hover{ background: #ff2a00;}
.form__button--send{ background: #e7380d; width: 100%;}
.form__button--send:hover{ background: #ff2a00;}
.form__button--back{ background: #808080; width: 100%;}
.form__button--back:hover{ background: #717171;}
.agreebtn.disable{ background: #f2f2f2; color: #999999; pointer-events: none;}

.form__confirm{ display: flex; justify-content: space-between; max-width: 400px; margin: 30px auto 0; padding: 0 16px;}
.form__confirm--button{ width: calc(50% - 8px);}

.form__err{ display: block; margin: 5px 0 0; font-size: .9rem; color: #e7380d;}

.agree{ width: 95px; margin: 10px auto 0 auto;}
.agree input{ display: none; }
.agree label{ display: block; padding: 0 0 0 30px; font-size: 15px; position: relative; line-height: 2;}
.agree input + label::before{ content: ""; display: block; width: 14px; height: 14px; position: absolute; top: 5px; left: 0; border: #e5e5e5 3px solid;}
.agree input:checked + label::after{ content: ""; display: block; width: 7px; height: 13px; position: absolute; top: 3px; left: 5px; border-right: 3px solid #e7380d; border-bottom: 3px solid #dd0716; transform: rotate(45deg); cursor: pointer;}

@media print, screen and (min-width: 641px){
  .form__text{ text-align: center;}
  .form__text br{ display: block;}
}


@media print, screen and (min-width: 1000px){
  .form{ width: 900px; margin: 50px auto 0;}
  .form__title{ height: 40px; margin: 0; padding: 0 0 0 20px; font-size: 20px; line-height: 40px;}
  .form__box{ width: 900px; margin: 40px auto 0;}
  .form__inner{ display: flex; flex-wrap: wrap; border: 1px solid #ccc; border-top: none; background: none;}
	.kids-second.visible{ display: flex !important;}
  .form__col-term{ background: #f5f5f5; width: 250px; padding: 30px; border-top: 1px solid #ccc;}
  .form__col-term--kids{ background: #e6e6e6;}
  .form__col-desc{ width: calc(100% - 250px); padding: 20px 40px; border-top: 1px solid #ccc;}
  .form__col-desc-preview{ padding: 30px 40px;}
  
  .form__name dt{ width: 30px;}
  .form__name dd{ width: 180px;}
  
  .form__postcode{ width: 300px;}
  
  .input__text{ height: 40px; padding: 0 12px; font-size: 14px;}
  .input__text--postcode{ width:180px;}
  .input__text--pref,
  .input__text--tel{ width: 180px;}
  .input__text--num{ width: 40px;}
  
  .btn__search--address{ width: 100px; height: 40px; line-height: 40px;}
  
  .form__radio{ display: flex; justify-content: flex-start; padding: 10px 0 0;}
  .form__radio li{ width: 130px;}
  .input__radio{ display: none;}
  .label__radio{ display: block; background: none; width: auto; height: auto; padding: 0 0 0 30px; position: relative; border-radius: 0; color: #000;}
  .label__radio::before{ content: ""; display: block; position: absolute; top: 50%; left: 0; width: 20px; height: 20px; border: 2px solid #b3b3b3; border-radius: 50%; transform: translateY(-50%);}
  
  .input__radio:checked + .label__radio{ background: none!important;}
  .input__radio:checked + .label__radio::after{ content: ""; display: block; background: #dd0716; width: 8px; height: 8px; position: absolute; top: 50%; left: 8px; border-radius: 50%; transform: translateY(-50%);}
  
  .textarea__remarks{ height: 210px;}
  
  .form__text{ margin: 80px 0 0; padding: 0; font-size: 15px; line-height: 2;}
	
	.form__list-item{ padding: 0; font-size: 18px;}
  
  .form__button{ height: 60px; line-height: 60px;}
  .form__button--submit{ width: 500px; max-width: none; margin: 50px auto 0;}
  
  .form__confirm{ max-width: 660px; margin: 80px auto 0; padding: 0;}
  .form__confirm--button{ width: calc(50% - 30px);}
  
  .agree label{ font-size: 16px;}
  .agree input + label::before{ top: 7px;}
  .agree input:checked + label::after{ top: 5px;}
}



/*************************************************************************************************************************
* footer
*************************************************************************************************************************/
footer{ background-color: #ffe100; }/*background: url("../img/bg_dot.png") repeat 0 0/20px 20px;*/
.footer__logo{ width: 134px; }
.footer__copyright{ font-size: 10px; }

@media print, screen and (max-width: 999px){
	footer{ padding: 27px 0 0; }
	.footer__logo{ display: block; margin: 0 auto;}
	.footer__copyright{ background: #000; height: 30px; margin: 27px 0 0; font-size: 10px; line-height: 30px; color: #fff; text-align: center;}
}
@media print, screen and (min-width: 1000px){
	footer > div { display: flex; justify-content: space-between; align-items: center; width: 900px; height: 100px; margin-left: auto; margin-right: auto; }
}


/*************************************************************************************************************************
* coming soon
*************************************************************************************************************************/
.cs__catch{ width: 162px; margin: 0 auto;}
.cs__text{ margin: 20px 0 40px; font-weight: 700; font-size: 18px; text-align: center;}
.cs__date{ background: #f1f1f1; width: calc(100% - 36px); max-width: 600px; margin: 0 auto; padding: 10px 10px 20px 10px; font-weight: 700; font-size: 18px; text-align: center;}
.cs__date strong{ display: block; margin: 0 0 20px 0; padding: 9px 0 10px 0; background: #3071b7; font-size: 18px; color: #fff;}
.cs__date span{ margin: 0 0 0 5px;}

@media print, screen and (max-width: 369px){
  .cs__date span{ display: block; margin: 0;}
}

@media print, screen and (min-width: 1000px){
  .cs__catch{ width: 226px;}
  .cs__text{ margin: 20px 0 70px; font-size: 24px;}
  .cs__text br{ display: none;}
  .cs__date{ display: flex; align-items: center; font-size: 24px;}
	.cs__date{ padding: 10px 30px 10px 10px; overflow: hidden;}
	.cs__date strong{ width:150px; margin: 0 30px 0 0; padding: 25px 0 26px 0; font-size: 20px; float: left;}
}


/* show only  SP/PC
-------------------------------*/
.sp-only { display: none !important; }
.sp-only-2 { display: none !important; }
.pc-only { display: block !important; }
.pc-only-2 { display: inline-block !important; }

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