@charset "utf-8";
/* ======================
common （共通の設定を入力）
フォント、文字のベースの色、body全体の色設定

========================= */
html {
    font-size: 62.5%;
    /* スクロールの動きが見える */
    scroll-behavior: smooth;
}

body {
    font-family: "Zen Kaku Gothic New",
    Arial,
    sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #122B2B;
    background-color:#347E8E;
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

.section__topic {
    font-family: "Cinzel Decorative",
    serif;
    color: #347E8E;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #DFA616;
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
}

/* common PC */
@media screen and (min-width:769px){
    .section__topic {
        font-size: 6rem;
        font-weight: 700;
        letter-spacing: 0.09em;
    }
}
/* 769px PC */


/* ======================
header
========================= */
.header {
    height: 263px;
    background-image: url(../img/MainImageSP.webp);
    background-repeat: no-repeat;
    background-size: cover;
}

.header__title {
    margin: 39px 0 0 7% ;
    color: #DFA616;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Cinzel Decorative";
    font-size: 3rem;
    font-weight: 700;
    line-height: normal;
    position: absolute;
}

.header__name {
    margin: 75px 0 0 8% ;
    color: var(--offwhite, #FFF8ED);
    font-family: "Corinthia", cursive;
    font-size: 2.0rem;
    font-weight: 400;
    line-height: normal;
    position: absolute;
}

.header__menu {
    display: none;
}

/* header PC */
@media screen and (min-width:769px){
    .header {
        height: 632px;
        background-image: url(../img/MainImagePC.webp);
    }
    
    .header__title  {
        margin: 129px 0 0 max(114px,8vw) ;
        font-size: 7rem;
    }

    .header__name {
        font-size: 5rem;
        margin: 223px 0 0 max(114px,9vw);
    }

    .header__menu {
        display: block;
        padding-top: 11px;
    }
    
    .header__list {
        display: flex;
        align-items: center;
        margin: 0 0 0 8%;
        gap: 25px;
    }

    .header__item {
        color: #FFF8ED;
        font-family: "Cinzel Decorative";
        font-size: 2rem;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.03em;
    }
}
/* 769px PC */

    @media screen and (min-width:1440px){
        .header__title  {
            margin: 129px 0 0 18vw ;
        }
        .header__name {
            font-size: 5rem;
            margin: 223px 0 0 18vw;
        }

        .header__list {
            margin: 0 0 0 18vw;
        }
        /* 1441pxPC */
    }

/* ======================
Main
    article__header
========================= */
.catchcopy {
    margin-top: 95px;
}

.article__catchcopy {
    color: #FFF8ED;
    text-align: center;
    font-size: 1.8rem;
    letter-spacing: 0.5em;
}

/* Main article__header PC */
@media screen and (min-width:769px){
    .spBr{
        display: none;
    }

    .catchcopy {
        margin-top: 160px;
    }
    .article__catchcopy {
        font-size: 3rem;
        letter-spacing: 0.3em;
    }
    
}
/* 769px PC */

/* ======================
About Me
========================= */
.section--aboutMe {
    margin: 125px 17% 0 0;
}

.section__topic--aboutMe {
    padding: 0 0 0 5% ;
}

.aboutMe__detail {
    background-color: #FFF8ED;
    border-radius: 0 44px 44px 0;
    position: relative;
    
}

.aboutMe__txt {
    padding: 83px 15% 83px 5%;
    font-size: 1.4rem;
    /* letter-spacing: 2.8px; */
    letter-spacing: 0.2em; 
    line-height: 1.96;
}

/* デバイスごと aboutMeImgのみ */
    @media screen and (max-width:374px) {
        .aboutMeImg {
            position: absolute;
            top: -80px;
            right: -40px;
            max-width: 100px;
            width: 37%;
        }
    }

    @media screen and (min-width:375px) {
        /* 375px以上のスクリーン */
        .aboutMeImg {
            position: absolute;
            top: -80px;
            right: -40px;
            max-width: 130px;
            width: 37%;
        }

    }

    @media screen and (min-width:769px) {
        
        .aboutMeImg {
        position: absolute;
        top: -120px;
        right: -80px;
        max-width: 170px;
        width: 37%;
        } 
    }
/* デバイスごとaboutMeImgだけ */

/* AboutMe PC */
    @media screen and (min-width:769px){
        .section--aboutMe {
            margin: 215px 27% 0 0;
        }
     
        .aboutMe__txt {
            padding: 60px 13%;
            font-size: 1.8rem;
            letter-spacing: 0.21em;
            line-height: 2;
        }
    }

    @media screen and (min-width:1440px){
        .aboutMe__txt {
            padding: 60px 15% 60px 30%;
        }
    
        .section__topic--aboutMe {
            padding: 0 0 0 20vw ;
        }
        /* min1440px */
    }


/* ======================
Gallery
========================= */
.section--gallery {
    margin: 125px 0 125px;
    text-align: center;
} 

.gallery {
    margin-top: 43px;
}

.gallery__item {
    display: inline-block;
    list-style: none;
    width: 80%;
    max-width: 300px;
    height: 520px;
    margin-top: 20px;
}

.gallery__item:first-of-type{
    margin-top: 0;
}

.gallery__window {
    padding: 20% 16px 40px 20px;
    background-color: #A79883;
    /* 角丸の設定 */
    border-radius: 500px 500px 0 0;
}

/* 大きさが異なる画像をカードに貼る時は？
→一番大きいアイテムがよく見えるように設定する*/
.gallery__img {
    margin: 0 auto;
    max-width: 70%;
    height: 266px;
    /* inline-blockにも効いてる？ */
    align-content: center;
    
}

.gallery__detail {
    color: #FFF8ED;
    margin-top: 19px;
    max-width: 256px;
}

.gallery__name {
    border-bottom: 1px solid #FFF8ED;
    font-size: 1.8rem;
    font-weight: 700;
}

.gallery__txt {
    font-size: 1.5rem;
    /* letter-spacing: 0.02em; */
    margin-top: 19px;
    text-align: left;
}

/* gallery PC */
@media screen and (min-width:769px){
    .section--gallery {
        margin: 202px 9.7% 202px;
    }

    .gallery {
        margin-top: 70px;
    }

    .gallery__item {
        display: inline-block;
        list-style: none;
        width: 80%;
        max-width: 285px;
        height: 520px;
    }

    .gallery__window {
        gap: 10px 1.4%;
    }
    
/* 769px PC */
}

/* ======================
    Strength
========================= */
.section--strength {
    text-align: center;
    background-color: rgba(255, 248, 237, 0.75);
    padding: 43px 11% 125px;
}

.section__topic--strength {
    font-family: "Cinzel Decorative",
    serif;
    color: rgba(255, 248, 237, 0.75);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #DFA616;
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
}

@media screen and (min-width:769px){
    .section__topic--strength {
        font-size: 6rem;
    }
}

.strength__img { 
    margin-top: 43px;
}

.strength__flame {
    margin: 43px 0 0;
}

.strength__name {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: justify;
    border-bottom: 1px solid #DFA616;
}


.strength__detail {
    margin-top: 10px;
}

.strength__txt {
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    text-align: justify;
}

.strength__title {
    margin-top: 41px;
}

.strength__title:first-child {
    margin: 0;
}

@media screen and (min-width:1023px){
    .section--strength {
        padding: 108px 9.7%;
        position: relative;
        width: auto;
        height: 700px;
    }
    .section__topic--strength {
        font-size: 6rem;
        transform: rotate( -90deg );
        letter-spacing: 0;
        position: absolute;
        top: 38%;
        left: -30px;
    }

    .strength__img { 
        margin-top: 0;
    }
    
    .strength__img img{
        width: 38%;
        max-width: 364px;
    }
    
    .strength__flame {
        margin:0;
    }

    .strength__title {
        margin-top: 0px;
        max-width: 393px;
        width: 27%;
    }

    .strength__title:nth-of-type(1){
        position: absolute;
        top: 108px;
        right: 85px;
    }

    .strength__title:nth-of-type(2){
        position: absolute;
        top: 420px;
        right: 85px;
    }

    .strength__title:last-of-type{
        position: absolute;
        top: 420px;
        left: 233px;
    }

    .strength__txt {
        font-size: 1.6rem;
    }
}
/* 1023px PC */

@media screen and (min-width:1439px){
    .section--strength {
        height: 800px;
        max-width: 1440px;
        margin: 0 auto;
    }
    .strength__title:nth-of-type(1){
        position: absolute;
        top: 108px;
        right: 120px;
    }
    .strength__title:nth-of-type(2){
        position: absolute;
        top: 500px;
        right: 120px;
    }
    .strength__title:last-of-type{
        position: absolute;
        top: 500px;
        left: 233px;
    }
}
/* 1440px PC */

/* ======================
News
========================= */
/* .news-detail{
    max-width: 1160px;
    margin: 197px auto;
} */
.section--news {
    margin: 125px 4% 0;
    text-align: center;
}

.news__list {
    padding: 47px 7%;
    background-color: #FFF8ED;
    border-radius: 44px;
    text-align: justify;
    max-width: 1440px;
    margin: 0 auto;
}

.news__topic {
    margin-top: 30px;
}

.news__topic:first-child {
    margin: 0;
}

.news__topic time {
    font-size: 1.5rem;
    letter-spacing: 0.06em;
}

.news__txt {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #122B2B;
}

/* News PC */
@media screen and (min-width:769px){
    .section--news {
        margin: 197px 9.7% 0;
    }


    .news__list {
        padding: 39px 7%;
    }

/* 769px PC */
}

/* ======================
    contact
========================= */
.section--contact {
    margin-top: 125px;
    text-align: center;
}
.contact {
    color: #FFF8ED;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
}

.contact__mail {
    margin-top: 26px;
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    font-size: 2.0rem;
    color: #DFA616;
}

.sns {
    margin-top: 26px;
    display: flex;
    justify-content: center;
}

.sns__item {
    margin-right: 6%;
}

.sns__item:last-child {
    margin-right: 0;   
}

/* contact PC */
    @media screen and (min-width:769px){
        .section--contact {
            margin-top: 203px;
        }

        .contact {
            font-size: 2.5rem;
        }
        .contact__mail {
            font-size: 2.5rem;
        }

        .sns__item {
            margin-right: 24px;
        }
        
        .sns__item:last-child {
            margin-right: 0;   
        }
/* 769px PC */
}

/* ======================
    footer
========================= */
.footer__list {
    margin: 81px 4% 0;
}

.footer__item {
    margin-top: 15px;
    color: #122B2B;
    font-family: "Cinzel Decorative";
    font-size: 1.5rem;
    font-weight: 700;
    line-height: normal;
}

.footer__item:first-child {
    margin-top: 0;
}

.copy {
    margin: 81px 0 45px;
    text-align: center;
}

/* Footer PC */
    @media screen and (min-width:769px){
        .footer__list {
            display: flex;
            margin: 140px auto;
            justify-content: center;
        }
        .footer__item {
            margin: 0 20px 0;
            font-size: 2rem;
        }
        .footer__item:last-of-type{
            margin: 0;
        }
        .copy {
            margin: 76px 0 45px;
        }
        
    /* 769px PC */
    }