@charset  "utf-8";

/* =============================================
common
============================================== */
:root{
    --primary-white: #FDFDFD;
    --primary-red: #C64528;
    --primary-yellow:#BFA679;
    --primary-lightYellow:#D3C2A3;
    --primary-blue:#003268;
    --primary-pink:#E4B3A8;
    --primary-black:#333333;
    --contentWithSp:80%;
    --contentPaddingSp:10%;
}

html {
    font-size: 62.5%;
}

body {
    font-family: 
    'Noto Sans JP',
    Arial,
    Helvetica,
    sans-serif;
    font-style: normal;
    color: var(--primary-black, #333333);
    background-color: var(--primary-white, #FDFDFD);
    line-height: 1.5;
}

img {
    max-width: 100%;
}


/* =====================
header
===================== */


.headerLogo p {
    color: var(--primary-red, #C64528);
    font-family: "Josefin Sans";
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.headerLogo p:hover {
    color: var(--primary-blue, #003268);
}

.sns_btn {
    display: flex;
    gap: 10px;
    margin-top: 9px;
}

.sns_btn li {
    filter: invert(29%) sepia(79%) saturate(882%) hue-rotate(333deg) brightness(103%) contrast(101%);
}

.sns_btn img {
    max-width: 24px;
}

.menu_Btn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.menu_Btn img {
    width: 100%;
}

.menu_Btn li {
    width: 33.3%;
    max-width: 30px;
    cursor: pointer;
    filter: invert(29%) sepia(79%) saturate(882%) hue-rotate(333deg) brightness(103%) contrast(101%);
}

.menu_Btn li:nth-of-type(2) {
    margin-top: 3px;
}

.openbtn img {
    max-width: 24px;
    padding-top: 5px;
    cursor: pointer;
} 

.header_menu {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5%;
    position: fixed;
    z-index: 99;
}

/* closeボタン */

.closeBtn {
    position: absolute;
    transition: all .4s;
    top: 33px;
    right: 21px;
    cursor: pointer;
}

.closeBtn span {
    display: inline-block;
    position: absolute;
    left: 0;
    height: 2px;
    border-radius: 100px;
	background: var(--primary-white , #FDFDFD);
}

.closeBtn span:nth-of-type(1) {
    top: 7px;
    left: 0;
    transform: translateY(6px) rotate(-45deg);
    width: 30px;
}

.closeBtn span:nth-of-type(2){
    top: 19px;
    left: 0;
    transform: translateY(-6px) rotate(45deg);
    width: 30px;
}

@media screen and (min-width:769px) {
    .brSp {
        display: none;
    }

    .header_menu {
        padding: 30px 6% 0;
    }

    .headerLogo p {
        font-size: 4.0rem;
        letter-spacing: 4px;
    }

    .sns_btn {
        justify-content: center;
        margin-top: 14px;
        gap: 20px;
    }

    .sns_btn img {
        max-width: 40px;
    }
    
    .menu_Btn li{
        max-width: 65px;
    }

    .menu_Btn li:nth-of-type(2) {
        margin-top: 0;
    }

    .menu_Btn li:nth-of-type(1) {
        margin-top: -4px;
    }

    .menu_Btn img{
        width: 100%;
    }

    .openbtn img {
        max-width: 55px;
        padding-top: 0;
    }

    .menu_Btn {
        gap: 30px;
    }
}

/* =====================
menu
===================== */

/* menuの設定 */

.menu_container {
    position: relative;
    height: 100%;
}

.menu_box {
    position: relative;
}

.menu_box::after{
    content: '';
    display: block;
    background: url(../images/chidori.png) no-repeat center / contain;
    position: absolute;
    right: 0;
    width: 131px;
    height: 131px;
}

#g-nav {
    background: var(--primary-yellow ,#BFA679);
    width: 400px;
    height: 100vh;
    position: fixed;
    top: 0;
    right: -120%;
    z-index: 999;
    transition: all 0.4s;
}

#g-nav.panelactive{
    right: 0;
}

.hamburger-demo-cover.panelactive {
    position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 998;
	background: rgba(3,3,3,.5);
	display: block;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 100; 
    width: 400px;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.menu_contents {
    padding-left: 21px;
    padding-top: 33px;
    position: relative;
}

.menu_contents ul{
    color: var(--primary-white , #FDFDFD);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
}

.menu_contents li {
    padding-top: 20px;
}

.menu_contents li:first-of-type {
    padding-top: 41px;
}

.shop_title {
    color: var(--primary-white, #FDFDFD);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 20px;
    padding-left: 21px;
    position: relative;
}

.shop_title::before,
.shop_title::after {
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: var(--primary-white , #FDFDFD);
}

.shop_title::before{
    top:48%;
    left: 90px;
    transform: rotate(0deg);
    
}
.shop_title::after{    
    top:48%;
    left: 90px;
    transform: rotate(90deg);
}

.shop_title.close::before{
	transform: rotate(45deg);
}

.shop_title.close::after{
	transform: rotate(-45deg);
}

.shop_list {
    display: none;
    padding-top: 20px;
    padding-left: 21px;
}

.menu_logo {
    padding-top: 50px;
    padding-left: 21px;
    position: relative;
}

.menu_logo p{
    color: var(--primary-white , #FDFDFD);
    font-family: "Josefin Sans";
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5; /* 150% */
}

.contact_icon {
    width: 60px;
    padding-top: 63px;
}

.menu_logoIcon {
    display: flex;
    padding-top: 20px;
}

.menu_logoIcon img {
    max-width: 100px;
}

.sns_icon {
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 218px;
    gap: 20px;
    position: relative;
}

.sns_icon li {
    max-width: 30px;
    filter: brightness(0) invert(1);
}

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

    #g-nav {
        width: 800px;
    }

    #g-nav.panelactive #g-nav-list {
        width: 800px;
    }

    .closeBtn {
        top: 88px;
        right: 50px;
    }

    .menu_logo h2{
        font-size: 3.6rem;
    }

    .menu_contents {
        padding-left: 50px;
        padding-top: 88px;
    }
    
    .menu_contents ul {
        font-size: 3.2rem;
    }
        
    .menu li {
        padding-top: 40px;
    }

    .shop_title {
        font-size: 3.2rem;
        padding-left: 50px;
        margin-top: 40px;
        cursor: pointer;
    }

    .shop_title::before,
    .shop_title::after {
        width: 25px;
        height: 3px;
    }

    .shop_title::before{
        top:48%;
        left: 235px;
    }
    .shop_title::after{    
        top:48%;
        left: 235px;
    }

    .shop_list {
        padding-left: 50px;
    }

    .menu_logo {
        padding-top: 100px;
        padding-left: 50px;
    }

    .menu_logoIcon {
        padding-top: 30px;
    }

    .sns_icon li {
        max-width: 35px;
    }

    .menu_box::after {
        right: 0;
    }
    .menu_box::after{
        width: 400px;
        height: 400px;
    }

}

@media screen and (max-width:400px) { 

    #g-nav {
        width: 300px;
    }

    #g-nav.panelactive #g-nav-list {
        width: 300px;
    }

}

/* =====================
shop menu
===================== */

/* closeボタン */

.closeBtn_shop {
    position: absolute;
    transition: all .4s;
    right: 21px;
    z-index: 9999;
    cursor: pointer;
}

.closeBtn_shop span {
    display: inline-block;
    position: absolute;
    left: 0;
    height: 2px;
    border-radius: 100px;
	background: var(--primary-white , #FDFDFD);
}

.closeBtn_shop span:nth-of-type(1) {
    top: 7px;
    left: 0;
    transform: translateY(6px) rotate(-45deg);
    width: 30px;
}

.closeBtn_shop span:nth-of-type(2){
    top: 19px;
    left: 0;
    transform: translateY(-6px) rotate(45deg);
    width: 30px;
}

/* shopメニュー内 */

#shop-nav {
    background: var(--primary-blue ,#003268);
    width: 400px;
    height: 100vh;
    z-index: 999;
    position: fixed;
    top: 0;
    right: -120%;
    transition: all 0.4s;
}

#shop-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#shop-nav.panelactive #shop-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 100; 
    width: 400px;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.shop_box {
    position: relative;
}

.shop_box::after{
    content: '';
    display: block;
    background: url(../images/chidori.png) no-repeat center / contain;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 131px;
    height: 131px;
}

.pageTitle {
    color: var(--primary-white , #FDFDFD);
    font-family: Neonderthaw;
    font-size: 6.4rem;
    line-height: 1.3;
}

.shop_onlineShops {
    padding-left: 21px;

    margin-top: 33px;
    position: relative;
}

.shop_onlines {
    padding-top: 48px;
}

.shop_onlineShops li{
    color: var(--primary-white , #FDFDFD);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.0;
    padding-top: 20px;
}

.shop_shops {
    padding: 50px 20% 203px 21px;
    position: relative;
}

.shop_shops li{
    color: var(--primary-white , #FDFDFD);
    font-size: 1.4rem;
    line-height: 1.4;
    padding-top: 20px;
}

.attention {
    color: var(--primary-white , #FDFDFD);
    font-size: 1.6rem;
    line-height: 1.4;
    padding-top: 30px;
}

.onlineShops {
    color: var(--primary-white , #FDFDFD);
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 1.4;
}

.shop_list li {
    color: var(--primary-white , #FDFDFD);
    font-size: 1.6rem;
    line-height: 1.4;
    padding-top: 20px;
}

.shop_category {
    color: var(--primary-white , #FDFDFD);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4; /* 145.833% */
}


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

    #shop-nav {
        width: 800px;
    }

    #shop-nav.panelactive #shop-nav-list {
        width: 800px;
    }

    .closeBtn_shop {
        right: 50px;
    }

    .pageTitle {
        font-size: 12.8rem;
        line-height: 1;
    }

    .shop_category {
        font-size: 3.2rem;
    }

    .shop_onlines li {
        font-size: 1.6rem;
    }

    .shop_onlineShops {
        margin-top: 88px;
        padding-left: 50px;
    }

    .shop_onlines li:nth-of-type(1) {
        margin-top: 20px;
    }

    .shop_shops {
        padding-top: 50px;
        padding-left: 50px;
    }

    .shop_shops li {
        font-size: 1.6rem;
    }

    .shop_shops li:nth-of-type(1) {
        padding-top: 40px;
    }

    .shop_box::after{
        width: 400px;
        height: 400px;
    }
    

}

@media screen and (max-width:400px) {

    #shop-nav {
        width: 300px;
    }

    #shop-nav.panelactive #shop-nav-list {
        width: 300px;
    }

}

/* =====================
page title
===================== */

/* title */

.titleSpase {
    padding-top: 148px;
    text-align: center;
}

.titleSpase h1 {
    display: inline-block;
    color: var(--primary-blue, #003268);
    text-align: center;
    font-family: Neonderthaw;
    font-size: 9.6rem;
    line-height: 1.3; /* 135.417% */
    position: relative;
}

.titleSpase h1::before {
    content: '';
    display: block;
    width: 40vw;
    max-width: 150px;
    height: 15.28vw;
    background: url(../images/cloud_red.png) no-repeat center / contain;
    position: absolute;
    top: -10vw;
    right: 61%;
}

.titleSpase h1::after {
    content: '';
    display: block;
    width: 40vw;
    max-width: 150px;
    height: 25.47vw;
    background: url(../images/cloud_white.png) no-repeat center / contain;
    position: absolute;
    top: 0;
    left: 60%;
    z-index: -1;
}


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

    .titleSpase {
        padding-top: 200px;
    }
    
    .titleSpase h1 {
        font-size: 20rem;
        letter-spacing: 10px;
    }

    .titleSpase h1::before {
        width: 27.777vw;
        max-width: 400px;
        height: 10.42vw;
        top: 52px;
        right: 88%;
    }

    .titleSpase h1::after {
        width: 27.77vw;
        max-width: 400px;
        height: 17.36vw;
        top: 0;
        left: 77%;
    }
}

/* =====================
footer
===================== */

.konami_pc {
    display: none;
}

.konami_sp {
    width: 100%;
}

.footer__about {
    position: relative;
}

.footer__about::after {
    content: '';
    display: block;
    background: url(../images/chidori.png) no-repeat center / contain;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 34.93vw;
    height: 34.93vw;
}


.footer__about {
    background-color: var(--primary-red, #C64528);
    padding: 68px 0 58px 27px;
    position: relative;
}

.footer__title {
    position: relative;
}

.footer__title h2 {
    color: var(--primary-white , #FDFDFD);
    font-family: "Josefin Sans";
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1; /* 100% */
    letter-spacing: 3.6px;
}

.footer-sns_icon {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
}

.footer-sns_icon li {
    width: 30px;
    filter: invert(98%) sepia(2%) saturate(1309%) hue-rotate(184deg) brightness(117%) contrast(98%);
}

.footer_titleBox::after {
    content: '';
    display: inline-block;
    width: 300px;
    height: 2px;
    background-color: var(--primary-white , #FDFDFD);
    position: absolute;
    left: -8%;
    margin-top: 24px;
}

.footer_menu_list {
    display: none;
}

.footer_shop_onlineShops {
    display: none;
}

.footer_logoIcon {
    display: flex;
    align-items: center;
    margin-top: 60px;
}

.footer_logoIcon img {
    width: 100px;
}

.footer__about small {
    display: block;
    color: var(--primary-white , #FDFDFD);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 34px;
    margin-bottom: 58px;
}

@media screen and (min-width:769px) {
    .konami_sp {
        display: none;
    }

    .konami_pc {
        display: block;
        width: 100%;
    }

    .footer__about {
        padding: 121px 0 109px 7%;
    }

    .footer__title h2 {
        font-size: 4.8rem;
        line-height: 1; /* 100% */
    }

    .footer__title {
        display: flex;
        align-items: flex-start;
        gap: 7%;
    }

    .footer-sns_icon {
        display: flex;
        gap: 30px;
        margin-top: 0;
    }

    .footer-sns_icon img {
        width: 40px;
    }

    .footer_titleBox::after {
        position:static;
        width: 60%;
        margin-top: 24px;
        margin-left: -8%;
    }

    .footer__menu {
        display: block;
    }

    .footer_menu_list {
        display: block;
    }

    .footer_shop_onlineShops {
        display: block;
        margin-top: 16px;
    }

    .footer_menu_list li {
        color: var(--primary-white , #FDFDFD);
        font-size: 3.2rem;
        font-weight: 700;
        line-height: 1.4;
        margin-top: 12px;
    }

    .footer_menu_list li:nth-of-type(1)  {
        margin-top: 16px;
    }

    .footer_shop_category {
        color: var(--primary-white , #FDFDFD);
        font-size: 3.2rem;
        font-weight: 700;
        line-height: 1.4;
    }

    .footer__menuBox {
        display: flex;
        margin-top: 0;
        gap: 50px;
    }

    .footer_shop_list {
        color: var(--primary-white, #FDFDFD);
        font-size: 2.0rem;
        font-weight: 700;
        line-height: 1.4;
        margin-top: 20px;
    }

    .footer_shop_onlineShops li {
        color: var(--primary-white , #FDFDFD);
        font-size: 1.6rem;
        line-height: 1.4; /* 143.75% */
        margin-top: 20px;
    }

    .footer_logoIcon img {
        width: 150px;
    }

    .footer__about small {
        text-align: center;
        margin-top: 24px;
        margin-bottom: 0;
    }

    .footer_logoBox {
        display: flex;
        flex-direction: column;
        margin-top: auto;
    }

    .footer__about::after {
        width: 27.77vw;
        height: 27.77vw;
    }
}

/* =====================
contents
===================== */

.main {
    max-width: 2000px;
    margin: 0 auto;
    overflow: hidden;
}


.contents {
    margin-top: 69px;
    position: relative;
}

.contents_item {
    cursor: pointer;
}

/* 1枚目 */

.contents_Box1 {
    max-width: 320px;
    position: relative;
}

.contents_1 {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 0 20px 20px 0;
    border: solid 3px var(--primary-blue, #003268);
    border-width: 3px 3px 3px 0;
}

.contents_1 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:1s all;
}

.contents_1 img:hover{
    transform:scale(1.2,1.2);
    transition:1s all;
  }

.contents_Box1::after{
    content: '';
    display: block;
    position: absolute;
    background-color: var(--primary-blue, #003268);
    border-radius: 20px;
    width: 100%;
    height: 100%;
    top: 4%;
    left: 5%;
    z-index: -1;
}

/* ２枚目,3枚目,5枚目,6枚目 */

.contents_Box2 {
    text-align: right;
    margin-top: 30px;
    max-width: 233px;
    position: relative;
    margin: 0 auto;
}

.contents_2 {
    margin-top: 30px;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius:20px;
    border: solid 3px var(--primary-blue, #003268);
}

.contents_2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:1s all;
}

.contents_2 img:hover{
    transform:scale(1.2,1.2);
    transition:1s all;
  }

.contents_Box2::after{
    content: '';
    display: block;
    position: absolute;
    background-color: var(--primary-blue, #003268);
    border-radius: 20px;
    width: 100%;
    height: 100%;
    top: 5%;
    right: -5%;
    z-index: -1;
}

/* 4枚目 */

.contents_Box3 {
    margin-top: 30px;
    max-width: 320px;
    position: relative;
    margin-left: auto;
}

.contents_3 {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 20px 0 0 20px;
    border: solid 3px var(--primary-blue, #003268);
    border-width: 3px 0 3px 3px;
}


.contents_3 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:1s all;
}

.contents_3 img:hover{
    transform:scale(1.2,1.2);
    transition:1s all;
  }

.contents_Box3::after{
    content: '';
    display: block;
    position: absolute;
    background-color: var(--primary-blue, #003268);
    border-radius: 20px;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: 5%;
    right: 5%;
}

/* 7枚目 */

.contents_Box4 {
    margin-top: 30px;
    max-width: 320px;
    max-height: 320px;
    position: relative;
}

.contents_7 {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 0 20px 20px 0;
    border: solid 3px var(--primary-blue, #003268);
    border-width: 3px 3px 3px 0;
}

.contents_7 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1 ;
    transition:1s all;
}

.contents_7 img:hover{
    transform:scale(1.2,1.2);
    transition:1s all;
  }
  
.contents_Box4::before {
    content: '';
    display: block;
    background: url(../images/cloud_white.png) no-repeat center / contain;
    position: absolute;
    width: 40vw;
    max-width: 150px;
    height: 25vw;
    bottom: -40%;
    z-index: 1;
}

.contents_Box4::after{
    content: '';
    display: block;
    position: absolute;
    background-color: var(--primary-blue, #003268);
    border-radius: 20px;
    width: 100%;
    height: 100%;
    top: 4%;
    left: 4%;
    z-index: -1;
}


@media screen and (max-width:320px) {
    .contents_Box3::after{
        right: 0;
    }
}

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

    .contents {
    margin-top: 60px;
    padding-right: 13%;
    padding-left: 13%;
    }

    /* 1ブロック */

    .contents_group1,.contents_group3 {
        display: flex;
        justify-content: center;
        gap: 4%;
    }
    
    .contents_Box1,.contents_Box3 {
        max-width: 650px;
        max-height: 773px;
        aspect-ratio: 650 / 773;
    }
    
    .contents_1,.contents_3,.contents_7 {
        border-radius: 20px;
        border: solid 3px var(--primary-blue, #003268);
    }

    .contents_Box2 {
        max-width: 350px;
        max-height: 350px;
    }

    .contents_group2 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .contents_2 {
        margin-top: 0;
    }

    .contents_Box2::after {
        bottom: -5%;
        right: -5%;
    }

    .contents_Box1::after,.contents_Box3::after{
        top: 2%;
        left: 3%;
    }

    /* ２ブロック */

    .contents_group3 {
        flex-direction: row-reverse;
    }

    .contents_Box3 {
        margin-top: 0px;
        margin-left: 0;
    }

    .contents_group3 {
        margin-top: 5%;
    }

    .contents_Box4 {
        margin: 5% auto 5%;
        max-width: 1060px;
        max-height: 773px;
    }

    .contents_7 img {
        aspect-ratio: 1060 / 773;
    }

    .contents_Box4::after {
        top: 3%;
        left: 2%;
    }

    .contents_Box4::before {
        width: 27.77vw;
        max-width: 400px;
        height: 17.36vw;
        bottom: -40%;
    }
}

/* =====================
modal
===================== */

/* モーダル画像 */

.modal_item {
    z-index: -10;
    opacity: 0;
    transition: 0.8s;
    width: 0;
    box-shadow: 2px 4px 12px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    cursor: pointer;
}

.modal_item.open {
    z-index: 9998;
    opacity: 1;
    width: 70%;
    max-width: 1500px;
    object-fit: cover;
}

@media screen and (min-width:769px) {
    .modal_item.open {
        width: 50%;
        max-width: 500px;
        object-fit: cover;
    }
}

/* 背景の色 */

.container::after {
    content: '';
    background-color: rgba(0, 50, 104, 0.9);
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 9997;
}

.container.open::after {
    display: block;
}

/* 閉じるボタン */

.modal_close {
    width: 24px;
    height: 24px;
    position: fixed;
    top: 3%;
    right: 3%;
    z-index: 9999;
    display: none;
    cursor: pointer;
}

.modal_close.open {
    display: block;
}

.modal_close img {
    width: 100%;
}

/* =====================
fadeIn
===================== */

.fadeIn {
    transform: translate(0, 50px);
    opacity: 0;
    transition: 0.8s;
}

.fadeIn.animated {
    transform: translate(0, 0);
    opacity: 1;
}