@charset "utf-8";

div.top_container{
width: 100%;
max-width: 700px;
margin: 0px auto;
padding-top: 100px
}

div.container{
width: 100%;
max-width: 700px;
margin: 0px auto;
padding-top: 100px
}

div.normal_container{
width: 100%;
max-width: 700px;
margin: 0px auto;
padding-top: 50px
}

/*--------------------nav--------------------*/

nav.nav{
width: 100%;
max-width: 700px;
height: 60px;
background: #1bb1e5;
position: fixed;
top:0px;
left:50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 5% 0px 5%;
z-index: 11
}

div.nav_login{
width: max-content;
display: flex;
align-items: center;
}

a.nav_login{
color: #fff;
display: block;
}

a.new_registration{
background: #fff;
color: #073584;
display: block;
padding: 5px 10px;
margin-left: 15px;
border-radius: 5px;
text-decoration: underline
}

/*--------------------menu--------------------*/

menu.menu{
width: 100%;
height: 100%;
max-width: 700px;
position: fixed;
top:0px;
left:50%;
transform: translateX(-50%);
background: #fff;
z-index: 10;
padding-top: 80px;
display: none
}

.menuIn{
animation-fill-mode:both;
animation-duration:0.4s; 
animation-name: menuIn;
display: block!important
}

@keyframes menuIn {

0% { opacity: 0;  }
100% { opacity: 1;}

}

li.menu{
display: block;
padding-left: 5%;
padding-right:5%
}

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

p.menu_pictureUrl{
width: 50px;
height: 50px;
border-radius: 50px;
overflow: hidden;
margin-right: 10px;
}

h3.menu_profile_name{
font-size:18px;
letter-spacing: 0.02em
}

a.mypage{
color: #666;
font-size:14px;
text-decoration: underline;
display: flex;
align-items: center
}

a.mypage:after{
content: '';
width: 16px;
height: 16px;
background: url(../img/icon/external_link_icon_152846.webp) no-repeat center;
background-size: cover;
margin-left: 10px
}

a.menu_login{
width: 48%;
height: 46px;
line-height: 46px;
text-align: center;
font-size:14px;
border-radius: 5px
}

a.login{
color: #073584;
border:solid 1px #073584;
margin-right: 4%
}

a.new{
background: #073584;
color: #fff
}

div.menu_wrapper{
margin-bottom: 20px;
}

a.menu{
display: block;
letter-spacing: 1px;
font-size:15px;
color: #000;
padding: 12px 0px 12px 10px;
font-weight: 600;
border-bottom: solid 1px #c5c3ba;
background: url(../img/icon/arrow_gray.png) no-repeat right 10px center;
background-size: 12px;
position: relative;
}

a.other_menu{
color: #444;
font-size:14px;
display: block;
padding: 12px 0px 12px 10px
}

span.menu_wrapper{
background: #1bb1e5;
display:inline-block;
text-align: center;
margin-left: 10px;
color: #fff;
width: 20px;
border-radius: 3px;
height: 20px
}

/*--------------------top--------------------*/

header#top_inner{
width: 90%;
margin: 0px auto
}

h1.top{
font-size:16px;
text-align: center;
margin-bottom: 15px
}

img.top_logo{
width: 50%;
margin: 0px auto 20px auto;
}

h4.search{
font-size:13px;
text-align: center;
border-bottom: solid 1px #1bb1e5;
margin-bottom: 15px;
padding-bottom: 10px
}

span.search{
font-size:120%;
color:#1bb1e5;
display: inline-block;
margin: 0px 5px 0px 5px;
font-weight: bold;
}

ul.top_search{
border: 2px solid #1bb1e5;
margin-bottom: 10px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: space-between;
}

ul.top_search li{
width: calc(100% / 3);
font-size:12px;
padding: 5px 0px;
vertical-align: middle;
text-align: center;
font-weight: 600;
border-right: solid 2px #1bb1e5;
position: relative
}

ul.top_search li:last-of-type{
border-right: none;
}

li.top_search_selected{
background: #1bb1e5;
color:#fff;
}

li.top_search_selected:after{
position: absolute;
bottom: -8px;
left: 50%;
border-color: #1bb1e5 transparent transparent;
border-style: solid;
border-width: 8px 9px 0;
content: "";
 width: 0;
height: 0;
transform: translateX(-50%);
}

