@charset "utf-8";

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

@media screen and (min-width:800px){
	.no-pc{
		display:none!important;
	}
}
@media screen and (max-width:799px){
	.no-sp{
		display:none!important;
	}
}

/* ==============================================
CSS reset
=============================================== */
* ,*:before ,*:after {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}
html ,body ,div ,p ,span ,iframe ,a ,img ,
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
dl ,dt ,dd ,ol ,ul ,li ,
form ,label ,
table ,thead ,tbody ,tfoot ,tr ,th ,td ,
blockquote ,q ,pre ,
header ,footer ,nav ,article ,section ,aside {
	margin:0;
	padding:0;
	border:0 none;
	vertical-align:baseline;
	font-size:inherit;
	font-weight:inherit;
}
button ,input ,textarea ,select {
	font-size:16px;
	padding:5px;
	letter-spacing:1px;
	font-family: 'Noto Sans JP', sans-serif;
}
input[type="submit"] ,button {
	font-size:16px;
	padding:10px 30px;
	font-family:inherit;
}

html ,body {
	min-height:100%;
	height:100%;
	font-family: 'Noto Sans JP', sans-serif;
	line-height:1.6;
}
a {
	color:inherit;
	text-decoration:none;
	cursor:pointer;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
a:hover {
	text-decoration:none;
}

img {
	vertical-align:top;
	max-width:100%;
    max-height:100%;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}

ol ,ul ,li {
	list-style:none;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

/* ============================================
common pc
=============================================== */

html{
    scroll-behavior: smooth;
}

html,body{
	margin:0;
	padding:0;
}

body{
	position:relative;
	font-size:16px;
	color:#000;
	background-color:#fff;
}

@media screen and (min-width:800px){
	#bgLayer{
		min-width: 1200px;
		max-width: 1920px;
		width:100%;
		margin:0 auto;	
	}
}

@media screen and (max-width:799px){
	#bgLayer{
		width:480px;
		min-width:480px;
		max-width:480px;
		margin:0 auto;
		overflow:hidden;
	}
}

img{
	height:auto;
	display:inline-block;
	border:0 none;
}

h1,p{
	margin:0;
}
h2 {
    text-align: center;
    font-size: 250%;
    font-weight: bold;
}
h2 strong {
    color: #e7161a;
	font-weight: bold!important;
}

em {
	font-style: normal;
}

strong {
    font-weight: normal;
}

.tel-link-a{
	pointer-events: auto;
}

.all-center-full{
	width:100%;
	max-width:100%;
	margin:0 auto;
}

.all-center-1600{
	width:1600px;
	max-width:100%;
	margin:0 auto;
}

.all-center-1200{
	width:1200px;
	max-width:100%;
	margin:0 auto;
}

dl,dt,dd{
	display: block;
	margin: 0;
	padding: 0;
}

header,section,footer{
	max-width: 100%;
}

/* ==============================================
common SP
=============================================== */

@media screen and (max-width:799px){	
	.tel-link-a{
		pointer-events: auto;
	}

	.sp-LR15 {
		padding-left:15px !important;
		padding-right:15px !important;
	}

	.sp-L15 {
		padding-left:15px !important;
	}
	
	.sp-R15 {
		padding-right:15px !important;
	}
}

/* ====================================================================
	flex
==================================================================== */
.flex {
	display:flex;
	justify-content:center;
	align-items:center;
}
.flex.left {
	justify-content:flex-start;
}
.flex.right {
	justify-content:flex-end;
}
.flex.between {
	justify-content:space-between;
}
.flex.around {
	justify-content:space-around;
}
.flex.evenly {
	justify-content:space-evenly;
}

.flex.top {
	align-items:flex-start;
}
.flex.bottom {
	align-items:flex-end;
}
.flex.stretch {
	align-items:stretch;
}

.flex.column {
	flex-direction:column;
}
.flex.rev {
	flex-direction:row-reverse;
}
.flex.column.rev {
	flex-direction:column-reverse;
}

.flex.wrap {
	flex-wrap:wrap;
}

.flex.col2 > * {
	width:calc(100% / 2);
}
.flex.col3 > * {
	width:calc(100% / 3);
}

.flex > .half {
	width:50%;
}
.flex > .full {
	width:100%;
}

.height-inherit > * {
	height:100%;
}
.height-inherit-all * {
	height:100%;
}

