@charset "utf-8";

#mf1 .mf-inner{
padding: 100px 0;
}
#mf1 .ctext{
padding: 0 0 0 300px;
position: relative;
z-index: 9;
}
#mf1 .ctext:before{
content: "Whatʼs Template?";
font-size: 6.25em;
font-weight: bold;
color: #f0fafa;
line-height: 1em;
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
#mf1 h2{
font-size: 2.5em;
color: #33b9bb;
font-weight: bold;
margin: 0 0 30px 0;
}
#mf1 dl dt{
font-size: 1.5em;
font-weight: bold;
margin: 0 0 20px 0;
}
#mf1 img{
position: absolute;
top: 0;
left: 0;
}

#mf2{
background: #eaf8f8;
overflow: hidden;
position: relative;
}
#mf2 .mf-inner{
padding: 70px 0 0;
}
#mf2:before,
#mf2:after{
content: "";
max-width: 1065px;
max-height: 1020px;
width: 142vw;
height: 136vw;
background: url("../img/top/bg.png") center /cover no-repeat;
position: absolute;
z-index: -1;
}
#mf2:before{
left: 0;
top: 10%;
transform: translate(-50%,0);
}
#mf2:after{
right: 0;
top: 50%;
transform: translate(50%,0);
}
#mf2 h2{
text-align: center;
font-size: 2.73em;
font-weight: bold;
position: relative;
}
#mf2 h2:after{
content: "";
display: table;
margin: 40px auto 50px;
width: 150px;
height: 5px;
background: rgb(27,212,215);
background: linear-gradient(90deg, rgba(27,212,215,1) 0%, rgba(32,151,226,1) 100%);
}
#mf2 h2 span{
font-size: 1.6em;
line-height: 1em;
background: rgb(27,212,215);
background: linear-gradient(90deg, rgba(27,212,215,1) 0%, rgba(32,151,226,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#mf2 .cbox{
width: 100%;
background: #fff;
border-radius: 20px;
box-shadow: 0 0 20px #e7f5f5;
margin: 0 0 60px 0;
}
#mf2 .cbox-inner{
padding: 60px;
}
#mf2 .cbox .cttl{
display: flex;
align-items: center;
margin: 0 0 20px 0;
}
#mf2 .cbox .cttl span{
font-size: 5em;
margin: 0 0.1em 0 0;
font-weight: bold;
line-height: 1em;
background: rgb(27,212,215);
background: linear-gradient(90deg, rgba(27,212,215,1) 0%, rgba(32,151,226,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#mf2 .cbox .cttl h3{
font-size: 1.88em;
font-weight: bold;
}
#mf2 .cbox .cttl h3 strong{
color: #33b9bb;
}
#mf2 .clist{
justify-content: space-between;
margin: 0 0 50px 0;
align-items: center;
}
#mf2 .ctext{
width: 580px;
}
#mf2 .ctext p{
margin: 0 0 1em 0;
}
#mf2 ul{
display: flex;
justify-content: space-between;
}
#mf2 ul li{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 255px;
padding: 30px 10px;
border: #1EB6DD solid 1px;
border-radius: 20px;
text-align: center;
line-height: 1.5em;
}
#mf2 ul li.dum{
border: none;
}
#mf2 ul li img{
display: block;
margin: 0 auto 10px auto;
}

#scene{
background: #FFF;
}
#scene .mf-inner{
padding: 100px 0;
}
#scene .clist{
justify-content: space-between;
}
#scene ul li img{
width: 340px;
display: block;
filter: drop-shadow(4px 4px 4px rgba(160, 160, 160, 0.2));
}
#scene .scene_tx{
    padding: 5px 0;
    margin: 10px auto 10px;
    display: block;
    text-align: center;
    background: #eaf8f8;
}
#scene h2{
text-align: center;
font-size: 2.73em;
font-weight: bold;
position: relative;
}
#scene h2:after{
content: "";
display: table;
margin: 40px auto 50px;
width: 150px;
height: 5px;
background: rgb(27,212,215);
background: linear-gradient(90deg, rgba(27,212,215,1) 0%, rgba(32,151,226,1) 100%);
}
#scene h3{
font-size: 2em;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
background: linear-gradient(90deg, rgb(27, 212, 215) 0%, rgb(32, 151, 226) 100%);
color: #FFF;
height: 798px;
padding: 0 20px;
display: flex;
justify-content: center;
align-items: center;
}
#scene ul{
width: 90%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
/* アニメーション前の初期 */
.fadein {
  opacity: 0;
  transition: opacity 1.5s, transform 1.5s;
}

/* 下フェイド */
.fadein-up {
  transform: translateY(30px); 
}

/* scrollinクラス後 */
.fadein.scrollin {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------
jirei
-------------------------------------------------------------------- */
#jirei {
background: #eaf8f8;
overflow: hidden;
position: relative;
}
#jirei .mf-inner{
padding: 100px 0 0;
}
#jirei .container {
    margin: 0 auto;
    border-radius: 12px;
    padding: 20px;
    max-width: 1080px;
    width: 100%;
}
#jirei h2{
text-align: center;
font-size: 2.73em;
font-weight: bold;
position: relative;
}
#jirei h2:after{
content: "";
display: table;
margin: 40px auto 50px;
width: 150px;
height: 5px;
background: rgb(27,212,215);
background: linear-gradient(90deg, rgba(27,212,215,1) 0%, rgba(32,151,226,1) 100%);
}
#jirei img {
    width: 50%;
}

