@charset "utf-8";

html {
	color:#000;
	background:#FFF;
	overflow-y: scroll;
}

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
	word-wrap:break-word;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display: block;
}

blockquote,q {
	quotes: none;
}

blockquote:before,blockquote:after,
q:before,q:after {
	content: '';
	content: none;
}

input,textarea {
	margin: 0;
	padding: 0;
}

ol,ul{
	list-style:none;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}

ol,ul {
	list-style:none;
}

caption,th {
	text-align:left;
}

abbr,acronym {
	border:0;
	font-variant:normal;
}

input,textarea,select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	*font-size:100%;
}

legend {
	color:#000;
}

a {
    color: #000;
    text-decoration: none;
    transition: .4s
}

a:focus {
	outline:none;
}
a:hover {
	opacity:0.7;
}
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important
}
/**
 *
 * 
 *
 */
 
 
body{
	font-family:"Hiragino Maru Gothic Pro","ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO","Kosugi Maru";
	font-size: 1.5rem;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
	overflow: hidden;
}



img{
	width: 100%;
	vertical-align: middle;
}

button, select, input, input[type=submit] {
    -webkit-appearance: none;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

@media screen and (max-width: 599px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

.content{
	max-width: 768px;
	margin: auto;
    background-image: url("../images/content_back.png");
	background-size: 100%;
	background-position: top center;
}
.content_area{
	margin: auto;
	padding: 0 3%;
}	
section {
    position: relative;
}

.main {
    background-image: url("../images/main_back.png");
	background-size: 100%;
	background-position: top center;
}


/* PCメニュー */
.pc-header {
    position: fixed;
    top: 50%; 
    transform: translateY(-50%); 
    right: 2%;
    width: min(140px, calc((90% - 750px) / 2));
    padding: 0; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    gap: 10px; 
    z-index: 9999;
    box-sizing: border-box;

}

/* 💡ボタンのリンクエリア（変更なし） */
.pc-header .pclink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1; 
    min-height: 0; 
}

/* 💡ボタン画像（変更なし） */
.pc-header .pclink img {
    width: 100%;
    max-width: 320px; 
    height: auto;
    max-height: 100%; 
    object-fit: contain;
    margin: 0 auto;
}

/* ===================================================
   🛠️ SNSエリア：CSSの背景画像を使って完全に固定します
   =================================================== */

/* 💡HTML側のリンク切れ画像（割れたマーク）を完全に非表示にします */
.pc-header_sns .bg {
    display: none !important;
}

/* 💡SNS枠：上のボタンと「完全に同じ仕組み（flex: 1）」で自動縮小の枠に入れます */
.pc-header_sns {
    position: relative;
    display: flex;
    justify-content: space-between;
    
    /* 👇ここを修正：横幅の制限（px）を削除し、上のボタン（.pclink）と完全に同じ条件にします */
    max-width: 320px !important;
    width: 100%;
    flex: 1; 
    min-height: 0;
    
    box-sizing: border-box;
    flex-shrink: 0; 
    background: none !important; 
    padding: 0 !important; 
}

.pc-header_sns .bg {
    display: block !important;
    position: relative !important; 
    width: 100% !important;
    max-width: 320px !important; /* 💡上のボタンの最大幅と同じ */
    height: auto !important; 
    max-height: 100% !important; /* 💡等分された枠を超えない */
    object-fit: contain !important;
    margin: 0 auto !important; /* 💡中央揃え */
    
    z-index: 0;
    content: url("../images/pc_link_sns_back.png") !important;
}

.pc-header_snslink {
    position: absolute;
    
    top: 35%; 
    z-index: 1;
    display: block;
    max-width: 23%!important;
    bottom: auto !important; 
}

.pc-header_snslink:nth-of-type(1) { left: 9%; }   /* LINEアイコンの位置 */
.pc-header_snslink:nth-of-type(2) { left: 38.5%; } /* Xアイコンの位置 */
.pc-header_snslink:nth-of-type(3) { right: 9%; }  /* Instagramアイコンの位置 */

.pc-header_snslink img {
    width: 100%;
    height: auto;
    display: block;
}
@media screen and (max-width: 950px) {
.pc-header {
	display:none
}
}

/* SPメニュー */
.sp-header {
    display: none;
    pointer-events: none;
}

@media screen and (max-width: 950px) {
.sp-header {
	display: flex;
	pointer-events: all;
	justify-content: space-between;
    align-items: flex-start;
    position: fixed;
    top: 0;
    width: 750px;
    max-width: 100%;
    z-index: 1000;
}
.sp-sns {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 10px;
}
.sp-snslink img {
    width: 60px;
}
.p-menuOpen {
    padding: 20px 30px;
    width: min(125px, 30%);
}
.p-menu {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background:url(../images/sp_menu_back.png);
    padding: 50px 52px;
    z-index: 11;
    opacity: 0;
    pointer-events: none;
    background-size: contain;
	background-repeat: no-repeat;
	text-align: center;
}
.is-navOpen .p-menu {
    opacity: 1;
    pointer-events: all;
    transition: opacity .2s;
}
.is-navOpen .p-menuOpen {
    display: none;
}
.p-menu__close {
    position: absolute;
    width: 55px;
    right: -22px;
    top: -22px;
    padding: 0;
}
.p-menu__link {
    display: block;
    padding: 20px 0;
    border-bottom: 2px solid #EA4D0C;
    width: min(300px, 55vw);
}

.p-menu__link:last-child img{
	width: 85%;
}
.pmtop{
	width: 30%;
}
}

/* top */

.top_head{
	position: relative;
}
.top_read{
	position: absolute;
	bottom: 0.3%;
    width: 90%;
    margin: auto;
    left: 0;
    right: 0;
}
.page_link_area{
	margin: auto;
    padding-bottom: 30px;
}
.page_link_flex{
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.page_link_flex li{
	width: 31%;
	margin: 5px;
}

/* Xキャンペーン */
.section_content{
    background-image: url("../images/section01_cont_back.png");
	background-size: contain;
    background-position: top center;
	margin-top: -5px;
}	
.xcp_content{
	margin: 0 3%;
    padding-bottom:3%;
	position:relative;
	padding: 1% 0;
}
.xcp_content::before{
    content:"";
    position:absolute;
    inset:0;
    background:url(../images/xcp_waku.png) no-repeat;
	background-size: 100% 100%;
    pointer-events:none;
	z-index: 2;
}
.xcp_content_inner{
    background:#fff;
    border-radius:55px;
    padding: 3px 0 40px;
	margin: -5px 5px;
}
.xcp_ttl{
	width: 75%;
    margin: auto;
	padding: 30px 0 25px;
}
.ttl_bottom_hr{
	position: absolute;
    bottom: -13%;
}
.seciton_content_xcp{
    margin-top: -5px;
    position: relative;
    z-index: 10;
}
.xcp_cont_prize{
	padding: 5% 3% 0;
}
.xcp_cont_area{
	margin-top: 5%;
}
.xcp_follow_btn{
	width: 80%;
    margin: 10px auto;
}
.xcp_cont03{
	margin-bottom: 2%;
}
.xcp_txt_btn{
	width: 80%;
    margin: auto;
}


/* うちわプレゼント */
.uchiwapr_content{
	position:relative;
	margin:8% 3% 3%;
	padding: 1% 0;
}
.uchiwapr_content::before{
    content:"";
    position:absolute;
    inset:0;
    background:url(../images/uchiwapr_waku.png) no-repeat;
	background-size: 100% 100%;
    pointer-events:none;
	z-index: 2;
}
.uchiwapr_content_inner{
    background:#fff;
    border-radius:55px;
    padding: 3px 0 20px;
	margin: -5px 5px;
}
.uchiwapr_ttl{
	width: 80%;
    margin: auto;
	padding: 30px 0 25px;
}
.ttl_area{
	background: #fff9a7;
	border-radius: 55px 55px 0 0;
	position: relative;
	margin-top: -1px;
}
.ttl01{
	width: 18%;
	position: absolute;
    top: -25%;
    z-index: 3;
}

.seciton_content_uchiwapr{
    margin-top: -5px;
    position: relative;
    z-index: 10;
}
.uchiwapr_cont_prize{
	padding: 5% 8% 0;
	width: 85%;
    margin: auto;
}
.uchiwapr_cont01{
	margin-bottom: 2%;
}

.uchiwapr_shop_area{
    border: 4px solid transparent;
    border-image: url(../images/shop_list_waku.png) 8 stretch;
    margin: 70px 25px 20px;
	position: relative;
	padding: 0 25px;
}
.uchiwapr_shop_ttl{
	width: 85%;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: -0.7%;
}
.uchiwapr_shop_read{
	width: 80%;
    margin: auto;
    padding-top: 45px;
}
.uchiwapr_shop_serch{
	width: 45%;
    margin: auto;
    padding: 35px 0;
}
.uchiwapr_shop_flex{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.shop_link{
	width: 38%;
    margin: 0 15px 20px;
}
.shop_area_ttl{
	margin: 20px auto;
}
.shop_list{
	margin: 35px auto;
}

/* ステッカープレゼント */
.sealpr_content{
	position:relative;
	margin:8% 3% 3%;
	padding: 1% 0;
}
.sealpr_content::before{
    content:"";
    position:absolute;
    inset:0;
    background:url(../images/sealpr_waku.png) no-repeat;
    background-size: 100% 100%;
    pointer-events:none;
	z-index: 2;
}
.sealpr_content_inner{
    background:#fff;
    border-radius:55px;
    padding: 3px 0 20px;
	margin: -5px 5px;
}
.sealpr_ttl{
	width: 80%;
    margin: auto;
	padding: 30px 0 25px;
}
.ttl_area{
	background: #fff9a7;
	border-radius: 55px 55px 0 0;
	position: relative;
}
.ttl02{
	width: 18%;
	position: absolute;
    top: -25%;
	z-index: 3;
}
.seciton_content_sealpr{
    margin-top: -5px;
    position: relative;
    z-index: 10;
}
.sealpr_cont_prize{
	padding: 7% 5% 2%;
}
.sealpr_cont01{
	margin-bottom: 4%;
}
.sealpr_cont03{
	width: 55%;
    margin: 3% auto;
}

.sealpr_shop_area{
    border: 4px solid transparent;
    border-image: url(../images/shop_list_waku02.png) 8 stretch;
    margin: 70px 25px 20px;
	position: relative;
	padding: 7% 5% 4%;
}
.sealpr_shop_ttl{
	width: 85%;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: -7%;
}

.shop_list{
	margin: 35px auto;
}

/* 夏装飾 */
.summer_content{
	position:relative;
	margin:5% 3% 3%;
	padding: 1% 0;
}
.summer_content::before{
    content:"";
    position:absolute;
    inset:0;
    background:url(../images/summer_waku.png) no-repeat;
    background-size: 100% 100%;
    pointer-events:none;
	z-index: 2;
}
.summer_content_inner{
    background:#fff;
    border-radius:55px;
    padding: 3px 0 20px;
	margin: -5px 5px;
}
.summer_ttl{
	width: 80%;
    margin: auto;
	padding: 30px 0 25px;
}
.ttl_area02{
	background: #e1d5e5;
	border-radius: 55px 55px 0 0;
	position: relative;
	margin-top: -1px;
}

.seciton_content_summer{
    margin-top: -5px;
    position: relative;
    z-index: 10;
	padding: 5% 3% 1%;
}
.summer_cont_prize{
	padding: 7% 0 2%;
    width: 95%;
    margin: auto;
}
/* POPUP */
.popup_content{
	position:relative;
	margin:5% 3% 8%;
	padding: 1% 0;
}
.popup_content::before{
    content:"";
    position:absolute;
    inset:0;
    background:url(../images/popup_waku.png) no-repeat;
    background-size: 100% 100%;
    pointer-events:none;
	z-index: 2;
}
.popup_content_inner{
    background:#fff;
    border-radius:55px;
    padding: 3px 0 20px;
	margin: -5px 5px;
}
.popup_ttl{
	width: 80%;
    margin: auto;
	padding: 30px 0 25px;
}
.ttl_area03{
	background: #feeacd;
	border-radius: 55px 55px 0 0;
	position: relative;
	margin-top: -1px;
}

.seciton_content_popup{
    margin-top: -5px;
    position: relative;
    z-index: 10;
	padding: 5% 3% 1%;
}
.popup_cont_prize{
	padding: 7% 0 2%;
    width: 95%;
    margin: auto;
}
.popup_cont01{
    margin: auto;
    padding-top: 5px;
}
.popup_cont02{
    margin: auto;
    padding: 0 0 5px;
}

@media screen and (max-width: 700px) {
.ttl_area,.ttl_area02,.ttl_area03{
	border-radius: 50px 50px 0 0;
	.page_link_area {
    	margin: 10px auto 0;
    }

}
@media screen and (max-width: 600px) {
.ttl_area,.ttl_area02,.ttl_area03{
	border-radius: 45px 45px 0 0;
}
}
.xcp_content_inner,,uchiwapr_content_inner,sealpr_content_inner,.summer_content_inner,.popup_content_inner{
	border-radius: 50px;
}
}
@media screen and (max-width: 550px) {
.ttl_area,.ttl_area02,.ttl_area03{
	border-radius: 40px 40px 0 0;
}

.xcp_content_inner,.uchiwapr_content_inner,.sealpr_content_inner,.summer_content_inner,.popup_content_inner{
	    margin: -4px 4px;
	    border-radius: 45px;
}
}
	
@media screen and (max-width: 500px) {
.ttl_area,.ttl_area02,.ttl_area03{
	border-radius: 35px 35px 0 0;
}
.xcp_content_inner,.uchiwapr_content_inner,.sealpr_content_inner,.summer_content_inner,.popup_content_inner{
	    border-radius: 40px;
}
	.sp-sns{
		gap: 5px;
		padding: 5px 15px;
	}
    .sp-snslink img {
        width: 45px;
    }
	.p-menuOpen {
        padding: 10px 30px;
        width: min(105px, 30%);
    }
    .p-menu{
    	padding: 20px 45px 40px;
    	top: 70px;
    }
    .p-menu__link{
    	padding: 20px 0 15px;
    	width: min(240px, 55vw);
    }
    .page_link_area {
    	    padding-bottom: 20px;
 }
    .page_link_flex li {
    width: 30%;
    margin: 5px;
}
}
@media screen and (max-width: 450px) {
	.xcp_ttl,.uchiwapr_ttl,.sealpr_ttl,.summer_ttl,.popup_ttl {
	    padding: 20px 0 20px;
	}
    .xcp_content_inner, .uchiwapr_content_inner, .sealpr_content_inner, .summer_content_inner, .popup_content_inner {
        border-radius: 30px;
        margin: -3px 3px;
    }
    .ttl_area, .ttl_area02, .ttl_area03 {
        border-radius: 30px 30px 0 0;
    }
    .ttl_bottom_hr {
    	position: absolute;
    	bottom: -20%;
    }
    .xcp_content_inner {
    	padding: 3px 0 30px;
    }
	.uchiwapr_shop_area{
		margin: 30px 15px 20px;
		padding: 0 15px;
	}
	.uchiwapr_shop_ttl{
		top: -1%;
	}
	.uchiwapr_shop_read {
    	width: 90%;
    	padding-top: 20px;
	}
	.uchiwapr_shop_serch {
    	width: 60%;
    	padding: 10px 0;
	}
	.shop_link {
    	width: 41%;
    	margin: 0 5px 5px;
	}
	.shop_area_ttl {
    	margin: 5px auto;
	}
	.shop_list {
    	margin: 10px auto;
	}
	.uchiwapr_content_inner {
		padding: 3px 0 10px;
	}
	.sealpr_shop_ttl{
		top: -9%;
	}
	.sealpr_shop_area{
		margin: 30px 15px 15px;
		padding: 30px 15px 10px;
	}
	.sealpr_content_inner{
    	padding: 3px 0 10px;
   	}
   	.popup_cont02{
   		padding: 0;
	}
	}

@media screen and (max-width: 400px) {
    .sp-snslink img {
        width: 35px;
    }
    .ttl_area, .ttl_area02, .ttl_area03 {
        border-radius: 28px 28px 0 0;
    }
    .xcp_content_inner, .uchiwapr_content_inner, .sealpr_content_inner, .summer_content_inner, .popup_content_inner {
        margin: -3px 3px;
}
    .uchiwapr_shop_ttl {
        top: -1.2%;
    }
        .sealpr_shop_ttl {
        top: -10%;
    }
}


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

	.sp-snslink img {
        width: 40px;
    }
	.p-menuOpen {
        padding: 10px 15px;
        width: min(105px, 20%);
    }
	.p-menu__link {
        padding: 13px 0 13px;
    }
    .xcp_content_inner, .uchiwapr_content_inner, .sealpr_content_inner, .summer_content_inner, .popup_content_inner {
        margin: -3px 3px;
        border-radius: 26px;
    }
        .ttl_area, .ttl_area02, .ttl_area03 {
        border-radius: 26px 26px 0 0;
    }
    
}
@media screen and (max-width: 320px) {
	.modal .close{
		width: 40px;
    	height: 40px;
    }
	.p-menu__close {
        width: 45px;
        right: -15px;
    }
	.p-menu__link {
        padding: 10px 0 10px;
    }
}



/* アニメーション */

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    100% {
        opacity: 1;
        transform: translateY(0px)
    }
}

@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }

    100% {
        opacity: 1;
        transform: translateY(0px)
    }
}

