@charset "UTF-8";
/* CSS Document */

.clearfix:after {
content:"";
clear:both;
display:block;
}

/*============================================================
 For Smartphone
============================================================*/

@media (max-width:640px) {

/*---------- Header ----------*/

header {
width:100%;
}

h1 {
float:left;
width:50%;
}

h1 a {
display:inline-block;
margin:10px 0 0 15px;
}

h1 img {width:70%;}

#header_menu {
float:right;
padding:15px 0;
text-align:right;
width:50%;
}

#header_menu ul {display:inline-block;}

#header_menu li {
float:left;
margin:0 1em 0 0;
}

#header_menu input {
display:none;
background:#fff;
border-radius:1em;
border:0;
padding:0.3em 1em;
}

#header_menu .sns_search img,
#header_menu .sns_fb img,
#header_menu .sns_ig img,
#header_menu .sns_mail img {
width:20px;
}


.hidden_box {
margin:0;/*前後の余白*/
padding:0;
position:relative;
}

/*ボタン装飾*/
.hidden_box label {
padding:0;
font-weight:bold;
border:0;
cursor :pointer;
position:absolute;
right:20px;
top:15px;
}

.hidden_box label img {width:20px;}

/*チェックは見えなくする*/
.hidden_box input {
display:none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
height:0;
padding:0;
overflow:hidden;
opacity:0;
transition:0.3s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
padding:10px;
height:auto;
opacity:1;
}

.hidden_show input.sbox {
font-size:16.1px;
font-family:"Noto Sans JP", "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
padding:0.5em;
display:block !important;
width:85%;
border-radius:2em;
border:1px #ccc solid;
}

#header_menu ul {
margin:0 30px 0 0;
}

.lang {
display:block;
width:100%;
margin-top:10px;
}

#header_menu .lang ul {
margin:0;
text-align:right;
width:100%;
}

#header_menu .lang ul li {
display:inline-block;
float:none;
padding:0 40px 0 0;
}

.lang ul li a {
background:#e60617;
border-radius:2px;
text-decoration:none;
width:100%;
text-align:center;
height:40px;
display:table-cell;
vertical-align:middle;
}

.lang ul li a:hover {
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
}

.lang ul li a span {
color:#ffffff;
text-decoration:none;
padding:5px 10px;
}

}

/*============================================================
   For PC
============================================================*/

@media (min-width:641px) {

header {
width:100%;
padding:20px 0 0;
}

#header_content {
margin:0 auto;
width:960px;
}

h1 {
float:left;
width:240px;
}

h1 a {
display:block;
margin:0 0 0 30px;
}

h1 img {width:200px;}

#gsc {
background:none;
width:200px;
}

#header_menu {
float:right;
text-align:right;
width:720px;
}

#header_menu ul {display:inline-block;}

#header_menu li {
margin:0 1em 0 0;
position:relative;
}

#header_menu .sns_fb img,
#header_menu .sns_ig img,
#header_menu .sns_mail img {
width:20px;
}

#header_menu .sns_search .icon {
position:absolute;
right:7px;
top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
width:16px;
}

#header_menu input {
background:#fff;
border-radius:0.5em;
padding:0.3em 1em;
}

.hidden_box {display:none;}

.sns_search {position:relative;}

input.gsearch {
border:1px #ddd solid;
font-size:1em;
padding:0.5em;
width:15em;
}

input.icon {
background:none !important;
width:16px;
position:absolute;
right:0;
}

nav {margin:20px 0 0;}

.sns_list {
width:100%;
margin:0 0 0 auto;
text-align:right;
}

.sns_list li {display:inline-block;}

.lang {
margin:10px 0 0;
display:block;
width:100%;
}

.lang ul {
text-align:right;
width:100%;
}

.lang ul li {
display:inline-block;
margin:0 0 0 5px !important;
}

.lang ul li a {
display:inline-block;
background:#e60617;
padding:4px 20px;
text-decoration:none;
}

.lang ul li a:hover {
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
}

.lang ul li a span {
color:#ffffff;
text-decoration:none;
}

}