@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------
Fonts
----------------------------------------------------------*/
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
}

.noto{
font-family: "Noto Sans Japanese", sans-serif;
}
.yugo{
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
}

/*----------------------------------------------------------
reset
----------------------------------------------------------*/
html{
overflow-y:scroll;
font-size:10px;
}
@media (max-width: 768px){
html{
font-size:2.666vw;
}
}

body{
width: 100%;
min-width: 1280px;
color:#4d4d4d;
font-size:1.6rem;
line-height: 1.6;
font-family: "Noto Sans Japanese",'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic ProN', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', Helvetica, Arial, sans-serif;
-webkit-text-size-adjust:100%;
margin:0;
padding:0;
}
@media (max-width: 768px){
body{
min-width: 375px;
}
}

h1,h2,h3,h4,h5,h6{
font-size:1.6rem;
margin:0;
}

p{
margin:0;
}

ul,ol{
margin:0;
padding: 0;
}

ul{
list-style:none;
}

ol{
list-style-position:inside;
}

table{
margin:0;
border-collapse:collapse;
border-spacing:0;
}
tr,th,td{
font-weight: normal;
margin: 0;
padding: 0;
}

hr{
display:none;
}

img{
border:0;
vertical-align:middle;
}
@media (max-width: 768px){
img{
width: 100%;
height: auto;
}
}

li img{
vertical-align:middle;
}

button,input,select,textarea{
font-size:1.6rem;
vertical-align:middle;
font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', Helvetica, Arial, sans-serif;
}

button{
display:inline;
border:none;
padding:0;
background:none;
}

em,address,small{
font-style:normal;
}

em{
font-weight:bold;
}

article,aside,dialog,figure,footer,header,menu,nav,section,mark,audio,video,main{
display:block;
margin:0;
padding:0;
border:0;
outline:0;
}

fieldset{
margin:0;
padding:0;
border:none;
}

nav ul{
list-style:none;
}

*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.clearfix::after{
content: "";
height: 0;
display: block;
clear: both;
visibility: hidden;
}

.pc_dsb{display: block!important;}
.pc_dsn{display: none!important;}
.sp_dsb{display: none!important;}
.sp_dsn{display: block!important;}
@media (max-width: 768px){
.pc_dsb{display: none!important;}
.pc_dsn{display: block!important;}
.sp_dsb{display: block!important;}
.sp_dsn{display: none!important;}
}


a{
transition: 0.3s;
}
a:hover{
opacity: 0.7;
}
@media (max-width: 768px){
a{
transition: 0;
}
a:hover{
opacity: 1.0;;
}
}

/*----------------------------------------------------------
wrapper
----------------------------------------------------------*/
#wrapper{
width: 100%;
}
#container{
width: 100%;
}


/*----------------------------------------------------------
header
----------------------------------------------------------*/
#header{
width: 100%;
background: #fff;
}
#header .inner{
width: 980px;
margin: 0 auto;
padding: 10px 0;
display: table;
}
#header .inner .logo{
width: 160px;
padding: 0 20px 0 0;
display: table-cell;
vertical-align: middle;
}
#header .inner .logo a{
display: inline-block;
}
#header .inner .text{
font-size: 1.2rem;
padding: 7px 0 2px;
display: table-cell;
vertical-align: middle;
}
@media (max-width: 768px){
#header .inner{
width: 90%;
padding: 8px 0;
display: block;
}
#header .inner .logo{
width: 100px;
padding: 0;
display: block;
}
#header .inner .text{
display: none!important;
}
}


/*----------------------------------------------------------
footer
----------------------------------------------------------*/
#footer{
width: 100%;
background: #553528;
padding: 20px 0;
}
#footer .copyright{
width: 1000px;
color: #fff;
font-size: 1.3rem;
text-align: center;
line-height: 1.0;
margin: 0 auto;
}
@media (max-width: 768px){
#footer{
padding: 10px 0;;
}
#footer .copyright{
width: 100%;
color: #fff;
font-size: 1.0rem;
transform: scale(0.85);
}
}
