@charset "UTF-8";

/* ===================================================================

 file name  :  common.css

=================================================================== */

/* --------------------------------------------------
 normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css
--------------------------------------------------- */
html{line-height:1;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,footer,header,nav,section{display:block;}h1{margin:0;font-size:2em;}h2,h3,h4,h5{margin: 0;}p{margin: 0;}figcaption,figure,main{display:block;}figure{margin:0;}hr{overflow:visible;box-sizing:content-box;height:0;}pre{font-size:1em;font-family:monospace,monospace;}a{background:transparent;-webkit-text-decoration-skip:objects;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:inherit;}b,strong{font-weight:bolder;}code,kbd,samp{font-size:1em;font-family:monospace,monospace;}dfn{font-style:italic;}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{position:relative;vertical-align:baselinefont-size:75%;line-height:0;}sub{bottom:-.25em;}sup{top:-.5em;}audio,video{display:inline-block;}audio:not([controls]){display:none;height:0;}img{border-style:none}svg:not(:root){overflow:hidden;}button,input,optgroup,select,textarea{margin:0;font-size:100%;font-family:sans-serif;line-height:1.15;}button,input{overflow:visible;}button,select{text-transform:none;}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button;}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none;}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{display:table;box-sizing:border-box;padding:0;max-width:100%;color:inherit;white-space:normal;}progress{display:inline-block;vertical-align:baseline;}textarea{overflow:auto;;}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto;}[type=search]{outline-offset:-2px;-webkit-appearance:textfield;}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}details,menu{display:block;}summary{display:list-item;}canvas{display:inline-block;}template{display:none;}[hidden]{display:none;}table,th,td{border-spacing:0;border-collapse:collapse;}ul,ol{margin:0;padding:0;list-style:none;}dl,dt,dd{margin:0;padding:0;}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%;}
body{
    width: 100%;
    background: #f4ece1;
    color: #333;
    font-size: 1.3rem;
    font-family: system-ui;
    line-height: 1;
}
*, *:after, *:before{ box-sizing: border-box;}
img{ max-width: 100%; width: 100%; vertical-align: bottom;}
small{ display: block; font-size: 1.1rem;}
.sp{ display: block;}
.pc{ display: none}
a{ color: #34a0d7; text-decoration: underline;}
a:hover{ text-decoration: none;}
.pagetop{ position: fixed; right: 0; bottom: 0;}
.pagetop a{ position: relative; display: inline-block; width: 40px; height: 40px; background: #333;}
.pagetop a:after{
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    margin: -2px 0 0 -4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    content: "";
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}

@media screen and (min-width: 769px){
    body{ font-size: 1.5rem;}
    .sp{ display: none;}
    .pc{ display: block;}
    .pagetop{ right: 10px; bottom: 10px;}
}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ padding: 10px 0;}
.header .logo{ margin: 0 auto; width: 36%;}
.header h1{ margin: 10px 0 0; text-align: center; font-size: 1.6rem; line-height: 1.5;}
.header h1 span{ display: block; font-size: 1.2rem;}

@media screen and (min-width: 769px){
    .header{ position: relative; margin: 0 auto; padding: 25px 0; width: 1000px;}
    .header .logo{ display: inline-block; margin: 0; width: 156px;}
    .header h1{ position: absolute; right: 0; bottom: 25px; margin: 0; text-align: left; font-size: 2.4rem; line-height: 1;}
    .header h1 span{ display: inline-block; font-size: 1.8rem;}
}

/* --------------------------------------------------
 main
--------------------------------------------------- */

/* common
--------------------------------------------------- */
main{ display: block;}
main section{ padding: 0 15px 15px;}
main p{ line-height: 1.5;}
figure ul{ text-align: center;}
figure li{ display: inline-block; width: 50%; vertical-align: top;}
.box{ padding: 15px; background: #fff;}
.btn a{ display: block; padding: 10px 0; border-radius: 3px; background: #2c9fd9; color: #fff; text-align: center; letter-spacing: .1rem; font-weight: bold; font-size: 1.8rem; text-decoration: none;}
.btn a span{ position: relative; padding: 0 0 0 24px;}
.btn a span:before{
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.btn a span:after{
    position: absolute;
    top: 50%;
    left: 4px;
    display: block;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.list-row2{ overflow: hidden; margin: 0 -8px;}
.list-row2 li{ display: inline-block; padding: 0 8px; width: 50%;}
.list-row2 figcaption{ display: block; margin: 5px 0 0; text-align: center; font-size: 1.1rem;}
.btn2{ margin: 30px 0 0; padding: 15px 0; border-top: 2px dashed #eee; border-bottom: 2px solid #eee; color: #f00; text-align: center; font-weight: bold; font-size: 1.6rem;}

@media screen and (min-width: 769px){
    main{ margin: 0 auto; width: 1000px;}
    main section{ padding: 0;}
    main p{ line-height: 1.8;}
    .box{ padding: 40px;}
    .btn{ text-align: center;}
    .btn a{ display: inline-block; padding: 20px 80px; font-size: 2.7rem;}
    .btn a span{ padding: 0 0 0 40px;}
    .btn a span:before{
        position: absolute;
        margin-top: -7px;
        width: 14px;
        height: 14px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
    }
    .btn a span:after{
        left: 7px;
        display: block;
        margin-top: -7px;
        width: 14px;
        height: 14px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
    }
    .list-row2{ margin: 0 -10px;}
    .list-row2 li{ padding: 0 10px;}
    .list-row2 img{ width: 100%;}
    .list-row2 figcaption{ margin: 10px 0 0; font-size: 1.4rem;}
    .row:after{ display: block; clear: both; content: "";}
    .row-left{ float: left; padding: 0 40px 0 0; width: 50%;}
    .row-right{ float: right; padding: 0 0 0 40px; width: 50%;}
    .btn2{ margin: 40px 0 0; padding: 20px 0; border-top: 3px dashed #eee; border-bottom: 3px solid #eee; font-size: 2.4rem;}
}

/* sec1
--------------------------------------------------- */
.sec1{ padding: 0 15px 15px; background: #e67794;}
.sec1 figure{ margin: 0 -15px;}
.sec1 h2{ margin: 5px 0 0; color: #fff; vertical-align: middle; font-size: 3rem;}
.sec1 h2 .t1{ display: inline-block; margin: 0 5px 0 0; width: 65px; height: 65px; border-radius: 100%; background: #2c9fd9; vertical-align: middle; text-align: center; font-size: 1.4rem; line-height: 65px;}
.sec1 h2 .t1 strong{ display: inline-block; vertical-align: middle; line-height: 1.2;}
.sec1 h2 .t2{ display: inline-block; font-size: 1.6rem;}
.sec1 .box{ margin: 5px 0 0; line-height: 1.8;}
.sec1 dl{ font-size: 1.6rem;}
.sec1 dt{ font-weight: bold;}
.sec1 p{ margin: 15px 0 0;}
.sec1 .btn{ margin: 15px 0 0;}

@media screen and (min-width: 769px){
    .sec1{ padding: 0 40px 40px;}
    .sec1 figure{ margin: 0 -40px;}
    .sec1 h2{ margin: 20px 0 0; text-align: center; font-size: 7.4rem;}
    .sec1 h2 .t1{ margin: 0 10px 0 0; width: 80px; height: 80px; vertical-align: bottom; letter-spacing: .1rem; font-size: 1.8rem; line-height: 80px;}
    .sec1 h2 .t2{ font-size: 3rem;}
    .sec1 .box{ margin: 20px 0 0;}
    .sec1 dl{ font-size: 2.4rem;}
    .sec1 dt{ font-weight: bold;}
    .sec1 p{ margin: 20px 0 0;}
    .sec1 .btn{ margin: 40px 0 0;}
}

/* sec2
--------------------------------------------------- */
.sec2 h2{ margin: 0 -15px; padding: 15px 0; background: #333; color: #fff; text-align: center; font-size: 1.5rem;}
.sec2 .lead{ margin: 15px 0 0; color: #e67794; font-weight: bold; font-size: 1.6rem;}
.sec2 h3{ position: relative; margin: 30px 0 0; padding: 0 0 0 40px; counter-increment: hn; vertical-align: middle; font-size: 1.6rem; line-height: 1.4;}
.sec2 h3:before{ position: absolute; top: 50%; left: -15px; display: inline-block; margin: -15px 0 0; padding: 4px 10px 4px 24px; background: url("../img/bg_ttl.svg") no-repeat; background-size: contain; color: #fff; content: counter(hn); font-weight: normal; font-size: 2rem; font-family: "HelveticaNeue"; line-height: 1;}
.sec2 p{ margin: 15px 0 0;}
.sec2 figure{ margin: 15px 0 0;}
.sec2 .relative{ position: relative; margin: 15px -15px 0;}
.sec2 .relative figcaption{ position: absolute; top: 18%; right: 10%; display: block; line-height: 1.8;}
.sec2 .slider{ margin: 15px 0 0;}
.list-bx-pager{ margin: 15px 0 0; text-align: center;}
.list-bx-pager li{ display: inline-block; padding: 0 4px; width: 16%;}

@media screen and (min-width: 769px){
    .sec2{ margin: 80px 0 0;}
    .sec2 h2{ margin: 0; padding: 20px 0; font-size: 2rem;}
    .sec2 .lead{ margin: 20px 0 0; text-align: center; font-size: 2rem;}
    .sec2 h3{ margin: 60px 0 0; padding: 0 0 0 100px; font-size: 2rem; line-height: 1.5;}
    .sec2 h3:before{ left: 0; margin: -24px 0 0; padding: 8px 20px 10px 40px; font-size: 3rem;}
    .sec2 p{ margin: 20px 0 0;}
    .sec2 figure{ margin: 20px 0 0;}
    .sec2 .relative{ margin: 20px 0 0;}
    .sec2 .relative figcaption{ top: auto; right: auto; bottom: 10px; left: 0; width: 100%; text-align: center; line-height: 1.5;}
    .list-bx-pager{ margin: 20px 0 0;}
    .list-bx-pager li{ padding: 0 10px; width: 12%;}
}

/* sec3
--------------------------------------------------- */
.sec3{ margin: 15px 0 0; line-height: 1.8;}
.sec3 figure{ padding: 0 30px;}
.sec3 h2{ margin: 15px 0 0; font-size: 1.6rem;}
.sec3 p{ margin: 15px 0 0;}

@media screen and (min-width: 769px){
    .sec3{ margin: 80px 0 0;}
    .sec3 figure{ margin: 0 auto; padding: 0; width: 300px;}
    .sec3 h2{ margin: 20px; font-size: 2.4rem;}
    .sec3 p{ margin: 20px 0 0; text-align: center;}
}

/* sec4
--------------------------------------------------- */
.sec4{ background: #fff; line-height: 1.8;}
.sec4 h2{ margin: 0 -15px; padding: 15px 0; background: #333; color: #fff; text-align: center; font-size: 1.5rem; line-height: 1.8;}
.sec4 h3{ margin: 15px 0 0; font-weight: normal; font-size: 1.3rem;}
.sec4 h2 + p,
.sec4 p + p{ margin: 15px 0 0;}
.sec4 .btn{ margin: 15px 0 0; padding: 0 15px;}
.kiyaku{ margin: 15px 0 0; border: 1px solid #c5c5c5;}
.kiyaku dt{ position: relative; padding: 15px; font-weight: bold; cursor: pointer;}
.kiyaku dt:after{ position: absolute; top: 50%; right: 15.5px; width: 14px; height: 1px; background: #333; content: "";}
.kiyaku dt:before{ position: absolute; top: 50%; right: 22px; margin: -6px 0 0; width: 1px; height: 14px; background: #333; content: "";}
.kiyaku dt.active:before{ content: none;}
.kiyaku dd{ display: none; padding: 0 15px 15px; text-align: left;}
.kiyaku h3{ margin: 15px 0 0;}
.kiyaku ul{ margin: 15px 0 0 1.6rem; list-style: disc;}
.kiyaku li{ line-height: 1.5;}

@media screen and (min-width: 769px){
    .sec4{ margin: 80px 0 0; padding: 0 40px 40px;}
    .sec5{ margin: 0;}
    .sec4 h2{ margin: 0 -40px; padding: 20px 0; font-size: 2rem;}
    .sec4 h3{ margin: 40px 0 0; font-size: 1.4rem;}
    .sec4 p + p{ margin: 20px 0 0;}
    .sec4 .btn{ margin: 40px 0 0; padding: 0;}
    .kiyaku{ margin: 20px 0 0;}
    .kiyaku dt{ padding: 20px;}
    .kiyaku dt:after{ right: 25.5px;}
    .kiyaku dt:before{ right: 32px;}
    .kiyaku dd{ padding: 0 20px 20px;}
    .kiyaku h3{ margin: 20px 0 0;}
    .kiyaku ul{ margin: 20px 0 0 1.6rem;}
}

/* sec5
--------------------------------------------------- */
.sec5{ background: #fff; line-height: 1.8;}
.sec5 h2{ margin: 0 -15px; padding: 15px 0; background: #333; color: #fff; text-align: center; font-size: 1.5rem; line-height: 1.8;}
.sec5 h3{ margin: 15px 0 0; font-weight: bold;}
.sec5 h2 + p,
.sec5 p + p{ margin: 15px 0 0;}
.sec5 ul{ margin: 0 0 0 1.6rem; list-style: disc;}
.sec5 ul li{ margin: 5px 0 0; line-height: 1.5;}
.sec5 ul li:fisrt-child{ margin: 0;}
.sec5 ol{ margin: 0; list-style: none;}
.sec5 ol li{ margin: 5px 0 0; text-indent: -1em; padding-left: 1em; line-height: 1.5;}
.sec5 ol li:fisrt-child{ margin: 0;}

@media screen and (min-width: 769px){
    .sec5{ margin: 0; padding: 0 60px 60px;}
    .sec5 h2{ margin: 0 -60px; padding: 20px 0; font-size: 2rem;}
    .sec5 h3{ margin: 30px 0 0; font-size: 1.6rem;}
    .sec5 h2 + p{ margin: 60px 0 0;}
    .sec5 p + p{ margin: 20px 0 0;}
    .sec5 ul{ margin: 20px 0 0 1.6rem;}
}

/* app
--------------------------------------------------- */
.app{ padding: 0;}
.app h2{ padding: 15px 0; background: #333; color: #fff; text-align: center; font-size: 1.5rem; line-height: 1.5;}
.app table{ width: 100%; border-bottom: 1px solid #eee; line-height: 1.8;}
.app th{ display: block; padding: 15px 0 5px; width: 100%; border-top: 1px solid #eee; vertical-align: top; text-align: left;}
.app td{ display: block; padding: 0 0 15px; width: 100%; vertical-align: top; text-align: left;}
.app td span{ display: block;}
.app label{ display: inline-block; margin: 0 0 0 5px;}
.app td div{ font-size: 1.1rem;}
.app input[type="text"] + span,
.app select + span{ margin: 15px 0 0;}
.app select + select{ margin: 0 0 0 5px;}
.app label + input[type="radio"]{ margin: 0 0 0 15px;}
.app input[type="text"],
.app input[type="email"],
.app input[type="tel"],
.app input[type="number"],
.app textarea{ padding: 5px; width: 100%;}
.app select{ display: inline-block;}
.app textarea{ height: 100px;}
.app input.mid{ width: 30%;}
.app input.short{ width: 15%;}
.app h3{ margin: 15px 0 0; font-size: 1.4rem; line-height: 1.5;}
.app h3 + table{ margin: 15px 0 0;}
.app dl{ line-height: 1.8;}
.app dt{ margin: 15px 0 0; padding: 0 0 5px; font-weight: bold;}
.app dd div{ margin: 15px 0 0;}
.app .submit{ margin: 15px 0 0; text-align: center;}
.app .submit button{ display: inline-block; margin: 0 10px; padding: 15px 0; width: 40%; border: none; border-radius: 3px; background: #2c9fd9; color: #fff; text-align: center; font-weight: bold; font-size: 1.6rem;}
.app .thanks{ padding: 15px;}
.app .thanks li{ margin: 15px 0 0;}
.app .thanks a{ position: relative; display: block; padding: 0 0 0 20px; font-weight: bold; line-height: 1.5;}
.app .thanks a:before{
    position: absolute;
    top: 4px;
    left: 0;
    display: block;
    width: 8px;
    height: 8px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.app .thanks a:after{
    position: absolute;
    top: 4px;
    left: 4px;
    display: block;
    width: 8px;
    height: 8px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media screen and (min-width: 769px){
    .app h2{ padding: 20px 0; font-size: 2rem;}
    .app .box{ padding: 40px 120px;}
    .app th{ display: table-cell; padding: 20px 60px 20px 0; width: auto; white-space: nowrap;}
    .app td{ display: table-cell; padding: 20px 0; width: auto; border-top: 1px solid #eee;}
    .app td div{ font-size: 1.3rem;}
    .app input[type="text"],
    .app input[type="email"],
    .app input[type="tel"],
    .app input[type="number"],
    .app textarea,
    .app select{ font-size: 1.4rem;}
    .app textarea{ height: 200px;}
    .app h3{ margin: 40px 0 0; font-size: 1.6rem;}
    .app h3 + table{ margin: 20px 0 0;}
    .app dt{ margin: 20px 0 0;}
    .app dd div{ margin: 20px 0 0;}
    .app .submit{ margin: 20px 0 0;}
    .app .submit button{ padding: 20px 80px; width: auto; font-size: 2rem;}
    .app .thanks{ padding: 40px; text-align: center;}
    .app .thanks ul{ padding: 20px 0 0;}
    .app .thanks li{ margin: 20px 0 0;}
    .app .thanks a{ display: inline-block;}
    .app .thanks a:before{ top: 7px;}
    .app .thanks a:after{ top: 7px;}
}

/* --------------------------------------------------
 aside
--------------------------------------------------- */
aside li{ margin: 1px 0 0;}
aside a{ position: relative; display: block; padding: 15px; background: #333; color: #fff; font-size: 1.5rem; text-decoration: none;}
aside span{ font-size: 1rem;}
aside a:before{
    position: absolute;
    top: 50%;
    right: 10px;
    display: block;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media screen and (min-width: 769px){
    aside{ margin: 40px auto 0; width: 1000px;}
    aside ul{ overflow: hidden; margin: 0 -20px; text-align: center;}
    aside li{ display: inline-block; margin: 0; padding: 0 20px; width: 50%;}
    aside a{ padding: 20px; text-align: left; font-size: 2rem;}
    aside span{ font-size: 2rem;}
    aside a:before{
        right: 15px;
        margin-top: -6px;
        width: 12px;
        height: 12px;
    }
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ padding: 15px 15px 60px;}
.footer ul{ text-align: center;}
.footer li{ display: inline-block; padding: 0 10px;}
.footer .list1 a{ font-size: 3rem; color: #333;}
.footer .list2{ margin: 15px 0 0;}
.footer .list2 li{ border-left: 1px solid;}
.footer .list2 li:first-child{ border-left: none;}
.footer .list2 a{ font-size: 1.1rem;}
.footer small{ margin: 10px 0 0; text-align: center;}

@media screen and (min-width: 769px){
    .footer{ padding: 40px 0;}
    .footer .list2{ margin: 20px 0 0;}
}