@charset "utf-8";

/*
Base style
*/

* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

body {
    font-family: 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    width: 100vw;
    color: black;
    overflow-x: hidden;
    background-color: white;
    position: absolute;
}

header {
    top: 0px;
    width: 100vw;
    height: 160px;
    margin: 0px; 
    padding: 0px;
    background: white;
}

.headerLogo {
    height: 125px;
    margin: 0px;
    padding: 0px;
    display: flex;
}

.headerLogo a {
    height: 125px;
    margin: 0px 20px;
    padding: 0px;
}

.headerLogo a img {
    height: 125px;
    margin: 0px;
    padding: 0px;
}

.headerLogo h1 {
    font-size: 2.5em;
    width: auto;
    height: 125px;
    overflow: auto;
}

.burger {
    display: none;
    margin: auto;
    margin-right: 10px;
    cursor: pointer;
}

.burger div {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 8px;
    transition: all 0.5s ease-in-out;
}

.burgerMenu {
    display: none;
}

header nav {
    display: flex;
    background: gray;
    width: 100%;
    height: 35px;
    margin: 0px;
    padding: 0px;
    text-align: center;
}

.menuBar {
    width: 100vw;
    background-color: rgb(255, 218, 164);
    margin: 0px;
}

.menuBar li {
    width: 23%;
    height: 35px;
    display: inline-block;
    margin: 0px;
    background-color: rgb(180, 108, 0);
    border-left: rgb(255, 218, 164) solid 1px;
    border-right: rgb(255, 218, 164) solid 1px;
    cursor: pointer;
}

.menuBar li a {
    text-decoration: none;
    color: white;
    font-weight: 600;
    line-height: 35px;
    display: block;
    margin: 0px;
}

.menuBar .active {
    background-color: #ffcb5b;
    color: black;
}

.menuBar .active a {
    background-color: #ffcb5b;
    color: black;
}

.menuBar :hover {
    background-color: #ffcb5b;
    color: black;
}

.subMenu-1{
    position: absolute;
    background-color: #333;
    z-index: 10;
    width: 23%;
}

.subMenu-1 ul {
    position: absolute;
    top: -1000px;
    width: 100%;
}

.subMenu-1 ul li {
    display: block;
    height: 35px;
    width: 100%;
    border-bottom: dotted 1px white;
}

.menuBar :hover .subMenu-1 ul {
    top: 0px;
}

.subMenu-1 ul li:last-child {
    border: none;
}



main {
    width: 100%;
    padding: auto;
    margin: auto;
}