/* =============================
common caption
================================ */

.caption{
    text-align: center;
}

.caption-cover2{
    padding-top: 2em;
}

.caption2{
    text-align: center;
}

@media screen and (max-width:799px){

}

/* =====================================================================
common main
======================================================================== */

.bg-color1{
    background-color: #effbfb;
}

.waku{
    padding-top: 5em;
    padding-bottom: 5em;
}

.fvcontact > li {
    padding: 0 2em;
}

.fvcontact p{
	text-align:center;
}
.fvcontact p strong{
	font-size:1.4em;
	font-weight:bold;
}
article section {
    max-width: 1200px;
    margin: auto;
}

@media screen and (max-width:799px){   

    .waku {
        padding-top: 3em;
        padding-bottom: 3em;
    }

    .fvcontact li + li {
        padding: 1em 2em;
    }
}

/* ==================================
header
================================== */

header {
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 10px #ccc;
    width: 100%;
}

header .header {
    padding-top: 1em;
    padding-bottom: 1em;
}

header .tel-free {
    height: 65px;
}

header .header .menu ul {
    display: flex;
    align-items: center;
}

header .header .menu ul li {
    padding: 0 5px;
}

@media screen and (max-width:799px){    
    header .header {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        justify-content: center !important;
    }

    .logo {
        padding-left: 10em;
        padding-right: 10em;
    }
}

/* ==================================
fv
================================== */

#fv {
    width: 100%;
    margin: 0 auto;
}

#fv.waku{
    padding-top: 1em;
    padding-bottom: 2em;
}

#fv > section {
    max-width: 100%;
}

#fv .txt img{
	width:820px;
}
@media screen and (max-width:799px){
	#fv .txt img{
		width:100%;
	}	
}

/* ==
cta
====*/

#fv .cta {
    padding-top: 1em;
}

#fv > section {
    max-width: 100%;
}

@media screen and (max-width:799px){

    #fv.waku {
        padding-top: 0em;
        padding-bottom: 0em;
    }

    #fv .contents > .img-cover:first-child {
        padding-left: 1.5em;
        padding-right: 1.5em;
    }

    #fv .contents{
        flex-direction: column;
    }

    #fv .cta {
        padding-bottom: 1em;
    }
    
    #fv .fvcontact{
        flex-direction: column;
    }
}

/* ==================================
about
================================== */

#about .contets-wrapper{
    padding-top: 2em;
}

#about .contents-cover{
	padding-top: 3.5em;
}

#about .img-cover{
	background-repeat: no-repeat;
	background-position: 50% 3%;
	background-size: auto;
    border: solid 1px red;
    border-radius: 10px;
	width: 360px;
	height: 400px;
}

#about .contents-cover:nth-child(1) .img-cover{
	background-image: url(images/pc/about01.webp);
}

#about .contents-cover:nth-child(2) .img-cover{
	background-image: url(images/pc/about02.webp);
}

#about .contents-cover:nth-child(3) .img-cover{
	background-image: url(images/pc/about03.webp);
}

#about .contents-cover:nth-child(4) .img-cover{
	background-image: url(images/pc/about04.webp);
}

#about .contents-cover:nth-child(5) .img-cover{
	background-image: url(images/pc/about05.webp);
}

#about .contents-cover:nth-child(6) .img-cover{
	background-image: url(images/pc/about06.webp);
}

#about .text-caption {
    font-size: 120%;
    color: #fff;
    padding-top: 0.2em;
    padding-left: 2em;
    padding-right: 2em;
    height: 110px;
    font-weight: bold;
}

#about .text-cover {
    padding-left: 2em;
    padding-right: 2em;
}

#about .text{
	padding-top: 1em;
    font-size: 115%;
}

#about .text + .text{
	padding-top: 1em;
}

