header #logo{
    opacity: 0;
    transform: translateX(-100%);
    transition-duration: 1.0s;
}


/* eyecatch
---------------------------------------------*/

#eyecatch {
    position: relative; /* 相対位置を設定して、子要素の絶対位置指定を有効にする */
    height:calc(100vh - 120px);
    min-height:682px;
/*    background: #F3F4F6 url(../img/bg.png);*/
    background:url(../img/bg.png); /* 背景画像を設定 */
    background-size: cover; /* 背景画像を全体にカバー */
    background-position: center; /* 背景画像を中央に配置 */
}

/*#eyecatch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
*/
#eyecatch .inner {
    position: relative; /* テキストをオーバーレイの上に表示するための相対位置 */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 2; /* テキストをオーバーレイの上に表示 */
}


#eyecatch #eyecachBox{
    display: flex;
    margin-bottom:40px;
    justify-content: space-between;
    width:100%;
}

#eyecatch .inner h1 {
    line-height:normal;
    color: #FFF;
    text-shadow: 1px 1px 10px #0008;
    margin-bottom:0;
    opacity:0;
    transform: translateX(-200%);
    transition-duration: 1.0s;
    transition-delay: 0.5s;
    transition-timing-function: ease-out;
    font-size: clamp(32px, 5vw, 55px);
}

#eyecatch .inner h2 {
    line-height: 1.7;
    color: #FFF;
    text-shadow: 1px 1px 10px #0008;
    font-size:28px;
    margin-bottom:50px;
    opacity:0;
    transform: translateX(-200%);
    transition-duration: 1.0s;
    transition-delay: 1.0s;
    transition-timing-function: ease-out;
    font-size: clamp(16px, 2vw, 18px);
}


#eyecatch.active .inner h1,
#eyecatch.active .inner h2{
    opacity:1;
    transform: translateX(0%);
}

#eyecatch .button{
/*	background:#FFF;*/
	font-size:20px;
	padding:30px 40px;
	min-width:200px;
	font-weight:bold;
    background: #1A73E8;
    color: #FFF;
    border:none;
}


#eyecatch #Dock{
    background:#FFF4;
    padding:20px 40px;
    position: relative;
    margin-bottom:30px;
    border-radius: 3px;
/*    opacity: 0;*/
/*    transform: translateY(50px);*/
    transition-duration: 1.0s;
    border:2px solid #FFF;
    width:100%;
}

#eyecatch.active #Dock{
    transform: translateY(0px);
    opacity:1.0;
}

#eyecatch #dockTitle{
    text-align:center;
    margin-bottom:20px;
}

#eyecatch #dockTitle span{
    color:#FFF;
}

#eyecatch #flexstyle{
    display: flex;
    justify-content:center;
    align-items: center;
    gap:30px;
}

#eyecatch #Dock .left a{
    background:var(--secColor);
    color:#FFF;
    text-decoration: none;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height:60px;
    width:356px;
}


#eyecatch #Dock .right a{
    background:#FFF;
    color:var(--secColor);
    text-decoration: none;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height:60px;
    width:356px;
}


#eyecatch #Dock a:hover{
    box-shadow:0 0 20px #FFF;
}

/* ################### 880以下 ###################*/
@media(max-width:880px){

#eyecatch,
#eyecatch .inner{
    height:auto;
}

#eyecachBox{
    flex-direction: column;
    max-width:480px;
}

#eyecachBox #eRIght img{
    width:100%;
}

#eyecatch #Dock{
    max-width:480px;
}

#flexstyle{
    width:100%;
    flex-direction: column;
}

#eyecatch #flexstyle > div{
    width:100%;
}

#eyecatch #Dock .left a,
#eyecatch #Dock a.button{
    width:100%;
    font-size:16px;
    padding:10px 0;
    height: auto;
}

}


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


main{
    padding:0;
	padding-bottom:30px;
    background:#FFF;
}

main .inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
/*    align-items: center;*/
/*    max-width:1400px;*/
}

section{
	padding:50px 0;
    position: relative;
/*    z-index: -1;*/
/*    height:80vh;
    min-height:680px;
*/}


section .content{
	display:flex;
    justify-content: space-between;
	gap:40px;
    width:100%;
}

section .content > div{
/*	border:1px solid #eee;*/
	width:calc(100% / 3 - 40px);
	display: flex;
	justify-content: center;
	align-items: center;
/*    background:#FFF;*/
/*    aspect-ratio:  1.618 / 1;*/
/*    border-radius:10px;*/
/*    box-shadow:0 0 10px #0003;*/
}

section:nth-child(odd){
    background:#EBF7FF;
}


section h2,
section .content > *{
/*  opacity: 0.2;*/
/*  transform: translateY(100px);*/
  transition-duration: 1.0s;
}


#Service .content > div{
    padding:25px 20px 10px;
    flex-direction: column;
    background:#FFF;
    border:none;
    border-radius: 16px;
    width:100%;
/*    box-shadow:3px 3px 10px #0001;*/
}

#Service h2{
    margin-bottom:0;
}

#Service h2 + p{
    margin-bottom:40px;
}

#Service .content a{
    display: block;
    width:100%;
    overflow: hidden;
}


#Service .content img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition-duration: 3s;
}

#Service .content{
    text-align: center;
}

#Service .content >div p{
    font-size:20px;
    font-weight:bold;
    color:var(--secColor);
}


#Support h2::after{
    color:#FFF;
}

