@keyframes fadein{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

.u-fade-type-up{
    transform: translateY(50px);
    opacity: 0;
}

.u-fade-type-up.is-active{
    transition: .6s;
    transform: translateY(0);
    opacity: 1;
}

p{
    font-family: kinuta-maruminyoshino-stdn,serif;
    font-weight: 400;
    font-style: normal;
}

a {transition: 0.5s;}

a:hover{opacity:0.5;}

.pc{display: block;}
.sp{display: none;}

.wrapper{
    background:url(../images/bg.jpg);
}

.inner{
    width:920px;
    margin:0 auto;
}

.verTxt {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-align: justify;
}

.col2 {
    display: flex;
}

.imgBox {
    text-align: center;
}


.top{
    font-size:0;
    position: relative;
}

.logo {
    width: 35vw;
    position: absolute;
    top: 0;
}

.ieyasu {
    width: 25vw;
    margin-left: 3vw;
    position: absolute;
    bottom: -5vw;
}


.con01 {
    height: 640px;
    margin-bottom: 30px;
    background: url(../images/eng-logo.png)no-repeat left bottom;
    background-position-x: 3vw;
    background-size: 238px auto;
}

.con01 .inner {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: url(../images/corner.png) no-repeat right top;
}

.con01 .txtBox {
    position: relative;
    width: 100%;
    height: 473px;
    padding-right: 7em;
}

.con01 .verTxt p {
    font-size: 21px;
    line-height: 2.5em;
}


.con02 {
    text-align: center;
    margin-bottom: 100px;
}

.con02 .col2 div {
    width: 50%;
}

.con02 .txtBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 0 2em;
}

.con02 h2 {
    margin-bottom: 15px;
}

.con02 p {
    font-size: 20px;
}

.con02 .col2 {
    margin-bottom: 50px;
}

.lay00 {
    position: relative;
}

.lay01 {
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.lay01 a {
    padding: 18px 15px;
}


.con03 {
    margin-bottom: 100px;
}

.con03 .col2 {
    flex-direction: row-reverse;
    align-items: flex-end;
    justify-content: space-between;
}

.con03 .txtBox {
    width: 645px;
    height: 400px;
    padding: 15px 0;
    font-size: 21.5px;
    line-height: 2.4em;
    background:url(../images/bg-op.png)no-repeat bottom left;
}


.con04 .col2 {
    justify-content: space-between;
}

table{
    font-size:24px;
    font-family: zen-old-mincho, sans-serif;
    font-weight: 900;
    font-style: normal;  
    margin: 0 auto;
    margin-top: 15px;  
}

tr {
    line-height: 1.5em;
}

th {
    width: 30%;
}

td.hontai {
    font-size: 0.9em;
}

.cTxt {
    text-align: center;
    padding: 30px 0;
}

.btn {
    display: inline-block;
    background: #5F3865;
    color: #fff;
    font-family: zen-old-mincho, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 23px;
    padding: 0.75em 1.8em;
    border-radius: 1.8em;
}

@media screen and (max-width: 920px) {
    .inner{width:100%;padding: 0 15px;}
    .con01 .inner{background-size: 38%;}
    .con01 .txtBox {
        padding: 6em 3em;
        display: flex;
        align-items: center;
        background: none;
        height: auto;
    }
    .con01 .verTxt p {font-size: calc( 22 * (100vw / 920));}

    .con02 p{font-size: calc( 19.4 * (100vw / 920));}

    .lay01 img {
        height: 100%;
    }
    
    .lay01 a {
        height: 85%;
    }


    .con03 .col2{justify-content: space-evenly;}

    .con03 .txtBox {
        width: 50%;
        font-size: calc( 22 * (100vw / 920));
        background: url(../images/bg-op.png)no-repeat bottom right;
    }

    .box {
        padding: 1em;
    }

    table{font-size:calc( 26 * (100vw / 920));}

    .btn{font-size:calc( 23 * (100vw / 920));}
}

@media screen and (max-width: 660px) {
    .pc{display: none;}
    .sp{display: block;}

    .verTxt {
        writing-mode: lr;
    }

    .con01{height:auto; background:none;}
    .con01 .verTxt p {
        font-size: calc( 22 * (100vw / 660));
        line-height: 2em;
    }
    .con01 .txtBox{
        padding: 9vh 5vw;
        background: url(../images/eng-logo.png)no-repeat right bottom;
        background-size: 40%;
    }


    .con02 .col2{
        flex-direction: column-reverse;
    }

    .con02 .col2 div {
        width: 100%;
    }

    .con02 .txtBox{
        margin-top:1.5em;
    }

    .con02 p {
        font-size: calc( 24 * (100vw / 660));
    }

    .maccha {
        padding: 0.75em;
        border: 3px solid;
        border-image: linear-gradient(45deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
        border-image-slice: 1;
    }

    .maccha h2 {
        font-family: kinuta-maruminyoshino-stdn,serif;
        font-weight: 400;
        font-style: normal;
        font-size: calc( 35 * (100vw / 660));
    }

    .con02 .maccha .col2 {
        flex-direction: row;
        margin-bottom: 1em;
    }
    
    .con02 .maccha .col2 .imgBox {
        width: 40%;
        padding: 0.5em;
        height: 20vh;
        display:flex;
        align-items: center;
        justify-content: center;
    }

    .maccha .col2 .imgBox img{
        max-height: 100%;
    }

    .con02 .maccha .col2 .txtBox {
        width: 60%;
        padding: 0;
        margin: 0;
    }


    .con03 {
        margin-bottom: 5vw;
    }

    .con03 .col2{
        flex-direction: column-reverse;
        align-items: center;
    }
    .con03 .txtBox{
        width:100%;
        font-size: calc( 22 * (100vw / 660));
        text-align: center;
        height: auto;
        background-size: 40vw;
        line-height: 2em;
        padding:2em 0;
    }

    .con04 .col2{
        flex-direction: column;
    }

    table {
        font-size: calc( 35 * (100vw / 660));
    }

    .btn {
        font-size: calc( 25 * (100vw / 660));
    }

}