@charset "utf-8";
/* CSS Document */
/***template************************************/
 /****************************************************

Copyright (c) 2022 kwsmayk72
Released under the MIT license
URL：https://kwsmayk72.com*******/
/*x---x---x---x---x---x---x---x---x---x---x---x---x
x---x---x---x---x---x---x---x---x---x---x---x---x */
/*

定型ｃｓｓ
x---x---x---x---x---x---x---x---x---x---x---x---x
x---x---x---x---x---x---x---x---x---x---x---x---x */
@media only screen and (min-width: 1025px) { /* PCサイズでの指定 */
}
/* ------------------------------ */
@media only screen and (max-width: 1024px) { /* タブレットサイズでの指定 */
}
/* ------------------------------ */
@media only screen and (max-width: 770px) { /* SPサイズでの指定 */
}
/* ------------------------------ */
* {
        padding: 0;
        margin: 0;
}
/* ------------------------------ */
body {
        width: 100%;
        margin: 0;
        padding: 0;
        outline: 0;
        font-size: 16px;
        line-height: normal;
}
@media only screen and (max-width: 1024px) { /* タブレットサイズでの指定 */
        body {
                width: auto;
        }
}
/* ------------------------------ */
@media only screen and (max-width: 770px) { /* SPサイズでの指定 */
        body {
                width: auto;
        }
}
/* ------------------------------ */
.gothic {
        font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.mincho {
        font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
/* ------------------------------ */
header {
        top: 0;
        width: 100%;
        overflow: hidden;
}
/* ------------------------------ */
footer {
        width: 100%;
        overflow: hidden;
        text-align: center;
        bottom: 0;
}
/* ------------------------------ */
/* リンク */
a {
        color: #fff;/*#586DD5*/
        text-decoration: none;
}
a :hover {
        opacity: 0.8;
}
/* ------------------------------ */
/* 画像 */
img {
        display: block;
        width: 90%;
        margin: auto;
}
/* ------------------------------ */
/* フレックスボックス */
.flex-center {
        width: 100%;
        display: flex;
        flex-flow: wrap;
        justify-content: center;
        margin: auto;
}
.flex-between {
        width: 100%;
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        margin: auto;
}
.flex-start {
    width: 100%;
        display: flex;
        flex-flow: wrap;
        justify-content: flex-start;
        margin: 0;
}
/* ------------------------------ */
/* 左・右・中央 */
.left {
        text-align: left;
        margin: auto;
}
.right {
        text-align: right;
        margin: auto;
}
.center {
        text-align: center;
        margin: auto;
} /* ------------------------------ */
code {
        background-color: #FBFBFB;
        border: 2px solid #aaa;
}
/* ------------------------------ */
/* カラー */
.blue {
        color: #586DD5;
}
.blue-light {
        color: #586DD5;
}
.red {
        color: #FF0067;
}
.red-light {
        color: #FF0067;
}
.orange {
        color: #FF641A;
}
.orange-light {
        color: #FF641A;
}
.gold {
        color: #c8a837;
}
.gold-light {
        color: #c8a837;
}
.green {
        color: #75C456;
}
.green-light {
        color: #00FFA2;
}
.purple {
        color: #AC00FF;
}
.purple-light {
        color: #AC00FF;
}
.pink {
        color: #D55887;
}
.pink-light {
        color: #D55887;
}
.black { /* らくてん・やふー・こくーん・そにっく */
        color: #333;
}
.black-light { /* ぐーぐる */
        color: #545454;
}
.gray {
        color: #aaa;
}
.gray-light {
        color: #eee;
}
.white {
        color: #fff;
}
.white-box {
        background-color: #fff;
        width: 100%;
        padding-top: 60px;
        padding-bottom: 60px;
        margin: auto;
}
/* ------------------------------ */
/*スクロールバー*/
.scroll-var::-webkit-scrollbar {
        width: 20px;
}
.scroll-var::-webkit-scrollbar-track {
        background-image: linear-gradient(145deg, #d5e3ff, #b2c6ee);
        box-shadow: inset 3px 3px 5px #44577c;
}
.scroll-var::-webkit-scrollbar-thumb {
        background-image: linear-gradient(145deg, #9ac4ff, #607aae);
        box-shadow: inset 6px 6px 10px #dbe7ff, inset -1px -1px 3px #516894;
        border-radius: 10px;
}
/* ------------------------------ */
/* ライン */
/* <div class="〇〇"></div> */
.line-solid {
        border-top: 2px solid #eee;
        margin: 0;
        padding: 0;
}
.line-dashed {
        border-top: 2px dashed #eee;
        margin: 0;
        padding: 0;
}
.line-double {
        border-top: 2px double #eee;
        margin: 0;
        padding: 0;
}
/* ------------------------------ */
/*吹き出し ---^---*/
.arrow_box {
        position: relative;
        background: #eee;
        border-top: 2px solid #eee;
}
.arrow_box:after, .arrow_box:before {
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
}
.arrow_box:after {
        border-color: rgba(0, 0, 0, 0);
        border-bottom-color: #fff;
        border-width: 10px;
        margin-left: -10px;
}
.arrow_box:before {
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #eee;
        border-width: 13px;
        margin-left: -13px;
}
/* ------------------------------ */
/* タブメニュー */
.tab-all-wrapper {
        border: 2px solid #eee;
        width: 90%;
        margin: auto;
        z-index: 777;
}
.tab-choice-menu-ul {
        display: flex;
        list-style: none;
        width: 100%;
        margin: auto;
}
.tab-choice-menu-ul:nth-of-type(2) {
        margin-top: 0;
}
.tab-choice-menu-ul li {
        text-align: center;
        background-color: #eee;
        color: #c8a837;
        flex-grow: 1;
        padding: 10px;
        border-left: #fff 2px solid;
        cursor: pointer;
}
.tab-choice-menu-ul li:first-child {
        border-left: none;
}
.tab-choice-menu-ul li.active {
        background-color: #c8a837;
        color: #fff;
}
.tab-choice-menu-ul:nth-of-type(2) li.active {
        background-color: #c8a837;
}
.tab-content-one {
        display: none;
        width: 100%;
        margin: auto;
        background-color: #c8a837;
        border-left: 2px solid #c8a837;
        border-right: 2px solid #c8a837;
        border-bottom: 2px solid #c8a837;
}
.tab-contents-box:nth-of-type(2) .tab-content-one {
        background-color: #c8a837;
}
.tab-content-one.active {
        display: block;
}
/* ------------------------------ */
.logo {
        width: 60%;
        margin: 0;
        padding: 0;
        margin-bottom: 24px;
}
.sns {
        display: inline;
        width: 10%;
        margin-right: 24px;
}
/*.hamburger-box*******************************/

@media only screen and (min-width: 1025px) { /* pcでの指定 */
        header {
        display: none;
}
}
/* ------------------------------ */
@media only screen and (max-width: 1024px) { /* タブレットサイズでの指定 */
       header {
           display: block;
        width: 100%;
        height: 50px;
        top: 0;
        position: fixed;
        z-index: 999;
        box-sizing: border-box;
        overflow: hidden;
}
    .logo {
        width: 40%;
        margin: 0;
        padding: 0;
        margin-bottom: 0;
}
    .sns {
        display: inline;
        width: 8%;
        margin-right: 20px;
}
}
/* ------------------------------ */
@media only screen and (max-width: 770px) { /* SPサイズでの指定 */
   .logo {
        width: 60%;
        margin: 0;
        padding: 0;
        margin-bottom: 0;
}
.sns {
        display: inline;
        width: 10%;
        margin-right: 16px;
}
}
/* ------------------------------ */

.hamburger-box {
        position: fixed;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        z-index: 9999; /*ボタンを最前面に*/
        cursor: pointer;
}
/*×に変化*/
.hamburger-box span {
        display: inline-block;
        transition: all .5s;
        position: absolute; /*絶対値*/
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background-color: #F1E07B;
        width: 45%;
}
.hamburger-box span:nth-of-type(1) {
        top: 15px;
}
.hamburger-box span:nth-of-type(2) {
        top: 23px;
}
.hamburger-box span:nth-of-type(3) {
        top: 31px;
}
.hamburger-box.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        width: 30%;
        transform: translateY(6px) rotate(-45deg);
}
.hamburger-box.active span:nth-of-type(2) {
        opacity: 0;
}
.hamburger-box.active span:nth-of-type(3) {
        top: 30px;
        left: 18px;
        width: 30%;
        transform: translateY(-6px) rotate(45deg);
}
/*active*/
#hamburger-nav.panelactive {
        position: fixed;
        z-index: 999;
        top: 0;
        width: 100%;
        height: 100vh;
}
/*丸の拡大*/
.hamburger_nav_circle {
        position: fixed;
        z-index: 7;
        /*丸の形*/
        width: 100px;
        height: 100px;
        border-radius: 50%; /*正円*/
        background-color: #002E62;
        /*丸のスタート位置と形状*/
        transform: scale(0); /*scaleをはじめは0に*/
        left: -50px;
        top: -50px;
        transition: all .6s; /*0.6秒かけてアニメーション*/
}
.hamburger_nav_circle.circleactive {
        transform: scale(50); /*クラスが付与されたらscaleを拡大*/
}
/*ナビゲーションの縦スクロール*/
#hamburger_nav_scroll {
        display: none; /*はじめは表示なし*/
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 777;
        width: 100%;
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
}
#hamburger-nav.panelactive #hamburger_nav_scroll {
        display: block; /*クラスが付与されたら出現*/
}
/*ナビゲーション*/
#hamburger-nav ul {
        opacity: 0; /*はじめは透過0*/
        /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
        position: absolute; /*絶対値*/
        z-index: 777;
        top: 50%;
        left: 50%;
        width: 70%;
        margin: 0 auto;
        transform: translate(-50%, -50%);
}
/*背景が出現後にナビゲーションを表示*/
#hamburger-nav.panelactive ul {
        opacity: 1;
}
/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#hamburger-nav.panelactive ul li {
        animation-name: hamburgerAnimartion;
        animation-duration: 1s;
        animation-delay: .3s; /*0.2 秒遅らせて出現*/
        animation-fill-mode: forwards;
        opacity: 0;
}
@keyframes hamburgerAnimartion {
        0% {
                opacity: 0;
        }
        100% {
                opacity: 1;
        }
}
/*リストのレイアウト設定*/
#hamburger-nav li {
        width: 100%;
        text-align: left;
        margin: 0 auto;
        list-style: none;
}
#hamburger-nav li a {
        text-decoration: none;
        color: #fff;
        padding: 10px;
        font-size: 16px;
}
/* ------------------------------ */
/* ------------------------------ */
/* スクロールフェードインアニメーション */
/* <div class="〇〇"></div> */
.fade-in {
        opacity: 0;
        transition-duration: 200ms;
        transition-property: opacity, transform;
}
.fade-in-up {
        transform: translate(0, 50px);
}
.fade-in-down {
        transform: translate(0, -50px);
}
.fade-in-left {
        transform: translate(-50px, 0);
}
.fade-in-right {
        transform: translate(50px, 0);
}
.scroll-in {
        opacity: 1;
        transform: translate(0, 0);
}
/* ------------------------------ */
/* 点滅アニメーション */
.chikachika {
        animation-name: smooth-fadein-out;
        animation-duration: 1.6s;
        animation-timing-function: ease;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
}
@keyframes smooth-fadein-out {
        0% {
                opacity: 0.3;
        }
        100% {
                opacity: 1;
        }
}
/* ------------------------------ */
/* ------------------------------ */
/* ------------------------------ */
/* ------------------------------ */
/* ------------------------------ */
/* ------------------------------ */
/* ------------------------------ */
/***********************************************************/
/***********************************************************/