@media screen and (max-width:799px){	
    #about .contets-wrapper {
        padding-top: 0;
        justify-content: center;
    }

    #about .contents-cover {
        padding-top: 3em;
    }

    #about .contents-cover + .contents-cover{
        padding-top: 1.5em;
    }

    #about .img-cover{
        background-repeat: no-repeat;
        background-position: 50% 0%;
        background-size: 100%;
        width: 450px;
        height: auto;
        padding-bottom: 1em;
    }

    #about .contents-cover:nth-child(1) .img-cover{
        background-image: url(images/sp/about01.webp);
    }
    
    #about .contents-cover:nth-child(2) .img-cover{
        background-image: url(images/sp/about02.webp);
    }
    
    #about .contents-cover:nth-child(3) .img-cover{
        background-image: url(images/sp/about03.webp);
    }
    
    #about .contents-cover:nth-child(4) .img-cover{
        background-image: url(images/sp/about04.webp);
    }
    
    #about .contents-cover:nth-child(5) .img-cover{
        background-image: url(images/sp/about05.webp);
    }
    
    #about .contents-cover:nth-child(6) .img-cover{
        background-image: url(images/sp/about06.webp);
    }

    #about .text-caption {
        height: 85px;
        padding-top: 0;
        padding-left: 1.5em;
        padding-right: 1.5em;
        font-weight: bold;
        font-size: 125%;
    }

    #about .text-cover {
        padding-left: 1em;
        padding-right: 1em;
    }

    #about .text {
        padding-top: 0.5em;
        font-size: 100%;
    }

    #about .text + .text {
        padding-top: 0.5em;
    }
}

/* ==================================
content
================================== */

#content .caption-cover2{
    background-image: url(images/pc/content_baloon.webp);
	background-repeat: no-repeat;
	background-position:50% 0%;
	background-size: auto;
	height: 250px;
    margin: 0 auto;
}

#content .caption2{
    padding-top: 2em;
}

#content .contents-cover{
	padding-top: 1em;
}

#content .img-cover{
	padding-top:2em;
}

#content .caption2-text{
    font-size: 180%;
    font-weight: bold;
    padding-top: 2em;
}

@media screen and (max-width:799px){
    #content .caption-cover2{
        background-image: url(images/sp/content_baloon.webp);
        background-size: 100%;
        height: 260px;
    }

    #content .caption {
        padding-left: 2em;
        padding-right: 2em;
    }

    #content .contents{
        padding-top: 1em;
    }

    #content .caption2-text {
        font-size: 150%;
        font-weight: bold;
        padding-top: 2em;
    }

    #content .img-cover {
        padding-top: 0;
    }
}

/* ==================================
reason
================================== */

#reason .contents-cover{
	padding-top: 3em;
}

#reason .contents-cover + .contents-cover{
	padding-top: 2em;
}

#reason .img-cover{
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: auto;
	height: 260px;
    padding-left: 5.5em;
    padding-right: 28em;
}

#reason .contents-cover:nth-child(1) .img-cover{
	background-image: url(images/pc/reason01.webp);
}

#reason .contents-cover:nth-child(2) .img-cover{
	background-image: url(images/pc/reason02.webp);
}

#reason .contents-cover:nth-child(3) .img-cover{
	background-image: url(images/pc/reason03.webp);
}

#reason .text-caption-cover {
    padding-top: 5em;
}

#reason .text-caption {
    font-size: 150%;
	font-weight: bold;
}

#reason .color1{
	color: #e5241b;
}

#reason .text-cover{
	padding-top: 1em;
}

@media screen and (max-width:799px){

    #reason .img-cover{
        background-repeat: no-repeat;
        background-position: 50% 0%;
        background-size: 100%;
        height: 440px;
        padding-left: 0;
        padding-right: 0;
    }

    #reason .contents-cover {
        padding-top: 1em;
    }

    #reason .contents-cover:nth-child(1) .img-cover{
        background-image: url(images/sp/reason01.webp);
    }
    
    #reason .contents-cover:nth-child(2) .img-cover{
        background-image: url(images/sp/reason02.webp);
    }
    
    #reason .contents-cover:nth-child(3) .img-cover{
        background-image: url(images/sp/reason03.webp);
    }

    #reason .contents-cover + .contents-cover{
        padding-top: 1.5em;
    }

    #reason .text-caption-cover {
        padding-top: 4.5em;
    }

    #reason .text-caption {
        text-align: center;
        line-height: 1.3;
    }

    #reason .text-cover {
        padding: 1em 2em 0;
    }
}

/* ==================================
merit
================================== */

#merit .waku{
	background-color: #e72019;
}

.merit-outer {
    padding-top: 5em;
}

#merit .merit-outer + .merit-outer{
	padding-top: 3em;
}

#merit .merit-wrapper{
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size:auto;
	height: 320px;
	padding-top: 1em;
	max-width: 100%;
}

