@charset "UTF-8";


/** ---------------------------------------
body
--------------------------------------- */

body{
font-size: 16px;
font-family: "Noto Sans JP", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "sans-serif";
line-height: 1.8; 
letter-spacing: 0.1rem;
background: #F0F1F4;
font-size: 16px;
}

	@media screen and ( max-width:479px ){
		body{
			font-size: 14px;
			}
	}


/** ---------------------------------------
wapper
--------------------------------------- */

.wrapper{
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 1rem;
}
	@media screen and ( max-width:479px ){
		.wrapper{
			display: block;
			margin: 0 auto;
			padding: 0 3vw;
			width: auto;
			}
	}


/** ---------------------------------------
login
--------------------------------------- */


article.login{
display: block;
margin: 0;
padding: 10rem 0;
}

article.login .box{
display: block;
max-width: 600px;
min-width: 300px;
margin: 0 auto;
padding: 3vh;
border: 1px solid #ddd;
box-sizing: border-box;
background: #fff;
}


article.login .box section.login_input_box{
width: 80%;
min-width: 280px;
margin: 0 auto;
}


article.login .box section.login_input_box ul{
}


article.login .box section.login_input_box ul li{
padding-bottom: 1vh;
}

article.login .box section.login_input_box ul li.submit{
width: 50%;
margin: 0 auto;
padding-top: 1.6vh;
}


article.login .box section.login_input_box ul li.err p{
padding-bottom: 3vh;
color: #D20000;
height: 16px;
font-size: 13px;
letter-spacing: 1;
font-weight: bold;
}


/** ---------------------------------------
header
--------------------------------------- */
header{
display: block;
position: sticky;
top: 0;
left: 0;
right: 0;
background: #fff;
width: 100%;
z-index: 9999;
}

header nav{
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-end;
padding: 1.5vh 0;
}

header nav section{
padding-right: 5vh;
text-align: center;
}

header nav section:last-child{
padding: 0;
margin-left: auto;
}

header nav section a{
text-decoration: none;
color: #333;
}


header nav section span{
display: block;
font-size: 11px;
}

header nav section img.icon{
width: 24px;
}

header nav section img.user{
width: 45px;
}

/** ---------------------------------------
menu_header_select
--------------------------------------- */

.menu_header_select p.m_top{
display: block;
text-align: center;
padding: 2rem 0;
}

.menu_header_select a:hover{
font-weight: bold;
}


.menu_header_select a.shop_move{
	font-weight: bold;
	text-decoration: none;
	padding: 0.8rem 3rem;
	color: #fff;
	background: #10aeaa;
}

.menu_header_select p.m_bottom{
padding: 1rem;
border-top: 1px solid #eee;
}

.menu_header_select p.m_bottom a.logout{
display: block;
text-align: left;
background: url("../img/logout.webp") no-repeat right;
background-size:15px;
}


.menu_header_select p.m_bottom a.select{
display: block;
text-align: left;
background: url("../img/store.webp") no-repeat right;
background-size:15px;
}


.menu_header_select_box{
margin: 0;
padding: 0;
border-top: 1px solid #eee;
}

.menu_header_select_box a{
display: block;
text-align: left;
padding: 1rem;
}


/** ---------------------------------------
menu_dowon
--------------------------------------- */

#menu_down {
  position: relative;
  display: inline-block;
  padding: 0;
  cursor: pointer;
}



#menu_down_box {
  z-index: 1000;
  background: #fff;
  position: absolute;
  right: 0;
  top: 3rem;
  width: 250px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: 0 0 6px #dddd;
}

#menu_down_box.open {
  opacity: 1;
  visibility: visible;
}


/** ---------------------------------------
menu_twitter
--------------------------------------- */

article.menu_twitter{
margin: 0;
padding: 2vh 0;
}

article.menu_twitter nav{
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
gap: 1vh;
}


article.menu_twitter nav section{
width: 100%;
}

article.menu_twitter nav section a{
padding: 1vh 2vh;
text-decoration: none;
display: block;
color: #333;
border: 1px solid #ddd;
background: #fff;
}


article.menu_twitter nav section a.click{
text-decoration: none;
display: block;
color: #fff;
background: #3A4356;
}

	@media screen and ( max-width:479px ){
			article.menu_twitter nav{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			flex-direction: column;
			align-items: center;
			}
	}





/** ---------------------------------------
column_2
--------------------------------------- */

article.column_2{
margin: 0;
padding: 2vh 0;
}

article.column_2 .column_2_box{
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
margin: 0;
padding: 0;
}


article.column_2 .column_2_left{
margin-right: 2vh;
padding: 0;
width: 250px;
}

