@charset "UTF-8";
html{
    font-size: 62.5%;
}

body {
    text-align: left;
    color: #030303;
    font-family: "F+UD-筑紫明朝 R", "F+UD-TsukuMin R", serif;
    line-height: 1.75;
    letter-spacing: .05em;
    min-width: auto;
}

.pc{
    display: none;
}

em{
    font-style: normal;
    margin-left: 0.5rem;
}

strong{
    color: #fff;
    font-weight: 100;
}

ul{
    padding-left: 0px;
}

/*
*
fadeInAnimation
 *
 */

.fadeUpTrigger{
    opacity: 0;
}

.fadeUp{
    animation-name: fadeUpAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime{
    from{
        opacity: 0;
        transform: translateY(100px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }
}


.box-img-bg_sp {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 29.333333333333332vw;
}

/* .about-image {
    background-image: url(../image/about-image-sp.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 258px;
} */

/*
=========
sp-hero
=========
*/
main {
    display: block;
    width: 100%;
    display: flex;
    flex-direction: column;
}

section.head-container {
    margin-block-start: 3.26rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
    "a a"
    "b b";
    min-width: 50vw;
}

.head-main-text{
    width: 100%;
    text-align: center;
    grid-area: a;
    margin-block-end: 3rem;
}

h1 {
    margin-bottom: 2.5rem;
}

h1 img {
    width: 37%;
}

p.header-sub02 {
    line-height: 1.3;
    letter-spacing: .09rem;
    margin-top: 1.5rem;
}

.box {
    width: 100%;
    /* font-size: 1.4rem; */
}

.box-img-bg_sp{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 120px;
}

.box-img01{
    background-image: url(../image/img_01.png);
    border-right: 1px solid #fff;
}
.box-img02{
    background-image: url(../image/img_02.png);
    border-right: 1px solid #fff;
}
.box-img03{
    background-image: url(../image/img_03.png);
}
.box-img04{
    background-image: url(../image/img_04.png);
    border-right: 1px solid #fff;
}
.box-img05{
    background-image: url(../image/img_05.png);
    border-right: 1px solid #fff;
}
.box-img06{
    background-image: url(../image/img_06.png);
}



.box-summary {
    text-align: center;
    padding-top: 1.2rem;
    padding-bottom: 1.1rem;
    background-color: #F7F3F0;
}

span.line {
    display: flex;
    justify-content: center;
}

span.line::before{
    content:'';
    display: block;
    border-left: #030303 1px solid;
    position: relative;
    right: 8px;
}

span.line::after{
    content:'';
    display: block;
    border-left: #030303 1px solid;
    position: relative;
    left: 8px;
}

.box-text{
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    font-family: "FP-ヒラギノUD角ゴ StdN W6", HiraginoUDSansStdN-W6, sans-serif;
}

.box-text-grid{
    width: 100%;
    display: grid;
    grid-template-columns: 39% 61%;
    grid-template-rows: 2fr;
    grid-template-areas:
        "c d"
        "e";
}

@media screen and (min-width:376px) and (max-width:609px){
    .box-text-grid {
        grid-template-rows: 37px;
    }
}

p.back-color {
    background-color: #87121c;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* p.f-size12{
    font-size: 1.2rem;
    font-size: 1.6vw;
} */


.b-red {
    border: #87121C 1px solid;
    color: #87121c;
    display: flex;
    justify-content: center;
    align-items: center;
}

p.f-size12.b-red.text-wrap {
    display: block;
}


p.link-tub{
    color: #fff;
    border: none;
    margin-top: 0;

    border-radius: 6px;
    grid-area: e;
    grid-column-start: 1;
    margin-block-start: 0.5rem;
}


p.link-tub a {
    width: 100%;
    border: 1px solid #615349;
    background-color: #615349;
    width: 48%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border-radius: 6px;
    /* font-size: 1.6rem; */
    padding: 0.5rem;
    transition: background-color .3s ease, color .3s ease;
}
p.link-tub a.link-f{
        background-color: #002b64;
          border: #002b64 1px solid;
}
p.link-tub a:hover{
    color: #615349;
    background-color: #fff;
    border: #615349 1px solid;
}
p.link-tub a.link-f:hover {
  color: #002b64;
  background-color: #fff;
  border: #002b64 1px solid;
}
p.link-tub a.link-f:hover svg.box-tub{
    fill: #002b64;
}
p.link-tub a:hover svg.box-tub{
    fill: #615349;
}

a img.tub-img {
    width: 5%;
    height: 50%;
    vertical-align: baseline;
    margin-left: 1.65rem;
}

svg.box-tub {
    vertical-align: text-bottom;
    fill: #f7f3f0;
}


/*
=============
section-about
=============
 */
section.about{
    border-bottom: 1px solid #BFAB94;
}

picture.pc-about-tub{
    display: none;
}

.about-container{
    overflow: hidden;
    margin: 4rem 0;
    width: 100%;
}

.about-image {
    background-image: url(../image/about-sp.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 250px;
}

.about-link {
    padding: 0 7.5%;
}

.about-title{
    /* font-size: 3.7rem; */
    margin-block-start: 3.5rem;
}

.about-button {
    background-color: #615349;
    display: block;
    border-radius: 5px;
    margin-block-start: 2rem;
    position: relative;
    width: 100%;
    height: 50px;
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 30%);
}

p.about-text {
    display: block;
}

.about-button a {
    font-family: "FP-ヒラギノUD角ゴ StdN W6", HiraginoUDSansStdN-W6, sans-serif;
    font-weight: normal;
    letter-spacing: .3rem;
    color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    transition: background-color .3s ease, color .3s ease;
    display: flex;
    justify-content: space-around;
    align-items: center;
    line-height: 1.4;
}

.about-button svg {
    display: block;
    width: 17px;
    height: 17px;
    transition: ease .3s;
}

.about-button a:hover svg{
    transform: translateX(20px);
}

g.circle-arrow{
    fill: #fff;
    stroke: #615349;
}

.about-button a:hover{
    color: #615349;
    border: 1px solid #615349;
    background-color: #fff;
}


.about-sp-br,
br.footer-sp-br{
    display: block;
}




/*
===============
section-contact
===============
 */
section.contact {
    margin-block-end: 6rem;
}

.contact-wrapper {
    text-align: center;
}

.contact-title {
    margin-block-end: 4rem;
}

.contact-title h2 {
    /* font-size: 5rem; */
    letter-spacing: .23rem;
    margin-block-start: 4.5rem;
}

p.contact-text {
    margin-block-start: .82rem;
    letter-spacing: .2rem;
    line-height: 2.8rem;
}

.contact-button {
    width: 85%;
    margin: 0 auto;
}

.contact-button-red {
    background-color: #87121C;
    align-items: center;
    border-radius: 10px;
    margin-block-end: 2rem;
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 30%);
}

.contact-button-blue {
    background-color: #002B64;
    align-items: center;
    border-radius: 10px;
    gap: 6%;
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 30%);
}