#merit .merit-outer:nth-child(1) .merit-wrapper{
	background-image: url(images/common/merit1_bg.webp);
}

#merit .merit-outer:nth-child(2) .merit-wrapper{
	background-image: url(images/common/merit2_bg.webp);
}

#merit .merit-outer:nth-child(3) .merit-wrapper{
	background-image: url(images/common/merit3_bg.webp);
}

#merit .text-wrapper{
	color: #fff;
    padding-left: calc(50% - 80px);
    padding-right: 8em;
}

#merit .merit-outer:nth-child(2n) .text-wrapper{
	padding-left: 8em;
	padding-right: calc(50% - 80px);
}

#merit .text-caption-r{
	font-size: 150%;
    padding-top: 25px;
	padding-left: 1em;
    font-weight: bold;
}

#merit .text-cover{
	padding-top: 1em;
}

#merit .text {
    font-size: 110%;
}

@media screen and (max-width:799px){

    #merit .waku {
        padding-bottom: 4em;
    }

    #merit .caption {
        padding-left: 1em;
        padding-right: 1em;
    }

    #merit .merit-outer {
        padding-top: 3em;
    }

    #merit .merit-wrapper {
        background-position: 0 0;
        background-size: auto 175px;
        height: auto;
        padding-top: 12em;
    }

    #merit .merit-outer:nth-child(2n) .merit-wrapper{
        background-position: 100% 0;
    }

    #merit .text-wrapper {
        padding-left:0;
        padding-right:0;
    }

    #merit .merit-outer:nth-child(2n) .text-wrapper{
        padding-left:0;
        padding-right:0;
    }

    #merit .text-caption-l .img-cover > img{
        height: 90px;
    }

    #merit .text-caption-r {
        line-height: 1.4;
        font-weight: bold;
        padding-top: 0.8em;
        padding-left: 0.5em;
    }

    #merit .text {
        font-size: 100%;
    }
}

/* ==================================
cta2
================================== */

#cta2 .waku{
    padding-top: 0;
}

#cta2 .img-cover{
    background-image: url(images/common/triangle.png);
    background-repeat: no-repeat;
    background-size:auto;
    background-position: 50% 50%;
    width: 120px;
    height: 60px;
    margin: 0 auto;
    margin-top: -1px;
}

#cta2 .caption-cover{
    padding-top: 4em;
}

#cta2 .waku2{
    background-image: url(images/pc/cta_bg.webp);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 50% 50%;
    width: 100%;
    height: 315px;
}

#cta2 .text-cover{
    padding-top: 3em;
}

#cta2 .text{
    text-align: center;
    color: #fff;
    font-style: oblique;
    font-size: 220%;
    font-weight: bold;
}

#cta2 .fvcontact {
    padding-top: 2em;
}

@media screen and (max-width:799px){

    #cta2 .waku {
        padding-top: 0;
    }

    #cta2 .img-cover {
        width: 70px;
        height: 60px;
        margin-top: -25px;
    }

    #cta2 .caption-cover {
        padding-top: 1.5em;
    }

    #cta2 .caption {
        padding-left: 2em;
        padding-right: 2em;
    }
    
    #cta2 .waku2 {
        background-image: url(images/sp/cta_bg.webp);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: 50% 50%;
        width: 100%;
        height: 400px;
    }

    #cta2 .fvcontact {
        padding-top: 1.5em;
        flex-direction: column;
    }

    #cta2 .fvcontact li + li {
        padding: 1.5em 2em 0;
    }

    #cta2 .text-cover {
        padding-top: 2.5em;
    }

    #cta2 .text {
        line-height: 1.2;
    }

}

/* ==================================
price
================================== */

#price .contents-cover{
    text-align: center;
}

@media screen and (max-width:799px){
    #price .waku {
        padding-bottom: 2em;
    }

    #price .caption {
        padding-left: 10em;
        padding-right: 10em;
    }
}

/* ==================================
flow
================================== */

#flow .contents-cover{
    padding-top: 2em;
}

#flow .contents:nth-child(n+2) .img-cover{
    height: 190px;
}

#flow .contents:nth-child(1) .img-cover{
	background-image: url(images/pc/flow01.webp);
    height: 255px;
}

#flow .contents:nth-child(2) .img-cover{
	background-image: url(images/pc/flow02.webp);
}

#flow .contents:nth-child(3) .img-cover{
	background-image: url(images/pc/flow03.webp);
}

