@charset "utf-8";

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css);

/*
	font-family:"FontAwesome";
	font-family:"Font Awesome 5 Free";
*/


/*========================================
 Base／固定
========================================*/
body {font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;}


/*===== FontSize 早見表(必要なもののみ残す) 　※ 16pxは1remで記載 ※ =====*/
html {
    --12px:calc(12 / 16 * 1rem);
    --13px:calc(13 / 16 * 1rem);
    --14px:calc(14 / 16 * 1rem);
    --15px:calc(15 / 16 * 1rem);
    --18px:calc(18 / 16 * 1rem);
    --20px:calc(20 / 16 * 1rem);
    --24px:calc(24 / 16 * 1rem);
    --30px:calc(30 / 16 * 1rem);
}


/* topへ戻る */
footer #totop{
    width:40px;
    height:40px;
    padding:0;
    text-indent:-9999px;
    background-color:#0079c7;
    border-radius:100%;
    position:fixed;
    bottom:10px;
    right:0;
    z-index:800;
    display:none;
    cursor:pointer;
}
footer #totop a {display:block;}
footer #totop::after{
    content:"\f106";
    font-family:"FontAwesome";
    font-size:40px;
    line-height:35px;
    text-indent:0;
    text-align:center;
    color:#fff;
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
}



/*========================================
 カスタム用 ／PC&SP
========================================*/

/*===== class名でfontを使用する場合／下記の記述でfontを設定 =====*/
.Font13 {font-size:var(--13px);}

.container {
    container-type: inline-size;
}
body {
    font-family: 'Noto Serif JP', "Sawarabi Mincho", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
    font-size: 1rem;
    line-height: 1.6;
    background: #fff;
    /*background: url(../images/bg.jpg) top center / cover no-repeat fixed;*/
}
img {
  max-width:100%;
  width: auto;
}
section {
    margin-bottom:10%;
    max-width: 1080px;
    width: 90%;
}
main {
    font-size: 1rem;
    line-height: 1.6;
}
.sp {display: none;}

.btn {
    display: inline-block;
    width:100%;
    padding: 1rem;
    font-size: var(--20px);
    text-align: center;
    text-decoration: none;
    outline: solid 1px #262626;
    outline-offset: 2px; 
    color: #262626;
    background-color: #fff;
    position: relative;
    border: 2px solid #262626;
    transition: color 0.5s ease;
}
.btn:hover {
    color: #fff;
}
.btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}
.btn::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #262626;
    transform: scaleX(0);
    transform-origin: right;
    transition: all 0.3s ease;
    transition-property: transform;
}
.btn span {
    position: relative;
}

/*title*/
.aboutTtl, .shopTtl, .photoTtl, .resultTtl {
    padding: 2rem 0;
    text-align: center;
    letter-spacing: 2px;
}
.ttlImg {
    max-width: 300px;
    width: 80%;
    height: auto;
}

/*header*/
#header {
    background: url(../images/top.jpg) center top no-repeat;
    background-size: contain;
    max-width: 100%;
    text-align: center;
    padding-top:40vw;
}
.headerImg {
    margin-bottom: 2%;
    max-width: 1156px;
    width: 70%;
}

/*nav*/
nav {
    margin:2rem auto;
    max-width: 1080px;
    width: 90%;
}
.navList {
    display: flex;
    gap: 2rem;
    margin-bottom: 5%;
    padding: 0;
    list-style: none;
    text-align: center;
    font-size: var(--20px);
    letter-spacing: 2px;
}
.navItem {
    /*width: calc((100% - 3rem) / 3);*/
    flex: 1;
}

/*結果発表*/
#result {
    margin: 8% auto;
    text-align: center;
}
.resultTtl .ttlImg {
    max-width: 800px;
    width: 100%;
}
.resultBox {
    width: 90%;
}

.resultList {
    padding: 0;
    list-style: none;
}
.resultItem {
    margin: 0 2rem 4rem;
    text-align: center;
    display: inline-block;
    width: calc((100% - 13rem) / 3);
    vertical-align: top;
}

.resultName {
    padding: .2em;
    line-height: 1.4;
}
.resultName span {
    font-size: 1.4rem;
}
.resultShop {
    margin: .5rem auto;
    font-size: 1.2rem;
}
.resultShop::before, .resultShop::after {
    content: "\f521";
    font-family: "FontAwesome";
    font-size: 1rem;
    flex-grow: .05;
    color: transparent;
    /*background: linear-gradient(180deg, #b67b03 20%, #fbe595 50%, #d1a207 80%);*/
    background: #5fdcf0;
    -webkit-background-clip: text;
}
.resultShop::before {
    padding-right: .5em; 
}
.resultShop::after {
    padding-left: .5em; 
}
.resultTxt {
    max-width: 1080px;
    width:90%;
    font-size: var(--20px);
}
.resultVictory {
    margin-bottom:2rem;
    padding: 1rem;
    font-size: var(--24px);
    border-top: 3px double;
    border-bottom: 3px double;
}
.resultVictory .attention {
    font-weight: bold;
    color: #0071bb;
}
.resultVictory .date {
    display: block;
    font-size: 1.3rem;
    padding-top: 1rem;
}
.resultVictory .note:last-child {
    margin-bottom:0;
}

