@charset "UTF-8";

@media screen and (max-width: 480px) {
    @font-face {
        font-family: 'LINE Seed';
        src: url('../fonts/LINESeedJP_OTF_Rg.woff') format('woff'),
            url('../fonts/LINESeedJP_OTF_Bd.woff') format('woff'),
            url('../fonts/LINESeedJP_OTF_Rg.woff') format('truetype');
    }

    html {
        overflow-x: hidden;
    }

    body {
        margin: 0 !important;
        font-family: YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif;
        overflow-x: hidden;
        padding-top: 60px;
    }

    a {
        color: #000;
        text-decoration: none;
    }

    p {
        margin: 0;
    }

    /* font-family */
    .u-family1 {
        font-family: 'LINE Seed', sans-serif;
    }

    /* font-size */
    .u-fos3L {
        font-size: 20px;
    }

    .u-fos2L {
        font-size: 18px !important;
    }

    .u-fosL {
        font-size: 15px !important;
    }

    .u-fosM {
        font-size: 13px !important;
    }

    .u-fosS {
        font-size: 11px !important;
    }

    .u-fos16--sp {
        font-size: 16px;
    }

    .u-fos30 {
        font-size: 30px;
    }

    /* font-weight */
    .u-boldN {
        font-weight: normal;
    }

    .u-bold {
        font-weight: bold !important;
    }

    /* margin */
    .u-mT15 {
        margin-top: 15px;
    }

    .u-mT2 {
        margin-top: 20px;
    }

    .u-mT3 {
        margin-top: 30px !important;
    }

    .u-mT4 {
        margin-top: 40px;
    }

    .u-mT5,
    .u-mT8-5 {
        margin-top: 50px !important;
    }

    .u-mT6 {
        margin-top: 60px;
    }

    .u-mT8,
    .u-mT8-12 {
        margin-top: 80px;
    }

    .u-mT10 {
        margin-top: 100px;
    }

    .u-mT12 {
        margin-top: 120px;
    }

    .u-mT35 {
        margin-top: 350px;
    }

    .u-mWA {
        margin-right: auto;
        margin-left: auto;
    }

    .u-mL0 {
        margin-left: 0 !important;
    }

    .u-mB2 {
        margin-bottom: 20px;
    }

    .u-mB5 {
        margin-bottom: 50px;
    }

    /* padding */
    .u-pT1 {
        padding-top: 10px;
    }

    .u-pTB15 {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .u-pTB1 {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .u-pL2 {
        padding-left: 20px;
    }

    .u-pL3 {
        padding-left: 30px;
    }

    .u-pT20 {
        padding-top: 200px;
    }

    .u-pT24{
        padding-top: 240px;
    }

    /* text-align */
    .u-txtC {
        text-align: center !important;
    }

    .u-txtL {
        text-align: left;
    }

    .u-txtC-L {
        text-align: left;
    }

    /* width */
    .u-w10 {
        width: 10%;
    }

    .u-w20,
    .u-w8-20,
    .u-w10-20 {
        width: 20%;
    }

    .u-w30 {
        width: 30%;
    }

    .u-w20-45 {
        width: 45%;
    }

    .u-w50,
    .u-w30-50 {
        width: 50%;
    }

    .u-w60,
    .u-w20-60,
    .u-w30-60 {
        width: 60%;
    }

    .u-w70,
    .u-w90-70 {
        width: 70%;
    }

    .u-w75,
    .u-w90-75 {
        width: 75%;
    }

    .u-w80,
    .u-w30-80,
    .u-w40-80,
    .u-w50-80 {
        width: 80%;
    }

    .u-w90,
    .u-w70-90,
    .u-w80-90,
    .u-w60-90 {
        width: 90%;
    }

    .u-w100,
    .u-w50-100 .u-w70-100 {
        width: 100%;
    }

    /* line-height */
    .u-lineH2S {
        line-height: 1;
    }

    .u-lineHS {
        line-height: 1.2;
    }

    .u-lineHM {
        line-height: 1.6;
    }

    .u-lineHL {
        line-height: 1.8;
    }

    .u-lineH2L {
        line-height: 2;
    }

    /* flex */
    .u-flx {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
    }

    .u-flxBet {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        -webkit-justify-content: space-between !important;
        justify-content: space-between !important;
    }

    .u-flxCnt {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        -webkit-justify-content: center !important;
        justify-content: center !important;
    }

    .u-flxMid {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        -webkit-aline-items: center !important;
    }


    /* dispaly */
    .u-blk {
        display: block;
    }

    .u-none--pc {
        display: block;
    }

    .u-none--sp {
        display: none;
    }

    /* position */
    .u-posRel {
        position: relative;
    }

    /* letter-spacing */
    .u-ls2 {
        letter-spacing: 2px;
    }

    .u-ls3 {
        letter-spacing: 3px;
    }

    .u-ls5 {
        letter-spacing: 5px;
    }

    /* color */
    .u-clr-white {
        color: #fff;
    }

    /* <br>調整 */
    .u-br--pc {
        display: none;
    }

    .u-br--sp {
        display: block;
    }

    /* aタグデコレーション */
    .u-underline{
        text-decoration: underline!important;
    }

    /* カスタマイズcss */
    .top_mv_wrap {
        position: relative;
    }

    .top_mv_ttl{
        position: relative;
        z-index: 99;
    }

    .top_bgimg {
        background-image: url('../images/bg_camera.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        width: 210px;
        height: 320px;
        top: 2%;
        right: -5%;
    }

    .top_bgimg.album_made__bgimg {
        top: 30%;
        right: -20%;

    }

    .plan_items {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        -webkit-justify-content: space-between !important;
        justify-content: space-between !important;
    }

    .plan_items .plan_items__item {
        width: calc((100% - 15px) / 2);
        font-weight: bold;
    }

    .plan_items .plan_items__img{
        filter: drop-shadow(3px 3px 4px #aaa);
    }

    .plan_items .plan_items__item:nth-of-type(n+3) {
        margin-top: 30px;
    }

    .contact_cont {
        background-color: #F5F1EE;
        padding: 30px;
    }

    .contact_question {
        border: 2px solid #F5F1EE;
        padding: 30px;
    }

    .contact_mail {
        display: block;
        background-color: #41587A;
        color: #fff;
        padding: 10px 0;
        width: 100%;
        margin: 30px auto;
        text-align: center;
        text-decoration: none;
        font-size: 12px;
        position: relative;
    }

    .contact_mail::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        right: 1.5rem;
        border-right: 1px solid;
        border-bottom: 1px solid;
        top: calc((100% - 12px) / 2);
        border-color: #fff;
        transform: rotate(-45deg);
    }

    .index_ttl {
        position: relative;
        letter-spacing: 3px;
        line-height: 1.6;
        font-size: 20px;
    }

    .index_ttl::after {
        content: url(../images/wave.svg);
        position: absolute;
        display: contents;
        color: #FFBEAF;
        top: 5%;
        left: 50%;
        transform: translateX(-50%) scale(0.8);
    }

    .top_goodsAlb__wrap {
        background-image: url('../images/top_goodsAlb.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 398px;
    }

    .top_goodsAlb__ttl {
        padding-top: 200px;
    }


    .top_goodsAlb__img {
        margin-top: 30px;
    }

    .top_studio__wrap {
        margin-top: 350px;
    }

    .top_instagram::before {
        content: url('../images/instagram.svg');
        transform: scale(0.7) translateX(-50%);
        position: absolute;
        top: -10%;
        left: 48%;
    }

    .cate_photogallery__item {
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 0;
    }


    .cate_photogallery__item:nth-of-type(n+2) {
        margin-top: 20px 0 0 0;
    }

    .location {
        border: 2px solid #41587A;
        padding-bottom: 25px;
    }

    .rocation_wrap {
        width: calc((100% - 1px) / 2);
    }

    .rocation_wrap figure,
    .plan_wrap figure{
        display: flex;
        justify-content: center;
    }

    .rocation_ttl {
        color: #fff;
        font-size: 16px;
        line-height: 1.2;
        background-color: #41587A;
        text-align: center;
        font-weight: bold;
        padding: 20px 0;
        letter-spacing: 3px;
        margin-top: 0 !important;
    }

    .location_basefee {
        background-color: #BFBFBF;
        color: #fff;
        padding: 5px 0;
        text-align: center;
        width: 80%;
        margin: 20px auto 0;
        font-size: 13px;
        font-weight: bold;
    }

    .location_attention {
        border: 2px solid #BFBFBF;
        padding: 20px;
        font-size: 11px;
        width: 70%;
        margin: 30px auto 0;
        line-height: 2;
    }

    .area_tabBtn {
        border: 2px solid#41587A;
        padding: 15px 0;
        width: calc((100% - 15px) / 2);
        text-align: center;
        font-size: 12px;
        display: block;
    }

    .area_tabBtn:active,
    .area_tabBtn:focus{
        background-color: #41587A;
        color: #fff;
    }

    .area_tabBtn:nth-of-type(n+3) {
        margin-top: 10px;
    }

    .area_cont__wrap {
        border: 2px solid #41587A;
        padding: 20px 0 50px;
        width: 90%;
        margin: 50px auto;
    }

    .area_cont__ttl {
        background-color: #BFBFBF;
        color: #fff;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        width: 90%;
        margin-right: auto;
        margin-left: auto;
        letter-spacing: 1.5px;
        padding: 6px 0;
    }

    .area_cont__areaWrap {
        border: 2px solid #41587A;
        width: 90%;
        margin: 20px auto;
    }

    .area_cont__area {
        background-color: #41587A;
        color: #fff;
        padding: 8px 15px;
        font-size: 13px;
    }

    .area_cont__add {
        border: 2px solid #BFBFBF;
        padding: 15px 10px;
        letter-spacing: 1.5px;
        width: 80%;
    }

    .albMade_select__txt {
        background-color: #F5F1EE;
        padding: 25px 30px;
        margin-bottom: 60px;
    }


    /* フォーム */
    .form_ttl {
        background-color: #41587A;
        width: 100vw;
        color: #fff;
        font-size: 13px;
        font-weight: normal;
        padding: 8px 0;
        margin-top: 60px;
        text-align: center;
    }

    .form_clr {
        color: #CF8D7D;
    }

    /* テキストエリアのスタイル */
    textarea#question {
        width: 100%;
        /* 横幅を100%に設定 */
        height: 150px;
        /* 初期の高さを設定 */
        resize: vertical;
        /* 縦方向にのみサイズ変更を許可 */
        padding: 10px;
        /* 内側の余白を設定 */
        border: 1px solid #ccc;
        /* 枠線のスタイル */
        border-radius: 4px;
        /* 角を丸くする */
        box-sizing: border-box;
        /* パディングとボーダーを含めたサイズ設定 */
    }

    textarea {
        width: 100% !important;
        padding: 0 0 0 5px;
    }

    input#name_sei,
    input#name_mei,
    input#furigana_sei,
    input#furigana_mei {
        width: calc((100% - 30px) / 2) !important;
    }

    input#email {
        padding: 10px 0 10px 5px;
    }

    select {
        width: calc((100% - 25px) / 3) !important;
        padding: 10px 0;
    }

    input[type="radio"] {
        display: none;
    }

    .custom_radioBtn {
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 2px solid #CF8D7D;
        border-radius: 100%;
        position: relative;
        margin-right: 8px;
        cursor: pointer;
    }

    input[type="radio"]:checked+.custom_radioBtn {
        background-color: transparent;

    }

    input[type="radio"]:checked+.custom_radioBtn::after {
        content: '';
        display: block;
        width: 9px;
        height: 9px;
        background: #CF8D7D;
        border-radius: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .radio_wrap {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    textarea {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        line-height: 40px;
    }

    #header {
        position: relative;
    }

    #header nav {
        background-color: #41587A;
        height: 50px;
        padding: 5px 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100;
    }

    .nav_logo {
        position: absolute;
        top: -15%;
        left: 40%;
        transform: translateX(-50%);
    }

    .nav_openbtn {
        position: relative;
        background: #41587A;
        cursor: pointer;
        width: 50px;
        height: 50px;
        border-radius: 5px;
        margin-left: auto;
    }

    .nav_openbtn p {
        font-size: 8px;
        color: #fff;
        text-align: center;
        padding-top: 2px;
    }

    .nav_openbtn span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background: #fff;
        width: 45%;
    }

    .nav_openbtn span:nth-of-type(1) {
        top: 15px;
    }

    .nav_openbtn span:nth-of-type(2) {
        top: 23px;
    }

    .nav_openbtn span:nth-of-type(3) {
        top: 31px;
    }

    .nav_openbtn.is-active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }

    .nav_openbtn.is-active span:nth-of-type(2) {
        opacity: 0;
    }

    .nav_openbtn.is-active span:nth-of-type(3) {
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }

    .footer_bottom {
        background-color: #fff;
        padding: 5px 0;
        font-size: 12px;
        text-align: center;
    }

    .nav_content.header,
    .nav_content.footer {
        transition: opacity 0.4s ease;
        background-color: #41587A;
        color: #fff;
        width: 100%;
        display: block;
        overflow-y: scroll;
        padding: 15px 0;
        z-index: 300;
        position: relative;
    }

    .nav_content.header {
        pointer-events: none;
        opacity: 0;
        height: 100vw;
    }

    .nav_content.footer {
        padding-bottom: 50px;
    }

    .nav_content.is-active {
        opacity: 1;
        pointer-events: auto;
        background-color: #41587A;
        height: 700px;
        width: 100vw;
    }

    .header .nav_content__item {
        padding-left: 20px;
        color: #fff;
        margin-top: 30px;
    }

    .footer .nav_content__item {
        padding-left: 20px;
        color: #fff;
        margin-top: 15px;
    }

    .icon_down {
        position: relative;
    }

    .header .icon_down::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 29%;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #fff;
        border-bottom: 5px solid transparent;
        transform: translateY(-50%);
        transition: transform 0.3s;
    }

    .footer .icon_down::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 29%;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #fff;
        border-bottom: 5px solid transparent;
        transform: translateY(-50%);
        transition: transform 0.3s;
    }

    .icon_down.is-active::after {
        transform: translateY(-80%) rotate(180deg);
    }

    .nav_accordion__cont {
        background-color: #fff;
        font-weight: bold;
        font-size: 12px;
        width: 85%;
        margin: 10px auto 10px;
        padding: 10px 0;
        border-radius: 8px;
    }


    .nav_acc_content__item {
        margin-top: 8px;
        padding-left: 20px;
        display: block;
        color: #41587A;
    }

    .photo_goods_creation__items {
        width: 75%;
        margin-top: 30px;
    }

    .plivacy_wrap {
        width: 85%;
        margin-right: auto;
        margin-left: auto;
    }

    .privacy_ttl {
        font-size: 19px;
        font-weight: bold;
        position: relative;
        border-left: solid 4px #FF8C71;
        padding: 5px 0 5px 10px;
    }

    .privacy_adress {
        background-color: #F5F1EE;
        padding: 25px 10px;
    }

    .top_return_btn {
        display: block;
        background-color: #41587A;
        color: #fff;
        padding: 10px 0;
        margin: 30px auto;
        text-align: center;
        text-decoration: none;
        font-size: 12px;
        position: relative;
    }

    .top_return_btn::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        right: 1.5rem;
        border-right: 1px solid;
        border-bottom: 1px solid;
        top: calc((100% - 12px) / 2);
        border-color: #fff;
        transform: rotate(-45deg);
    }

    .plan_wrap,
    .location_plan_wrap {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        -webkit-justify-content: space-between !important;
        justify-content: space-between !important;
    }

    .slider_item {
        padding-left: 10px;
    }

    .insta_item {
        width: calc((100% - 10px) / 3);
    }

    .insta_item:nth-of-type(n+4) {
        margin-top: 5px;
    }

    .plan_items {
        a {
            &:nth-of-type(2n+1) {
                transition-delay: 0.2s;
            }

            &:nth-of-type(2n) {
                transition-delay: 0.4s;
            }

            &:nth-of-type(n+3) {
                margin-top: 4%;
            }
        }
    }

    .plan_items__item {
        opacity: 0;
        transition: 1.5s;

        &.show {
            opacity: 1;
        }
    }

    .plan_items__item {
        transform: translate(0, 20%);
        opacity: 0;
        transition: 1s;

        &.show {
            transform: translate(0, 0);
            opacity: 1;
        }
    }

    /*写真が変わるアニメーション*/

    .top_img {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        animation-fill-mode: both !important;
    }

    .top_img.js-01 {
        z-index: 1;
        animation: top_img 12s linear 0s infinite normal;
    }

    .top_img.js-02 {
        z-index: 2;
        animation: top_img 12s linear 3s infinite normal;
    }

    .top_img.js-03 {
        z-index: 3;
        animation: top_img 12s linear 6s infinite normal;
    }

    .top_img.js-04 {
        z-index: 4;
        animation: top_img 12s linear 9s infinite normal;
    }

    @keyframes top_img {
        0% {
            opacity: 0;
        }
        5% {
            opacity: 1;
        }
        25% {
            opacity: 1;
        }
        30% {
            opacity: 0;
        }
    }

    .type_of_albums__items:first-of-type{
        margin-top: 10px;
    }

    .type_of_albums__items:nth-of-type(2){
        margin-top: 40px;
    }
    .type_of_albums__items:nth-of-type(3){
        margin-top: 50px;
    }
    .type_of_albums__items:nth-of-type(4){
        margin-top: 30px;
    }
}