#flow .contents:nth-child(4) .img-cover{
	background-image: url(images/pc/flow04.webp);
}

#flow .contents:nth-child(5) .img-cover{
	background-image: url(images/pc/flow05.webp);
}

#flow .contents:nth-child(6) .img-cover{
	background-image: url(images/pc/flow06.webp);
}

#flow .img-cover{
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-size: auto;
    padding-left: 22em;
    padding-right: 5em;
}

#flow .text-caption {
    font-size: 150%;
	font-weight: bold;
}

#flow .contents:nth-child(1) .text-caption{
    padding-top: 5em;
}

#flow .contents:nth-child(n+2) .text-caption{
    padding-top: 2.2em;
}

#flow .text-cover{
	padding-top: 0.5em;
}

#flow .text {
    font-size: 105%;
}

@media screen and (max-width:799px){

    #flow .waku {
        padding-bottom: 3em;
    }

    #flow .caption {
        padding-left: 8em;
        padding-right: 8em;
    }

    #flow .img-cover {
        background-position: 50% 0%;
        background-size: 100%;
        padding-right: 2em;
        padding-left: 8.5em;
    }

    #flow .text-caption-cover {
        padding-top: 0.5em;
    }

    #flow .contents:nth-child(n+2) .text-caption {
        padding-top: 2em;
    }

    #flow .contents-cover{
        padding-top: 1em;
    }

    #flow .contents:nth-child(1) .img-cover{
        background-image: url(images/sp/flow01.webp);
        height: 265px;
    }

    #flow .contents:nth-child(2) .img-cover{
        background-image: url(images/sp/flow02.webp);
    }
    
    #flow .contents:nth-child(3) .img-cover{
        background-image: url(images/sp/flow03.webp);
    }
    
    #flow .contents:nth-child(4) .img-cover{
        background-image: url(images/sp/flow04.webp);
    }
    
    #flow .contents:nth-child(5) .img-cover{
        background-image: url(images/sp/flow05.webp);
    }
    
    #flow .contents:nth-child(6) .img-cover{
        background-image: url(images/sp/flow06.webp);
    }

    #flow .contents:nth-child(n+2) .img-cover {
        height: 225px;
    }

    #flow .contents:nth-child(1) .text-caption {
        padding-top: 3.5em;
    }

    #flow .text {
        font-size: 100%;
    }
}

/* ==================================
faq
================================== */

#faq .contents-wrapper{
	padding-top:3em;
    width:870px;
    margin: 0 auto;
}

#faq .contents-cover + .contents-cover{
	padding-top:1.5em;
}

/* q */
/* a */
#faq .q-con,
#faq .a-con{
    padding-left: 1.5em;
    padding-right: 1.5em;
}

#faq .icon{
    min-width: 50px;
    min-height: 50px;
    align-self: flex-start;
    height: calc(1.8em * 2);
    display: flex;
    justify-content: center;
    align-items: center;
}

#faq .text{
    padding-left:1em;
}

/* q */
#faq .q-con{
	min-height:60px;
    background-color:#fff;
    border-radius: 15px;
    box-shadow: 0 0 10px 1px #bbb;
}

#faq .q-con > .text{
    font-weight: bold;
	width:100%;
    font-size: 120%;
}

/* a */
#faq .a-cover {
    padding-top: 0.5em;
}

#faq .a-con{
	min-height:60px;
}

#faq .a-con > .text{
    font-size: 110%;
}

@media screen and (max-width:799px){

    #faq .caption {
        padding-left: 8em;
        padding-right: 8em;
    }

    #faq .contents-wrapper {
        width: auto;
        padding-top: 1.5em;
    }

    #faq .q-con{
        padding: 0.5em 1em;
    }

    #faq .q-con > .text{
        font-size: 130%;
    }

    #faq .a-con {
        padding-left: 1em;
        padding-right: 1em;
    }

    #faq .text {
        line-height: 1.6;
        padding-left: 0.5em;
    }
} 

/* ==================================
other
================================== */

#other .contents-wrapper{
    padding-top: 2em;
}