article.column_2 .column_2_right{
margin: 0;
padding: 0;
background: #fff;
width: 100%;
}


article.column_2 nav.column_2_menu{
width: 100%;

}

article.column_2 nav.column_2_menu section{
margin-bottom: 1vh;
border-bottom: 1px solid #ddd;

}

article.column_2 nav.column_2_menu section a{
display: block;
padding: 1vh;
text-decoration: none;
font-weight: bold;
color: #3a4356;
}


article.column_2 .column_2_right_title h1{
margin: 0;
padding: 1vh;
font-size: 20px;
font-weight: bold;
background: #3A4355;
color: #fff;
}


article.column_2 .column_2_right_box{
margin: 0;
padding: 3vh;
}


	@media screen and ( max-width:479px ){
	
	
			article.column_2 .column_2_box{
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			margin: 0;
			padding: 0;
			}
			
			article.column_2 .column_2_left{
			margin-right: 0;
			padding: 0;
			width: 100%;
			}
			
			article.column_2 nav.column_2_menu section a{
			padding: 1vh 2vh;
			text-decoration: none;
			font-weight: normal;
			color: #3a4356;
			background: #fff;
			border: 1px solid #ddd;
			}
	}




/** ---------------------------------------
form_tweet
--------------------------------------- */

article.form_tweet{
margin: 0;
padding: 2rem 0;
}

article.form_tweet .title{
display: block;
margin: 0;
padding: 1vh 2vh;
font-size: 20px;
font-weight: bold;
color: #fff;
background: #3a4356;
border-bottom: 1px solid #ccc;
}

article.form_tweet .box{
margin: 0;
padding: 3vh;
background: #fff;
}



article.form_tweet section.input ul{
margin: 0;
padding-bottom: 0;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
letter-spacing: 0.05rem;
gap: 1vh;
}

article.form_tweet section.input ul:last-child{
border-bottom: 1px solid #ddd;
padding-bottom: 0;
}


article.form_tweet section.input ul li{
padding: 2vh 1vh;
}

article.form_tweet section.input ul li.item{
width:200px;
line-height: 0;
border-right: 1px solid #ddd;
}


article.form_tweet section.input ul li.item p{
font-weight: bold;
}



article.form_tweet section.input ul li.text{
width:calc(100% - 200px);
}

article.form_tweet section.input ul li.text span{
padding-right: 1vh;
}





/** ---------------------------------------
form_setting
--------------------------------------- */
article.form_setting{

}


article.form_setting section.input{
margin: 0;
padding-bottom: 0.6rem;
}

article.form_setting section.input ul{
margin: 0;
padding-bottom: 0;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
letter-spacing: 0.05rem;
gap: 1vh;
}

article.form_setting section.input ul:last-child{
border-bottom: 1px solid #ddd;
padding-bottom: 1rem;
}


article.form_setting section.input ul li{
padding: 2vh 1vh;

}

article.form_setting section.input ul li.item{
width:200px;
line-height: 0;
border-right: 1px solid #ddd;
}


article.form_setting section.input ul li.item p{
font-weight: bold;
padding: 1vh;
}



article.form_setting section.input ul li.text{
width:calc(100% - 200px);
}



article.form_setting section.input ul li.text img.icon{
display: block;
padding-bottom: 2vh;
max-height:160px;
margin: 0 auto;

}



	@media screen and ( max-width:479px ){
	
	
		article.form_setting section.input ul{
		margin: 0;
		padding-bottom: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		letter-spacing: 0.05rem;
		gap: 1vh;
		}
		
		article.form_setting section.input ul li.item{
		width:100%;
		line-height: 0;
		border-right: 0;
		border-bottom: 1px solid #ddd;
		}
		
		
		article.form_setting section.input ul li.text{
		margin: 0;
		padding: 0;
		width:100%;
		}
		
	}




/** ---------------------------------------
form_submit
--------------------------------------- */

.form_submit{
margin: 0 auto;
padding: 1rem 0;
text-align: center;
width: 50%;
}








/** ---------------------------------------
branch
--------------------------------------- */
article.branch{
padding: 3vh;
}

article.branch .box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

article.branch section{
width: 20%;
padding: 1vh;
}


article.branch section img{
width: 60px;
}



/** ---------------------------------------
twitter_box
--------------------------------------- */

article.twitter_list{
margin: 0;
padding: 2vh 0;
}


article.twitter_list .title{
margin: 0;
padding: 1vh 2vh;
font-size: 20px;
font-weight: bold;
background: #3A4355;
color: #fff;
}


article.twitter_list .twitter_list_box{
margin-bottom: 2vh;
padding: 2vh;
background: #fff;
}



