@charset "UTF-8";

/* 共通部分
------------------------------- */
@media (min-width: 500px) {
    html {
        font-size: 100%;
    }
    body{
        font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
        /*line-height: 1.7;*/
        color: #432;
    }
    a {
        text-decoration: none;
    }
    img {
        max-width: 100%;
    }
    .wrapper {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 2%;
    }
    .wrapper_about {
        max-width: 1190px;
        margin: 0 auto 0 20%;
        padding: 0 2%;
    }
    .wrapper_galary {
        max-width: 1190px;
        /* margin: 0 0 0 440px; */
        margin: 0 auto 0 20%;
        text-align: center;
        padding: 0 2%;
    }
    /* 大きな背景画像 */
    .big-bg {
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    /* 見出し */
    .page-title-news {
        font-size: 3rem;
        font-family: sans-serif, serif;
        text-transform: none;
        font-weight: 550;
        margin-top: 20px;
        color: rgb(250, 77, 25);
        text-align: center;
    /* background-image: url(../images/back.jpg); */
        
    }
    .page-title {
        font-size: 2.5rem;
        font-family: sans-serif, serif;
        text-transform: none;
        font-weight: 550;
        margin: 20px 0;
        color: rgb(250, 77, 25);
        text-align: center;
    /* background-image: url(../images/back.jpg); */
        
    }
    .regnga-line{
        background: url(../images/renga_sizechange2.jpg);
        height: 50px;
        /*max-width:100%;*/
    }
    .sub-title {
        font-size: 1.2rem;
        padding: 0 8px 8px;
        border-bottom: 2px #0bd solid;
        font-weight: normal;
    }
    .sub-title2 {
        font-size: 1.2rem;
        padding: 0 8px 8px;
        border-bottom: 2px #0bd solid;
        font-weight: normal;
    }

    /* ボタン */
    .button {
        font-size: 1.375rem;
        background: #0bd;
        color: #fff;
        border-radius: 5px;
        padding: 18px 32px;
    }
    .button:hover {
        background: #0090aa;
    }
    .btn-menu {
        display: none;
    }
    /* iframe */
    iframe {
        width: 100%;
        height:550px;
    }

    /* HEADER
    ------------------------------- */
    .page-header {
        display: flex;
        justify-content: space-between;
        height: 120px;
    }
    .logo {
        width: 260px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .main-nav {
        display: flex;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: bold;
        font-size: 1.5rem;
        text-transform: none;
        margin-top: 40px;
        list-style: none;
    }
    .main-nav li {
        margin-left: 36px;
    }
    .main-nav a {
        color: black;
    }
    .main-nav a:hover {
        color: #0bd;
    }

    /* HOME
    ------------------------------- */
    #home {
        background-image: url(../images/main-bg.jpg);
        min-height: 100vh;
    }
    #home .page-title {
        text-transform: none;
    }
    .home-content {
        text-align: center;
        margin-top: 10%;
    }
    .home-content p {
        font-size: 1.125rem;
        margin: 10px 0 42px;
    }

    /* NEWS
    ------------------------------- */
    /* #news {
        background-image: url(../images/cut_renga1.jpg);
        height: 500px;
        margin-bottom: 40px;
    } */
    #news .page-title {
        margin:20px auto 20px 38%;
    }
    .news-contents {
        display: flex;
        justify-content: center;
        margin-bottom: 50px;
    }

    .movie-list{
        margin-top:50px;
    }

    .top-frame{
        display: grid;
        gap: 15px;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        /* margin-top: 6%; */
        margin-bottom: 50px;
        /* padding: 15px 15px 10px 15px; */
        /* background-color: rgb(129, 95, 9); */
    }
    .toppic {
        height:190px;
        width:190px;
        margin:0 10px 70px 0px;
    }

    /* 特集ページ */
    .feature-box{
        text-align: center;
    }
    .feature-pic-box{
        /* display: flex; */
        text-align: center;
        margin:50px auto 20px;
    }

    .featurepic{
        width: 300px;
        height: 300px; 
    }
    .featurepic2{
        width: 300px;
        height: 300px;
    }
    .featurepic3{
        width: 800px;
        height: 500px;
    }
    .featurepic4{
        width: 800px;
        height: 500px;
        margin-bottom: 20px;
    }
    .featurepicB1{
        margin:50px auto 20px;
        width: 800px;
        height: 500px;
    }
    .featurepicB2{
        width: 800px;
        height: 500px;
    }
    .featurepicB3{
        margin:0px auto 0px;
        width: 800px;
        height: 500px;
    }
    .feature-article{
        text-align: center;
        margin:30px 0 50px;
        color: rgb(96, 100, 97);
        font-family:"ヒラギノ角ゴ Pro W4";
    }
    .page-title-feature{
        color: rgb(23, 166, 71);
        font-family:"ヒラギノ角ゴ Pro W4";
        font-size: 1.8rem;
    }
    .page-title-feature-eng{
        color: rgb(23, 166, 71);
        font-family:"ヒラギノ角ゴ Pro W4";
        font-size: 1.2rem;
    }
    .page-title-featureB{
        color: rgb(73, 108, 185);
        font-family:"ヒラギノ角ゴ Pro W4";
        font-size: 1.8rem;
    }
    .page-title-feature-engB{
        color: rgb(73, 108, 185);
        font-family:"ヒラギノ角ゴ Pro W4";
        font-size: 1.2rem;
    }
    #tile_big_pic{
        width: 100vw;
        height: 100vh;
        background-image: url("../images/s22225066.jpg");
        background-size: cover;
        background-position: center;
       }
    #tile_big_pic2{
        width: 100vw;
        height: 125vh;
        background-image: url("../images/oshi_bigbanner.jpg");
        background-size: cover;
        background-position: center;
    }
    #tile_big_pic3{
        width: 100vw;
        height: 115vh;
        background-image: url("../images/kyujin_pagetop.jpg");
        background-size: cover;
        background-position: center;
    }
    #tile_big_pic5{
        width: 100vw;
        height: 125vh;
        background-image: url("../images/winterFashion_banner_75.jpg");
        background-size: cover;
        background-position: center;
    }
    #tile_big_pic6{
        width: 100vw;
        height: 125vh;
        background-image: url("../images/swimmer_collabo_banner_75.jpg");
        background-size: cover;
        background-position: center;
    }
    .fadein {
        opacity: 0;
        transform: translate(0,0);
        transition: all 1.5s;

      &.fadein-bottom{
          transform: translate(0,30px);
      }
      &.scrollin{
        opacity: 1 !important;
        transform: translate(0, 0) !important;
      }
    }
    .container_article2a{
        margin-top: 10px;
        display: flex;
        justify-content: space-around; /* 画像の間に均等に余白を設定 */
    }
    .container_article2a img{
        width: 30%; /* 画像が3つ並ぶように設定 */
        height: auto;
    }

       
    /* ギャラリー */
    .page-title-galary{
        margin:20px auto 0px 0%;
        font-size: 2.5rem;
        font-family: sans-serif, serif;
        text-transform: none;
        font-weight: 550;
        color: rgb(250, 77, 25);
    }
    .galary-contents {
        display: flex;
        justify-content: space-between;
        margin-bottom: 50px;
        overflow:hidden; 
    }
    .galary-contents ul{
        overflow:hidden;
        width:824px;
        margin-top:20px;
        margin-bottom:20px;
    }
    .galary-contents li{
        float:left;
        margin-right:15px;
        /* margin-bottom:20px; */
        /*height:240px;*/
       /* width: 240px;*/

    }
    .galary-contents p{
        margin-bottom:20px;
    }
    .galary-frame{
        display: grid;
        gap: 15px;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        margin-top: 6%;
        margin-bottom: 50px;
        padding: 15px 15px 10px 15px;
        background-image:url(../images/bg.jpg); 
        /* background-color: rgb(129, 95, 9); */
    }
        
    /* サリーマートとは */
    .about-box{
        /* display: flex; */
        text-align: center;
    }
    .aboutpic{
        width: 380px;
        height: 380px;
    }
    .aboutpic2{
        width: 380px;
        height: 380px;
    }
    .about-article{
        text-align: center;
    }
    /* スライドショー */
    #slide{ margin:0 auto; }
    .swiper-container{ 
        width:100%;
        max-width:100%;
        /*height:530px; */
    }
    .swiper-slide-next,.swiper-slide-prev{ opacity: 0.5; }
    .swiper-button-prev::before,.swiper-button-next::before {
        font-size:32px;
        color:#fff;
        font-weight:900;
    }
    .swiper-pagination.swiper-pagination-white.swiper-pagination-clickable.swiper-pagination-bullets{
        margin-top: 50px;
    }
    /*.swiper-button-prev::before { content: "←"; }
    .swiper-button-next::before { content: "→"; } */


    /* 最新情報 */
    article {
        width: 90%;
        /*margin-right: 30px;*/
    }
    .post-info {
        padding-top: 4px;
        margin-bottom: 10px;
        width:760px;
    }

    .post-title {
        font-family: "Yu Mincho", "YuMincho", serif;
        font-size: 2rem;
        font-weight: normal;
        border-bottom: solid 3px #87CEFA;
    }
    article img {
        /* margin-bottom: 20px; */
    }
    article p {
        margin-bottom: 0.5rem;
    }

    /* イベント情報 */
    article2 {
        width: 74%;
        float:none;
    }
    .event-info {
        padding-top: 100px;
        margin-bottom: 10px;
    }

    .event-title {
        font-family: "Yu Mincho", "YuMincho", serif;
        font-size: 2rem;
        font-weight: normal;
        border-bottom: solid 3px #87CEFA;
    }
    article2 img {
        margin-bottom: 20px;
    }
    article2 p {
        margin-bottom: 1rem;
    }

    /* サイドバー */
    aside {
        width: 22%;
        margin-top: 60px;
        /* margin-left: 60px; */
    }
    .sub-menu {
        margin-bottom: 60px;
        list-style: none;
    }
    .sub-menu li {
        border-bottom: 1px #ddd solid;
    }
    .sub-menu a {
        color: #432;
        padding: 10px;
        display: block;
    }
    .sub-menu a:hover {
        color: #0bd;
    }
    aside p {
        padding: 12px 10px;
    }
    .insta-content {
        width: 22%;
        margin-top: 60px;
        /* margin-left: 60px; */
    }

    /* MENU
    ------------------------------- */
    #menu {
        background-image: url(../images/menu-bg.jpg);
        min-height: 100vh;
    }
    .menu-content {
        max-width: 560px;
        margin-top: 10%;
    }
    .menu-content .page-title {
        margin:20px auto 20px 38%;
    }
    .menu-content p {
        font-size: 1.125rem;
        margin: 10px 0 0;
    }

    .grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 6%;
    margin-bottom: 50px;
    }

    /* CONTACT
    ------------------------------- */
    #contact {
        background-image: url(../images/contact-bg.jpg);
        min-height: 100vh;
    }

    /* フォーム */
    form div {
        margin-bottom: 14px;
    }
    label {
        font-size: 1.125rem;
        margin-bottom: 10px;
        display: block;
    }
    input[type="text"],
    input[type="email"],
    textarea {
        background: rgba(255,255,255,.5);
        border: 1px #fff solid;
        border-radius: 5px;
        padding: 10px;
        font-size: 1rem;
    }
    input[type="text"],
    input[type="email"] {
        width: 100%;
        max-width: 240px;
    }
    textarea {
        width: 100%;
        max-width: 480px;
        height: 6rem;
    }
    input[type="submit"] {
        border: none;
        cursor: pointer;
        line-height: 1;
    }

    /* 店舗情報・地図 */
    #location {
        padding: 4% 0;
    }
    #location .wrapper {
        display: flex;
        justify-content: space-between;
    }
    .location-info {
        width: 30%;
    }
    .location-info p {
    /*  padding: 12px 10px;*/
    }
    .location-map {
        width: 65%;
    }

    /* SNS */
    #sns {
        background: #FAF7F0;
        padding: 4% 0;
    }
    #sns .wrapper {
        display: flex;
        justify-content: space-between;
    }
    #sns .sub-title {
        margin-bottom: 30px;
    }
    .sns-box {
        width: 30%;
    }
    .contact-form{  
        height: 1000px;
    }

     /* 大バナーページ
    ------------------------------- */
    a.btn--orange.btn--border-solid {
  border: 2px solid #b84c00;
}

    /* フッター
    ------------------------------- */
    footer {
        background: #432;
        text-align: center;
        padding: 10px 0;
    }
    footer p {
        color: #fff;
        font-size: 0.875rem;
    }
    /* インスタ */
    div.insta_block {
        width:300px;
    }
    div.insta_sentence {
        overflow-y: scroll;
        height:200px;
    }

}
/* モバイル版-------------------
------------------------------- */
@media (max-width: 500px) {

    *{
        margin:0 1px;
    }
    img {
        max-width: 100%;
    }
    .logo {
        width: 260px;
        margin-top: 40px;
      }
    .title_image{
        text-align: center;
    }
    
    /* 見出し */
    .page-title-news {
        font-size: 2rem;
        font-family: sans-serif, serif;
        text-transform: none;
        font-weight: 550;
        margin-top: 20px;
        color: rgb(250, 77, 25);
        text-align: center;
    /* background-image: url(../images/back.jpg); */
        
    }
    .page-title {
        font-size: 2rem;
        font-family: sans-serif, serif;
        text-transform: none;
        font-weight: 550;
        color: rgb(250, 77, 25);
        text-align: center;
    /* background-image: url(../images/back.jpg); */
        
    }
    .regnga-line{
        background: url(../images/renga_sizechange2.jpg);
        height: 50px;
        /*max-width:100%;*/
    }
    .page-header {
        flex-direction: column;
        align-items: center;
    }
    /* iframe */
    iframe {
        width: 100%;
        height:100%
    }
    /* HEADER */
    /* .main-nav {
        font-size: 1rem;
        margin-top: 10px;
    }
    .main-nav li {
        margin: 0 20px;
    } */

    .btn-menu {
        position: absolute;
        top: 0px;
        right: 0px;
        border: 1px solid rgba(255,255,255,.5);
        color: var(--white);
        padding: .5rem 1rem;
    }
    .main-nav {
        background: white;
        width: 0;
        position: absolute;
        z-index: 2;
        height:300px;
        top: 40px;
        right: 0;
        overflow: hidden;
        transition: .5s;
    }
    .main-nav li {
        text-align: center;
        margin: 2rem 0;
    }
    .main-nav a {
        display: block;
    }
    .main-nav.open-menu {
        width: 100%;
    }
    /* HOME */
    .home-content {
        margin-top: 20%;
    }

    .top-frame{
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(120px, 2fr));
        margin-top: 6%;
        padding: 10px 10px 10px 10px;
        /* margin-bottom: 50px; */
    }

    /* 特集ページ */
    .feature-box{
        text-align: center;
    }
    .feature-pic-box{
        /* display: flex;*/
        text-align: center;
        margin:50px auto 20px;
    }

    .featurepic{
        width: 175px;
        height: 175px;
    }
    .featurepic2{
        width: 175px;
        height: 175px;
    }
    .featurepic3{

    }
    .featurepic4{

        margin-bottom: 20px;
    }
    .featurepicB1{
        margin:50px auto 20px;

    }
    .featurepicB2{

    }
    .featurepicB3{
        margin:0px auto 0px;

    }
    .featurepic2_1{
        width: 175px;
        height:175px;
    }
    .featurepic2_2{
        width: 175px;
        height:175px;
    }
    .featurepic2_3{
        width: 175px;
        height:175px;
    }
    .featurepic2_4{
        width: 175px;
        height:175px;
    }
    .feature-article{
        text-align: center;
        margin:30px 0 50px;
        color: rgb(96, 100, 97);
        font-family:"ヒラギノ角ゴ Pro W4";
    }
    .page-title-feature{
        color: rgb(23, 166, 71);
        font-family:"ヒラギノ角ゴ Pro W4";
        font-size: 1.4rem;
    }
    .page-title-feature-eng{
        color: rgb(23, 166, 71);
        font-family:"ヒラギノ角ゴ Pro W4";
        font-size: 1.0rem;
    }
    .page-title-featureB{
        color: rgb(73, 108, 185);
        font-family:"ヒラギノ角ゴ Pro W4";
        font-size: 1.8rem;
    }
    .page-title-feature-engB{
        color: rgb(73, 108, 185);
        font-family:"ヒラギノ角ゴ Pro W4";
        font-size: 1.2rem;
    }
    #tile_big_pic{
        width: 100%;
        height: 50vh;
        background-image: url("../images/s22225066.jpg");
        background-size: cover;
        background-position: center;
       }
    #tile_big_pic2{
        width: 100%;
        height: 50vh;
        background-image: url("../images/oshi_bigbanner.jpg");
        background-size: cover;
        background-position: center;
    }
    #tile_big_pic3{
        width: 100%;
        height: 50vh;
        background-image: url("../images/kyujin_pagetop.jpg");
        background-size: cover;
        background-position: center;
    }
    #tile_big_pic5{
        width: 100vw;
        height: 50vh;
        background-image: url("../images/winterFashion_banner_75.jpg");
        background-size: cover;
        background-position: center;
    }
    #tile_big_pic6{
        width: 100vw;
        height: 50vh;
        background-image: url("../images/swimmer_collabo_banner_75.jpg");
        background-size: cover;
        background-position: center;
    }
    /* ギャラリー */
    .page-title-galary{
        /* margin:20px auto 0px 0%; */
        margin-top: 5px;
        font-size: 2rem;
        font-family: sans-serif, serif;
        text-transform: none;
        font-weight: 550;
        color: rgb(250, 77, 25);
        text-align: center;
    }
    .galary-contents {
        /* display: flex; */
        justify-content: space-between;
        /* margin-top: 30px; */
        margin-bottom: 50px;
        overflow:hidden; 
        
    }
    .galary-contents ul{
        overflow:hidden;
        width:824px;
        margin-top:20px;
        margin-bottom:20px;
        }
    .galary-contents li{
    float:left;
    margin-right:10px;
    width: 100px;
    }
    .galary-contents p{
    margin-bottom:20px;
    }
    .galary-frame{
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(120px, 2fr));
        margin-top: 6%;
        padding: 10px 10px 10px 10px;
        background-image:url(../images/bg.jpg); 
        /* margin-bottom: 50px; */
    }
    /* サリーマートとは */
    .about-box{
        /*display: flex; */
        text-align: center;
    }
    .aboutpic{
        width: 175px;
        height: 175px;

    }
    .aboutpic2{
        width: 175px;
        height: 175px;
    }
    .about-article{
        text-align: center;
    }
    /* スライドショー */
    #slide{ margin:0 auto; }
    .swiper-container{
         width:100%; 
         max-width:100%;
         /*height:200px*/
     }
    .swiper-slide-next,.swiper-slide-prev{ opacity: 0.5; }
    .swiper-button-prev::before,.swiper-button-next::before {
        font-size:32px;
        color:#fff;
        font-weight:900;
    }
    /*.swiper-button-prev::before { content: "←"; }
    .swiper-button-next::before { content: "→"; } */


    /* NEWS */
    .news-contents {
        flex-direction: column;
    }
    #news .page-title {
        margin-top: 5px;
    }
    article,
    aside {
        margin-top: 10px;
        margin-left: 0px;
        width: 100%;
    }
    .insta-content {
        margin-top: 10px;
        margin-left: 0px;
        width: 100%;
    }
    .post-info {
        margin-bottom: 30px;
    }
    .post-date {
        width: 70px;
        height: 70px;
        font-size: 1rem;
    }
    .post-date span {
        font-size: 0.875rem;
        padding-top: 2px;
    }
    .post-title {
        font-size: 1.375rem;
    }
    .post-cat {
        font-size: 0.875rem;
        margin-top: 10px;
    }
   
    /* 最新情報 */
    article {
        width: 100%;
        
    }
    .post-info {
        padding-top: 4px;
        margin-bottom: 10px;
    }

    .post-title {
        font-family: "Yu Mincho", "YuMincho", serif;
        font-size: 1.5rem;
        font-weight: normal;
        border-bottom: solid 3px #87CEFA;
    }
    article img {
        /* margin-bottom: 20px; */
    }
    article p {
        margin-bottom: 0.5rem;
    }

    /* イベント情報 */
    article2 {
        width: 74%;
        float:none;
    }
    .event-info {
        padding-top: 20px;
        margin-bottom: 10px;
    }

    .event-title {
        font-family: "Yu Mincho", "YuMincho", serif;
        font-size: 1.5rem;
        font-weight: normal;
        border-bottom: solid 3px #87CEFA;
    }
    article2 img {
        margin-bottom: 20px;
    }
    article2 p {
        margin-bottom: 1rem;
    }
    .sub-title {
        font-size: 1.375rem;
        padding: 0 8px 8px;
        border-bottom: 2px #0bd solid;
        font-weight: normal;
    }
    .sub-title2 {
        font-size: 1.375rem;
        padding: 0 8px 8px;
        border-bottom: 2px #0bd solid;
        font-weight: normal;
    }

    /* MENU */
    .menu-content {
        margin-top: 20%;
    }

    /* CONTACT */
    #contact .page-title {
        margin-top: 40px;
    }

    /* フォーム */
    input[type="text"],
    input[type="email"],
    textarea {
        max-width: 100%;
    }

    /* 店舗情報・地図 / SNS */
    #location .wrapper,
    #sns .wrapper {
        flex-direction: column;
    }
    .location-info,
    .location-map,
    .sns-box {
        width: 100%;
    }
    .sns-box {
        margin-bottom: 30px;
    }
    .contact-form{
        width: 350px;
        height: 1000px;
    }
        /* フッター
    ------------------------------- */
    footer {
        background: #432;
        text-align: center;
        padding: 10px 0;
    }
    footer p {
        color: #fff;
        font-size: 0.875rem;
    }

}