#other .contents-cover{
    padding: 1em;
    width: calc(100% / 5);
}
.handling_btn{
	position:relative;
	display:block;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .2);
	border:#e72019 1px solid;
	background-color: #FFF;
	border-radius:10px;
	color:#e72019;
	text-align:center;
	margin:0 auto;
	padding:3px 20px;
}
.handling_btn:hover{
	background:#e72019;
	color:#FFF;
}
	a.handling_btn:after {
	  content: "";
	  position: absolute;
	  top: 50%;
	  bottom: 0;
	  right: 1rem;
	  font-size: 90%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  transition: right 0.3s;
	  width: 6px;
	  height: 6px;
	  border-top: solid 2px currentColor;
	  border-right: solid 2px currentColor;
	  transform: translateY(-50%) rotate(45deg);
	}
	.handling_btn.nourl{
		opacity: 0;
		pointer-events: none;
	}

@media screen and (max-width:799px){

    #other .caption {
        padding-left: 1.5em;
        padding-right: 1.5em;
    }

    #other .contents-wrapper{
        padding-top: 2em;
    }

    #other .contents-cover {
        padding: 0;
        width: calc(100% / 2);
    }
	.handling_btn{
		margin:0 10px 20px 10px;
	}
}

/* ==================================
form
================================== */

#Form {
    text-align: center;
}

.form-wrapper {
    background: #FFF;
    border-radius: 10px;
}

form#mailformpro {
    padding: 10px 0px;
    box-shadow: 0 0 5px 1px #effbfb;
    border-radius: 5px;
}

div#mfp_hidden {
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0px;
    margin: 0px;
}

div#mfp_hidden input {
    margin: 10px;
}

input[type=submit] {
    font-size: 22px;
}

input, textarea, select, .checkbox-bg {
    background-color: #effbfb;
    border: none;
    padding: 10px;
    color: #000;
}

input, textarea, select {
    width: 100%;
}

dl {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    width: 75%;
    line-height: 1.6;
    margin: auto;
}

dt {
    width: 30%;
    text-align: left;
    padding: 2.5em 0 0 1em;
    color: #000;
    background-image: linear-gradient(to right, #999, #999 2px, transparent 2px, transparent 8px);
    background-size: 8px 2px;
    background-position:center bottom;
    background-repeat: repeat-x;
}

dt:nth-of-type(2) {
    background-image:none;
}

dd:nth-of-type(2) {
    background-image:none;
}

.required,
.required2,
.required3,
.optional,
.checkbox-text,
div.mfp_err{
    font-weight: bold;
}

.required:after, .required2:after {
    margin-left: 1em;
}

.required:after, .required2:after, .required3:after {
    content: attr(data-text);
    display: inline-block;
    padding: 0.3em 0.5em;
    line-height: 1;
    color: #000;
}

.required3:after {
    margin-left: 0.5em;
    padding: 0.3em 0;
}

dd {
    width: 70%;
    margin-left: auto;
    background-image: linear-gradient(to right, #999, #999 2px, transparent 2px, transparent 8px);
    background-size: 8px 2px;
    background-position:right bottom;
    background-repeat: repeat-x;
    padding-top: 2em;
    padding-right: 1em;
    padding-bottom: 1em;
}

dd:nth-of-type(3){
    padding-top: 0;
}

dt.t-left {
    text-align: right;
    padding: 0.5em 0 0 1em;
}

select {
    padding-left: 1em;
}

.problem {
    border-radius: 5px;
}

.checkbox-bg-wrapper {
    width: 570px;
}

.checkbox-bg-wrapper,
.checkbox-bg-wrapper2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.checkbox-bg-cover {
    display: flex;
    align-items: center;
}

.checkbox-bg {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 100%;
    background-color: #effbfb;
    width: auto;
    height: 40px;
    padding: 0.5em;
}

input[type="checkbox"] {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: inline;
    background-color: #fff;
}

.mfp_element_checkbox,
.mfp_element_radio {
    vertical-align: middle;
    margin: 0px 2px;
}

.checkbox-text {
    padding-right: 0.5em;
    padding-left: 0.5em;
    color: #000;
    white-space: nowrap;
}

div.mfp_err {
    clear: both;
    display: none;
    text-align: left;
    margin: 5px 0px 0px 0px;
    padding: 3px 0px 5px 17px;
    color: #F00;
    font-size: 18px;
    line-height: normal;
    background-image: url(_images/mfp_error.gif);
    background-repeat: no-repeat;
    background-position: 0px 1px;
}

textarea {
    resize: none;
    height: 12em;
    padding: 0.5em;
}

.formButton {
    padding-top: 2em;
    color: #000;
}

.formButton .anime-button {
    width: 330px;
    height: calc(100px + 15px);
    background: initial;
    margin: auto;
}

.formButton .anime-button .anime-button-inner {
    border-radius: 10px;
    height: 100px;
    box-shadow: 0 3px 0 #059300;
    background: #2ebb2a;
    padding: 10px 0;
}

.formButton .anime-button .submit-btn {
    color: #FFF;
}

input[type=submit] {
    font-size: 18px;
    font-weight: bold;
}

.submit-btn {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 64px;
    background: transparent;
}

@media screen and (max-width:799px){
    
    .formButton {
        padding-top: 0em;
    }
    
    .formButton .anime-button {
        width: 370px;
    }

    #Form .caption-cover {
        padding-bottom: 3em;
    }

    #Form .caption {
        padding-left: 3em;
        padding-right: 3em;
    }
}