@keyframes fadeRight {
    0% {
        opacity: 0;
        transform: translateX(-20px)
    }

    100% {
        opacity: 1;
        transform: translateX(0px)
    }
}

@keyframes fadeLeft {
    0% {
        opacity: 0;
        transform: translateX(30px)
    }

    100% {
        opacity: 1;
        transform: translateX(0px)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeBounce {
    0% {
        opacity: 0;
        transform: translateY(0px)
    }

    30% {
        opacity: 1;
        transform: translateY(-25px)
    }

    50% {
        opacity: 1;
        transform: translateY(0px)
    }

    70% {
        opacity: 1;
        transform: translateY(-10px)
    }

    90% {
        opacity: 1;
        transform: translateY(0px)
    }

    100% {
        opacity: 1;
        transform: translateY(0px)
    }
}

.p-animateFadeUp {
    opacity: 0;
    transform: translateY(20px)
}

.is-inview .p-animateFadeUp,.p-animateFadeUp.is-inview {
    animation: fadeUp .3s ease forwards
}

.p-animateFadeDown {
    opacity: 0;
    transform: translateY(-20px)
}

.is-inview .p-animateFadeDown,.p-animateFadeDown.is-inview {
    animation: fadeDown .5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards
}

.p-animateFadeIn {
    opacity: 0
}

.is-inview .p-animateFadeIn,.p-animateFadeIn.is-inview {
    opacity: 1;
    transition: opacity .6s cubic-bezier(0.445, 0.05, 0.55, 0.95)
}

.p-animateFadeLeft {
    opacity: 0;
    transform: translateX(30px)
}

.is-inview .p-animateFadeLeft,.p-animateFadeLeft.is-inview {
    animation: fadeLeft .4s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards
}

.p-animateFadeRight {
    opacity: 0;
    transform: translateX(-30px)
}

.is-inview .p-animateFadeRight,.p-animateFadeRight.is-inview {
    animation: fadeRight .4s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards
}

.p-animateFadeBounce {
    opacity: 0;
    transform: translateY(0px)
}

.is-inview .p-animateFadeBounce,.p-animateFadeBounce.is-inview {
    animation: fadeBounce .6s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards
}

@keyframes blockScroll {
    0% {
        transform-origin: left;
        transform: translateX(-103%)
    }

    40% {
        transform-origin: left;
        transform: translateX(0)
    }

    60% {
        transform-origin: right;
        transform: translateX(0)
    }

    100% {
        transform-origin: right;
        transform: translateX(103%)
    }
}

@keyframes blockScrollToLeft {
    0% {
        transform-origin: right;
        transform: translateX(103%)
    }

    40% {
        transform-origin: right;
        transform: translateX(0)
    }

    60% {
        transform-origin: left;
        transform: translateX(0)
    }

    100% {
        transform-origin: left;
        transform: translateX(-103%)
    }
}

.is-inview .p-animateDelay02,.p-animateDelay02.is-inview {
    animation-delay: .2s
}

.is-inview .p-animateDelay03,.p-animateDelay03.is-inview {
    animation-delay: .3s
}

@keyframes mvFade01 {
    0% {
        opacity: 1
    }

    32% {
        opacity: 1
    }

    33% {
        opacity: 0
    }

    66% {
        opacity: 0
    }

    67% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes mvFade02 {
    0% {
        opacity: 0
    }

    32% {
        opacity: 0
    }

    33% {
        opacity: 1
    }

    66% {
        opacity: 1
    }

    67% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes mvFade03 {
    0% {
        opacity: 0
    }

    32% {
        opacity: 0
    }

    33% {
        opacity: 0
    }

    66% {
        opacity: 0
    }

    67% {
        opacity: 1
    }

    100% {
        opacity: 1
    }
}




.topBtn {
	position:fixed; /*固定*/
	bottom:15px; /*場所を右下に移動*/
	right: calc(50% - 365px);
	display:block; /*aタグをblock要素に変更*/
	z-index:1000;
}

.topBtn:hover {
	opacity:0.7;
}
.tbt{
	width: 100px;
}
/*footer */
.footer {
	background-color: #fff;
	height:300px;
	line-height:300px;
	text-align:center;
}
.footer_logo{
	width: 22%;
    margin: auto;
}

@media screen and (max-width: 750px) {
.topBtn{
	right: 3%;
}
.tbt {
    width: 95px;
}
.footer_logo {
    width: 25%;
}
}


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

    .footer {
	height:200px;
	line-height:200px;
}
.tbt {
        width: 70px;
    }
}
@media screen and (max-width: 400px) {
.footer_logo {
        width: 30%;
    }
}


.right-menu{
	position:fixed;
	top:0;
	left:calc(50% + 475px);
	right:0;
	height:100vh;
	box-sizing;border-box;
	padding:10px;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-item:ceter;
}
.menu-item{
	display:block;
	flex-shrink:1;
	min-height:0;
	margin-bottom:10px;
}
.menu-iten img{
	display:block;
	width:auto;
	max-width;100%;
	height:100%;
	max-height:120px;
	object-fit:contain;
}