img.contact-button-icon {
    width: 17%;
    height: 17%;
    display: block;
}

img.contact-button-icon-paper {
    width: 18%;
    height: 18%;
    margin-right: 6rem;
}

.contact-button a{
    font-family: "FP-ヒラギノUD角ゴ StdN W6",HiraginoUDSansStdN-W6,sans-serif;
    /* font-size: 3.5rem; */
    font-weight: normal;
    letter-spacing: .5rem;
    text-align: left;

}

a.red-b {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    background-color: #87121C;
    color: #fff;
    border-radius: 10px;
    /* padding: 2.4rem 0; */
    transition: background-color .3s ease, color .3s ease;
}

/* .red-b-width {
    width: 360px;
} */

svg.red-svg{
    fill: #fff;
    stroke: #fff;
}

path.stroke{
    fill: #fff;
}

a.red-b:hover {
    color: #87121C;
    border: 1px solid #87121C;
    background-color: #fff;
}

a.red-b:hover .red-svg,
a.red-b:hover path.stroke {
    fill: #87121C;
    stroke: #87121c;
}

.red-b svg {
    width: 50px;
}

a.blue-b {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    background-color: #002B64;
    color: #fff;
    border-radius: 10px;
    /* padding: 2.7rem 0; */
    transition: background-color .3s ease, color .3s ease;
}
/* .blue-b-width {
    width: 360px;
} */

.blue-b svg {
    width: 40px;
}

g.blue-svg {
    fill: #fff;
    /* width: 60px; */
}

a.blue-b:hover {
    color: #002B64;
    border: 1px solid #002B64;
    background-color: #fff;
}

a.blue-b:hover .blue-svg {
    fill: #002B64;
}

/*
=======
footer
=======
*/
footer {
    text-align: center;
}