/* ==================================
form
================================== */

#Form.article-padding {
    padding: 5em 1.5em 2em;
}

#Form .caption-cover {
    padding-bottom: 3em;
}

#Form .formButton .anime-button:hover {
    padding-top: 2px;
}

.required2 {
    white-space: nowrap;
}

@media screen and (max-width:799px){

    #Form .caption-cover {
        padding-bottom: 2em;
    }
    
    dl{
		width:90%;
        padding-top: 1em;
	}

	dt,dd,.checkbox-bg-wrapper{
		width:100%;
	}

    dt {
        padding:1em 0 0 0;
        background-image:none;
    }

	dd{
        padding: 0.3em 0 2em;
	}

    dd:nth-of-type(2){
        padding: 0.3em 0 1em;
	}

    dd:last-child{
        background-image: none;
	}

    .required,
    .required2,
    .required3,
    .optional,
    .checkbox-text,
    div.mfp_err {
        font-size: 120%;
    }

    .required2 {
        white-space: normal;
        display: block;
    }

	.required2:after {
		display:block;
		margin-top:0.5em;
		margin-left:0;
		padding-left:0;
	}

    .required2:after,
    .required3 {
        font-weight: normal;
        white-space: nowrap;
    }

	dt.t-left {
		padding:0;
		text-align:left;
	}
	.checkbox-bg-wrapper,
    .checkbox-bg-wrapper2{
		flex-direction: column;
		align-items:flex-start;
	}
	.ajustment-m-left,
    .ajustment-p-top{
		margin:1em 0 0;
	}

    .formButton .anime-button {
        height: calc(70px + 15px);
    }
}

/* ==================================
footer
================================== */

footer {
    text-align: center;
    padding: 20px 0 120px;
}

@media screen and (max-width:799px){	
}


/* ==================================
footer nav button
================================== */

#footer-nav-button{
	padding-top: 2em;
}

#footer_btn{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	padding-top: 1em;
	width: 100%;
	min-width: 1200px;
	max-width: 1920px;
	margin:0 auto;	
}

#footer_cta .img-cover{
	padding-left: 0.5em;
	padding-right: 0.5em;
}

@media screen and (max-width:799px){

	#footer-nav-button {
		padding-top: 0;
	}

	#footer_btn {
		position: fixed;
		padding:0;
		z-index: 1;
		width: 100%;
		min-width: 480px;
		max-width: 480px;
	}

    #footer_cta{
        justify-content:space-between;
    }
		
	#footer_cta .img-cover{
		padding-left: 0.1em;
		padding-right: 0.1em;
	}
}

/* ==========================================================================================================================================
animation
========================================================================================================================================== */


@-webkit-keyframes blink {
	0%{opacity:0.1;} 100%{opacity:1;}
}
@keyframes blink{
	0%{opacity:0.1;} 100%{opacity:1;}
}

.blink {
	-webkit-animation:0.6s ease infinite alternate blink;
	animation:0.6s ease infinite alternate blink;
}

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}

.popup {
	opacity:0;
}

.popup.on {
    opacity:1;
    -webkit-animation:0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards popup;
    animation:0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards popup;
}

.bg-wrap {
    opacity: 0;
    overflow: hidden;
}

.bg-wrap.on {
    opacity: 1;
}

.inn {
    opacity: 0;
    transform: matrix(1, 0, 0, 1, 0, 100);
    transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.inn.on {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
}