@charset "UTF-8";
*{}
.wrap{}
.inner{
    width: 90%;
}

.headline{
    background-color: #fff;
    /**position: fixed;**/
    z-index: 10;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.headline .row{
	padding: 19px;
}
.headline .row a{}
.headline .row a img{}
.headline .row .gnav{
    display: none;
}
.headline .row .gnav li{}
.headline .row .gnav li a{}
.headline .row .gnav li.cta a{}
.headline .row .gnav li.cta a:before{}

.fv{
    padding: 25% 5% 20%;
}
.fv p.top_headline{
    font-size: 10vw;
}
.fv p.description{
    font-size: 4vw;
}

main{}
main .ttl{}
main .ttl h1{
	width: 90%;
}
main .ttl h2{
	width: 90%;
}
main .ttl p{
	font-size: 15px;
}

main .ttl-sec{}
main .ttl-sec p{
	font-size: 15px;
}
main .ttl-sec h3{}

main{}
main .sub-ttl{}
main .sub-ttl .row{}
main .sub-ttl .row .text{}
main .sub-ttl .row .text h2{}
main .sub-ttl .row .text h1,
main .sub-ttl .row .text p.subttl-notag{
	line-height: 1.3em;
	margin-bottom: 15px;
}
main .sub-ttl .row .text p{
	font-size: 15px;
	width: 80%;
	margin: auto;
}
main .sub-ttl .row .text p.dscrpt{
	font-size: 15px;
}
main .sub-ttl .row figure{}
main .sub-ttl .row figure img{}

.content-01,
.content-02,
.content-03,
.content-04,
.content-05,
.content-06,
.content-07,
.content-08,
.content-09,
.content-10,
.content-11,
.content-12
{
    padding: 10% 0;
}

.content-01{}
.content-01 .row{}
.content-01 .row .intro{}
.content-01 .row .intro:before{}
.content-01 .row .intro p{}
.content-01 .row .text{}
.content-01 .row .text p{
    font-size: 15px;
}
.content-01 .row .text img{}

.content-02{}
.content-02 .sub-con-01{
    margin-bottom: 15%;
}
.content-02 .sub-con-01 img{}
.content-02 .sub-con-02 img{}
.content-02 .sub-con-03{
    margin-bottom: 15%;
}
.content-02 .sub-con-03 .row{}
.content-02 .sub-con-03 .row .col{
    width: 100%;
    justify-content: center;
    margin-bottom: 5%;
}
.content-02 .sub-con-03 .row .col figure{width: 25%;}
.content-02 .sub-con-03 .row .col figure img{
    text-align: center;
    width: 100%;
}
.content-02 .sub-con-03 .row .col div{
    width: 60%;
    text-align: left;
    margin-left: 5%;
}
.content-02 .sub-con-03 .row .col div h3{
    font-size: 5vw;
}
.content-02 .sub-con-03 .row .col div h3 span{}
.content-02 .sub-con-03 .row .col div p{
    font-size: 3.5vw;
}
.content-02 .sub-con-04{
    margin-bottom: 15%;
}
.content-02 .sub-con-04 img{
    width: 100%;
}
.content-02 .sub-con-05{
    margin-bottom: 15%;
}
.content-02 .sub-con-05 .row{}
.content-02 .sub-con-05 .row .col{
    width: 100%;
    padding: 5%;
    margin-bottom: 5%;
}
.content-02 .sub-con-05 .row .col p.step{
    width: 100%;
    text-align: center;
    font-size: 4vw;
    margin-bottom: 3%;
    padding: 5px 0;
}
.content-02 .sub-con-05 .row .col p{
    width: 55%;
    align-self: center;
    font-size: 3.5vw;
    text-align: left;
}
.content-02 .sub-con-05 .row .col figure{
    align-self: center;
    width: 34%;
}
.content-02 .sub-con-05 .row .col figure img{}
.content-02 .sub-con-06{
	margin-top: 80px;
    margin-bottom: 15%;
}
.content-02 .sub-con-06 .row .col{
	width: 100%;
}

.content-03{}

.content-04{}
.content-04 .sub-con-01{
    margin-bottom: 15%;
}
.content-04 .sub-con-02{
    margin-bottom: 15%;
}
.content-04 .sub-con-02 img{
    width: 80%;
}
.content-04 .sub-con-03{
    margin-bottom: 15%;
}
.content-04 .sub-con-03 .row{
    justify-content: space-around;
}
.content-04 .sub-con-03 .row .col{
    width: 47%;
    text-align: center;
    padding: 5%;
    margin-bottom: 4%;
}
.content-04 .sub-con-03 .row .col img{
    width: 70%;
}
.content-04 .sub-con-03 .row .col p{
    width: 100%;
}
.content-04 .sub-con-04{
    margin-bottom: 15%;
}
.content-04 .sub-con-04{
    margin-top: 100px;
}
.content-04 .sub-con-04 .row{
    margin-top: 30px;
	margin-bottom: 20px; 
}
.content-04 .sub-con-04 .row .col{
	width: 100%;
}
.content-05{}

.content-06{}
.content-06 .price{
}
.content-06 .price tr.head{}
.content-06 .price tr.head th{}
.content-06 .price tr.head td{
    font-size: 10px;
	min-width: 10ch;
}
.content-06 .price tr.head td span{}
.content-06 .price tr.body{}
.content-06 .price tr.body th{
    font-size: 10px;
	min-width: 14.3ch;
}
.content-06 .price tr.body th span{}
.content-06 .price tr.body td{
	font-size: 10px;
	min-width: 10ch;
}
.content-06 p{}

.content-07{}

.content-08{}
.content-08 .example{
    margin-bottom: 0;
}
.content-08 .example figure {
    order: 1;
    width: 100%;
    margin-bottom: 5%;
}
.content-08 .example figure img{}
.content-08 .example .text {
    width: 100%;
    order: 2;
}
.content-08 .example:last-of-type .text {}
.content-08 .example .text h3{
    margin-bottom: 5%;
}
.content-08 .example .text p{
    margin-bottom: 10%;
}

.content-10 .sub-con-01 .accordion{
    width: 100%;
}
.content-10 .sub-con-01 .accordion label{
    padding: 15px;
}
.content-10 .sub-con-01 .accordion__label::after {
	right: 15px;
}
.content-10 .sub-con-01 .accordion figure{
    margin-right: 15px;
}
.content-10 .sub-con-01 .accordion img{
    width: 50px;
}
.content-10 .sub-con-01 .accordion label h2{
    font-size: 4vw;
}
.content-10 .sub-con-01 .accordion h2 span{}
.content-10 .sub-con-01 .accordion label p{
    font-size: 3.5vw;
}
.content-10 .sub-con-01 .accordion__content{
    padding: 10px;
}
.content-10 .sub-con-01 .row{
    display: block;
}
.content-10 .sub-con-01 .accordion__content .col-1{
    width: 100%;
}
.content-10 .sub-con-01 .accordion__content .col-2{
	font-size: 15px;
    width: 100%;
	padding: 3px 0px 0px;
}
.content-10 .sub-con-01 .accordion__content h3{
    font-size: 4vw;
}

.content-12 .sub-con-01 .faq h2{
    font-size: 4vw;
}
.content-12 .sub-con-01 .faq p{
    font-size: 15px;
}


footer{}
footer p{
    font-size: 10px;
}

.toggle{display: block;}
header .headline .toggle{
    width: 60px;
    height: 61px;
    background-color: #669;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
}
header .headline .toggle span{
    width: 30px;
    height: 2px;
    background-color: #fff;
    display: block;
    margin: 0 auto;
    position: relative;
}
header .headline .toggle span:nth-of-type(1){
    top: 22px;
}
header .headline .toggle span:nth-of-type(2){
    top: 28px;
}
header .headline .toggle span:nth-of-type(3){
    top: 34px;
}
header .headline .toggle.active span{
}
header .headline .toggle.active span:nth-of-type(1){transform: rotate(45deg);top: 25px;}
header .headline .toggle.active span:nth-of-type(2){
    width: 0px;
}
header .headline .toggle.active span:nth-of-type(3){transform: rotate(
-45deg);top: 21px;}


header .headline .row ul.gnav{
    width: 100%;
    position: absolute;
    left: 0;
    top: 57px;
    height: 100vh;
    background-color: #eee;
    z-index: 10;
    display: block;
    transform: translateX(-100%);
    transition-duration: 0.5s;
}
header .headline .row ul.active{
    transform: translateX(0%);
    transition-duration: 0.5s;
}
header .headline .row ul.gnav li{
    width: 100%;
}
header .headline .row ul.gnav li a{
    display: block;
    width: 100%;
    text-align: center;
    padding: 30px 30px;
    position: relative;
    font-size: 3vw;
}
header .headline .row ul.gnav li a:after{
    content: url(../img/cta-icon-03.png);
    position: absolute;
    right: 5%;
}
header .headline .row ul.gnav li.cta{
    margin: 0 auto 15px;
    width: calc(100% - 60px);
}
header .headline .row ul.gnav li.cta a{
    margin-left: 0;
    padding: 20px;
}