.logo-pws{
    display: none;
}

.logo {
    padding: 5rem 0;
    background-color: #F7F3F0;
}

.logo img {
    width: 86%;
}

p.copyRight {
    letter-spacing: .25rem;
    padding: 2rem 0;
    line-height: 2rem;
    background-color: #E8E8E8;
}






@media screen and (min-width:750px) and (max-width:999px){

.box-img-bg_sp {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 110px;
}

/*
=========
sp-hero
=========
*/
main {
    display: block;
    width: 100%;
    display: flex;
    flex-direction: column;
}

section.head-container {
    margin-block-start: 3.26rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
    "a a"
    "b b";
    min-width: 50vw;
}

.head-main-text{
    width: 100%;
    text-align: center;
    grid-area: a;
    margin-block-end: 3rem;
}

h1 {
    margin-bottom: 2.5rem;
}

h1 img {
    width: 37%;
}

p.header-sub02 {
    line-height: 1.3;
    letter-spacing: .09rem;
    margin-top: 1.5rem;
}


.box-img-bg_sp{
    height: 192px;
}

.box-text{
    width: 80%;
}

@media screen and (min-width:376px) and (max-width:609px){
    .box-text-grid {
        grid-template-rows: 37px;
    }
}

br.w-375{
    display: none;
}

br.f-size8{
    display: none
}

p.back-color{
    background-color: #87121c;
}


p.f-size12.b-red.text-wrap {
    display: flex;
}

p.link-tub{
    color: #fff;
    border: none;
    border-radius: 6px;
    grid-area: e;
    grid-column-start: 1;
    margin-block-start: 0.5rem;
}


p.link-tub a {
    width: 100%;
    border: 1px solid #615349;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border-radius: 6px;
    /* font-size: 1.6rem; */
    /* padding: 0.5rem; */
    transition: background-color .3s ease, color .3s ease;
}

p.link-tub a:hover{
    color: #615349;
    background-color: #fff;
    border: #615349 1px solid;
}

p.link-tub a:hover svg.box-tub{
    fill: #615349;
}

a img.tub-img {
    width: 5%;
    height: 50%;
    vertical-align: baseline;
    margin-left: 1.65rem;
}

svg.box-tub {
    vertical-align: text-bottom;
    fill: #f7f3f0;
}



/*
=============
section-about
=============
 */
section.about{
    border-bottom: 1px solid #BFAB94;
}

picture.pc-about-tub{
    display: none;
}

.about-container{
    overflow: hidden;
    margin: 4rem 0;
    width: 100%;
}

.about-image {
    background-image: url(../image/about-sp.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 500px;
}

.about-link {
    padding: 0 7.5%;
}

.about-title{
    /* font-size: 3.7rem; */
    margin-block-start: 3.5rem;
}

.about-button {
    background-color: #615349;
    display: block;
    border-radius: 10px;
    margin-block-start: 38px;
    position: relative;
    width: 100%;
    height: 120px;
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 30%);
}

p.about-text {
    display: block;
}

.about-button a {
    font-family: "FP-ヒラギノUD角ゴ StdN W6", HiraginoUDSansStdN-W6, sans-serif;
    /* font-size: 2.5rem; */
    font-weight: normal;
    letter-spacing: .7rem;
    color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    /* padding: 0 4rem; */
    border-radius: 10px;
    transition: background-color .3s ease, color .3s ease;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.about-button svg {
    display: block;
    width: 46.353px;
    height: 46.353px;
    transition: ease .3s;
}

.about-button a:hover svg{
    transform: translateX(20px);
}

g.circle-arrow{
    fill: #fff;
    stroke: #615349;
}

.about-button a:hover{
    color: #615349;
    border: 1px solid #615349;
    background-color: #fff;
}

.about-button img {
    position: absolute;
    right: 2.7%;
    margin-block-start: 2.5rem;
}

.about-sp-br,
br.footer-sp-br{
    display: block;
}

.about-link a img {
    width: 7%;
}



/*
===============
section-contact
===============
 */
section.contact {
    margin-block-end: 6rem;
}

.contact-wrapper {
    text-align: center;
}

.contact-title {
    margin-block-end: 4rem;
}

.contact-title h2 {
    /* font-size: 5rem; */
    letter-spacing: .23rem;
    margin-block-start: 4.5rem;
}

p.contact-text {
    margin-block-start: .82rem;
    letter-spacing: .2rem;
    line-height: 5rem;
}

.contact-button {
    width: 85%;
    margin: 0 auto;
}

.contact-button-red {
    background-color: #87121C;
    align-items: center;
    border-radius: 10px;
    margin-block-end: 3.3rem;
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 30%);
}

.contact-button-blue {
    background-color: #002B64;
    align-items: center;
    border-radius: 10px;
    gap: 6%;
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 30%);
}

