@charset "utf-8";

:root {
  --kc-p500: #ff6414;
  --kc-p400: #ff732b;
  --kc-p300: #ff925a;
  --kc-p100: #fdc;
  --kc-p50: #ffeee5;
  --kc-p10: #fff6f2;
  --kc-s500: #144696;
  --kc-t200: #72cfff;
  --n-g100: #e6e6e6;
  --n-g50: #f2f2f2;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 10px; }
body { width: 100%; color: #111; font-family: "biz udpgothic", sans-serif; font-size: 1.6rem; line-height: 1.5; letter-spacing: .04em; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; border: 0; vertical-align: top; transition: all .3s ease; -ms-interpolation-mode: bicubic; }
button { background: transparent; border: none; appearance: none; cursor: pointer; outline: none; }
a { transition: all .3s ease; }
a:link { color: #; }
a:visited { color: #; }
a:hover { color: #; text-decoration: none; }
a:hover img { opacity: 0.8; }

#wrapper { padding-top: 100px; width: auto; position: relative; transform: scale(1); transform-origin: top left; }

@media screen and (max-width: 1240px) {
  #wrapper { width: 1240px; height: 0; }
}

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

@media screen and (max-width: 767px) {
  body { font-size: 1.5rem; }
  #wrapper { padding-top: 65px; width: auto; }
}

/* --------------------------------------------------
  汎用クラス
-------------------------------------------------- */

.d-block { display: block; }
.d-flex { display: flex; }
.d-none { display: none; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* --------------------------------------------------
  ヘッダ
-------------------------------------------------- */

#header { padding-left: 30px; width: 100%; min-width: 1240px; height: 100px; background: #fff; border-bottom: solid 1px #dbdbdb; display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; z-index: 100; transform-origin: top left; }
#header #header-menu { display: flex; align-items: center; }
#color { display: flex; align-items: center; }
#color strong { margin-right: 10px; }
#color ul { list-style: none; display: flex; align-items: center; }
#color li { margin: 0 5px; }
#color a { padding: 10px 20px; background: var(--kc-s500); border-radius: 5px; color: #fff; font-weight: 700; letter-spacing: .2em; text-decoration: none; display: block; }
#color a.monochrome { background: var(--n-g100); color: #111; }
#language { margin: 0 30px; display: flex; align-items: center; }
#language label { margin-right: 10px; font-weight: 700; }
#language .select { width: 180px; display: flex; align-items: center; position: relative; }
#language .select::after { content: ''; width: 9px; height: 16px; background: url(/img/common/icon-form-select.svg) center no-repeat; background-size: cover; display: block; position: absolute; right: 12px; }
#language .select select { padding: 0 16px; width: 100%; background: #fff; border: solid 1px #ccc; border-radius: 5px; font-family: inherit; font-size: 1.5rem; line-height: 2; appearance: none; }
#login-button { width: 100px; height: 100px; background: var(--kc-p50); color: #111; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#login-button i { margin-bottom: 8px; color: #ff6414; font-size: 3.2rem; }
#login-button p { font-weight: bold; line-height: 1; }
#login-button.login { background: #ff925a; position: relative; }
#login-button.login > a { width: 100%; height:100%; color: #111; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#login-button.login > a:hover { text-decoration: none; }
#login-button.login i { color: #fff; }
#login-button.login div { width: 310px; background: #fff; border-radius: 20px 0 20px 20px; display: none; position: absolute; right: 0; top: 100%; box-shadow: 0 5px 10px rgb(0,0,0,.1); overflow: hidden; }
#login-button.login div ul { list-style: none; }
#login-button.login div li { padding: 0 20px; }
#login-button.login div li a { padding: 15px 20px; border-bottom: solid 1px #ccc; color: #111; font-size: 1.8rem; font-weight: bold; display: flex; align-items: center; }
#login-button.login div li a i { margin: 0 15px 0 0; color: #111; font-size: 2.2rem; font-weight: 900; }
#login-button.login div li.user { padding: 20px 10px; background: #fff6f2; font-size: 2rem; font-weight: bold; text-align: center; }
#login-button.login div li.logout { padding: 20px; }
#login-button.login div li.logout a { background: #144696; border-radius: 5px; color: #fff; justify-content: center; }
#menu-button { width: 100px; height: 100px; background: var(--kc-s500); color: #fff; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#menu-button div { width: 37px; height: 37px; position: relative; }
#menu-button span { margin-bottom: 7px; width: 37px; height: 3px; background: #fff; display: block; transition: all .3s ease; }
#menu-button span:last-of-type { margin-bottom: 14px; }
#menu-button p { font-weight: bold; line-height: 1; }
body.mypage #login-button.login div { display: block; }

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

@media screen and (max-width: 767px) {
  #header { padding-left: 10px; min-width: 100%; height: 65px; font-size: 1.2rem; }
  #header .logo { width: 162px; }
  #color, #language { display: none; }
  #login-button { width: 65px; height: 65px; }
  #login-button i { margin-bottom: 4px; font-size: 2.4rem; }
  #menu-button { width: 65px; height: 65px; }
  #menu-button div { width: 26px; height: 26px; }
  #menu-button span { margin-bottom: 5px; width: 26px; height: 2px; }
}

.monochrome #header { background: #000; color: #fff; }
.monochrome #login-button.login div { background: #333; }
.monochrome #login-button.login div li a, .monochrome #login-button.login div li i { color: #fff; }
.monochrome #login-button.login div li.user { background: #333; }
.monochrome #login-button { background: #333; color: #fff; }
.monochrome #login-button.login > a { color: #fff; }

/* --------------------------------------------------
  sns
-------------------------------------------------- */

/*
#sns { padding: 40px 0; background: var(--kc-p50); }
#sns .inner { margin: 0 auto; padding: 0 20px; width: 1240px; display: flex; justify-content: space-between; }
#sns ul { list-style: none; display: flex; align-items: center; }
#sns li { margin-left: 25px; }

@media screen and (max-width: 1024px) {
  #sns .inner { width: 100%; }
}

@media screen and (max-width: 767px) {
  #sns .inner { text-align: center; display: block; }
  #sns .inner > img { margin-bottom: 26px; width: 240px; }
  #sns ul { justify-content: center; }
  #sns li { margin: 0 12.5px; }
  #sns li:nth-child(1) img { width: 30px; }
  #sns li:nth-child(2) img { width: 32px; }
  #sns li:nth-child(3) img { width: 30px; }
  #sns li:nth-child(4) img { width: 37px; }
}

.monochrome #sns { background: #333; }
*/

/* --------------------------------------------------
  フッタ
-------------------------------------------------- */

#footer { padding: 50px 0; background: var(--kc-s500); }
#footer .inner { margin: 0 auto; padding: 20px; width: 1240px; color: #fff; display: flex; align-items: start; justify-content: space-between; }
#footer a { color: #fff; }
#footer #contact { width: 480px; }
#footer #contact address { margin-bottom: 40px; font-style: normal; }
#footer #contact address p { font-size: 1.7rem; }
#footer #contact .d-flex { margin-bottom: 20px; align-items: end; }
#footer #contact .d-flex img { margin-right: 16px; }
#footer #contact .d-flex p { font-size: 1.6rem; }
#footer .contact { margin-bottom: 24px; line-height: 1; display: flex; align-items: center; }
#footer .contact img { margin-right: 12px; }
#footer .contact strong { margin-bottom: 4px; display: block; }
#footer .contact:last-of-type strong { margin-bottom: 8px; }
#footer .contact p { font-family: quicksand, sans-serif; font-size: 2.8rem; font-weight: 700; }
#footer .contact a { width: 200px; height: 42px; background: #fff; border: solid 1px var(--kc-s500); border-radius: 10px; color: var(--kc-s500); font-size: 1.8rem; font-weight: bold; text-decoration: none; display: flex; align-items: center; justify-content: center; transition: all .3s ease; }
#footer .contact a:hover { background: var(--kc-s500); border: solid 1px #fff; color: #fff; text-decoration: none; }
#footer .contact a.tel { all: unset; pointer-events: none; }
#footer #sitemap { width: 720px; display: flex___; }
#footer .sitemap { margin-bottom: 50px; padding: 16px 20px 4px 30px; width: 360px; border-left: solid 1px #fff; }
#footer .sitemap:nth-of-type(2) { border-right: solid 1px #fff; }
#footer .sitemap ul { list-style: none; }
#footer .sitemap li { margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; }
#footer .sitemap li::before { content: ''; margin-right: 5px; width: 20px; height: 20px; background: url(../img/common/arrow-right.svg) no-repeat; background-size: cover; }
#footer .sitemap li a { text-decoration: underline; }
#footer .sitemap li a:hover { text-decoration: none; }
#footer .sitemap li ul { margin: 12px 0 0 20px; }
#footer .sitemap li li { margin-bottom: 8px; font-size: 1.5rem; flex-wrap: nowrap; }
#footer .sitemap li li:last-child { margin-bottom: 4px; }
#footer .sitemap li li::before { content: ''; margin-right: 10px; width: 6px; height: 6px; background: #fff; border-radius: 100vw; }
#footer .footer-navi { margin-bottom: 16px; width: 100%; display: flex; justify-content: flex-end; }
#footer .footer-navi ul { list-style: none; display: flex; }
#footer .footer-navi li { padding: 0 12px; border-right: solid 1px #fff; font-size: 1.4rem; font-weight: bold; }
#footer .footer-navi li:last-child { padding-right: 0; border-right: none; }
#footer .footer-navi li i { margin-left: 5px; }
#footer #copyright { width: 100%; font-size: 1rem; text-align: right; }

@media screen and (max-width: 1024px) {
  #footer .inner { width: 100%; }
}

@media screen and (max-width: 767px) {
  #footer .inner { padding: 0 10px; width: 100%; max-width: 390px; display: block; }
  #footer #contact { width: 100%; display: flex; flex-direction: column; align-items: center; }
  #footer #contact address { margin-bottom: 25px; padding-bottom: 20px; width: 100%; border-bottom: solid 1px #fff; display: flex; flex-direction: column; align-items: center; }
  #footer #contact address p { font-size: 1.4rem; text-align: center; }
  #footer #contact .d-flex { align-items: center; justify-content: center; }
  #footer #contact .d-flex img { width: 132px; }
  #footer #contact .d-flex p { font-size: 1.5rem; text-align: left; }
  #footer .contact a { border-radius: 8px; }
  #footer .contact a.tel { text-decoration: underline; pointer-events: auto; }
  #footer #sitemap { padding-top: 20px; width: 100%; border-top: solid 1px #fff; }
  #footer #sitemap .sitemap { display: none; }
  #footer .footer-navi { display: block; }
  #footer .footer-navi ul { display: block; }
  #footer .footer-navi li { padding: 10px 0; border-right: none; text-align: center; }
  #footer #copyright { text-align: center; }
}

/* --------------------------------------------------
  メニュー
-------------------------------------------------- */

#menu { width: 700px; height: calc(100vh - 100px); background: #fff; position: fixed; right: -700px; top: 100px; z-index: 100; opacity: 0; transition: all .3s ease; transform-origin: top right; }
#menu .inner { padding: 100px 80px; height: 100%; /*height: calc(100vh - 100px);*/ overflow: auto; }
#menu .menu { margin-bottom: 30px; }
#menu .menu ul { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
#menu .menu li { margin-bottom: 20px; width: 250px; border-bottom: solid 1px #ccc; }
#menu .menu li.full { width: 100%; }
#menu .menu li a { padding: 20px 5px; color: #111; font-size: 1.8rem; font-weight: 700; display: flex; justify-content: space-between; }
#menu .menu li a::after { content: ''; width: 24px; height: 24px; background: url(/img/common/icon-arrow-orange.svg) center no-repeat; }
#menu .menu li a.parent::after { content: ''; background: url(/img/common/icon-plus-orange.svg) center no-repeat; }
#menu .menu li a.parent.active::after { background: url(/img/common/icon-minus-orange.svg) center no-repeat; }
#menu .menu li a.parent.active + ul { height: auto; opacity: 1; overflow: visible; visibility: visible; }
#menu .menu li:full a { font-size: 2.4rem; }
#menu .menu li ul { width: 100%; height: 0; display: block; opacity: 0; overflow: hidden; visibility: hidden; transition: all 1s ease; }
#menu .menu li li { margin-bottom: 15px; width: 100%; border-bottom: none; }
#menu .menu li li:first-child { margin-top: 20px; }
#menu .menu li li a { padding: 0; font-size: 1.6ren; font-weight: 400; justify-content: start; }
#menu .menu li li a::before { content: ''; margin-right: 5px; width: 24px; height: 24px; background: url(/img/common/icon-arrow-black.svg) center no-repeat; flex-shrink: 0; }
#menu .menu li li a::after { display: none; }
#menu .contact { margin-bottom: 50px; }
#menu .contact a { width: 100%; height: 60px; border: solid 2px var(--kc-p500); border-radius: 50px; color: #111; font-size: 1.5rem; font-weight: 700; text-align: center; display: flex; align-items: center; justify-content: center; position: relative; }
#menu .contact a::after { content: ''; width: 15px; height: 18px; background: var(--kc-p500); clip-path: polygon(0 0, 100% 50%, 0 100%); position: absolute; right: 15px; }
#menu .sns {}
#menu .sns ul { list-style: none; display: flex; align-items: center; justify-content: center; }
#menu .sns li { margin: 0 24px; }

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

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

@media screen and (max-width: 767px) {
  #menu { width: 100%; right: -100%; top: 65px !important; }
  #menu .inner { padding: 60px 20px; height: calc(100vh - 65px) !important; }
  #menu .menu ul { display: block; }
  #menu .menu li { margin-bottom: 10px; width: 100%; }
  #menu .menu li a { padding: 16px 5px; }
}

.monochrome #menu { background: #000; }
.monochrome #menu .menu li a { color: #fff; }
.monochrome #menu .contact a { color: #fff; }


/* --------------------------------------------------
  メニュー展開
-------------------------------------------------- */

body.on { overflow: hidden; }
body.on #overlay { width: 100%; height: 100%; background: rgba(0,0,0,.4); position: fixed; top: 0; z-index: 99; }
body.on #menu-button span:nth-of-type(1) { position: absolute; top: 10px; transform: rotate(45deg); }
body.on #menu-button span:nth-of-type(2) { opacity: 0; }
body.on #menu-button span:nth-of-type(3) { transform: rotate(-45deg); }
body.on #menu { right: 0; opacity: 1; }

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

@media screen and (max-width: 767px) {
  body.on #menu-button span:nth-of-type(1) { top: 8px; }
}

/* --------------------------------------------------
  白黒
-------------------------------------------------- */

/*
body.monochrome { filter: grayscale(1); }
*/

/*
body.monochrome #header { background: #000; color: #fff; }
*/