article.twitter_list .twitter_list_box section{
display: block;
margin: 0;
padding: 1vh 0;
border-bottom: 1px solid #ddd;
}

article.twitter_list .twitter_list_box section img.thumbnail{
width: 60px;
}

article.twitter_list .twitter_list_box section img.icon{
width: 20px;
margin-left: 0.5vh;
vertical-align: middle;
}

article.twitter_list .twitter_list_box section span.week{
margin: 0;
padding: 0.6vh;
color: #fff;
border-radius:0.8vh;
border-radius:-webkit-0.8vh;
border-radius:-moz-0.8vh;
background: #3a4355;
font-size: 13px;
font-weight: bold;
text-align: center;
}

article.twitter_list .twitter_list_box section .box_top{
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-end;
}

article.twitter_list .twitter_list_box section .box_top .left{
margin: 0;
padding: 0;
}

article.twitter_list .twitter_list_box section .box_top .left h1{
display: inline-block;
font-weight: bold;
padding-right: 2vh;
font-size: 100%;
line-height: 1;
letter-spacing: 0;
}

article.twitter_list .twitter_list_box section .box_top .left h2{
display: inline-block;
font-weight: bold;
padding-right: 2vh;
font-size: 160%;
line-height: 1;
}

article.twitter_list .twitter_list_box section .box_top .right{
margin: 0;
padding: 0;
}




article.twitter_list .twitter_list_box section .box_bottom{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
padding: 0;
}

article.twitter_list .twitter_list_box section .box_bottom .left{
margin: 0;
padding: 0.6vh;
}



article.twitter_list .twitter_list_box section .box_bottom .right{
margin: 0;
padding: 0;
width: 460px;
text-align: right;
line-height: 0;
}





/** ---------------------------------------
arrow
--------------------------------------- */

.arrow_right{
  width: 100%;
  position: relative;
  display: block;
  vertical-align: middle;
  text-decoration: none;
}

.arrow_right::after{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 8px;   /* arrow size */
  height: 8px;  /* arrow size */
  border-top: 2px solid #ddd;  /* thickness, color */
  border-right: 2px solid #ddd;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/** ---------------------------------------
input_image_sns
--------------------------------------- */

.input_image_sns{
margin: 0;
padding: 2rem 0;
text-align: center;
border: 3px dotted #ddd;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-end;
}

.input_image_sns section.img_twitter{
width: 50%;
padding: 2rem;
line-height: 3;
text-align: center;
}



.input_image_sns section.img_twitter input[type=checkbox]{
margin: 0.6rem;  -ms-transform: scale(1.5, 1.5); -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5);
}



.input_image_sns section.img_twitter img{
display: block;
width: 150px;
text-align: center;
padding-bottom: 1vh;
margin: 0 auto;
}



/** ---------------------------------------
footer
--------------------------------------- */
footer{
padding: 6vh 0;
}


/** ---------------------------------------
updata
--------------------------------------- */
article.updata {
  animation: fade-in 1s, fade-out 1s 2s;
   animation-fill-mode: forwards;
   background: #cee8ea;
   color: #333;
   text-align: center;
   padding: 0.6rem 0;
   font-weight: bold;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}


/** ---------------------------------------
button_icon
--------------------------------------- */

.button_icon{
border: none;
}

.button_icon img{
width: 20px;
}

.button_icon button{
display: none;
}


/** ---------------------------------------
popup
--------------------------------------- */
#popup{
display: none;
}
article.popupbox{
position:absolute;
display: block;
width: 100%;
height: 100%;
z-index: 999;
background:rgba(58,67,87,0.8);
}

article.popupbox .box{
position:absolute;
width: 400px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
display: inline;
background: #fff;
padding: 3rem 0;
text-align: center;
}




article.popupbox .box p.title{
margin: 0;
padding-bottom: 1rem;
font-weight: bold;
}

article.popupbox .box p.title_sub{
margin: 0;
padding-bottom: 2rem;
font-size: 12px;
color: #ddd;
}

article.popupbox .box ul{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}



article.popupbox .box ul li{
width: 50%;
}

article.popupbox .box ul li button{
padding: 1rem;
width: 150px;
color: #fff;
border: none;
font-size: 16px;
font: bold;
}

article.popupbox .box ul li button.cancel{
background: #c3c8d1;
}

article.popupbox .box ul li button.delete{
background: #e88581;
}




/** ---------------------------------------
errmessage
--------------------------------------- */

article.errmessage{
display: block;
}

article.errmessage .box{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex-direction: column;
}


article.errmessage .box p{
background: #fff;
border: 1px solid #ddd;
padding: 1vh 2vh;
font-weight: bold;
color: #a10000;
font-weight: bold;
}