img.contact-button-icon {
    width: 17%;
    height: 17%;
    display: block;
}

img.contact-button-icon-paper {
    width: 18%;
    height: 18%;
    margin-right: 6rem;
}

.contact-button a{
    font-family: "FP-ヒラギノUD角ゴ StdN W6",HiraginoUDSansStdN-W6,sans-serif;
    /* font-size: 3.5rem; */
    font-weight: normal;
    letter-spacing: .5rem;
    text-align: left;

}

a.red-b {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    background-color: #87121C;
    color: #fff;
    border-radius: 10px;
    padding: 2.4rem 0;
    transition: background-color .3s ease, color .3s ease;
}

/* .red-b-width {
    width: 360px;
} */

svg.red-svg{
    fill: #fff;
    stroke: #fff;
}

path.stroke{
    fill: #fff;
}

a.red-b:hover {
    color: #87121C;
    border: 1px solid #87121C;
    background-color: #fff;
}

a.red-b:hover .red-svg,
a.red-b:hover path.stroke {
    fill: #87121C;
    stroke: #87121c;
}

.red-b svg {
    width: 100px;
}

a.blue-b {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    background-color: #002B64;
    color: #fff;
    border-radius: 10px;
    padding: 2.7rem 0;
    transition: background-color .3s ease, color .3s ease;
}
/* .blue-b-width {
    width: 360px;
} */

.blue-b svg {
    width: 70px;
}

g.blue-svg {
    fill: #fff;
}

a.blue-b:hover {
    color: #002B64;
    border: 1px solid #002B64;
    background-color: #fff;
}

a.blue-b:hover .blue-svg {
    fill: #002B64;
}

/*
=======
footer
=======
*/
footer {
    text-align: center;
}

.logo-pws{
    display: none;
}

.logo {
    padding: 5rem 0;
    background-color: #F7F3F0;
}

.logo img {
    width: 86%;
}

p.copyRight {
    font-family: "FP-ヒラギノUD角ゴ StdN W6",HiraginoUDSansStdN-W6,sans-serif;
    letter-spacing: .25rem;
    padding: 5rem 0;
    line-height: 4.5rem;
    background-color: #E8E8E8;
}

}