#Benefit{
    height:auto;
    padding:80px 0 100px;
}

#Benefit  .content{
    flex-wrap:wrap;
    justify-content: left;
}


section#Plan .content > div{
    display: block;
    border:2px solid #000;
    padding:0;
    margin:0;
    border-radius: 19px;
    overflow: hidden;
    background:#FFF;
}

section#Plan .content > div h3{
    display: flex;
    height:62px;
    justify-content: center;
    align-items: center;
    background:#000;
    color:#FFF;
    font-size:24px;
    margin:0 0 10px;
}

section#Plan .content > div p{
    font-weight: bold;
    font-size:32px;
}

section#Plan .content > div > span{
    border-top:1px solid #2F2F2F;
    display:block;
    padding:20px 0 0;
    margin:15px;
    text-align: left;
    font-size:14px;
    line-height: 1.7;
}

section#Plan .content > div#basic{
    border-color:#0073E6;
}

section#Plan .content > div#basic h3{
background:#0073E6;
}

section#Plan .content > div#standard{
    border-color:#4CAF50;
}

section#Plan .content > div#standard h3{
    background:#4CAF50;
}

section#Plan .content > div#Premium{
    border-color:#FFD700;
}

section#Plan .content > div#Premium h3{
    background:#FFD700;
    color:#2F2F2F;
}

section#Plan .content > div p span{
    font-size:16px;
}


section#Plan .content > div{
    text-align: center;
}

section#Support{
    background: var(--comColor);
    padding-bottom:0;
}


section#Support  h2{
    color:#FFF;
    margin-bottom:0;
}

section#Support  h2 span{
    color:#FFF;
}

section#Support  h2 span:after{
    background:#FFF;
}


section#Support .content{
    gap:0;
    transform: translateY(40px);
    box-shadow: 0 0 30px var(--comColor);
}


section#Support .content div{
    display: flex;
    flex-direction: column;
    background:#FFF;
    padding:30px 40px;
    border-right:0.5px solid #ccc;
    width:calc(100% / 3);
} 

section#Support .content div img{
    width:100%;
    height:auto;
}

section#Support .content div h3{
    font-size:20px;
    color:var(--comColor);
}


section#Support .content p{
    font-size:14px;
}

section#Trial{
    padding:120px 0 40px;
    background:none;
}

section#Trial a{
    position:relative;
    text-decoration: none;
    background:var(--comColor);
    color:#FFF;
    font-weight: bold;
    font-size:20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height:80px;
    padding:0 40px;
    border-radius: 76px;
    width:100%;
    max-width:454px;
    line-height: 1.0;
    border:2px solid var(--comColor);
    margin:0 auto;
}

section#Trial a:after{
    content:">";
    color:#FFF;
    position:absolute;
    top:28px;
    right:50px;
    display: block;
    font-size: 20px;
    transform: scaleY(1.5);
    font-weight: normal;
}

section#Trial a:hover{
    color:var(--comColor);
    background:#FFF;
}

section#Trial a:hover:after{
    color:var(--comColor);
}

/* ##################### 520以下 #####################*/

@media(max-width:520px){
    section#Trial a{
        font-size:14px;
        display: flex;
        align-items: center;
        justify-content: center;
        height:60px;
        padding:0;
        border-radius: 30px;
        width:100%;
        max-width:400px;
        margin:0 auto;
    }

    section#Trial a:after{
        content:">";
        color:#FFF;
        position:absolute;
        top:16px;
        right:30px;
    }

}

section#Benefit .content{
    gap:0;
}

section#Benefit .content > div{    
    width:calc(100% / 4);
    padding: 10px;
}

section#Benefit .content > div img{ 
    width:100%;
    height:auto;
}


/* ################### 880以下 ###################*/
@media(max-width:880px){

section .content{
    flex-direction: column;
    width: 100%;
    max-width:580px;
    margin:0 auto;
}


section#Support .content div,
section#Plan .content div,
section#Service .content div{
    width:100%;
}

section#Support .content{
    gap:20px;
    transform: translateY(0);
    padding-bottom:40px;
}

section#Benefit .content{
    flex-direction:row;
}

section#Benefit .content > div{
    width:50%;    
}


}



/* スクロールアニメーション
------------------------------------------------*/
section h2{
     transform:translateX(-100%);
}

section#Service{
    padding-bottom:100px;
}

#Service .content > div{
    position:relative;
  opacity: .5;
}

#Service .content > div:first-child{
     transform:translateX(-100px);
}

#Service .content > div:last-child{
     transform:translateX(100px);
}

#Service .content > div span{
    padding-top:5px;
    position:absolute;
    top:100%;
    left:0;
    font-size:14px;
    text-align: left;
}

#Benefit  .content > div{
    transform: scale(.5);
}

#Plan .content > div{
    opacity:.1;
}

section#Support .content div{
    transform: scaleY(0.1);
    transform-origin: bottom;
    opacity:0.2;
}


section.visible .content > div{transition-delay: 0.8s;}
section h2{transition-delay: .2s;}


/* スクロールして表示されたときの状態 */
section.visible h2,
section.visible .content > div{
  opacity: 1  !important;
  transform: translateY(0) !important;
  transform: translatex(0) !important;
  transform: scale(1.0) !important;
}

section#Support.visible .content > div:nth-child(1){transition-delay: .3s;}
section#Support.visible .content > div:nth-child(2){transition-delay: 0.6s;}
section#Support.visible .content > div:nth-child(3){transition-delay: 0.9s;}