.about {
    background: linear-gradient(135deg,white,#ffe8b7,white);   
    width: 100%;
    margin: 0px;
    padding: 10px calc(50vw - 640px) 30px;
}

.about h2 {
    text-align: center;
}

.about p {
    padding: 10px 50px;
}

.news {
    background: linear-gradient(135deg,white,#ffe8b7,white);   
    width: 100%;
    margin: 0px;
    padding: 10px calc(50vw - 640px) 30px;
}

.news h2 {
    text-align: center;
}

.news dl {
    overflow: auto;
    height: 400px;
    width: 80%;
    background-color: #eee;
    padding: 10px;
    margin: 0px auto;
}

.news dl div {
    display: flex;
    margin: 0px;
    border-bottom: #333 dotted 1px;
}
.news dl div dt {
    width: 150px;
    margin: auto;
}
.news dl div dd {
    width: 100%;
}

.articleWill {
    background: linear-gradient(135deg,white,#ffe8b7,white);   
    width: 100%;
    margin: 0px;
    padding: 10px calc(50vw - 640px) 30px;
}

.articleWill h2 {
    text-align: center;
}

.articleWill p {
    padding: 10px 50px;
}

.willBoxBody {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.willBoxBody .willBox {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: animate 20s linear infinite;
}

@keyframes animate {
    0%
    {transform: perspective(1000px) rotateX(0deg) rotateY(35deg);}
    100%
    {transform: perspective(1000px) rotateX(360deg) rotateY(35deg);}
}

.willBoxBody .willBox span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: rotateX(calc(var(--i)*45deg)) translateZ(300px);
}

.willBoxBody .willBox span img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contentsCardWill {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 90%;
    flex-wrap: wrap;
    z-index: 1;    
}

.contentsCardWill .cardWill {
    position: relative;
    width: 420px;
    height: 600px;
    margin: 30px;
    box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
    border-radius: 15px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left: 1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(5px);
}

.contentsCardWill .cardWill .contentWill {
    width: 95%;
    height: 95%;
    text-align: center;
    transform: translateY(100px);
    opacity: 0;
    transition: 0.5s;
    position: relative;
}

.contentsCardWill .cardWill:hover .contentWill {
    transform: translateY(0px);
    opacity: 1;
}

.contentsCardWill .cardWill .contentWill h3 {
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 0px;
    padding: 0px;
    font-size: 7em;
    color: rgba(255,255,255,0.5);
    pointer-events: none;
}

.contentsCardWill .cardWill .contentWill h4 {
    position: relative;
    top: 40%;
}

.contentsCardWill .cardWill .contentWill h4 a {
    font-size: 3em;
    padding: 8px 20px;
    margin: 15px;
    color: white;
    background: #d3830c;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 1500;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    z-index: 1;
}

.contentsCardWill .cardWill .contentWill p {
    position: relative;
    top: 50%;
    font-size: 1em;
    color: black;
    font-weight: 300;
    margin-top: 20px;
}


.articleHorse{
    background: linear-gradient(135deg,white,#ffe8b7,white);   
    min-height: auto;
    display: flex;
    flex-flow: column;
    width: 100%;
    margin: 0px;
    padding: 10px calc(50vw - 640px) 30px;
}

.articleHorse h2 {
    text-align: center;
}

.articleHorse p {
    padding: 10px 50px;
}

.contentCard{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 100px 50px;
    padding: 100px 50px;
    min-height: auto;
    width: auto;
}

.contentCard .card{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 450px;
    height: 300px;
    padding: 0;
    margin: 5px 30px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 35px 80px rgba(0,0,0,0.15);
    transition: 0.5s;
}

.contentCard .card .cardImg{
    position: absolute;
    top: 20px;
    width: 300px;
    height: 220px;
    background: #333;
    border-radius: 12px;
    overflow: hidden;
    transition: 0.5s;
}

.contentCard .card:hover .cardImg{
    top: -100px;
    scale: 0.75;
    box-shadow: 0 15px 45px rgba(0,0,0,0.2);
}

.contentCard .card .cardImg img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contentCard .card .cardContent{
    position: absolute;
    top: 252px;
    width: 100%;
    padding: 0 30px;
    height: 35px;
    overflow: hidden;
    text-align: center;
    transition: 0.5s;
}

.contentCard .card .cardContent h3{
    font-size: 1.5em;
    font-weight: 700;
    color: #d3830c;
    height: auto;
    padding: 0;
    margin: 0;
}

.contentCard .card .cardContent p{
    color: black;
    height: 180px;
    width: auto;
    overflow: auto;
    padding: 10px; 
    margin: 0;
    text-align: left;
}

.contentCard .card .cardContent a{
    position: relative;
    top: 10px;
    display: inline-block;
    padding: 12px 25px;
    margin: 0;
    background: #d3830c;
    color: white;
    font-size: 1.3rem;
    text-decoration: 8px;
    border-radius: 8px;
}

.contentCard .card:hover .cardContent{
    top: 100px;
    height: 300px;
}

.contentCard .card:hover{
    height: 400px;
}    

.articleOther {
    background: linear-gradient(135deg,white,#ffe8b7,white);   
    width: 100%;
    margin: 0px;
    padding: 10px calc(50vw - 640px) 30px;
}

.articleOther h2 {
    text-align: center;
}

.articleOther p {
    padding: 10px 50px;
}

.contentsOther {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px 250px;
    padding: 50px 20px;
    min-height: auto;
    width: auto;
}

.cardOther {
    position: relative;
    width: 300px;
    height: 400px;
    background: #fff;
    transform-style: preserve-3d;
    transform: perspective(1000px);
    box-shadow: 10px 20px 40px rgba(0,0,0,0.25);
    transition: 1s;
}

.cardOther:hover {
    transform: translateX(50%);
}

.cardOther .imgBoxOther {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform-origin: left;
    transform-style: preserve-3d;
    background: #000;
    transition: 1s;
    box-shadow: 10px 20px 40px rgba(0,0,0,0.25);
}

.cardOther:hover .imgBoxOther {
    transform: rotateY(-180deg);
}


.cardOther .imgBoxOther img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.cardOther .imgBoxOther img:nth-child(2) {
    transform: rotateY(180deg);
}

.cardOther .detailsOther {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    justify-items: center;
    align-items: center;
}

.cardOther .detailsOther .contentOther {
    justify-content: center;
    align-items: center;
    height: 95%;
    width: 95%;
}

.cardOther .detailsOther .contentOther h3 {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1em;
    color: #d3830c;
    margin: 10px;
}

.cardOther .detailsOther .contentOther p {
    height: 65%;
    margin-top: 15px;
}

.cardOther .detailsOther .contentOther a {
    font-size: 1.5em;
    padding: 8px 20px;
    margin-top: 15px;
    margin-left: 35%;
    width: 100%;
    color: white;
    background: #d3830c;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 1500;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}


/* 上に戻るボタンのデザイン */

.return {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    text-decoration: none;
    background-color: #1f0f00;
    display: block;
    text-align: center;
    border-radius: 24px;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.4s ease-in;
  }
  
  .return::before {
    content: '\f062';
    font-family: 'Font Awesome 6 Free';
    font-size: 30px;
    font-weight: 900;
    color: #fff;
    line-height: 48px;
  }
  
  /* fadeinクラスがついた時だけ表示する */
  .return.fadein {
    opacity: 1;
  }
  
  /* ここまでボタンのデザイン */


footer {
    position: relative;
    width: 100%;
    height: 50px;
    background: #331d00;
}

footer p {
    width: 100%;
    position: absolute;
    font-size: 0.9rem;
    color: #ffffff;
    text-align: center;
}



  /* ブレーキングポイント768px */

@media screen and (max-width: 768px) {
    h1 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    header {
        position: fixed;
        height: 70px;
        z-index: 10;
    }
    
    .headerLogo {
        height: 70px;
    }

    header nav {
        height: 0px;
        display: none;
    }

    .headerLogo a {
        height: 70px;
    }

    .headerLogo a img {
        height: 70px;
    }    
    
    .headerLogo h1 {
        font-size: 1.5em;
        height: 70px;
    }

    .burger {
        display: block;
        position: absolute;
        top: 10px;
        right: 20px;
    }

    .toggle .line1 {
        transform: rotate(405deg) translate(10px, 8.5px);
    }
    .toggle .line2 {
        opacity: 0;
    }
    .toggle .line3 {
        transform: rotate(-405deg) translate(10px, -8.5px);
    }

    .burgerMenu {
        display: block;
        position: absolute;
        top: 100px;
        left: 35vw;
        margin: 0;
        padding: 0;
        background-color: #333;
        opacity: 0.9;
        height: 80vh;
        width: 65vw;
        transform: translateX(100%);
        transition: all 0.5s ease-in-out;
    }

    .burgerMenu-active {
        transform: translateX(0%) !important;
    }
    
    .burgerMenu ul {
        display: block;
        margin: 0;
        padding: 0;
    }

    .burgerMenu ul li {
        display: block;
        list-style: none;
        font-size: 18px;
        height: 7vh;
        text-align: center;
        margin:0px;
        border: #eee;
    }

    .burgerMenu ul li a {
        text-decoration: none;
        color: white;
        font-weight: 600;
        height: 7vh;
        display: block;
        line-height: 55px;
    }
    
    main {
        padding: 0px;
    }

    .news dl {
        font-size: 0.8rem;
    } 
   
    .contentsCardWill .cardWill {
        height: 400px;
        width: 280px;
    }

    .cardOther {
        width: 240px;
        height: 320px
    }

    .cardOther .detailsOther .contentOther h3 {
        font-size: 1.5rem;
    }

    .cardOther .detailsOther .contentOther a {
        margin-left: 20%;
    }

}


  /* ブレーキングポイント420px */

  @media screen and (max-width: 420px) {
    h1 {
        font-size: 1.1rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    .headerLogo h1 {
        font-size: 1.1em;
    }

    
    .willBoxBody {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 40vh;
    }

    .willBoxBody .willBox {
        position: relative;
        width: 100px;
        height: 100px;
        transform-style: preserve-3d;
        animation: animate 20s linear infinite;
    }

    @keyframes animate {
        0%
        {transform: perspective(1000px) rotateX(0deg) rotateY(35deg);}
        100%
        {transform: perspective(1000px) rotateX(360deg) rotateY(35deg);}
    }

    .willBoxBody .willBox span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateX(calc(var(--i)*45deg)) translateZ(150px);
    }

    .willBoxBody .willBox span img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

   
    .contentsCardWill .cardWill {
        position: relative;
        width: 80%;
        height: 250px;
        margin: 10px;
        box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
        border-radius: 15px;
        background: rgba(255,255,255,0.1);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid rgba(255,255,255,0.5);
        border-left: 1px solid rgba(255,255,255,0.5);
        backdrop-filter: blur(5px);
    }
    
    .contentsCardWill .cardWill .contentWill {
        position: relative;
        padding: 10px;
        text-align: center;
        transform: translateY(100px);
        opacity: 0;
        transition: 0.5s;
    }
    
    .contentsCardWill .cardWill:hover .contentWill {
        transform: translateY(0px);
        opacity: 1;
        width: 90%;
        height: 90%;
        padding: 5px;
    }
    
    .contentsCardWill .cardWill .contentWill h3 {
        position: absolute;
        top: 0px;
        right: 0px;
        font-size: 2.5em;
        margin: 0px;
    }

    .contentsCardWill .cardWill .contentWill h4 {
        height: 50px;
        margin: 5px auto;
        position: absolute;
        top: 30%;
        left: 20%;    
    }


    .contentsCardWill .cardWill .contentWill h4 a {
        font-size: 1.7em;
        padding: 2px 5px;
        margin: 0px;
        color: #ffffff;
        background: #db9600;
        border-radius: 20px;
        text-decoration: none;
        font-weight: 1500;
        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        z-index: 1;
    }
    
    .contentsCardWill .cardWill .contentWill p {
        position: absolute;
        top: 70%;
        text-align: left;
        margin: 0px;
        padding: 0px;
        font-size: 1em;
        color: #000000;
        font-weight: 300;
    }
    

    .contentCard {
        padding: 5px 20px;
    }


    .contentCard .card { 
        width: 350px;
        height: 300px;
        padding: 0;
        margin: 5px 10px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 35px 80px rgba(0,0,0,0.15);
        transition: 0.5s;
    }
    
    .contentCard .card .cardContent h3 {
        font-size: 1.2em;
    }


    .cardOther {
        width: 180px;
        height: 240px
    }
    
    .cardOther .detailsOther {
        padding: 10px;
        width: 100%;
    }

    .cardOther .detailsOther .contentOther h3 {
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1em;
        margin: 0px;
        width: 100%;
    }
    
    .cardOther .detailsOther .contentOther p {
        margin: 3px;
        padding: 3px;
        padding-top: 5px;
        height: 55%;
        bottom: 5%;
    }


        .cardOther .detailsOther .contentOther a {
        font-size: 1.2em;
        padding: 2px 5px;
        margin-left: 30%;
        border-radius: 10px;
        font-weight: 1500;
        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    }
    
  }