label.top_search{
display: block;
border: 2px solid #1bb1e5;
border-radius: 6px;
height: 50px;
margin-bottom: 15px;
overflow: hidden;
display: flex;
align-items: center
}

input[type="submit"].top_submit{
color: #fff
}

label.top_submit{
width: 60px;
height: 100%;
background: #1bb1e5;
color: #fff
}

a.registration{
width: 60%;
height: 40px;
display: block;
border-radius:20px;
background: #1bb1e5;
margin: 0px auto 30px auto;
color: #fff;
text-align: center;
line-height: 40px
}

article.top_inner{
padding-top: 10px
}

h2.top_inner{
font-size: 16px;
color: #1bb1e5;
text-align: center;
margin-bottom: 15px
}

a.shop_registration{
display: block;
width: 200px;
height: 44px;
margin: 0px auto 30px auto;
line-height: 44px;
background: #1bb1e5;
text-align: center;
color: #fff;
font-weight: 700;
border-radius: 100px;
}

p.shop_login{
text-align: center;
font-size:14px;
color:#1bb1e5;
}

p.shop_login a{
display: inline-block;
text-decoration: underline;
color:#1bb1e5;
margin-left: 5px
}

p.top_copy{
width: 100%;
position: absolute;
text-align: center;
bottom: 30px
}

p.login_copyright,p.copyright{
text-align: center;
font-size:12px
}

footer.footer{
width: 90%;
margin: 30px auto 0px auto;
border-top:solid 1px #dcdcdc;
padding-bottom: 50px;
padding-top: 15px
}

a.footer_link{
font-size:13px;
display: block;
color:#666;
padding: 15px 0px 15px 0px ;
text-decoration: underline
}

a.nav_login{
text-decoration: underline
}

p.nav_login{
margin-right: 10px;
color: #fff
}

p.pictureUrl{
width: 42px;
margin-left: 10px;
border-radius: 50%
}

p.pictureUrl img{
border-radius: 50%
}

/*--------------------features--------------------*/

section#features,section#areas{
width: 100%;
height: 100%;
max-width: 700px;
position: fixed;
background: #fff;
top:0px;
left: 50%;
transform: translateX(-50%);
overflow-y: auto;
display: none;
z-index: 12
}

h2.features{
font-size: 16px;
font-weight: 700;
text-align: center;
border-bottom: solid 1px #eee;
color:#111;
padding: 20px 0px 15px 0px;
position: relative
}

p.features_close{
width: 50px;
height: 50px;
background: url(../img/icon/close.png) no-repeat center;
background-size: 18px;
position: absolute;
top:50%;
transform: translateY(-50%);
right:2%;
cursor: pointer;
}

article.features{
width: 90%;
margin: 0px auto;
padding: 15px 0px 0px 0px;
border-bottom: solid 1px #eee;
}

ul.features{
display: flex;
align-items: center;
flex-wrap:wrap
}

ul.features li{
width: 50%;
margin-bottom:20px; 
}

h3.features{
font-size: 15px;
font-weight: 700;
color:#111;
margin-bottom: 15px
}

label.features{
position: relative;
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
}

label.features input[type="checkbox"]{
width: 100%;
height: 100%;
appearance: none;
  -webkit-appearance: none;
-moz-appearance: none;
 outline: none;
border:solid 3px #eee;
border-radius: 8px;
}

label.features input[type="checkbox"]:checked {
background: #1bb1e5 url(../img/icon/843_ch_f.png) no-repeat center; 
background-size: 20px;
border:solid 3px #1bb1e5;
}

h4.features{
vertical-align: middle;
font-size: 14px;
font-weight: 600;
color:#444;
display: inline-block;
margin-left: 10px
}

input[type="submit"].features{
width: 100%;
height: 50px;
color: #fff;
position: fixed;
background: #073584;
bottom:0px;
left: 0px;
appearance: none;
  -webkit-appearance: none;
-moz-appearance: none;
border:none;
font-weight: 700;
font-size:14px
}

button.features{
width: 100%;
height: 50px;
color: #fff;
position: fixed;
background: #1bb1e5;
bottom:0px;
left: 0px;
display: block;
font-weight: 700;
font-size:14px;
text-align: center;
line-height: 50px;
border:none
}