@charset "utf-8";

/*------------  reset  ------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,
strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, figcaption, figure, footer, header, hgroup, menu, nav,
section, main, summary, time, mark, audio, video, a, button, input, select,
textarea { margin: 0; padding: 0; box-sizing: border-box; }
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; }
form { margin: 0; padding: 0; }
li { list-style-type: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption,th { text-align: left; }
q:before,q:after { content:''; }
object,embed { vertical-align: top; }
hr,legend { display: none; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; }
abbr,acronym,fieldset { border: 0; }
img { border: 0; border: none; max-width: 100%; vertical-align: bottom; }


a { text-decoration:none; opacity: 1; transition: all .3s; cursor: pointer; }
a:hover { text-decoration: none; opacity: .5; }

html { font-size: 62.5%; }
body { background: url('/images/bg.jpg') #f6e3b1; min-width: 320px; font-size: 1.4em; line-height: 1; color: #23211f; font-family: sans-serif; -webkit-text-size-adjust: 100%; }

button { background-color: transparent; border: none; cursor: pointer;  outline: none;  padding: 0; appearance: none; width: 100%; }


/*------------  web-font  ------------*/
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Sans CJK JP Bold'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format('woff');
}



/*------------  header  ------------*/
#header { position: relative; }
#header .header_line { position: relative; height: 8px; overflow: hidden; }
#header .header_line::before { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: #e6002d; }
#header .header_line::after { content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: #009a53; }

#header .header_inner { background: #fff; }
#header .header_block { display: flex; justify-content: center; align-items: center; padding: 10px 0; }
#header .header_block .nav { position: relative; flex-basis: 16%; }
#header .header_block .nav::after { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 90%; background: #cfcac5; transform: translate(0,-50%) rotate(18deg); }
#header .header_block .nav:last-child::after { display: none; }
#header .header_block .nav a { display: block; height: 80px; text-indent: -9999px; overflow: hidden; }
#header .header_block .nav01 a { background: url('/images/nav01.png') no-repeat center; background-size: 80px 80px; }
#header .header_block .nav02 a { background: url('/images/nav02.png') no-repeat center; background-size: 80px 80px; }
#header .header_block .nav03 a { background: url('/images/nav03.png') no-repeat center; background-size: 80px 80px; }
#header .header_block .nav04 a { background: url('/images/nav04.png') no-repeat center; background-size: 80px 80px; }
#header .header_block .nav05 a { background: url('/images/nav05.png') no-repeat center; background-size: 80px 80px; }
#header .header_block .logo { flex-basis: 20%; }
#header .header_block .logo h1 { margin: 0 auto; max-width: 108px; }
#header .header_block .logo a { text-indent: 0; }


/*------------  breadcrumb  ------------*/
.breadcrumb { display: flex; margin: 0 auto; padding: 20px 3% 40px; max-width: 1360px; font-size: 1.2rem; }
.breadcrumb a { color: #e6002d; }
.breadcrumb li { position: relative; padding-right: 22px; line-height: 1.5; }
.breadcrumb li:after { content: ">"; position: absolute; top: -1px; right: 7px; }
.breadcrumb li:last-child { margin-right: 0px; }
.breadcrumb li:last-child:after { display: none; }


/*------------  contents  ------------*/
.contents { margin: 0 auto; padding: 0 3%; max-width: 1360px; }


/*------------  footer  ------------*/
#footer { padding: 10px 0 0; }
#footer .footer_line { position: relative; height: 5px; overflow: hidden; }
#footer .footer_line::before { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: #e6002d; }
#footer .footer_line::after { content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: #009a53; }
#footer .footer_inner { position: relative; margin: 36px auto; padding: 0 3%; max-width: 1360px; }
#footer .logo { position: absolute; width: 94px; }
#footer .footer_nav { padding: 20px 0 0 130px; line-height: 2; }
#footer .footer_nav li { display: inline-block; margin-right: 2.4rem; font-size: 1.4rem; font-weight: bold; }
#footer .footer_nav li:last-child { margin-right: 0; }
#footer .footer_nav li a { color: #331a0c; }
#footer .copyright { display: block; padding: 20px 0 0; font-size: 1.1rem; text-align: right; }
#footer .footer_nav li.sns_nav {
    display: inline-block;
    width: 50px;
    margin: 0px 12px 0 0;
}
.pc_none{display: none;}


