@charset 'utf-8';
/*
 * name:support.css
 * author:Rotana
*/

/* support
------------------------------------------------ */
.align-center{ text-align: center; }
#support{ padding-top: 80px; }
.support__form input[type=text],
.support__form input[type=tel],
.support__form input[type=email],
.support__form input[type=number],
.support__form input[type=reset],
.support__form input[type=submit],
.support__form input[type=password],
.support__form select,
.support__form textarea,
.support__form button { -webkit-appearance: none; appearance: none; background: none; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }

.support__form input[type=text],
.support__form input[type=tel],
.support__form input[type=email],
.support__form input[type=number],
.support__form input[type=reset],
.support__form input[type=password],
.support__form select,
.support__form textarea { padding: 5px 15px; height: 40px; background: #ffff; border: solid #CECECE 1px; font-size: 1.6rem; }

#breadcrumb{ margin-bottom: 0; }
#contents{ padding: 55px 0 150px; }
.support__tab--head{ display: flex;	flex-wrap: wrap; justify-content: space-between; }
.support__tab--head li{ border-radius: 4px 4px 0 0;	box-sizing: border-box;	width: 100%; text-align: center; font-size: 1.8rem;	font-weight: 600; background-color: #CECECE; color: #090707; padding: 10px 0; cursor: pointer; }
.support__tab--head li.on{	background: #011e41; color: #fff; }

.support__tab--content{ display: none; padding: 58px 8.75% 64px; border:2px solid #011e41; }
.support__tab--content.on{ display: inherit; }

.support--head-txt { font-size: 1.8rem; font-weight: 300; letter-spacing: 0.048em; text-align: center; line-height: 1.77; }
.support--head-cmn { font-size: 1.4rem; letter-spacing: 0.048em; margin-top: 1em; text-align: center; }
.support--thumb { display: block; margin: 63px auto 0; }
.support--block+.support--block{ margin-top: 80px; }

.support-list{ max-width: 916px; margin: 40px auto 33px; display: flex; flex-wrap: wrap; }
.support-list li{ width: 30.569%; border-radius: 4px; overflow: hidden; }
.support-list li figcaption{ display: flex; flex-direction: column; width: 100%; align-items: center; justify-content: center; height: 80px; padding: 5px 0; font-size: 1.6rem; line-height: 1.5; color:#fff; background-color: #011e41; }
.support-list li figcaption small{ font-size: 1.2rem; }

.support--txt{ font-size: 1.6rem; letter-spacing: 0.024em; line-height: 1.87; color: #011E41; }

.support__flow--note{ box-sizing: border-box; padding:16.5px 10px; width: 100%; max-width: 500px; display: table; margin: 0 auto 48px; font-size: 1.8rem; letter-spacing: 0.024em; line-height: 1.66; text-align: center; border:4px solid #EFDC05; }
.support__flow--note .red-txt{ color:#CE1017; }
.support__flow{ border-bottom:1px solid #989898; }
.support__flow:first-of-type{ border-top:1px solid #989898; }

.support__flow--desc dt{ margin-bottom: 16px; position: relative; font-size: 1.6rem; font-weight: 600; letter-spacing: 0.048em; line-height: 1.87; counter-increment: section; }
.support__flow--desc dt:before{ font-size: 1.4rem; line-height: 1; padding:8px 0; position: absolute; left: -42px; top: 0; width: 30px; content: counter(section); color:#fff; text-align: center; border-radius: 50%; background-color: #011e41; }
.support__flow--desc dt .highlight{ position: relative; }
.support__flow--desc dt .highlight:after{ position: absolute; left: 0; bottom: -3px; content: ''; height: 4px; width: 100%; background-color: #EFDC05; }
.support__flow--desc dd{ font-size: 1.4rem; letter-spacing: 0.024em; line-height: 2.1; }


.support__breadcrumb--list{ margin-top: 30px; display: flex; flex-wrap: wrap; }
.support__breadcrumb--list li{ padding: 11px 0; width: 33.33%; text-align: center; font-size: 1.6rem; line-height: 1; border:1px solid #CECECE; box-sizing: border-box; color:#011e41; }
.support__breadcrumb--list li:nth-child(2n){ border-left: 0; border-right:0; }
.support__breadcrumb--list li.on{ background-color: #011e41; color:#fff; border-color: #011e41; }

.support__form{ margin-top: 67px; counter-reset: section; }
.support__form ::-webkit-input-placeholder { color: #D4D4D4; }
.support__form :-ms-input-placeholder { color: #D4D4D4; }
.support__form ::placeholder { color: #D4D4D4; }
.support__form input[type="text"],
.support__form input[type="email"],
.support__form input[type="date"],
.support__form input[type="number"],
.support__form input[type="tel"],
.support__form--postal-code,
.support__form--prefectures,
.support__form--textarea{ width: 100%; box-sizing: border-box; }
.support__form--textarea{ padding: 13px 22px; resize: none; font-family: serif; }
.support__form--textarea.textarea01{ height: 180px; }
.support__form--textarea.textarea02{ height: 220px; }
.support__form--content{ padding: 42px 0 0; }
.support__form .red-text{ color: #CE1017; }
.support__form--title{ margin-bottom: 35px; font-size: 2rem; letter-spacing: 0.048em; line-height: 1.5; color: #011E41; }
.support__form--title small{ margin-top: 8px; display: block; font-weight: 300; }
.support__form input[type=radio] { position: relative; width: 22px; height: 22px; background: none; -webkit-border-radius: 50%; border-radius: 50%; border: 2px solid #CECECE; -webkit-appearance: none; outline: none; appearance: none; display: inline-block; vertical-align: middle; margin-right: 4px; }
.support__form input[type=radio]:after{ display: inline-block; position: absolute; left: 4px; top: calc(50% - 5px); content: ''; width: 10px; height: 10px; background-color:#fff; border-radius: 50%; }
.support__form input[type=radio]:checked:after{ background-color: #3B4043; }
.support__form input[type=checkbox] { position: relative; width: 20px; height: 20px; background: none; border-radius: 0; border: 1px solid #CECECE; -webkit-appearance: none; outline: none; appearance: none; display: inline-block; vertical-align: middle; margin-right: 4px; }
.support__form input[type=checkbox]:after{ 
	content: "";
	position: absolute; 
	left: 6px;
	top: 2px;
	width: 3px;
	height: 8px;
	border: solid transparent;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg); }
.support__form input[type=checkbox]:checked:after{ border-color: #fff; }
.support__form input[type=checkbox]:checked{ background-color: #011e41; }
.support__form--prefectures,
.support__form--postal-code{ max-width: 320px; }
.support__form--prefectures{ -webkit-appearance: none; outline: none; appearance: none; background:url(../../img/share/support_arrow01.png) no-repeat calc(100% - 22px) center / 14px auto !important; }
.support__form--prefectures option:first-child{ color:#D4D4D4; }
.support__form--btn{ cursor: pointer; width: 100%; height: 80px; font-size: 2rem; font-weight: 600; letter-spacing: 0.048em; line-height: 1; text-align: center; color:#fff; background: #011e41 url(../../img/share/icon_arrow_w.svg) no-repeat no-repeat calc(100% - 68px) center / 10px auto !important; border-radius: 10px !important; border:0;  }
.support__form--btn.back-btn{ width: calc(100% - 10px); color:#090707; background: #CECECE !important; }

.support__form .wpcf7-list-item-label{ vertical-align: middle; }
.support__form .radio-necessary{ display: block; margin-top: 6px; }
.support__form span.wpcf7-list-item{ margin: 0; }
.support__form span.wpcf7-list-item.last{ margin-left: 38px; }
.support__form .radio-gender{ display: block; margin-bottom: 10px; }


.support__form--radio-group+.support__form--radio-group{ margin-top: 24px; }
.support__form--checkbox-group{ margin-bottom: 30px; }
.support__form--checkbox-group span.wpcf7-list-item{ margin-right: 16px !important; margin-bottom: 10px !important; }
.support__form--checkbox-group span.wpcf7-list-item.last{ margin-right: 0 !important; margin-left: 0 !important; }
.support__form--group+.support__form--group{ margin-top: 20px; }
.support__form--requirement{ margin-top: 50px; padding-top: 42px; border-top:1px solid #CECECE; }
.support__form--requirement.remove{ padding-top: 0; margin-top: 0; border:0; }

.support__table{ padding: 0 20px; width: 100%; color:#011E41; border-collapse:separate; }
.support__table--align-top{ vertical-align: top; }
.support__table th{ /*width: 24.5%;*/ width:  230px; font-weight: 600; font-size: 1.6rem; text-align: left; letter-spacing: 0.048em; line-height: 1.87; }
.support__table th sub{ position: relative; right: -10px; top: -3px; font-weight: 300; font-size: 1.4rem; color:#CE1017; }
.support__table th.va-top{ vertical-align: top; }
.support__table td{ font-size: 1.4rem; line-height: 1.5;}
.support__form--label{ display: block; margin-top: 6px; }

.support__form--btn-group{ position: relative; max-width: 600px; margin: 0 auto; }
div.wpcf7 .ajax-loader{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.support--recaptcha { display: table; margin: 0 auto 30px; }


/* responsive style 
------------------------------------------------ */
@media screen and (min-width: 769px) { 
	.support-list li:not(:nth-child(-n+1)){ margin-left: 4.1465%; }

	.support__flow{ padding:50px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
	.support__flow--img{ width: 36.512%; }
	.support__flow--desc{ padding-left: 42px; width: 60.4%; box-sizing: border-box; }

	.support--txt.center{ margin-left: 1.4em; text-indent: -1.4em; display: table; margin: 0 auto; }
	.support__form--title.inner{ padding: 0 20px; }

	.support__table tr:not(:first-child) td, 
	.support__table tr:not(:first-child) th { padding: 60px 0 0; }
	.support__table .tb-pt-30 th,
	.support__table .tb-pt-30 td{ padding-top: 30px !important; }
	.support__table.table--requirement tr:not(:first-child) td, 
	.support__table.table--requirement tr:not(:first-child) th { padding: 70px 0 0; }
}
@media screen and (max-width: 768px) { 
	.support__form input[type=text],
	.support__form input[type=tel],
	.support__form input[type=email],
	.support__form input[type=number],
	.support__form input[type=reset],
	.support__form input[type=password],
	.support__form select,
	.support__form--postal-code, 
	.support__form--prefectures, 
	.support__form textarea { padding: 5px 10px; height: 40px; font-size: 1.3rem; }
	.support__form--prefectures, 
	.support__form--postal-code{ max-width: 100%; }
	.support__form--prefectures{ background-position: calc(100% - 10px) !important; }

	#contents{ padding: 28px 0 120px; }
	#breadcrumb{ margin-bottom: 32px; }
	.support--head-txt{font-size: 1.4rem; line-height: 1.5; }
	.support--head-cmn { font-size: 1.1rem; line-height: 1.5; }
	.support--thumb{ margin-top: 25px; }
	.support--block+.support--block{ margin-top: 30px; }
	.support--txt{ font-size: 1.2rem; line-height: 1.5; }
	.support--txt.txt-head{ margin-top: 14px; font-size: 1.3rem; }

	.support-list{ margin:20px auto 13px; justify-content: space-between; }
	.support-list li{ width: calc( 50% - 5px); border-radius: 2px; }
	.support-list li:not(:nth-child(-n+2)){ margin-top: 10px; }
	.support-list li figcaption{ height: 40px; font-size: 1.2rem; }
	.support-list li figcaption small{ font-size: 0.9rem; }

	.support__form{ margin-top: 60px; }

	.support__tab--head li{ padding:7px 0; border-radius: 0; width: calc(50% - 5px); width: 100%; font-size: 1.4rem; letter-spacing: 0.06em; line-height: 1.53; }
	.support__tab--content{ padding:33px 13px; }

	.support__flow{ padding: 30px 0 45px; }
	.support__flow--note{ margin-bottom: 35px; padding:9px 10px; max-width: 195px; font-size: 1.3rem; line-height: 1.5; border-width: 2px; }
	.support__flow--img{ padding:0 20px; text-align: center; }
	.support__flow--desc{ margin-top: 26px; padding-left: 33px; }
	.support__flow--desc dt{ margin-bottom: 8px; font-size: 1.4rem; letter-spacing: 0.03em; line-height: 1.67; }
	.support__flow--desc dt:before{ padding: 6px 0; width: 25px; font-size: 1.3rem; left: -33px; top: 50%; transform: translateY(-50%); }
	.support__flow--desc dt .highlight:after{ height: 3px; bottom: -1px; }
	.support__flow--desc dd{ font-size: 1.3rem; letter-spacing: 0.024em; line-height: 1.5; }

	.support__breadcrumb--list li{ padding: 9px 0; font-size: 1.3rem; }

	.support__form--title{ margin-bottom: 20px; font-size: 1.6rem; letter-spacing: 0.03em;  }
	.support__form--content{ padding-top: 17px; }
	.support__form--textarea{ line-height: 1.88; }
	.support__form--textarea.textarea01,
	.support__form--textarea.textarea02{ height: 270px; }
	.support__form--btn{ margin-top: 8px; height: 50px; font-size: 1.4rem; background-size: 7px auto !important; background-position: calc(100% - 20px) center !important; }
	.support__form--btn.back-btn { width: 100%; }
	.support__form--label{ margin-top: 4px; }
	.support__form--radio-group .wpcf7-list-item-label{ font-size: 1.3rem; }
	.support__form--radio-group+.support__form--radio-group{ margin-top: 20px; }
	.support__form--requirement{ padding-top: 45px; margin-top: 44px; }
	.support__form .radio-shop-by{ margin-top: 10px; display: block; }
	.support__form .radio-shop-by .wpcf7-list-item{ display: block; }
	.support__form .radio-shop-by span.wpcf7-list-item.last{margin: 20px 0 0 0;}
	.support__form span.wpcf7-list-item.last{ margin-left: 35px; }

	.support__table{ padding: 0; }
	.support__table th{ margin-bottom: 4px; display: block; width: 100%; font-size: 1.4rem; line-height: 1.75; }
	.support__table th sub{ font-size: 1.2rem; top: -4px; }
	.support__table td{ display: block; font-size: 1.2rem; }
	.support__table tr:not(:first-child) th { padding: 35px 0 0; }
	.support__table.table--requirement tr:not(:first-child) th{ padding-top: 17px; }
	.support--recaptcha{ margin: 26px auto 0; }
	.support--recaptcha .wpcf7-form-control-wrap{ width: 234.08px; }
	.support--recaptcha .wpcf7-form-control-wrap .wpcf7-recaptcha{transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}

}
.form__table__code dt,
.form__table__code dd { display: inline-block; vertical-align: middle; }
.form__table__code dt { font-size: 24px; font-size: 2.4rem; line-height: 1; margin-right: 10px; }
.form__table__code dd { max-width: 380px; }
.form__table__code dd ul { display: flex; flex-wrap: wrap; }
.form__table__code dd ul li { position: relative; width: calc( 50% - 20px ); display: inline-block; vertical-align: middle; }
.form__table__code dd ul li:not(:last-child) { padding-right: 40px; }
.form__table__code dd ul li:not(:last-child):after { content: ''; width: 12px; height: 3px; font-size: 40px; font-size: 4rem; background: #000; display: inline-block; position: absolute; right: 14px; top: 19px; }

@media screen and (max-width: 768px) { 
	.form__table__code dt { font-size: 20px; font-size: 2rem; line-height: 1; margin-right: 10px; }
	.form__table__code dd ul li { width: calc( 50% - 15px ); }
	.form__table__code dd ul li:not(:last-child) { padding-right: 30px; }
	.form__table__code dd ul li:not(:last-child):after { content: ''; width: 10px; height: 2px; right: 10px; top: 20px; }
}

/*
service benefits
----------------------------------*/
#service-benefits{ padding-top: 80px; }
.service-benefits--desc{ font-size: 1.8rem; line-height: calc(32/18); color: #011E41; }
.service-benefits--desc p+p{ margin-top: 36px; }
.service-benefits--small{ font-size: 1.2rem; line-height: calc(32/12); color: #011E41; }
.service-benefits--pht{ border-radius: 35px; }
@media screen and (min-width: 769px) {
	.service-benefits--desc{ max-width: 589px; width: calc(589/1000 * 100%); }
    .service-benefits--in{ max-width:1000px; margin: 0 auto; position: relative; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-start; }
    .service-benefits--pht{ position: absolute; right: -8%; top: 0; z-index: -1; width: calc(400/1000 * 100%); overflow: hidden; }
}

@media screen and (max-width: 1160px) and (min-width: 769px) {
	.service-benefits--pht{ right: 0; width: calc(350/1000 * 100%); }
}

@media screen and (max-width: 768px) {
    #service-benefits{ padding-top: 27px; }
    .service-benefits--pht{ margin: 15px auto 0; overflow: hidden; max-width: 64vmin; }
	.service-benefits--desc,
	.service-benefits--small{ font-size: 1.2rem; line-height: calc(1.58); }
	.service-benefits--desc p+p{ margin-top: 20px; }
}

.rental-title{ margin-bottom: 22px; font-weight: bold; letter-spacing: 0.15em; }
.rental-title.center{ text-align: center; }
.rental-title .en{ display: block; font-size: 1.6rem; font-family: Oswald, "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif; line-height: calc(24 / 16); color:#59BCDC; }
.rental-title .ja{ margin-top: 10px; display: block; font-size: 2.4rem; line-height: calc(41 / 24); color:#011E41; }


@media screen and (max-width: 768px) {
    .rental-title{ text-align: center; }
    .rental-title .en{ font-size: 1.3rem; }
    .rental-title .ja{ margin-top: 5px; font-size: 1.6rem; }
}

/*
support custom
----------------------------------*/
.support--lists01{ margin: 0 auto; display: flex; flex-wrap: wrap; }
.support--lists01 li{ font-size: 1.8rem; font-weight: bold; line-height: calc(24/18); text-align: center; background-color: #F2FCFE; border-radius: 10px; box-shadow: 2px 2px 0 #C4EFFF; color:#011E41; }
.support--lists01 li figcaption{ margin-bottom: 10px; }
.support--lists01 figure img{ width: 100%; }

.support--lists02{ margin: -2px auto 22px; display: table; }
.support--lists02 li{ padding-left: 32px; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.072em; line-height: calc(32 / 18); color:#011E41; background: url(../../img/rental/list-01.png) no-repeat 0 6px / 20px; }
.support--lists02 li+li{ margin-top: 15px; }

@media screen and (min-width: 769px) {
	.support--lists01{ max-width: 944px; }
	.support--lists01 li{ padding:20px 0 32px; width: calc(100%/3 - 15px); }
	.support--lists01 figure{ height: 100%; padding: 0 12.34%; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; }
	.support--lists01 figure img{ max-width: 200px; margin: 0 auto; }
	.support--lists01 li:not(:nth-child(3n+1)){ margin-left: 22px; }
}
@media screen and (max-width: 768px) {
	.support--lists01 li{ padding: 20px; width: calc(100% - 40px); font-size: 1.6rem; }
	.support--lists01 li+li{ margin-top: 35px; }
    .support--lists02{ margin-top: 25px; }
    .support--lists02 li{ padding-left: 22px; font-size: 1.2rem; line-height: calc(38 / 24); background-size: 15px 15px; background-position: 0 1px; }
    .support--lists02 li+li{ margin-top: 8px; }
}

#repairs-free{ padding-top: 100px; }
#repairs-fee{ padding-top: 48px; }

/*
rental service flow
-----------------------------*/
#rental-service-flow{ margin-top: 80px; padding: 60px 0 38px; background-color: #F2FCFE; }
.rental-flow{ max-width: 880px; margin: 0 auto; counter-reset: section; }
.rental-flow--item{ position: relative; padding-bottom: 26px; padding-left: 100px; color:#393939; min-height: 160px; }
.rental-flow--item:not(:nth-child(-n+1)){ margin-top: 20px; }
.rental-flow--item:before{ padding: 11px 0 0; content: "STEP"; position: absolute; left: 0; top: 0; height: 69px; width: 80px; font-size: 1rem; font-weight: 500; letter-spacing: 0.04em; line-height: calc(24/10); text-align: center; border-radius: 50%; background-color: #59BCDC; font-family: Oswald, "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif; color:#fff; }
.rental-flow--item:after{ counter-increment: section; content: counter(section); position: absolute; left: 35px; top: 30px; font-size: 2.2rem; font-weight: bold; line-height: calc(24/22); letter-spacing: 0.04em; font-family: Oswald, "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif; color:#fff; }
.rental-flow--item dt{ display: block; padding-top: 24px; padding-right: 264px; font-size: 1.8rem; font-weight: bold; line-height: calc(28/18); }
.rental-flow--item dd{ margin-top: 20px; padding-bottom: 10px; padding-right: 264px; display: block; font-size: 1.4rem; line-height: calc(20/14); }
.rental-flow--item:not(:last-of-type) dt::before{ content: ''; position: absolute; bottom: 0; left: 50%; width: 40px; height: 16px; background:url(../../img/lp/top/2025/support_red_arrow.png) no-repeat center center / contain; }

.products--lists{ margin-bottom: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.products--item{ width: calc(170/710 * 100%); }
.products--txt{ margin-bottom: 8px; font-weight: bold; }

@media screen and (min-width: 769px) {
	.rental-flow--pht{ position: absolute; right: 0; top:0; width: 240px; }
	.products--item img{ transition: .2s ease; }
	.products--item:hover img{ transform: scale(1.5); }
}

@media screen and (max-width: 768px) {
	#repairs-free{ padding-top: 55px; }
	.rental-flow--item{ padding-left: 60px; }
	.rental-flow--item:after{ left: 20px; top:22px; font-size: 1.4rem; }
	.rental-flow--item:before{ padding: 3px 0 0; height: 42px; width: 45px; }
	.rental-flow--item dt{ padding-top: 9px; padding-right: 0; font-size: 1.4rem; }
	.rental-flow--item dd{ padding-right: 0;  }
	.rental-flow--pht{ margin-top: 20px; }
	.products--item{ width: calc(50% - 10px); }
	.products--item:not(:nth-child(-n+2)){ margin-top: 20px; }
}