.header .header_nav {
    width: 80%;
}

.header .header_nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.header .header_nav ul li {
    position: relative;
    margin: 0 0 20px;
    box-sizing: border-box;
}

.header .header_nav ul li img {
    height: 24px;
    width: auto;
}

header {
    border-top: 2px solid #54B7C1;
}

.header .header_nav ul li a {
    display: block;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
}

body.menuopen {
    overflow: hidden;
}

.header .header_nav ul li a::before {
    content: "";
    width: 0;
    height: 4px;
    background-color: #54B7C1;
    position: absolute;
    bottom: -20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.header .header_nav ul li:hover a::before {
    width: 50%;
}

.header .header_nav ul li a p {
    font-size: 13px;
    text-align: center;
}

.header .header_nav ul li a p span {
    display: block;
    font-size: 10px;
    line-height: 1em;
    color: #c6b198;
    margin: 0 0 4px;
}

#beauty .gmenusub ul li.mbeauty a::before, #onsenspa .gmenusub ul li.monsenspa a::before, #bedrockbath .gmenusub ul li.mbedrockbath a::before, #ariakekitchen .gmenusub ul li.mariakekitchen a::before, #beauty .gmenu ul li.mbeauty a::before, #onsenspa .gmenu ul li.monsenspa a::before, #bedrockbath .gmenu ul li.mbedrockbath a::before, #ariakekitchen .gmenu ul li.mariakekitchen a::before, #userguide .gmenu ul li.muserguide a::before, #spaplan2 .gmenu ul li.mspaplan a::before, #spaplan .gmenu ul li.mspaplan a::before, #top .gmenu ul li.mtop a::before, #faq .gmenu ul li.mfaq a::before, #concept .gmenu ul li.mconcept a::before, #about .gmenu ul li.mabout a::before {
    width: 100%;
}

#wrpG {
    width: 100%;
    height: calc(100vh - 54px);
    background-color: #A6D8D9;
    position: relative;
    position: fixed;
    pointer-events: none;
    top: 54px;
    left: -102%;
    z-index: 9990;
    overflow: auto;
    box-sizing: border-box;
    -moz-transition: 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
    -o-transition: 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
    -webkit-transition: 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
    transition: 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
    box-sizing: border-box;
}

#wrpG.gmenu ul {
    width: 100%;
    height: 100%;
    position: relative;
}

#wrpG.gmenu ul li {
    width: 50%;
    height: 10%;
    position: relative;
    float: left;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    box-sizing: border-box;
}

#wrpG.gmenu ul li:nth-child(2n) {
    border-right: none;
}

#wrpG.gmenu ul li:nth-child(11), #wrpG.gmenu ul li:nth-child(11) {
    /* border-bottom: none; */
}

#wrpG.gmenu ul li a {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#wrpG.gmenu ul li a img {
    width: auto;
    height: 30px;
}

#wrpG.gmenu ul li a::before {
    content: "";
    width: 0;
    height: 4px;
    background-color: #54B7C1;
    position: absolute;
    bottom: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    z-index: 3;
}

.menuopen #wrpG {
    left: 0;
    pointer-events: auto;
}

.thimi, .thimi2, .thimi4, .thimi3 {
    opacity: 0;
    transform: scale(1.1) translate(0, 100px) skew(0deg, -5deg);
}

.thimi.ani1 {
    opacity: 1;
    -webkit-transition: 1s 0.25s;
    -moz-transition: 1s 0.25s;
    -o-transition: 1s 0.25s;
    transition: 1s 0.25s;
    transform: scale(1) translate(0, 0) skew(0deg, 0deg);
}

.thimi2.ani1 {
    opacity: 1;
    -webkit-transition: all 1s 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: all 0.8s 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    transform: scale(1) translate(0, 0) skew(0deg, 0deg);
}

.thimi3.ani1 {
    opacity: 1;
    -webkit-transition: all 0.8s 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: all 0.8s 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    transform: scale(1) translate(0, 0) skew(0deg, 0deg);
}

.thimi4.ani1 {
    opacity: 1;
    -webkit-transition: all 0.8s 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: all 0.8s 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    transform: scale(1) translate(0, 0) skew(0deg, 0deg);
}