.tab-container {
    position: relative;
}

.tab-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    background: #eeeeee;
    border-radius: 48px;
    padding: 6px;
    position: relative;
}

.slide-indicator {
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc(100% / 6 - 2px);
    height: calc(100% - 12px);
    background: linear-gradient(135deg, #4a4a4a 0%, #2c2c2c 100%);
    border-radius: 48px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.tab-container ul li {
    flex: 1;
    padding: 14px 18px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    border-radius: 8px;
    margin: 0 2px;
    background: transparent;
}

.tab-container ul li.selected {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tab-container ul li:not(.selected):hover {
    color: #aaaaaa;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.tab-content {
    display: none;
    padding: 10px;
    min-height: 150px;
    background: #fefefe;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-top: 16px;
}

.tab-content.selected {
    animation: slideContentIn 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 32px;
}
.cmlist {
    display: block !important;
    background: #F6F6F6;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

@keyframes slideContentIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
#mf4{
background: #eaf8f8;
}
#mf4 .mf-inner{
padding: 50px 0;
}
#mf4 .btn-b{
width: 450px;
margin: 0 auto;
}
#samp {
    margin-bottom: 30px;
}
#samp img {
filter: drop-shadow(rgba(160, 160, 160, 0.2) 4px 4px 4px);
}
#samp .swiper-slide {
  width: 200px;
}
#samp .swiper-wrapper {
  transition-timing-function: linear;
}
#samp .swiper-container {
    overflow: hidden;
}
.clist img {
    max-width: 450px;
    filter: drop-shadow(rgba(160, 160, 160, 0.2) 4px 4px 4px);
}

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

#mf1 .mf-inner{
padding: 5vw;
}
#mf1 .ctext{
padding: 0;
}
#mf1 .ctext:before{
font-size: 3em;
width: 6em;
text-align: right;
top: 0;
right: 0;
}
#mf1 h2{
font-size: 2em;
font-weight: bold;
margin: 0 0 30px 0;
}
#mf1 dl dt{
font-size: 1.2em;
font-weight: bold;
margin: 0 0 20px 0;
}
#mf1 img{
max-width: 180px;
width: 24vw;
position: static;
float: right;
}

#mf2:before{
left: 0;
top: 10%;
transform: translate(-50%,0);
}
#mf2:after{
right: 0;
top: 50%;
transform: translate(50%,0);
}
#mf2 .mf-inner{
padding: 15vw 5vw;
}
#mf2 h2{
font-size: 1.8em;
line-height: 1.3em;
margin-bottom: 50px;
}
#mf2 h2:after{
margin: 5vw auto;
}
#mf2 .cbox{
max-width:750px;
margin: 0 auto 10vw auto;
}
#mf2 .cbox-inner{
padding: 5vw;
}
#mf2 .clist {
margin: 0;
}
#mf2 .cbox .cttl {
margin: 0;
}
#mf2 .cbox .cttl span{
font-size: 3em;
}
#mf2 .cbox .cttl h3{
font-size: 1.3em;
line-height: 1.3em;
}
#mf2 .cbox figure{
text-align: center;
margin: 5vw auto;
}
#mf2 .cbox figure img{
width: 100%;
}
#mf2 .btn-b{
max-width: 700px;
width: 80vw;
}
#mf2 ul{
flex-wrap: wrap;
gap: 10px;
}
#mf2 ul li{
max-width: 255px;
width: 48%;
padding: 3vw 2vw;
font-size: 0.7em;
}
#mf2 ul li br{
display: none;
}
#mf2 ul li.dum{
border: none;
}
#mf2 ul li img{
display: block;
margin: 0 auto 10px auto;
max-width: 100%;
}


#mf3 .mf-inner{
padding: 15vw 5vw;
}
#mf3 .clist{
justify-content: center;
}
#mf3 h3{
text-align: center;
font-size: 1.8em;
line-height: 1.3em;
writing-mode:initial;
}
#mf3 h3:before{
display: none;
}
#mf3 h3:after{
content: "";
display: table;
margin: 5vw auto;
width: 150px;
height: 5px;
background: rgb(27,212,215);
background: linear-gradient(90deg, rgba(27,212,215,1) 0%, rgba(32,151,226,1) 100%);
}

#mf3 ul{
max-width: 750px;
width: 100%;
margin: 0 auto;
}
#mf3 ul li{
text-align: center;
width: 48%;
}

#scene .mf-inner {
padding: 15vw 5vw;
}
#scene h2{
font-size: 1.8em;
line-height: 1.3em;
}
#scene .clist {
display: block;
}
#scene ul{
width: 100%;
display: block;
}
#scene ul li{
width: 100%;
}
#scene ul li img {
width: 100%;
}
#scene h3 {
font-size: 1.5em;
writing-mode: initial;
height: auto;
padding: 15px 20px;
display: block;
text-align: center;
}
#jirei .mf-inner {
padding: 15vw 5vw;
}
#jirei h2{
font-size: 1.8em;
line-height: 1.3em;
}
.tab-content {
padding: 0px;
}
.tab-container ul {
display: block;
border-radius: 18px;
}
.slide-indicator {
width: calc(100% - 12px);
height: calc(100% / 6 - 2px);
}
#mf4 .mf-inner{
padding: 5vw;
}
#mf4 .btn-b{
max-width: 750px;
width: 80vw;
}
#cfooter {
margin: 0vw 0 0 0;
}
}