@media screen and (min-width:1000px){

    .wrapper{
        max-width: 84.28571428571429vw;
        margin: 0 auto;
    }


    br.sp {
        display: none;
    }

    br.w-375{
        display: none;
    }

    br.w-750{
        display: none;
    }

    p.f-size12.b-red.text-wrap {
    display: flex;
}



    /*
    ==========
    pc-hero
    ==========
    */
    section.head-container {
        margin-block-start: 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
        "b b b"
        "a a a";
    }

    .head-main-text {
        display: flex;
        justify-content: space-evenly;
        margin-block-end: 0;
        align-items: self-start;
        text-align: left;
        padding: 20px 0;
    }

    h1{
        margin-bottom: 0;
    }

    h1 img {
        width: 16.428571428571427vw;
    }

    p.header-sub02 {
        line-height: .5;
    }

    .box-summary {
        padding-bottom: 2rem;
    }

    .box-summary-line {
        border-left: solid 1px #615349;
        border-right: solid 1px  #615349;
    }

    @media screen and (min-width:1000px) and (max-width:1400px){
        .box-img-bg_pc{
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            height: 238px;
        }
    }

    p.flex-summary {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 0 60px;
        margin-block-end: 10px;
    }

    p.flex-summary.padding-s{
        padding: 0 20px;
    }

    p.flex-summary.padding-m{
        padding: 0 50px;
    }

    .box-text{
        width: 90%;
    }

    .text-s {
        margin-inline-start: 1rem;
    }

    span.f-size8{
        font-size: 0.8rem;
        display: contents;
    }

    .box-text-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 22% 35% 42%;
        grid-template-rows: 1fr;
        grid-template-areas: "c d e";
    }

    p.back-color {
        background-color: #87121c;
        display: grid;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        align-items: center;
    }

    p.f-size12.b-red {
        display: grid;
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        align-items: center;
    }

 p.link-tub {
 display: flex;
  margin-inline-start: 10px;
  border-radius: 6px;
  width: 75%;
  margin-left: auto;
  gap: 2%;
  margin-top: 0;
  justify-content: space-between;
}

    p.link-tub a{
        padding: 0;
        letter-spacing: 0.25rem;
    }

    p.link-tub a svg {
        width: 12px;
        vertical-align: text-bottom;
        margin-left: 0;
    }



    /*
    ================
    pc-section-about
    ================
     */
    .about-container {
        margin: 100px auto;
        padding-top: 0;
    }

    .about-box {
        display: flex;
        width: 100%;
    }

    .about-image {
        display: block;
        width: 48%;
        background-image: url(../image/about-pc.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 229px;
    }

    .about-link {
        width: 52%;
        text-align: center;
        border: 1px solid #030303;
        border-left: none;
        padding: 0 5%;
    }

    .about-link a {
        font-size: 1.6rem;
        display: inline-flex;
        padding: 16px 0;
        font-weight: 100;
        letter-spacing: .35rem;
    }

    .about-link a img {
        width: 4%;
    }

    .about-title {
        /* font-size: 3.7rem; */
        margin-block-start: 3.5rem;
        margin-block-end: 2rem;
        display: block;
        width: 100%;
    }

    .about-button {
        text-align: left;
        height: 60px;
        width: 100%;
        position: relative;
        border-radius: 5px;
        margin: 0 auto;
        padding: 0;
        box-shadow: 0 3px 10px 0 rgb(0 0 0 / 30%);
    }

    .about-button a{
        font-family: "FP-ヒラギノUD角ゴ StdN W6", HiraginoUDSansStdN-W6, sans-serif;
    }

    .about-button a:hover{
        border-radius: 5px;
    }

    picture.sp-about-circleArrow{
        display: none;
    }

    picture.pc-about-tub{
        display: inline;
    }

    .about-button svg {
        width: 17.353px;
        fill: #fff;
    }

    .about-button a:hover svg.box-tub{
        fill: #615349;
    }

    p.about-text {
        display: flex;
    }



    /*
    ==================
    pc-section-contact
    ==================
     */
    section.contact{
        background-color: #F7F3F0;
        border-top: 1px solid #675C54;
        border-bottom: 1px solid #675C54;
        margin-block-end: 0;
        padding-bottom: 80px;
        text-align: center;
    }

    .contact-wrapper {
        max-width: 1180px;
        margin: 0 auto;
    }

    .contact-text{
        display: none;
    }
/*
    .contact-title h2{
        font-size: 4.4rem;
    } */

    .contact-button {
        display: flex;
        justify-content: space-evenly;
        padding: 0 60px;
        width: 100%;
    }

    .contact-button a{
        /* font-size: 2.2rem; */
        font-weight: 100;
    }

    .contact-button-red a,
    .contact-button-blue a {
        height: 130px;
        width: 480px;
    }

    .contact-button-red{
        margin-block-end: 0;
    }

    a.red-b,
    a.blue-b{
        border-radius: 5px;
    }

    .red-b svg {
        width: 54.6px;
    }

    .blue-b svg{
        width: 40.75px;
    }

    /* .red-b-width,
    .blue-b-width {
        width: 267px;
    } */


    /*
    ==========
    pc-footer
    ==========
     */
    .logo-pws{
        display: block;
        padding: 20px 0;
        text-align: left;
    }

    .logo {
        padding: 20px 0;
    }

    .logo img {
        width: 530px;
    }

    p.copyRight {
        padding: 10px 0;
        line-height: normal;
    }

    /* small {
        font-size: 1.2rem;
    } */

    br.footer-sp-br {
        display: none;
    }


    @media screen and (min-width:1400px){
        .box-img-bg_pc {
            height: 300px;
        }
    }
}


@media screen and (max-width:999px){
.box-img03 {
    border-right: 1px solid #fff;
}
.box-img02,
.box-img04{
    border-right: none;
}

}
@media screen and (max-width:999px){
    p.link-tub a{width: 100%;margin-top: 5px;}
}

@media screen and (max-width:999px){
    .box-text-grid{display: block;}
    p.back-color{padding: 10px 0;}
     p.back-color strong{font-size: 1.4rem;}
}