@charset "UTF-8";

/* --------------------------------------------------
 normalize
--------------------------------------------------- */
button,hr,input{overflow:visible;padding:0;}progress,sub,sup{vertical-align:baseline;}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0;}html{line-height:1;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{margin:.67em 0;font-size:2em;}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-size:100%;font-family:inherit;line-height:1;}button,select{text-transform:none}[type=button],[type=reset],[type=submit],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:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{display:table;max-width:100%;color:inherit;white-space:normal}textarea{overflow:auto}[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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}summary{display:list-item}[hidden],template{display:none}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;font-weight:normal;}ul{margin:0;padding:0;}ul li{margin:0;padding:0;list-style:none;}ol{margin:0;padding:0;}ol li{margin:0;padding:0;list-style:none;}
main,figure,figcaption,time,address,dl,dt,dd{display: block;margin:0;padding:0;}h1,h2,h3,h4,h5{margin:0;font-size:100%;}p{margin:0; padding:0;}address{font-style: normal;}*,*:after,*:before{outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);scrollbar-color: transparent transparent;
scrollbar-width: 0px;-ms-overflow-style: none;}h1,h2,h3,h4{font-weight:normal;}mark{background: none;}html{box-sizing:border-box;}*,*:before,*:after{box-sizing:border-box;}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%;}
body{
    min-width: 1190px;
    width: 100%;
    background: #000 url("/img/bg_black.gif");
    color: #fff;
    font-size: 1.4rem;
    font-family: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "MS PMincho", serif;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
}
img{ width: 100%; vertical-align: bottom;}
a{ color: #fff; text-decoration: none;}
a:hover{ color: #fff; text-decoration: none;}
.sp{ display: none;}
.sticky-container{ display: flex; justify-content: flex-start;}
.sticky:before,
.sticky:after{ display: table; clear: both; content: '';}

@media screen and (max-width: 768px){
    body{ min-width: 0; font-size: 1.2rem;}
    .pc{ display: none;}
    .sp{ display: block;}
}

/* 画像アニメーション*/
.ani {opacity: 0;}
.fadein {
    animation-name: fadein;
    animation-duration: 1s;

    animation-fill-mode: forwards;
}
@keyframes fadein {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ position: -webkit-sticky; position: sticky; top: 0; z-index: 99; min-width: 280px; min-height: 100vh; width: calc(50vw - 500px); height: 100%; background: #000 url("/img/bg_black.gif"); box-shadow: 50px 0 50px 0 rgba(0,0,0,.5); color: #dab67c; font-weight: bold;}
.header:before{ position: absolute; top: 0; right: 0; width: 100%; height: 70px; background: url("/img/bg_header.gif") repeat-x top center; background-size: 372px 70px; content: "";}
.header .inner{ margin: 0 0 0 auto; padding: 90px 60px 0 0; width: 220px;}
.header a{ transition: all .1s linear;}

@media screen and (max-width: 768px){
    .header{ position: fixed; left: 0; min-height: 0; width: 100%; height: 65px; background: url("/img/bg_black.gif"); box-shadow: 0 12px 12px rgba(0,0,0,.5);}
    .header:before{ content: none;}
    .header .inner{ padding: 0; width: 100%; height: 65px; text-align: center; line-height: 65px;}
    .header h1{ display: inline-block; width: 28%;}
    .header h1 a{ display: block; height: 65px;}
    .header h1 img{ vertical-align: middle;}
}

.header nav{ margin: 45px 0 0;}
.header nav ul{ font-size: 1.6rem;}
.header nav ul > li{ margin: 24px 0 0; letter-spacing: .1rem;}
.header nav a{ color: #dab67c;}
.header nav a:hover{ color: #fff;}

@media screen and (max-width: 768px){
    .header nav{ display: none;}
}

.header .btn{ margin: 24px 0 0;}
.header .btn a{ display: flex; width: 100%; height: 60px; background: #dab67c; color: #000; vertical-align: sub; align-items: center; align-content: center; justify-content: center;}
.header .btn a:hover{ background: #fff;}
.header .btn i{ display: inline-block; width: 28px;}
.header .btn span{ padding: 2px 0 0 20px; text-align: center; letter-spacing: .3rem; font-weight: bold; line-height: 1.2;}

@media screen and (max-width: 768px){
    .header .btn{ position: absolute; top: 0; right: 55px; margin: 0;}
    .header .btn ul{ display: flex; margin: 0 -7px; justify-content: flex-end;}
    .header .btn ul li{ padding: 0 7px;}
    .header .btn a{ display: block; padding: 0; width: 22px; height: auto; background: none;}
    .header .btn a:hover{ background: none;}
    .header .btn i{ display: block; width: 100%;}
    .header .btn img{ vertical-align: middle;}
}

.header aside{ margin: 60px 0 0; padding: 0 0 60px;}
.header aside .ttl{ text-align: left; font-size: 1.2rem;}
.header aside ul li{ margin: 12px 0 0;}
.header aside ul i{ display: inline-block; margin: 0 6px 0 0; width: 18px;}
.header aside ul img{ display: block; vertical-align: bottom;}
.header aside a{ color: #dab67c;}
.header aside a:hover{ color: #fff;}

@media screen and (max-width: 768px){
    .header aside{ position: absolute; top: 15px; left: 15px; margin: 0; line-height: 1;}
    .header aside .ttl{ font-size: .8rem;}
    .header aside ul{ display: flex; margin: 8px -4px 0; justify-content: center;}
    .header aside ul li{ margin: 0; padding: 0 4px;}
    .header aside ul i{ display: inline-block; margin: 0; width: 22px;}
    .header aside ul img{ display: block; vertical-align: middle;}
    .header aside ul span{ display: none;}
}

.header .switch{ display: none;}

@media screen and (max-width: 768px){
    .header .switch{ display: block;}
}

/* --------------------------------------------------
 main
--------------------------------------------------- */
main{ width: 1000px; background: #2e2f32;}
.bg-blue{ background: url("/img/bg_blue.gif") repeat center; box-shadow: none;}

@media screen and (max-width: 768px){
    main{ padding: 65px 0 0; width: 100%;}
}

.ttl{ color: #dab67c; text-align: center; font-size: 1.6rem; line-height: 1;}
.page .ttl{ font-size: 2.8rem;}
.ttl span{ display: block; padding: 0 0 15px; letter-spacing: .2rem; font-size: 2.8rem; line-height: 1.5;}
.lead{ margin: 60px 0 0; color: #fff; text-align: center; font-size: 1.8rem;}
.lead mark{ display: inline; padding: 0 .5rem; color: #fff; font-size: 3.8rem; line-height: 1;}
.more{ margin: 90px 0 0; text-align: center; font-size: 2rem; line-height: 1;}
.more a{ position: relative; display: inline-block; padding: 0 0 30px;}
.more a:after{ position: absolute; bottom: 0; left: 50%; width: 8px; height: 8px; border-right: 1px solid; border-bottom: 1px solid; content: ""; transform: translate(-50%,0) rotate(45deg);}

@media screen and (max-width: 768px){
    .ttl{ font-size: 1.2rem;}
    .page .ttl{ font-size: 2.4rem;}
    .ttl span{ font-size: 2.4rem;}
    .lead{ margin: 40px 0 0; font-size: 1.6rem;}
    .more{ margin: 40px 0 0; font-size: 1.6rem;}
    .more a{ padding: 0 0 20px;}
    .anchor{ position: relative; z-index: -1; margin: -65px 0 0; padding: 65px 0 0;}
}

/* top
--------------------------------------------------- */
.top section{ position: relative; padding: 120px 75px; box-shadow: 0 50px 50px 0 rgba(0,0,0,0.5) inset, 0 -50px 50px 0 rgba(0,0,0,0.5) inset; line-height: 1.8;}
.top .bg-blue{ box-shadow: none;}

@media screen and (max-width: 768px){
    .top section{ padding: 60px 20px; box-shadow: 0 25px 25px 0 rgba(0,0,0,0.5) inset, 0 -25px 25px 0 rgba(0,0,0,0.5) inset;}
}

/* hero */
.top .hero{ padding: 0; box-shadow: none;}

/* about */
.top .about{ padding: 120px 75px 0;}
.top .about .ttl{ color: }
.top .about .lead{ color: #fff;}
.top .about figure{ margin: 60px -75px 0;}
.top .about figure a{ position: relative; display: block;}
.top .about figure figcaption{ position: absolute; bottom: 90px; left: 50%; font-size: 1.8rem; transform: translate(-50%,0);}
.top .about figure figcaption:after{ position: absolute; bottom: -22px; left: 50%; width: 8px; height: 8px; border-right: 1px solid; border-bottom: 1px solid; content: ""; transform: translate(-50%,0) rotate(45deg);}

@media screen and (max-width: 768px){
    .top .about{ padding: 60px 20px 0;}
    .top .about .lead{ font-size: 1.5rem;}
    .top .about figure{ margin: 40px -20px 0;}
    .top .about figure figcaption{ bottom: 40px; font-size: 1.6rem;}
    .top .about figure figcaption:after{ bottom: -20px;}
}

/* feature */
.top .feature{ padding: 120px 75px 0; background: url("/img/bg_bottol_shadow.png") repeat-x bottom center;}
.top .feature .flex{ display: flex; padding: 75px 0 0; align-items: flex-end;}
.top .feature .flex .cont1,
.top .feature .flex .cont2{ height: 2200px;}
.top .feature .flex ul{ padding: 0 0 180px; font-size: 1.2rem;}
.top .feature .flex li{ margin: 0 0 30px; min-height: 320px; width: 240px;}
.top .feature .flex li h3{ margin: 15px 0 0; font-size: 1.6rem;}
.top .feature .flex li p{ margin: 5px 0 0;}
.top .feature .bg{ position: -webkit-sticky; position: sticky; bottom: 0; width: calc(100% - 480px); height: 825px;}
.top .feature .bg figure{ padding: 0 90px;}
.top .feature .more{ position: absolute; bottom: 30px; left: 50%; transform: translate(-50%,0);}

@media screen and (max-width: 768px){
    .top .feature{ padding: 60px 20px 0; background: none;}
    .top .feature .flex{ padding: 20px 0 0;}
    .top .feature .flex .cont2{ width: 65%; height: auto;}
    .top .feature .flex ul{ padding: 0 0 120px;}
    .top .feature .flex li{ margin: 20px 0 0; min-height: 0; width: 100%;}
    .top .feature .flex li h3{ margin: 10px 0 0; font-size: 1.4rem;}
    .top .feature .flex li p{ margin: 5px 0 0;}
    .top .feature .bg{ padding: 20px 0 0; width: 35%; height: auto;}
    .top .feature .bg figure{ padding: 0 20px 0 0;}
    .top .feature .more{ bottom: 40px;}
}

/* cleaning */
.top .cleaning{ padding: 120px 0 460px; box-shadow: none;}
.top .cleaning .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url("/img/bg_cleaning.jpg") no-repeat bottom center / cover;}
.top .cleaning .ttl{ position: relative; z-index: 2;}
.top .cleaning .lead{ position: relative; z-index: 2; color: #fff; line-height: 1.8;}

@media screen and (max-width: 768px){
    .top .cleaning{ padding: 60px 20px 160px; min-height: 100vh;}
    .top .cleaning .lead{ text-align: left;}
}

/* component */
.top .component .list4{ display: flex; margin: 0 -15px; padding: 15px 0 0; font-size: 1.2rem; flex-wrap: wrap;}
.top .component .list4 li{ margin: 45px 0 0; padding: 0 15px; width: 25%;}
.top .component .list4 h3{ margin: 15px 0 0; font-size: 1.6rem; line-height: 1.5;}
.top .component .list4 p{ margin: 5px 0 0;}

@media screen and (max-width: 768px){
    .top .component .list4{ margin: 0 -10px; padding: 0;}
    .top .component .list4 li{ margin: 40px 0 0; padding: 0 10px; width: 50%;}
    .top .component .list4 h3{ margin: 15px 0 0; font-size: 1.4rem;}
    .top .component .list4 p{ margin: 5px 0 0;}
}

.top .component .list3{ display: flex; margin: 0 -45px; padding: 40px 0 0; font-size: 1.2rem; flex-wrap: wrap;}
.top .component .list3 li{ display: flex; margin: 15px 0 0; padding: 0 45px; width: calc(100% / 3); align-items: center;}
.top .component .list3 figure{ overflow: hidden; width: 80px; border-radius: 100%;}
.top .component .list3 p{ padding: 0 0 0 15px; width: calc(100% - 80px); font-size: 1.6rem;}

@media screen and (max-width: 768px){
    .top .component .list3{ margin: 0 -10px; padding: 30px 0 0;}
    .top .component .list3 li{ margin: 10px 0 0; padding: 0 10px; width: 50%;}
    .top .component .list3 figure{ width: 30%;}
    .top .component .list3 p{ padding: 0 0 0 10px; width: 70%; font-size: 1.2rem;}
}

/* free */
.top .free{ padding: 120px 150px 80px; box-shadow: none;}
.top .free .list4{ display: flex; margin: 0; padding: 35px 0 0; flex-wrap: wrap;}
.top .free .list4 li{ margin: 25px 0 0; padding: 0 5px; width: 25%;}

@media screen and (max-width: 768px){
    .top .free{ padding: 60px 25px;}
    .top .free .list4{ margin: 0 -10px; padding: 30px 0 0;}
    .top .free .list4 li{ margin: 10px 0 0; padding: 0 10px; width: calc(100% / 3);}
}

/* ufa */
.top .ufa{ display: flex; padding: 114px 75px 0 90px; background: url("/img/bg_bottol_shadow.png") repeat-x bottom center;}
.top .ufa .bg1{ position: relative; width: calc(100% - 540px);}
.top .ufa .bg1 figure{ position: absolute; bottom: 0; left: 0; padding: 0 90px 0 0;}
.top .ufa .bg2{ display: none;}
.top .ufa .detail{ padding: 0 0 150px; width: 540px;}
.top .ufa .logo{ width: 150px;}
.top .ufa h2{ margin: 60px 0 0; font-size: 1.6rem;}
.top .ufa h2 span{ display: block; font-size: 2.8rem;}
.top .ufa p{ margin: 30px 0 0;}
.top .ufa h2 + p{ margin: 60px 0 0;}
.top .ufa dl{ overflow: hidden; margin: 60px 0 0; font-size: 1.6rem;}
.top .ufa dt{ float: left;}
.top .ufa dt:after{ content: "：";}
.top .ufa dd:after{ display: table; clear: both; height: 0; content: "";}
.top .ufa .cart{ margin: 60px 0 0; font-size: 2.4rem;}
.top .ufa .cart a{ display: inline-block; padding: 20px; background: #dab67c; color: #000; letter-spacing: .2rem; font-weight: bold; line-height: 1;}
.top .ufa .cart i{ display: inline-block; margin: 0 15px 0 0; width: 34px;}
.top .ufa .cart img{ vertical-align: sub;}

@media screen and (max-width: 768px){
    .top .ufa{ padding: 60px 20px 0; background: none; align-items: flex-end;}
    .top .ufa .bg1{ display: none;}
    .top .ufa .bg2{ position: -webkit-sticky; position: sticky; bottom: 0; display: block; width: 35%; height: auto;}
    .top .ufa .bg2 figure{ padding: 0 20px 0 0;}
    .top .ufa .detail{ padding: 0 0 40px; width: 65%; height: auto;}
    .top .ufa .logo{ width: 60%;}
    .top .ufa h2{ margin: 20px 0 0; font-size: 1.4rem;}
    .top .ufa h2 span{ font-size: 2.4rem; line-height: 1.5;}
    .top .ufa p{ margin: 20px 0 0;}
    .top .ufa h2 + p{ margin: 20px 0 0;}
    .top .ufa dl{ margin: 40px 0 0; font-size: 1rem;}
    .top .ufa .cart{ margin: 40px 0 0; font-size: 1.8rem;}
    .top .ufa .cart a{ display: block; letter-spacing: .1rem;}
    .top .ufa .cart i{ margin: 0 8px 0 0; width: 25px;}
}

/* howtouse */
.list-step{ display: flex; margin: 75px -30px 0; padding: 0 0 0px; font-size: 1.2rem; flex-wrap: wrap;}
.list-step > li{ padding: 30px 30px 0; width: calc(100% / 3);}
.list-step .full{ width: 100%;}
.list-step h3{ font-size: 1.6rem;}
.list-step h3 span{ display: block; padding: 0 0 15px; color: #dab67c; font-weight: bold; font-size: 1.4rem; line-height: 1;}
.list-step h3 span mark{ color: #dab67c; font-size: 2.8rem;}
.list-step p{ margin: 5px 0 0;}
.list-step .list4{ display: flex; margin: 0 -30px; font-size: 1.2rem; flex-wrap: wrap;}
.list-step .list4 li{ padding: 0 30px; width: 25%;}
.list-step .list4 .img{ position: relative;}
.list-step .list4 .img:after{ position: absolute; top: 50%; left: -35px; border-width: 10px 0 10px 10px; border-style: solid; border-color: transparent transparent transparent #dab67c; content: ""; transform: translate(0,-50%);}
.list-step .list4 li:first-child .img:after{ content: none;}
.list-step .list4 figcaption{ margin: 10px 0 0;}

@media screen and (max-width: 768px){
    .list-step{ display: block; margin: 0; padding: 0;}
    .list-step > li{ padding: 20px 0 0; width: 100%;}
    .list-step h3{ font-size: 1.4rem;}
    .list-step h3 span{ padding: 0 0 10px;}
    .list-step .list4{ margin: -20px -10px 0;}
    .list-step .list4 li{ margin: 20px 0 0; padding: 0 10px; width: 50%;}
    .list-step .list4 .img:after{ content: none;}
    .list-step .list4 figcaption{ margin: 5px 0 0;}
}

/* message */
.top .message{ padding: 75px 75px 150px; box-shadow: none;}
.top .message .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url("/99/img/bg_producer.jpg") no-repeat bottom right / cover;}
.top .message .ttl{ position: relative; z-index: 2;}
.top .message .name{ position: absolute; right: 90px; bottom: 75px; z-index: 2; width: 90px;}
.top .message h3{position: relative; z-index: 2; margin: 90px 0 0; font-size: 2.4rem;}
.top .message p{position: relative; z-index: 2; margin: 30px 0 0; width: 360px; font-size: 1.2rem; line-height: 2;}
.top .message .more{ position: relative; z-index: 2; margin: 90px 0 0; text-align: left;}
.top .message .more a{ padding: 0 30px 0 0;}
.top .message .more a:after{ top: 50%; right: 0; bottom: auto; left: auto; transform: rotate(-45deg) translate(0,-50%);}

@media screen and (max-width: 768px){
    .top .message{ padding: 60px 20px 120px;}
    .top .message .bg{ background: url("/99/img/bg_producer_sp.jpg") no-repeat bottom center / cover;}
    .top .message .name{ right: 20px; bottom: 20px; width: 17%;}
    .top .message h3{ margin: 40px 0 0; font-size: 1.8rem;}
    .top .message p{ margin: 20px 0 0; padding: 0 0 0 0; width: 100%; line-height: 1.8;}
    .top .message .more{ margin: 40px 0 0;}
    .top .message .more a{ padding: 0 10px 0 0;}
}

/* 2nd
--------------------------------------------------- */
article{ position: relative; box-shadow: 0 50px 50px 0 rgba(0,0,0,0.5) inset, 0 -50px 50px 0 rgba(0,0,0,0.5) inset; line-height: 1.8;}
article header{ position: relative; display: flex; width: 100%; height: 350px; box-shadow: 0 -50px 50px 0 rgba(0,0,0,0.5) inset; align-items: center; justify-content: center;}
article header figure{ position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; background: no-repeat center center / cover;}
article header .ttl{ z-index: 2; color: #fff;}

@media screen and (max-width: 768px){
    article{ box-shadow: 0 25px 25px 0 rgba(0,0,0,0.5) inset, 0 -25px 25px 0 rgba(0,0,0,0.5) inset;}
    article header{ height: calc(200vw / 3); box-shadow: 0 -25px 25px 0 rgba(0,0,0,0.5) inset;}
}

.bread{ padding: 30px 75px 0;}
.bread ul{ display: flex; color: #c8c9ca; font-size: 1.2rem;}
.bread li{ position: relative; padding: 0 21px 0 0; letter-spacing: .1rem; font-weight: bold;}
.bread li:after{ position: absolute; top: 50%; right: 8px; border-width: 3px 0 3px 3px; border-style: solid; border-color: transparent transparent transparent #dab67c; content: ""; transform: translate(0,-50%);}
.bread li:last-child:after{ content: none;}
.bread a{ color: #dab67c;}

@media screen and (max-width: 768px){
    .bread{ padding: 20px 20px 0; font-size: 1rem;}
}

article .content{ padding: 60px 75px 120px; box-shadow: 0 -50px 50px 0 rgba(0,0,0,0.5) inset; line-height: 1.8;}
article .content h2{ margin: 90px 0 0; padding: 0 0 45px; font-size: 2.4rem;}
article .content h2:before,
article .content h2:after{ display: table; clear: both; content: "";}
article .content h2:first-child{ margin: 0;}
article .content h3{ font-size: 2rem;}
article .content p{ margin: 15px 0 0;}
article .content h2 + p{ margin: 0;}

@media screen and (max-width: 768px){
    article .content{ padding: 20px 20px 40px; box-shadow: 0 -25px 25px 0 rgba(0,0,0,0.5) inset;}
    article .content h2{ margin: 40px 0 0; padding: 0 0 20px; font-size: 1.8rem;}
    article .content h3{ margin: 20px 0 0; font-size: 1.4rem;}
    article .content p{ margin: 10px 0 0;}
    article .content h2 + p{ margin: 0;}
}

/* page
--------------------------------------------------- */
.page .content h2{ margin: 90px 0 0; padding: 0; font-size: 2.4rem;}
.page .content h2:first-child{ margin: 0;}
.page .content h3{ margin: 45px 0 0;}
.page .content p{ margin: 15px 0 0;}
.page .content p:first-child{ margin: 0;}

@media screen and (max-width: 768px){
    .page .content h2{ margin: 40px 0 0; font-size: 1.8rem;}
    .page .content h3{ margin: 20px 0 0;}
    .page .content p{ margin: 10px 0 0;}
}

.page table{ width: 100%; border: 1px solid #dab67c;}
.page h2 + table{ margin: 30px 0 0;}
.page th{ padding: 9px 21px; border: 1px solid #dab67c; color: #dab67c; text-align: right; white-space: nowrap;}
.page td{ padding: 9px 21px; border: 1px solid #dab67c;}
.page td p{ margin: 0;}

@media screen and (max-width: 768px){
    .page h2 + table{ margin: 10px 0 0;}
    .page th{ padding: 5px 10px; width: 30%; white-space: normal;}
    .page td{ padding: 5px 10px;}
}

.page figure{ margin: 15px 0 0; font-size: 1.4rem;}
.page figure img{ width: 25%;}

@media screen and (max-width: 768px){
    .page figure{ margin: 10px 0 0;}
    .page figure img{ width: 65%;}
}

.page .map{ margin: 30px 0 0;}
.page .map iframe{ width: 100%; height: 480px; vertical-align: bottom;}
.page .map figcaption{ margin: 15px 0 0;}

@media screen and (max-width: 768px){
    .page .map{ margin: 10px 0 0;}
    .page .map iframe{ height: 240px;}
    .page .map figcaption{ margin: 10px 0 0;}
}

.page ol{ margin: 15px 0 0; padding: 0 0 0 2.1rem;}
.page ol li{ list-style: decimal;}
.page ol li + li{ margin: 3px 0 0;}

@media screen and (max-width: 768px){
    .page ol{ margin: 10px 0 0; padding: 0 0 0 1.8rem;}
    .page ol li + li{ margin: 5px 0 0;}
}

.page .list{ margin: 15px 0 0; padding: 0 0 0 2.1rem;}
.page .list li{ list-style: disc;}
.page .list li + li{ margin: 3px 0 0;}

@media screen and (max-width: 768px){
    .page .list{ margin: 10px 0 0; padding: 0 0 0 1.8rem;}
    .page .list li + li{ margin: 5px 0 0;}
}

.page .list2{ margin: 15px 0 0;}
.page td .list2{ margin: 0;}
.page .list2 li{ padding-left: 1.3em; text-indent: -1.3em;}

@media screen and (max-width: 768px){
    .page .list2{ margin: 10px 0 0;}
}

.page em{ color: #ff0; font-style: normal;}

.page .step{ margin: 30px 0 0;}
.page .step li{ position: relative; padding: 30px; border: 1px solid;}
.page .step li:after{ position: absolute; bottom: -20px; left: 50%; border-width: 10px 10px 0 10px; border-style: solid; border-color: #fff transparent transparent transparent; content: ""; transform: translate(-50%,0);}
.page .step li:last-child:after{ content: none;}
.page .step li + li{ margin: 30px 0 0;}
.page .step div{ font-size: 2rem; line-height: 1;}
.page .step span{ display: inline-block; margin: 0 30px 0 0; font-size: 1.6rem;}
.page .step mark{ color: #fff; font-size: 2rem;}
.page .step p{ margin: 30px 0 0;}

@media screen and (max-width: 768px){
    .page .step{ margin: 20px 0 0;}
    .page .step li{ padding: 20px;}
    .page .step div{text-align: center;  font-size: 1.6rem; line-height: 1.5;}
    .page .step span{display: block;  margin: 0; font-size: 1.4rem;}
    .page .step mark{ font-size: 1.6rem;}
    .page .step p{ margin: 20px 0 0;}
}

.page .box{ margin: 30px 0 0; padding: 30px; border: 1px solid; text-align: center; font-size: 1.8rem; line-height: 1.5;}

@media screen and (max-width: 768px){
    .page .box{ margin: 20px 0 0; padding: 20px; font-size: 1.4rem;}
    .page .box2{ text-align: left;}
}

/* feature
--------------------------------------------------- */
.feature .content.flex{ display: flex; padding: 60px 75px 0 96px; background: url("/img/bg_bottol_shadow.png") repeat-x bottom center; align-items: flex-end;}
.feature .content .bg{ position: -webkit-sticky; position: sticky; bottom: 0; width: calc(100% - 540px);}
.feature .content .bg figure{ padding: 0 96px 0 0;}
.feature .content .detail{ padding: 0 0 120px; width: 540px;}
.feature .content .detail figure{ float: left; margin: 0 30px 15px 0; width: 45%;}

@media screen and (max-width: 768px){
    .feature .content.flex{ padding: 20px 20px 0; background: none;}
    .feature .content .bg{ width: 35%;}
    .feature .content .bg figure{ padding: 0 20px 0 0;}
    .feature .content .detail{ padding: 0 0 60px; width: 65%;}
    .feature .content .detail figure{ float: none; margin: 0; width: 100%; width: 100%;}
}

/* component
--------------------------------------------------- */
.component .content .block:before,
.component .content .block:after{ display: table; clear: both; content: "";}
.component .content .block + .block{ margin: 30px 0 0;}
.component .content .block figure{ float: left; margin: 0 30px 0 0; width: 240px;}
.component .content .list2{ display: flex; margin: 0 -15px; flex-wrap: wrap;}
.component .content .list2 li{ display: flex; margin: 30px 0 0; padding: 0 15px; width: 50%; align-items: flex-start;}
.component .content .list2 figure{ overflow: hidden; width: calc(50% - 15px); border-radius: 100%;}
.component .content .list2 .detail{ width: calc(50% + 15px);}

@media screen and (max-width: 768px){
    .component .content .block + .block{ margin: 40px 0 0;}
    .component .content .block figure{ float: none; margin: 0; width: 100%;}
    .component .content .list2{ margin: 0 -10px;}
    .component .content .list2 li{ display: block; margin: 20px 0 0; padding: 0 10px;}
    .component .content .list2 figure{ width: 100%;}
    .component .content .list2 .detail{ margin: 10px 0 0; width: 100%;}
}

/* message
--------------------------------------------------- */
.message .content .name{ margin: 60px 0 0; text-align: right; font-size: 1.6rem; line-height: 2;}

@media screen and (max-width: 768px){
    .message .content .name{ margin: 40px 0 0; font-size: 1.4rem;}
}

/* contact
--------------------------------------------------- */
.contact .content table{ width: 100%; border-right: none; border-left: none;}
.contact .content th{ padding: 18px 0; width: 20%; border-right: none; border-left: none; text-align: left;}
.contact .content td{ padding: 18px 0; border-right: none; border-left: none;}
.contact select{ padding: 6px; font-size: 1.4rem;}
.contact input[type="text"],
.contact input[type="email"],
.contact input[type="tel"]{ padding: 6px; width: 100%;}
.contact textarea{ width: 100%; height: 90px;}
.contact .submit{ margin: 30px 0 0; text-align: center;}
.contact .submit button{ display: inline-block; padding: 15px 45px; border: none; background: #dab67c; color: #000; font-weight: bold;}

@media screen and (max-width: 768px){
    .contact .content table{ border-top: none;}
    .contact .content th{ display: block; padding: 10px 0 0; width: 100%; border-bottom: none;}
    .contact .content td{ display: block; padding: 0 0 10px; border: none;}
    .contact select{ font-size: 1rem;}
    .contact input[type="text"],
    .contact input[type="email"],
    .contact input[type="tel"]{ padding: 5px;}
    .contact .submit{ margin: 20px 0 0;}
    .contact .submit button{ padding: 10px 40px;}
}

.contact .content .confirm{ border: 1px solid #dab67c;}
.contact .content .confirm th{ padding: 9px 21px; border: 1px solid #dab67c; color: #dab67c; text-align: right; white-space: nowrap;}
.contact .content .confirm td{ padding: 9px 21px; border: 1px solid #dab67c;}

@media screen and (max-width: 768px){
    .contact .content .confirm th{ padding: 5px 10px; width: 30%; white-space: normal;}
    .contact .content .confirm td{ padding: 5px 10px;}
}

.contact .error{}
.contact .error p{}

.contact .thanks{}
.contact .thanks p{}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ position: relative; padding: 48px 0; background: url("/img/bg_gold.jpg") repeat center / contain; color: #000; text-align: center;}
.footer nav ul{ display: flex; margin: 0; font-weight: bold; font-size: 1.4rem; justify-content: center;}
.footer nav li{ padding: 0 12px;}
.footer nav a{ position: relative; display: block; padding: 0 0 0 10px; color: #000;}
.footer nav a:after{ position: absolute; top: 50%; left: 0; border-width: 5px 0 5px 5px; border-style: solid; border-color: transparent transparent transparent #000000; content: ""; transform: translate(0,-60%);}
.footer small{ display: block; margin: 30px 0 0; font-size: 1.2rem;}

@media screen and (max-width: 768px){
    .footer{ padding: 25px;}
    .footer nav ul{ font-size: 1.2rem; line-height: 2; flex-wrap: wrap;}
    .footer nav li{ padding: 0 5px;}
    .footer nav a{ position: relative; display: block; padding: 0 0 0 10px; color: #000;}
    .footer nav a:after{ content: none;}
    .footer small{ margin: 25px 0 0; font-size: 1.2rem;}
}