.thim.ani1.ani1fin, .thim2.ani1.ani1fin, .thim4.ani1.ani1fin, .thim3.ani1.ani1fin {
    opacity: 1;
    -webkit-transition: all 0s 0s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: all 0s 0s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.thiml2, .thiml {
    opacity: 0;
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.thimr2, .thimr {
    opacity: 0;
    -webkit-transform: translateX(-10%);
    -moz-transform: translateX(-10%);
    -ms-transform: translateX(-10%);
    transform: translateX(-10%);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.thiml.ani1, .thimr.ani1 {
    opacity: 1;
    -webkit-transition: all 2s 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: all 2s 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);


}
@media all and (-ms-high-contrast:none){
    .footer_access_box{
        overflow: hidden;
    }
    .thimr.ani1 {
        opacity: 1;
        -webkit-transition: all 2s 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
        transition: all 2s 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
        -webkit-transform: translateX(-5%);
        -moz-transform: translateX(-5%);
        -ms-transform: translateX(-5%);
        transform: translateX(-5%);

    }
}

.thiml2.ani1, .thimr2.ani1 {
    opacity: 1;
    -webkit-transition: all 2s 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: all 2s 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}

.thim, .thim2, .thim4, .thim3 {
    opacity: 0;
    -webkit-transform: translateY(5%);
    -moz-transform: translateY(5%);
    -ms-transform: translateY(5%);
    transform: translateY(5%);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.thim.thimu, .thim2.thimu, .thim4.thimu, .thim3.thimu {
    opacity: 0;
    -webkit-transform: translateY(-5%);
    -moz-transform: translateY(-5%);
    -ms-transform: translateY(-5%);
    transform: translateY(-5%);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.thim.ani1 {
    opacity: 1;
    -webkit-transition: 2s 0.25s;
    -moz-transition: 2s 0.25s;
    -o-transition: 2s 0.25s;
    transition: 2s 0.25s;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}

.thim2.ani1 {
    opacity: 1;
    -webkit-transition: 2s 0.3s;
    -moz-transition: 2s 0.3s;
    -o-transition: 2s 0.3s;
    transition: 2s 0.3s;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}

.thim3.ani1 {
    opacity: 1;
    -webkit-transition: 2s 0.35s;
    -moz-transition: 2s 0.35s;
    -o-transition: 2s 0.35s;
    transition: 2s 0.35s;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}

.thim4.ani1 {
    opacity: 1;
    -webkit-transition: 2s 0.4s;
    -moz-transition: 2s 0.7s;
    -o-transition: 2s 0.4s;
    transition: 2s 0.7s;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}

.thim.ani1.ani1fin, .thim2.ani1.ani1fin, .thim4.ani1.ani1fin, .thim3.ani1.ani1fin, .thiml.ani1.ani1fin, .thimr.ani1.ani1fin, .thiml2.ani1.ani1fin, .thimr2.ani1.ani1fin {
    opacity: 1;
    -webkit-transition: all 0s 0s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: all 0s 0s cubic-bezier(0.22, 0.61, 0.36, 1);
}

header {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    position: fixed;
    top: 0;
    z-index: 100;
}

header .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto; /*padding: 25px 0 0 0;*/ /*position: relative;*/
}

header .header .logo {
    width: auto;
    display: inline-block;
    text-align: center;
    width: 20%;
    margin-top: 15px;
}

@media screen and (max-width: 584px) {
    header .header .logo {
        margin-top: 0px;
    }
}

header .header .logo img {
    max-width: 150px;
    width: 90%;
}

header .gmenu {
    position: relative;
    height: 85px;
    width: 100%;
    max-width: 860px;
}

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

header .gmenu ul {
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

header .gmenu ul li {
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

header .gmenu ul li a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

header .gmenu ul li a img {
    height: 26px;
    position: relative;
    z-index: 7;
}

@media all and (-ms-high-contrast:none){

    header .gmenu ul li a{

    }
    header .gmenu ul li:nth-child(1){
        width: 96px;
    }
    header .gmenu ul li:nth-child(2){
        width: 127px;
    }
    header .gmenu ul li:nth-child(3){
        width: 127px;
    }
    header .gmenu ul li:nth-child(4){
        width: 127px;
    }
    header .gmenu ul li:nth-child(5){
        width: 127px;
    }
    header .gmenu ul li:nth-child(6){
        width: 127px;
    }
    header .gmenu ul li:nth-child(7){
        width: 127px;
    }
    header .gmenu ul li:nth-child(2){
        width: 127px;
    }
    header .gmenu ul li:nth-child(1) a img {

             width: 39px;
    }
    header .gmenu ul li:nth-child(2) a img {
             width: 70px;
    }
    header .gmenu ul li:nth-child(3) a img {
        width: 56px;
    }
    header .gmenu ul li:nth-child(4) a img {
        width: 57px;
    }

    header .gmenu ul li:nth-child(5) a img {
        width: 102px;
    }
    header .gmenu ul li:nth-child(6) a img {
        width: 57px;
    }
    header .gmenu ul li:nth-child(7) a img {
        width: 105px;
    }

    header .gmenusub ul li:nth-child(1) a img{
        width: 88px;
    }
    header .gmenusub ul li:nth-child(2) a img{
        width: 75px;
    }
    header .gmenusub ul li:nth-child(3) a img{
        width: 103px;
    }
    header .gmenusub ul li:nth-child(4) a img{
        width: 87px;
    }
    header .gmenusub ul li:nth-child(1){
        width: 150px;
    }
    header .gmenusub ul li:nth-child(2){
        width: 150px;
    }
    header .gmenusub ul li:nth-child(3){
        width: 150px;
    }
    header .gmenusub ul li:nth-child(4){
        width: 150px;
    }
}


@media screen and (max-width: 900px) {
    header .gmenu ul li a img {
        height: 22px;
    }
}

header .gmenu ul li a::before {
    content: "";
    width: 0;
    height: 4px;
    background-color: #54B7C1;
    position: absolute;
    bottom: -1px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    z-index: 3;
}

header .gmenu ul li a:hover::before {
    width: 100%;
}

header .gmenu ul li a:hover::after {
    width: 100%;
}

header .gmenu ul li.act a::before {
    width: 100%;
}

@media all and (-ms-high-contrast:none){
    header .gmenu ul li a:hover::before {
        width: 50%;
    }

    header .gmenu ul li a:hover::after {
        width: 50%;
    }

    header .gmenu ul li.act a::before {
        width: 50%;
    }
}
header .gmenu ul li.pop a::after {
    content: "";
    width: 0;
    height: 4px;
    background-color: #54B7C1;
    position: absolute;
    bottom: -1px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    z-index: 3;
    background-color: #fff;
    height: 90%;
}

header .gmenusub0 {
    overflow: hidden;
    position: absolute;
    width: 100%;
    max-width: 600px;
    left: 40%;
    bottom: -75px;
    height: 0;
    pointer-events: none;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    z-index: 130;
}

header .gmenusub {
    position: absolute;
    width: 100%;
    height: 75px;
    background-color: white;
    bottom: 0px;
}

header .gmenusub ul {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

header .gmenusub ul li {
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

header .gmenusub ul li a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

header .gmenusub ul li a img {
    height: 26px;
    position: relative;
    z-index: 7;
}

header .gmenusub ul li a::before {
    content: "";
    width: 0;
    height: 4px;
    background-color: #54B7C1;
    position: absolute;
    bottom: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    z-index: 3;
}

header .gmenusub ul li a:hover::before {
    width: 100%;
}

header .gmenusub ul li.pop a:hover {
    opacity: 1 !important;
}

header .gmenusub ul li.pop a::before {
    background-color: #fff;
    height: 90%;
}

header .gmenusub ul li.act a::before {
    width: 100%;
}

@media all and (-ms-high-contrast:none){
    header .gmenusub ul li.act a::before {
        width: 50%;
    }

    header .gmenusub ul li a:hover::before {
        width: 50%;
    }

}
.pnavi{
    position: absolute;
    z-index: 5;
    max-width: 1100px;
    	margin-left: auto;
    		margin-right: auto;
    left: 50%;
    width: 100%;
    bottom: -10px;
        -webkit-transform: translateX(-50%) ;
            -moz-transform: translateX(-50%) ;
            -ms-transform: translateX(-50%) ;
            transform: translateX(-50%) ;
}
.pnavi ul{
    position: relative;
    box-sizing: border-box;
    padding-left: 10px;
}
.pnavi ul li{
    display: inline-block;
    box-sizing: border-box;
    margin-right: 10px;
    padding-right: 16px;
position: relative;
    color: #666;
}
.pnavi ul li a{
    text-decoration: underline;
    color: #666;
}
.pnavi ul li::after{
    content: "";
            position: absolute;
             right:0px;
        	top:9px;
            z-index: 1;
            width: 6px;
            height: 6px;
            margin: auto;

        border-top: #666 solid 2px;
        border-right: #666 solid 2px;

            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);

}
.pnavi ul li:last-child::after{
    display: none;

}
.popmenu header .header .gmenusub0 {
    height: 75px;
    pointer-events: auto;
}

.popmenu header .header .gmenu .pop a::before {
    background-color: #fff;
    width: 100%;
}
@media screen and (max-width: 584px) {
    .pnavi ul li {
        margin-right: 5px;
        padding-right: 8px;
        font-size: 3.5vw;
    }
    .pnavi ul li::after{
        top:8px;
        width: 4px;
        height: 4px;
        border-top: #666 solid 1px;
        border-right: #666 solid 1px;
    }
}
.secin {
    position: relative;
    box-sizing: border-box;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.cf:before, .cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

.note {
    font-size: 12px;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.note2 {
    font-size: 12px;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    text-align: left;
}

@media screen and (max-width: 584px) {
    .note {
        margin-top: 6px;
        font-size: 10px;
        padding: 0px;
    }
}

span.supT {
    font-size: 10px;
}

figure {
    position: relative;
}

figure img {
    display: block;
    vertical-align: bottom;
    width: 100%;
}

figure p.cnote {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 2;
    line-height: 1em;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    margin: 0;
    font-feature-settings: "pwid";
    letter-spacing: 0px;
    font-size: 12px;
}

figure p.cnote.colb {
    color: #000;
    text-shadow: 1px 1px 3px #fff;
}

p.lead {
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
    line-height: 2.4em;
}

@media screen and (max-width: 584px) {
    p.lead {
        font-size: 4.5vw;
        line-height: 2em;
    }
}

#wrapper {
    min-width: 1100px;
}

@media screen and (max-width: 584px) {
    #wrapper {
        min-width: 300px;
    }
}

.secin {
    box-sizing: border-box;
    position: relative;
    padding-top: 80px;
    padding-bottom: 50px;
    z-index: 3;
    width: 92%;
}

.secin .cbann {
    margin-top: 40px;
    position: relative;
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.secin .cbann a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.secin .cbann a img {
    display: block;
    vertical-align: bottom;
    width: 100%;
}

.secin .cbtnset {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 400px;
}

.secin .cbtnset li {
    width: 44%;
    margin-right: 4%;
}

.secin .cbtnset li:nth-child(2n) {
    margin-right: 0;
}

.secin .cbtn {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 300px;
    height: 46px;
    background-color: #4DB7C0;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -o-border-radius: 30px;
    -ms-border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.secin .cbtn a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.secin .cbtn a p {
    text-align: center;
    color: #fff;
}

.secin .cbtn2 {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 300px;
    height: 46px;
    background-color: #4DB7C0;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -o-border-radius: 30px;
    -ms-border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.secin .cbtn2 a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.secin .cbtn2 a p {
    text-align: center;
    color: #fff;
}

.secin .cbtn3 {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 220px;
    height: 25px;
    background-color: #4DB7C0;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -o-border-radius: 30px;
    -ms-border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    font-size: 12px;
}

.secin .cbtn3 a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.secin .cbtn3 a p {
    text-align: center;
    color: #fff;
}

.secin h3 {
    font-size: 36px;
    color: #4ab7c1;
    text-align: center;
    font-weight: normal;
    margin: 0;
    margin-bottom: 20px;
}

.secin h3.sty2 {
    color: #38373f;
}

@media screen and (max-width: 584px) {
    .secin h3 {
        font-size: 4.5vw;
    }
}

.secin h4 {
    text-align: center;
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 20px;
}

@media screen and (max-width: 584px) {
    .secin h4 {
        font-size: 4vw;
    }
}

.secin table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.secin table th {
    border: 1px solid #38373f;
    font-size: 16px;
    box-sizing: border-box;
    padding: 6px;
    padding-right: 10px;
    padding-left: 10px;
    font-weight: normal;
    text-align: left;
}

@media screen and (max-width: 584px) {
    .secin table th {
        padding: 6px;
        font-size: 4vw;
        width: 100%;
        display: block;
        padding-right: 0px;
        padding-left: 0px;
        border: none;
        border-bottom: 1px solid #4ab7c1;
    }

    .secin table th p br {
        display: none;
    }
}

.secin table td {
    border: 1px solid #38373f;
    font-size: 16px;
    box-sizing: border-box;
    padding: 6px;
    padding-right: 10px;
    padding-left: 10px;
}

@media screen and (max-width: 584px) {
    .secin table td {
        border: none;
        font-size: 3.5vw;
        text-align: right;
        width: 100%;
        display: block;
        padding: 6px;
        padding-right: 0px;
        padding-left: 0px;
    }

    .secin table td .note {
        margin-top: 6px;
        font-size: 10px;
        padding: 0px;
    }
}

.secin table.sty2 {
    border-spacing: 5px;
    border-collapse: separate;
}

@media screen and (max-width: 584px) {
    .secin table.sty2 {
        border-spacing: 0px;
        border-collapse: collapse;
    }
}

.secin table.sty2 th {
    background-color: #4ab7c1;
    border: none;
    color: #fff;
    border-bottom: 1px solid #4ab7c1;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.secin table.sty2 th p {
    color: #fff;
    text-align: center;
}

.secin table.sty2 td {
    border: none;
    margin-bottom: 4px;
    box-sizing: border-box;
}

@media screen and (max-width: 584px) {
    .secin table.sty2 td {
        text-align: left;
    }
    table.sty2._sp ,
    table.sty2._sp {
        display: table!important;
        margin-bottom: 10px;
    }
    .sptd100{
        display:block!important;
    width: 100%!important;
    }

}

.secin table.sty2 td dl {
    border-bottom: 1px solid #4ab7c1;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 6px;
}

.secin table.sty2 td dl2 { /* border-bottom: 1px solid #4ab7c1; */
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 6px;
}

@media screen and (max-width: 584px) {
    .secin table.sty2 td dl {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 584px) {
    .secin table.sty2 td dl2 {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 584px) {
    .secin table.sty2 td dl dt {
        width: 100%;
        font-size: 3vw;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 584px) {
    .secin table.sty2 td dl2 dt {
        width: 100%;
        font-size: 4vw;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 584px) {
    .secin table.sty2 td dl dd {
        width: 100%;
        font-size: 13px;
    }
}

@media screen and (max-width: 584px) {
    .secin table.sty2 td dl2 dd {
        width: 100%;
        font-size: 13px;
    }
}

.secin p.ico1 {
    margin-bottom: 4px;
    position: relative;
    font-size: 12px;
    line-height: 24px;
    display: none;
}

.secin p.ico1::before {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: 24px;
    content: "";
    background-size: cover;
    background-position: center center;
    background-image: url("../img/common/ico_04.png");
}

.secin .cbox4 {
    background-color: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    border: 1px solid #4ab7c1;
    padding: 50px;
    margin-bottom: 60px;
    position: relative;
    z-index: 7;
}

.secin .cbox4.last {
    margin-bottom: 0px;
}

.secin .cbox4 .cboxin {
    background-color: #F6F6F1;
    box-sizing: border-box;
    border: 4px solid #4ab7c1;
    padding: 50px;
}

@media screen and (max-width: 584px) {
    .secin .cbox4 {
        margin-bottom: 30px;
        padding: 15px;
    }

    .secin .cbox4 .cboxin {
        padding: 15px;
    }
}

.secin .cbox3 {
    background-color: #E4B0BF;
    box-sizing: border-box;
    margin-bottom: 60px;
    position: relative;
    z-index: 7;
}

.secin .cbox3.last {
    margin-bottom: 0px;
}

.secin .cbox3 .cboxin {
    box-sizing: border-box;
    padding: 50px;
}

@media screen and (max-width: 584px) {
    .secin .cbox3 {
        margin-bottom: 30px;
    }

    .secin .cbox3 .cboxin {
        padding: 15px;
    }
}

.secin .cbox2 {
    background-color: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    padding: 50px;
    margin-bottom: 60px;
    position: relative;
    z-index: 7;
}

.secin .cbox2.last {
    margin-bottom: 0px;
}

.secin .cbox2 .cboxin {
    background-color: white;
    box-sizing: border-box;
    padding: 50px;
}

@media screen and (max-width: 584px) {
    .secin .cbox2 {
        margin-bottom: 30px;
        padding: 15px;
    }

    .secin .cbox2 .cboxin {
        padding: 15px;
    }
}

.secin .cbox {
    background-color: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    border: 1px solid #4ab7c1;
    padding: 50px;
    margin-bottom: 60px;
    position: relative;
    z-index: 7;
}

.secin .cbox.last {
    margin-bottom: 0px;
}

.secin .cbox .cboxin {
    background-color: white;
    box-sizing: border-box;
    border: 1px solid #4ab7c1;
    padding: 50px;
}

@media screen and (max-width: 584px) {
    .secin .cbox {
        margin-bottom: 30px;
        padding: 15px;
    }

    .secin .cbox .cboxin {
        padding: 15px;
    }
}

.secctt {
    background-color: #4ab7c1;
    max-width: 100%;
}

.secctt .secin {
    padding-bottom: 80px;
}

.secctt ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 584px) {
    .secctt ul {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.secctt ul li {
    width: 22%;
    height: 80px;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
}

@media screen and (max-width: 584px) {
    .secctt ul li {
        width: 100%;
        margin-bottom: 20px;
        height: 60px;
    }

    .secctt ul li:last-child {
        margin-bottom: 0px;
    }
}

.secctt ul li a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.secctt ul li a p {
    text-align: center;
    color: #fff;
}

@media screen and (max-width: 584px) {
    .secctt {
        width: 100% !important;
    }

    .secctt .secin {
        width: 92%;
    }

    .secctt .secin li {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
}

.sec1 {
    max-width: 100%;
    background-color: #fff;
}

@media screen and (max-width: 584px) {
    .sec1 {
        width: 100%;
    }

    .sec1 .secin {
        width: 92%;
    }
}

h3.pctit {
    position: relative;
    margin-bottom: 60px;
}

h3.pctit img {
    height: 150px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 584px) {
    h3.pctit img {
        height: 100px;
    }
}

@media screen and (max-width: 584px) {
    h3.pctit {
        margin-bottom: 30px;
    }
}

.pagetitb {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    position: absolute;
    left: 0;
    top: -160px;
    height: 160px;
    z-index: 3;
}

.pagetitb .cov1 {
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 4;
    width: 100%;
    overflow: hidden;
}

.pagetitb .cov1 img {
    display: block;
    vertical-align: bottom;
    width: 100%;
}

.pagetitb .cov2 {
    position: absolute;
    left: -5%;
    bottom: -60%;
    z-index: 4;
    width: 30%;
    overflow: hidden;
}

.pagetitb .cov2 img {
    display: block;
    vertical-align: bottom;
    width: 100%;
}

@media screen and (max-width: 584px) {
    .pagetitb .cov2 {
        left: -5%;
        bottom: -26%;
        width: 40%;
    }
}

.pagetit {
    width: 100%;
    position: relative;
    height: 40vh;
    max-height: 560px;
    min-height: 560px;
    max-width: 100%;
}

.pagetit p.cnote {
    position: absolute;
    right: 5px;
    bottom: 15%;
    z-index: 2;
    line-height: 1em;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    margin: 0;
    font-feature-settings: "pwid";
    letter-spacing: 0px;
    font-size: 12px;
}

.pagetit p.cnote.colb {
    color: #000;
    text-shadow: 1px 1px 3px #fff;
}

.pagetit .mainc {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.pagetit .mainc img {
    display: block;
    vertical-align: bottom;
    width: auto;
    height: 100px;
}

@media screen and (max-width: 584px) {
    .pagetit .mainc img {
        height: 66px;
    }
}

.pagetit .mbg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    background-size: cover;
    background-position: center center;
}

@media screen and (max-width: 584px) {
    .pagetit {
        min-height: 260px;
    }
}

@media screen and (max-width: 584px) {
    ._sp {
        display: block !important;
    }
}