@charset "UTF-8";

@keyframes scroll-hint-animation {
0% {transform: translate(-50%, -50%);}
50% {transform: translate(-40%, -50%);}
100% {transform: translate(-50%, -50%);}
}
.itemcenter{align-items: center;}
#kf>section>section{
padding:5em 5em 0;
}
#kf h2{
font-size: 3em;
font-weight: bold;
text-align: center;
margin-bottom: 2em;
line-height: 1.35em;
}
#kf h2 span{
color:#bc1103;
}
#kf h2::before{
position: absolute;
bottom: -2em;
left: 50%;
transform: translate(-50%, 0);
font-size: .7em;
color: #aaa;
letter-spacing: .4em;
}
#kf h2::after{
content:'';
position: absolute;
left:10%;
bottom:0;
width:80%;
height:1px;
background:#aaa;
}
#kf1 h2::before{
content:'FACT';
}
#kf2 h2::before{
content:'SOLUTION';
}
.bl{
border-left: 0.2em solid #bc1103;
width: calc(100% - 10em);
margin: 0 auto;
padding: 1em 0 1em 2em;
}
#kf1 h3,
#kf3 h3{
padding-left:4.5em;
border-bottom:.1em solid #bc1103;
background:linear-gradient(30deg,#bc1103 7%,white 7%);
font-weight: bold;
color:#2c4873;
margin-bottom:2em;
}
#kf1_3 table{
border-spacing: 0;
font-size: .7em;
line-height: 1.5em;
}
#kf1_3 thead th{
border-bottom:1px solid black;
position: relative;
font-size:.8em;
padding:.5em;
color:#333;
}
#kf1_3 tbody th,
#kf1_3 tbody td{
border-bottom:1px solid #555;
padding:.5em;
}
#kf1_3 tbody tr:last-of-type th,
#kf1_3 tbody tr:last-of-type td{
border-color:black;
}
#kf1_3 thead th:not(:nth-of-type(1))::before{
content:'';
position: absolute;
bottom:0;
left:0;
height:50%;
width:1px;
background:#ccc;
}
#kf1_3 td{
border-left:1px solid #aaa;
}
#kf1_3 tbody th{
width: 23%;
font-size: 1.4em;
color: #bc1103;
font-weight: bold;
}
#kf1_3 td:nth-of-type(1){
width:23%;
}
#kf1_3 td:nth-of-type(2){
width:4%;
text-align: center;
}
#kf1_3 td:nth-of-type(3){
width:23%;
}
#kf1_3 td:nth-of-type(4){
width:27%;
}
#kf1_3 li{
padding-left:1em;
}
#kf1_3 li::before{
content:'・';
position: absolute;
left:0;
top:auto;
}
#kf1_3 li span{
color: #bc1103;
font-weight: bold;
}
#kf1_3 table+p{
font-weight: bold;
margin:1em auto;
}
#kf1_3 table+p span{
font-size:1.2em;
color: #bc1103;
}
#kf2{
padding:8em 0;
}
#kf2 li{
width: 30%;
background:linear-gradient(135deg,red 7%,#071b35 7%);
margin-bottom: 2em;
padding:4.5em 1em 1em;
}
#kf2 li>div{
width:50%;
}
#kf2 li>div:nth-of-type(1){
padding-right:1em;
}
#kf2 li p{
color: #ddd;
font-weight: 300;
font-size: .8em;
line-height: 1.5em;
}
#kf2 li h3{
color: white;
font-size: 1em;
font-weight: bold;
width: 100%;
position: absolute;
left: 0;
top: 2em;
padding-left: 1em;
}
#kf2_2{
margin: 4em auto;
background: url(//www.yanaya.co.jp/wp-content/themes/yanaya/images/kf/kf2-2.png) right 5em bottom no-repeat;
background-size: auto 100%;
padding:1em 5em 2em 5em !important;
}
#kf2_2 h3,
#kf3_3 h4{
color: #bc1103;
font-weight: bold;
font-size: 1.5em;
}
#kf2_2 p{
font-size:.9em;
}
#kf3 h2{
font-size: 2.5em;
font-weight: 500;
}
#kf3 h2::before{
content:'CONSTRUCTION';
}
#kf3_2>div>div:nth-of-type(1){
width:80%;
}
#kf3_2>div>div:nth-of-type(2){
width:20%;
}
#kf3_3 h3{
background: #bb190d;
width: 13em;
color: white;
font-size: 1.5em;
line-height: 2em;
}
#kf3_3>div{
margin-bottom:4em;
}
#kf3_3 h3::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 4em;
height: 2em;
background: url(//www.yanaya.co.jp/wp-content/themes/yanaya/images/kf/kf3-3.webp) center no-repeat;
background-size: 100% auto;
}
#kf3_3 p{
font-weight:bold;
}
#kf3_3_1>div>div{
width:50%;
}
#kf3_3_1>div>div:nth-of-type(1){
padding:1em;
background:#f5f5f5;
}
#kf3_3_1>div>div:nth-of-type(1) .flex{
height:10em;
}
#kf3_3_1 iframe{
width:100%;
aspect-ratio: 16 / 9;
}
#kf3_3_1 h4{
margin-bottom:1em;
}
#kf3_3_2{
padding:4em 0;
}
#kf3_3_2 h4{
font-size:1em;
font-weight: 500;
color:black;
}
#kf3_3_2 li{
font-size:.8em;
padding-left:1em;
}
#kf3_3_2 li::before{
content:'・';
position: absolute;
left:0;
top:auto;
color:#bc1103;
}
@media screen and (max-width:699px){
.mdn{display: none;}
body{
font-size:14px;
}
p{
margin-bottom:1em;
}
#kf h2{
font-size:1.5em;
}
.bl{
width:calc(100% - 1em);
padding:1em 0 1em 1em;
}
#kf>section>section{
padding:4em 1em 0;
}
#kf1 h3, #kf3 h3{
background:linear-gradient(30deg,#bc1103 15%,white 15%);
font-size: 1.2em;
}
#kf2 li{
width:100%;
}
#kf2 li>div:nth-of-type(1) {
width: 70%;
}
#kf2 li>div:nth-of-type(2) {
width: 30%;
}
#kf2{
padding: 4em 0;
}
#kf2_2 {
margin: 4em auto 0;
background: url(//www.yanaya.co.jp/wp-content/themes/yanaya/images/kf/kf2-2.webp) right bottom no-repeat;
background-size: auto 40%;
padding: 1em 1em 8em 1em !important;
font-size: .9em;
}
#kf3 h2{
font-size: 1.2em;
}
#kf3_2 .ddn{
float: right;
width:10em;
}
#kf3_2>div>div:nth-of-type(1){
width:100%;
}
#kf3_3 h3{
background: #bb190d;
width: 100%;
}
#kf3_3_1>div>div{
width:100%;
}
#kf3_3_1>div>div:nth-of-type(1) .flex{
height:auto;
}
#kf1_3 table{
font-size:.9em;
}
#kf1_3 th,#kf1_3 td{
width:auto;
}
.table-container{
position: relative;
overflow-x: auto;
white-space: nowrap;
}
.scroll-hint {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-weight: 700;
line-height: 1.4;
display: none;
animation: scroll-hint-animation 2s infinite ease;
}
.scroll-hint--show {
display: block;
}
} #freon1 h2,
#freon1>p:nth-of-type(2){
font-size:1.5em;
margin-bottom:2em;
color:#bc1103;
font-weight: 400;
}
#freon1 h2 span,
#freon1>p:nth-of-type(2) span{
font-size:2em;
}
#freon1 h2+div{
background: linear-gradient(90deg, #f3f3f3 55%, white 55%);
border:1px solid #f3f3f3;
}
#freon1>div>div:nth-of-type(1){
width:60%;
}
#freon1>div>div:nth-of-type(2){
width:40%;
}
#freon1>div>div:nth-of-type(1) p:nth-of-type(1){
margin-bottom:2em;
}
#freon1>div>div:nth-of-type(1) p:nth-of-type(1) span{
font-size: 4em;
line-height: 1em;
font-weight: 500;
}
#freon1>p:nth-of-type(1){
padding: 2em 6em;
}
#freon1>p:nth-of-type(2){
color:#005bac;
}
#freon2 h2{
font-size:.8em;
color:white;
width:30em;
margin:0 auto 3em;
background:linear-gradient(-45deg,white 5%,#ee7801 5%,#ee7801 95%,white 95%);
font-weight: 400;
padding:.5em;
}
#freon2 h2 span{
display: block;
font-size:2em;
line-height:120%;
}
#freon2>div p:nth-of-type(1){
font-size:1.5em;
font-weight: 500;
font-family:serif;
}
#freon2>section{
margin: 4em auto 6em;
width: 90%;
padding-bottom: 2em;
}
#freon2 .maru{
position: absolute;
width: 3.5em;
height: 3.5em;
left: -1em;
top: -1.3em;
background: white;
border-radius: 5em;
padding: 1em 0 0 0;
text-align: center;
font-size: 1.8em;
font-family: serif;
}
#freon2 .maru span{
display: block;
font-size: .4em;
line-height: 1.2em;
font-family: sans-serif;
margin-top: 0.3em;
}
#freon2 h3{
font-size:1.5em;
}
#freon2 h3 span{
display: inline-block;
}
#freon2 h3 span:nth-of-type(1){
font-weight: 500;
color:white;
padding-left:5em;
padding-right:2em;
}
#freon2 h3 span:nth-of-type(2){
font-family:serif;
padding-left:1em;
}
#freon2>section>p{
padding: 2em 0 2em 4em;
font-family: serif;
} #freon2-1,
#freon2-2{
background:#f1f6f2;
}
#freon2-1 .maru,
#freon2-2 .maru{
border:2px solid #527f5f;
}
#freon2-1 h3,
#freon2-2 h3{
border-top:2px solid #527f5f;
border-bottom:2px solid #527f5f;
}
#freon2-1 h3 span:nth-of-type(1),
#freon2-2 h3 span:nth-of-type(1){
background:#527f5f;
}
#freon2-1 h3 span:nth-of-type(2),
#freon2-2 h3 span:nth-of-type(2),
#freon2-1 .maru,
#freon2-2 .maru{
color:#527f5f;
}
#freon2-1>div:nth-of-type(1),
#freon2-1>div:nth-of-type(2){
padding:0 2em;
}
#freon2-1>div:nth-of-type(2){
font-size:.8em;
margin: 1em auto;
}
#freon2-1>div:nth-of-type(2)>div{
width:50%;
}
#freon2-1 li{
padding-left:3.5em;
width:17em;
font-size: 0.77em;
}
#freon2-1 li:nth-of-type(3n+1){
width:13em;
}
#freon2-1 li::before{
content: '';
width: 3em;
height: 3px;
border-radius: 1em;
position: absolute;
left: 0;
top: calc(50% - 2px);
}
#freon2-1 li:nth-of-type(1)::before{background:#2196d4;}
#freon2-1 li:nth-of-type(2)::before{background:#4e7eb9;}
#freon2-1 li:nth-of-type(3)::before{background:#dd5b50;}
#freon2-1 li:nth-of-type(4)::before{background:#e26a0e;}
#freon2-1 li:nth-of-type(5)::before{background:#a5c869;}
#freon2-1 li:nth-of-type(6)::before{background:#9d478e;}
#freon2-1 li:nth-of-type(7)::before{background:#f0b81b;}
#freon2-1 li:nth-of-type(8)::before{background:#14a4a1;} #freon2-2 h4{
padding:0 0 2em 4em;
}
#freon2-2 ul,
#freon2-3 ul,
#freon2-4 ul{
padding:0 4em;
}
#freon2-2 li{
width:30%;
font-size: .8em;
}
#freon2-2 li p span{
font-size:1.2em;
} #freon2-3{
background:#f2f6f8;
}
#freon2-3 .maru{
border:2px solid #4c829b;
}
#freon2-3 h3{
border-top:2px solid #4c829b;
border-bottom:2px solid #4c829b;
}
#freon2-3 h3 span:nth-of-type(1){
background:#4c829b;
}
#freon2-3 h3 span:nth-of-type(2),
#freon2-3 .maru{
color:#4c829b;
}
#freon2-3 li{
margin:0 1em;
}
#freon2-3 img{
height:25em;
width:auto;
} #freon2-4 .maru{
border:2px solid #943763;
}
#freon2-4 h3{
border-top:2px solid #943763;
border-bottom:2px solid #943763;
}
#freon2-4 h3 span:nth-of-type(1){
background: #943763;
}
#freon2-4 h3 span:nth-of-type(2),
#freon2-4 .maru{
color:#943763;
}
#freon2-4{
background: #f8f2f5;
}
#freon2-4 li{
width:48%;
} #freon2-5{
background:#fbf5ef;
}
#freon2-5 .maru{
border:2px solid #9a6b1d;
}
#freon2-5 h3{
border-top:2px solid #9a6b1d;
border-bottom:2px solid #9a6b1d;
}
#freon2-5 h3 span:nth-of-type(1){
background: #9a6b1d;
}
#freon2-5 h3 span:nth-of-type(2),
#freon2-5 .maru{
color: #9a6b1d;
}
#freon2-5 img{
width: 94%;
} #freon2-6{
background:#eee;
padding:2em;
}
#freon2-6 table{
font-size:.9em;
border-spacing: 1px;
background:black;
line-height: 1.2em;
}
#freon2-6 th,
#freon2-6 td{
padding:.2em .5em;
}
#freon2-6 th{
background:#ffeec4;
}
#freon2-6 thead tr:nth-of-type(1) th:nth-of-type(1){
width:13em;
}
#freon2-6 tbody th:nth-of-type(1){
}
#freon2-6 td{
background:white;
}
#freon2-6 td:nth-of-type(1){
width:27em;
}
#freon2-6 thead tr:nth-of-type(1) th:nth-of-type(3),
#freon2-6 thead tr:nth-of-type(2) th:nth-last-of-type(-n+3){
text-align: center;
}
#freon2-6 tbody td:nth-last-of-type(-n+3){
width:6em;
text-align: center;
}
#freon2-6-1>div>div{
margin-bottom:2em;
}
#freon2-6-2>section{
width:48%;
padding:2em;
border:1px solid #aaa;
}
#freon2-6-2 h4{
color:white;
font-weight: bold;
font-size:1.2em;
background:#4fa4da;
padding:.5em 2em;
margin-bottom:1em;
}
#freon2-6-2 img{
float:right;
width:10em;
}
#freon2-7{
width:90%;
margin:0 auto 5em;
}
#freon2-7 p{
margin-bottom:3em;
}
@media screen and (max-width:699px){
#freon1 h2 span, #freon1>p:nth-of-type(2) span{
font-size: 1.2em;
display: block;
line-height: 1.5em;
}
#freon1 h2+div{
background:#f3f3f3;
padding:2em;
}
#freon1>div>div{
width:100% !important;
}
#freon1>p:nth-of-type(1) {
padding: 0;
}
#freon2>section {
margin: 4em auto;
}
#freon2 h3 span:nth-of-type(1){
display: block;
padding-left: 4em;
padding-right:0;
}
#freon2 h3 span:nth-of-type(2){
font-size: .8em;
text-align: center;
display: block;
}
#freon2 .maru{
left: -0.5em;
top: -1.6em;
font-size: 1.6em;
}
#freon2>section>p{
padding:1em;
}
#freon2-1>div:nth-of-type(1){
padding:0;
}
#freon2-1>div:nth-of-type(2){
padding:1em 2em 0;
}
#freon2-1>div:nth-of-type(2)>div{
width:100%;
}
#freon2-1>div:nth-of-type(2)>div:nth-of-type(2){
-webkit-order:-1;
order: -1;
margin-bottom:2em;
}
#freon2-1 li{
width:50% !important;
}
#freon2-2 h4 {
padding: 0 0 1em 1em;
}
#freon2-2 ul, #freon2-3 ul, #freon2-4 ul{
padding:0 2em;
}
#freon2-2 li {
width: 100%;
font-size: 1em;
}
#freon2-3 li{
margin:0 auto 2em;
}
#freon2-3 img {
height: auto;
width: 100%;
}
#freon2-4 li{
width:100%;
margin-bottom:2em;
}
#freon2-6-2>section{
width: 100%;
padding: 0;
margin-bottom: 2em;
border: none;
}
#freon2-6-2 img{
margin-left:1em;
}
#freon2-7 p {
margin-bottom: 1em;
}
#freon2-7 img{
width:60em;
}
}