/*about*/
.aboutItem h3 {
    display: flex;
    align-items: center;
    padding-bottom: 1rem;
    justify-content: center;
}
.aboutItem h3::before, .aboutItem h3::after {
    content: "";
    height: 1px;
    flex-grow: .1;
    background-color: #000;
}
.aboutItem h3::before {
    margin-right: 1rem;
}
.aboutItem h3:after {
    margin-left: 1rem;
}
.aboutTxt {
    margin: 2rem auto 4rem;
    text-align: center;
    font-size: var(--20px);
}
.aboutList {
    display: flex;
    padding: 0;
    flex-wrap: wrap;
    gap:1em;
    font-size: var(--20px);
    list-style: none;
}
.aboutItem {
    width: calc((100% - 1em) / 2);
    padding: 2em;
    text-align: center;
}
.note {
    font-size: 1rem;
    font-weight: normal;
}

/*特典*/
.aboutSpecial {
    text-align: center;
    margin: 2rem auto 8%;
    padding: 2em;
    /*background: linear-gradient(to right, #0172bb, #36a9df);
    color: #fff;*/
    font-size: var(--30px);
    font-weight: bold;
    border-top: 4px double;
    border-bottom: 4px double;
}
.aboutSpecial h3 {
    display: flex;
    align-items: center;
    padding-bottom: 1rem;
    justify-content: center;
    line-height: 0.95em;
    font-size: 2.4rem;
    font-weight:bold;
    color: transparent;
    background: linear-gradient(0deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); 
	-webkit-background-clip: text;
}
.aboutSpecial h3::before, .aboutSpecial h3::after {
    content: "\f521";
    font-family: "FontAwesome";
    flex-grow: .05;
    font-size:.7em;
    color: transparent;
    background: linear-gradient(180deg, #b67b03 20%, #fbe595 50%, #d1a207 80%);
    -webkit-background-clip: text;
}
.aboutSpecial h3::before {
    margin-right: 1rem;
}
.aboutSpecial h3:after {
    margin-left: 1rem;
}

/*都道府県*/
.shopRegion, .photoGroup {
    margin: 2rem auto;
    padding: .5rem 0;
    text-align: center;
    border-bottom: 3px double;
    border-top: 3px double;
}
.shopList {
    display: flex;
    padding: 0;
    margin-bottom: 5%;
    list-style: none;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
}
.shopItem {
    margin: 0;
    width: calc((100% - 3rem) / 4);
}
.shopItem a {
    text-decoration:none;
    color:#262626;
    transition: all .3s ease-in-out;
}
.shopItem a:hover {
    color: #38abe0;
}
.shopItem a::before {
    font-family: "Font Awesome 5 Free";
    content: "\f13a";
    margin-right: 8px;
    font-weight: 900;
}


/*photo*/
.photoList {
    display: flex;
    padding: 0;
    margin-bottom: 8%;
    list-style: none;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
}
.photoItem {
    margin: 0;
    width: calc((100% - 4rem) / 5);
    text-align:center
}

/*other*/
#other {
    margin: 0 auto 5%;
    text-align: center;
    font-size: var(--20px);
}
.linkBtn {
    margin: 2rem auto;
    text-align: center;
    max-width: 400px;
}
.linkBtn p {
    padding: 1rem 0;
    font-size: var(--18px);
}

.copyright {
    text-align: center;
    font-size: var(--14px);
}


/* スマホ */
@container (max-width: 767px) {
    .sp {display: block;}
    .pc {display: none;}
/*    body {
        background: none;
        background-color: #eee;
    }
    body:before {
        content:"";
        display:block;
        width:100%;
        height:100vh;
        position:fixed;
        top:0;
        left:0;
        z-index:-10;
        background-image: url(../images/bg.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }*/
    section {
        width: 90%;
    }
    .btn {
        padding: .5em;
    }
    .ttlImg {
        max-width: 200px;
    }
    .aboutTtl, .shopTtl, .photoTtl {
        padding-bottom: 0;
    }
    /*header*/
    .headerImg {
        width: 90%;
    }
    .navList {
        display: block;
    }
    .navItem {
        margin-bottom: 1.5rem;
    }
    .navItem .btn {
        padding:.5em;
        font-size: 1rem;
    }
    /*about*/
    .aboutTxt {
        font-size: var(--15px);
        text-align: left;
    }
    .aboutList {
        display: block;
    }
    .aboutItem {
        width: 100%;
        padding: 0 0 1rem;
        font-size: var(--15px);
    }
    .aboutItem h3 {
        font-size: var(--20px);
    }
    .aboutSpecial {
        margin:0 auto 10%;
        width: 100%;
        padding:2em 1em;
        font-size: var(--18px);
    }
    .aboutSpecial h3 {
        font-size: var(--24px);
    }
    .aboutSpecial p {
        margin:0 auto;
    }
    .note {
        font-size: var(--14px);
    }
    /*shop*/
    .shopRegion, .photoGroup {
        font-size: var(--20px);
    }
    .shopItem {
        width: calc((100% - 1rem) / 2);
        font-size: var(--15px);
    }
    .photoItem {
        width: calc((100% - 1rem) / 2);
        font-size: var(--15px);
    }

    #other {
        margin-bottom:2rem;
        font-size: 1rem;
    }
    .linkBtn {
        width: 90%;
    }
    .linkBtn .btn {
        font-size: var(--15px);
    }
    
    #result {
        margin: 4rem auto;
    }
    .resultBox {
        width: 100%;
    }
    .resultItem {
        margin: 0 1rem 2rem;
        width: calc((100% - 5rem) / 2);
    }
    .resultName {
        font-size:1rem;
    }
    .resultName span {
        font-size:0.95rem;
    }
    .resultShop {
        font-size: 1rem;
    }
    .resultTxt {
        font-size: var(--15px);
        text-align: left;
    }
    .resultVictory {
        font-size: var(--16px);
        text-align: center;
    }
    .resultVictory .date {
        font-size: .95rem;
    }
}