/*------------  pagetop  ------------*/
.pagetop { position: fixed; bottom: 5.4%; right: 1.2%; z-index: 10; }
.pagetop a { position: relative; display: block; width: 48px; height: 48px; background: #fff; border-radius: 4px; text-indent: -9999px; overflow: hidden; box-shadow: 0 0 12px rgba(0,0,0,.1); }
.pagetop a:after { content:''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -3px 0 0 -5px; border-top: 2px solid #23211f; border-right: 2px solid #23211f; transform: rotate(-45deg); }






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

  #header .header_block .nav a { height: 70px; }
  #header .header_block .nav01 a { background-size: 70px 70px; }
  #header .header_block .nav02 a { background-size: 70px 70px; }
  #header .header_block .nav03 a { background-size: 70px 70px; }
  #header .header_block .nav04 a { background-size: 70px 70px; }
  #header .header_block .nav05 a { background-size: 70px 70px; }
  #header .header_block .logo h1 { max-width: 94px; }

  .contents { padding: 0 2%; }

  #footer .logo { width: 80px; }
  #footer .footer_nav { padding: 16px 0 0 110px; line-height: 2; }
  #footer .footer_nav li { margin-right: 2.2rem; font-size: 1.3rem; }

}

@media screen and (max-width: 770px) {
#footer .footer_nav li.sns_nav img {
    margin: 5px;
    }
    .pc_none{display: block;}
}



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

  a:hover { opacity: 1; }

  /*------------  header  ------------*/
  #header .header_line { height: 7px; }
  #header .header_block { flex-wrap: wrap; padding: 10px 0 8px; }
  #header .header_block .nav { flex-basis: 20%; }
  #header .header_block .nav::after { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 94%; transform: translate(0,-50%) rotate(12deg); }
  #header .header_block .nav a { height: 54px; }
  #header .header_block .nav01 a { background-size: 54px 54px; }
  #header .header_block .nav02 a { background-size: 54px 54px; }
  #header .header_block .nav03 a { background-size: 54px 54px; }
  #header .header_block .nav04 a { background-size: 54px 54px; }
  #header .header_block .nav05 a { background-size: 54px 54px; }	
  #header .header_block .logo { flex-basis: 100%; padding: 0 0 10px; }
  #header .header_block .logo::after { display: none; }
  #header .header_block .logo h1 { max-width: 72px; }
  #header .header_block .logo a { height: 48px; }

  /*------------  breadcrumb  ------------*/
  .breadcrumb { flex-wrap: wrap; padding: 13px 3% 30px; }

  /*------------  contents  ------------*/
  .contents { padding: 0; }

  /*------------  footer  ------------*/
  #footer { padding: 5px 0 0; }
  #footer .footer_line { height: 3px; }
  #footer .footer_inner { margin: 22px auto 22px; padding: 0 4%; }
  #footer .logo { position: relative; width: 64px; }
  #footer .footer_nav { padding: 11px 0 0; line-height: 2; }
  #footer .footer_nav li { margin-right: 1.5rem; font-size: 1.2rem; }
  #footer .footer_nav li a { color: #331a0c; }
  #footer .copyright { padding: 10px 0 0; font-size: 1rem; text-align: left; }
  

  /*------------  pagetop  ------------*/
  .pagetop { bottom: 8px; right: 8px; }
  .pagetop a { width: 40px; height: 40px; }
  .pagetop a:after { width: 7px; height: 7px; margin: -3px 0 0 -4px; }

}

.manbou {
  margin: 0 auto;
  background: #fff;
  width: 100%;
}

.manbou_inner {
  padding: 30px;
}