@charset "utf-8";

:root { --main-red: #e60039; --main-black: #222; --main-white: #fafafa; --main-gray: #484848; }
html  { background: var(--main-white); }
body  { color: var(--main-black); font-family: 'Noto Sans JP', sans-serif; font-size: 1.6rem; font-weight: 400; }
_:lang(x)::-internal-media-controls-overlay-cast-button, img { image-rendering: -webkit-optimize-contrast; }
a     { color: var(--main-black); }

header                       { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; min-width: 1200px; height: 145px; padding: 40px 100px 0 40px; background: var(--main-white); }
header .logo                 { position: fixed; }
header .logo img             { width: 204px; }
header nav                   { /*margin-top: 15px;*/ border-bottom: 2px solid #e5e5e5;}
header nav label,
header #menu-cb              { display: none; }
header .upper,
header #ham-menu > ul        { display: flex; justify-content: flex-end; }
header .upper li:not(:last-child) { margin-right: 20px; }
header .global               { position: relative; margin-top: 30px; font-size: 1.8rem; }
header .global > li + li     { margin-left: 30px; }
header .global > li > a      { display: block; position: relative; height: 50px; }
header .global > li > a:hover:after { content: ''; position: absolute; bottom: 12px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--main-red); transform: translateX(-50%); }
header .global .acd-check    { display: none; }
header .global .acd-content  { display: flex; flex-wrap: wrap; position: absolute; top: 50px; right: 0; z-index: 1; width: 970px; padding: 50px; border-radius: 15px; background: #fff; box-shadow: 6px 6px 20px 3px rgba(0,0,0,.16); font-size: 1.6rem; opacity: 0; visibility: hidden; transition: .3s; }
header .global > li:hover .acd-content { visibility: visible; opacity: 1; }
header .global .acd-content li         { width: calc((100% - 60px) / 3); margin: 15px 30px 0 0; }
header .global .acd-content li:nth-child(-n+4) { margin-top: 0; }
header .global .acd-content li:not(.u-sp):nth-child(3n) { margin-right: 0; }

header .side-menu         { position: fixed; top: 0; right: 0; }
header .side-menu ul      { display: flex; align-items: center; width: 65px; padding: 20px 0; border-bottom-left-radius: 10px; background: var(--main-red); color: #fff; font-size: 1.7rem; font-weight: 500; letter-spacing: 2px; writing-mode: vertical-rl; }
header .side-menu li      { position: relative; }
header .side-menu li + li { margin-top: 30px; }
header .side-menu li + li a:before { content: ''; position: absolute; top: -16px; left: 50%; width: 20px; height: 1px; background: #fff; transform: translateX(-50%) rotate(-38deg); }
header .side-menu a       { color: #fff; transition: .3s; }
header .side-menu a:hover { opacity: .7; }

@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes overlay {
  0%   { opacity: 0; }
  100% { opacity: .3; }
}
@keyframes overlay-out {
  0%   { opacity: .3; }
  100% { opacity: 0; }
}

.modal-btn     { display: block; cursor: pointer; }
#modal01       { display: none; }
.modal-body01  { position: fixed; top: 50%; left: 50%; z-index: 100; width: 90%; max-width: 900px; max-height: 80%; opacity: 0; transform: translate(-50%, -50%); overflow-scrolling: touch; opacity: 0; pointer-events: none; animation: fade-out .3s ease-out 0s forwards; }
.modal-content { padding: 60px 100px; border-radius: 15px; background: #fff; overflow-y: auto; }
.modal-overlay { position: fixed; left: 0; top: 0; width: auto; height: auto; min-width: 100%; min-height: 100%; background: var(--main-black); cursor: pointer; opacity: 0; pointer-events: none; animation: overlay-out .3s ease-out 0s forwards; }
#modal01:checked ~ .modal-body01  { display: block; pointer-events: auto; animation: fade .3s ease-out 0s forwards; }
#modal01:checked ~ .modal-overlay { display: block; pointer-events: auto; animation: overlay .3s ease-out 0s forwards; }

.modal-close       { display: block; position: absolute; top: 30px; right: 30px; width: 40px; height: 20px; cursor: pointer; }
.close-icon        { display: inline-block; position: relative; width: 40px; height: 20px; cursor: pointer; }
.close-icon:before,
.close-icon:after  { content: ''; display: block; position: absolute; top: 10px; left: 0; width: 40px; height: 1px; background: var(--main-black); }
.close-icon:before { transform: rotate(-22deg); }
.close-icon:after  { transform: rotate(22deg); }

.modal-content .gsc-search-box    { position: relative; }
.modal-content .gsc-input-box     { border: 0; }
.modal-content .gsc-input input   { padding: 14px 50px 14px 0 !important; border-bottom: 1px solid #707070 !important;  }
.modal-content .gsc-search-button { position: absolute; top: 7px; right: 22px; padding: 0; border: 0; background: none; }
.modal-content .gsc-search-button:focus     { outline: 0; }
.modal-content .gsc-search-button-v2:hover  { border: 0; background: none; }
.modal-content .gsc-search-button-v2:before { content: '\f002'; position: absolute; top: 0; right: 0; font-family: 'Font Awesome 6 Pro'; font-size: 2.2rem; font-weight: 300; }
.modal-content .gsc-results-wrapper-overlay { top: calc(50% - 45vh); left: 0; width: 100%; max-width: 900px; height: 90vh; }

footer { padding: 100px 0 80px; background: var(--main-white); }

footer .share            { text-align: center; }
footer .share p          { font-family: 'Montserrat', sans-serif; font-size: 2.4rem; }
footer .share p a        { font-size: 1.4rem; transition: .3s; }
footer .share p a:hover  { opacity: .7; }
footer .share p a:after  { content: '\f061'; margin-left: 5px; font-family: 'Font Awesome 6 Pro'; font-size: 1.8rem; font-weight: 300; }
footer .share ul         { display: flex; justify-content: center; margin: 30px 0; }
footer .share li         { margin: 0 15px; }
footer .share li a       { display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; border: 1px solid #707070; border-radius: 50%; background: #fff; transition: .3s; }
footer .share li a:hover { opacity: .7; }
footer .share li img     { width: 35px; }

footer nav                      { padding: 100px 0 60px; font-size: 1.4rem; }
footer nav a                    { transition: .3s; }
footer nav a:hover              { opacity: .7; }
footer nav > ul                 { display: flex; justify-content: space-between; }
footer nav > ul > li            { width: calc(100% - 90px); margin-right: 30px; }
footer nav > ul > li:last-child { margin-right: 0; }
footer nav .footer-acd-check    { display: none; }
footer nav > ul > li > ul       { margin-top: 75px; }
footer nav > ul > li > ul > li  { margin-top: 15px; font-weight: 500; }
footer nav .group + .group      { margin-top: 80px; }

footer nav .group > a           { display: block; margin-bottom: 30px; font-family: 'Montserrat', sans-serif; font-size: 3rem; line-height: 1.2; }
footer nav .group > a em        { display: block; position: relative; margin-top: 8px; padding-left: 11px; font-family: 'Noto Sans JP', sans-serif; font-size: 1.4rem; font-weight: 500; }
footer nav .group > a em:before { content: ''; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--main-red); transform: translateY(-50%); }
footer nav .footer-acd-label    { display: none; }
footer nav .group li + li       { margin-top: 15px; }

footer .relation                { display: flex; justify-content: space-between; align-items: center; padding: 60px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 1.4rem; line-height: 2; }
footer .relation a              { transition: .3s; }
footer .relation a:hover        { opacity: .7; }
footer .relation dt             { width: 110px; margin-right: 40px; font-size: 2.2rem; font-weight: 500; }
footer .relation dd             { width: calc(100% - 20px); }
footer .relation ul             { display: flex; flex-wrap: wrap; }
footer .relation li + li:before { content: '／'; margin: 0 1.4rem; }

footer .cr-area               { margin-top: 60px; background: url(/common2/images/bg_footer.png) no-repeat center center; background-size: 1920px 76px; font-size: 1.2rem; font-weight: 300; }
footer .cr-area a             { transition: .3s; }
footer .cr-area a:hover       { opacity: .7; }
footer .cr-area .logo a:hover { opacity: 1; }
footer .cr-area .logo img     { width: 270px; }
footer .cr-area ul            { display: flex; margin: 15px 0 0 93px; }
footer .cr-area li + li       { margin-left: 1.2rem; }
footer small                  { display: block; margin: 30px 0 0 93px; }

footer #pagetop { display: flex; justify-content: center; align-items: center; position: fixed; right: 20px; bottom: 20px; z-index: 10; width: 80px; height: 80px; padding-top: 1.3rem; border-radius: 50%; background: var(--main-white); cursor: pointer; }
footer #pagetop:before { position: absolute; top: 12px; content: '\f062'; font-family: 'Font Awesome 6 Pro'; font-size: 1.6rem; font-weight: 300; }

main { padding-top: 200px; overflow: hidden; }

.inner   { width: 1170px; margin: 0 auto; }
.inner-l { width: 1290px; margin: 0 auto; padding: 0 20px; }

.ttl-lv2             { font-family: 'Montserrat', sans-serif; font-size: 5rem; }
.ttl-lv2 span        { display: block; position: relative; padding-left: 16px; font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; font-weight: 300; }
.ttl-lv2 span:before { content: ''; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-top: 1px; border-radius: 50%; background: var(--main-red); transform: translateY(-50%); }

.ti    { margin-left: 1em !important; text-indent: -1em !important; }
.ti1-1 { margin-left: 1.1em !important; text-indent: -1.1em !important; }
.ti1-2 { margin-left: 1.2em !important; text-indent: -1.2em !important; }
.ti1-3 { margin-left: 1.3em !important; text-indent: -1.3em !important; }
.ti1-4 { margin-left: 1.4em !important; text-indent: -1.4em !important; }
.ti1-5 { margin-left: 1.5em !important; text-indent: -1.5em !important; }
.ti1-6 { margin-left: 1.6em !important; text-indent: -1.6em !important; }
.ti1-7 { margin-left: 1.7em !important; text-indent: -1.7em !important; }
.ti1-8 { margin-left: 1.8em !important; text-indent: -1.8em !important; }
.ti1-9 { margin-left: 1.9em !important; text-indent: -1.9em !important; }
.ti2   { margin-left: 2em !important; text-indent: -2em !important; }

/*スマホ時メニューを開いたときに背景コンテンツ固定*/
.scroll-prevent { position: fixed; z-index: -1; width: 100%; height: 100%; }
.gsc-overflow-hidden { overflow: inherit !important; }

@media (max-width: 767px) {
  body  { font-size: 1.4rem; padding-bottom: 50px; }
  
  header            { min-width: initial; height: 75px; padding: 20px 20px 0 14px; }
  header .logo img  { width: 117px; }
  header #menu-icon { display: block; position: fixed; top: 20px; right: 0; z-index: 11; width: 50px; height: 37px; }
  header #menu-cb:checked ~ #ham-menu   { transform: translate(-100%); }
  header #menu-icon span                { display: inline-block; position: absolute; left: 7px; width: 25px; height: 1px; background-color: #161a14; transition: all .4s; }
  header #menu-icon span:nth-of-type(1) { top: 13px; }
  header #menu-icon span:nth-of-type(2) { top: 23px; }
  header #menu-cb:checked ~ #menu-icon span:nth-of-type(1) { transform: translateY(5px) rotate(-338deg); }
  header #menu-cb:checked ~ #menu-icon span:nth-of-type(2) { transform: translateY(-5px) rotate(338deg); }
  header .upper                     { display: flex; position: fixed; top: 20px; right: 50px; padding: 0; background: none; font-size: 1.2rem; }
  header .upper li                  { margin-top: 0; border-left: 1px solid #ccc; }
  header .upper li:not(:last-child) { margin-right: 0; }
  header .upper li a                { display: flex; height: 100%; padding: 0 15px; justify-content: center; align-items: center; }
  header #ham-menu                  { position: fixed; top: 0; right: -100%; z-index: 10; width: 100%; height: 100%; padding-top: 70px; background: var(--main-white); overflow-y: auto; transition: transform .3s ease-out 0s; }
  header #ham-menu > ul             { padding: 50px 20px; background: url(/assets/images/bg_menu.png) no-repeat right bottom; }
  header #ham-menu ul               { display: block; margin-top: 0; font-weight: 500; }
  header #ham-menu li               { padding-bottom: 0; }
  header #ham-menu li:not(:last-child) { margin-right: 0; }
  header #ham-menu li + li          { margin: 40px 0 0; }

header nav            { /*margin-top: 15px;*/ border-bottom: none;}

  
  header #ham-menu .acd-menu > a         { display: none; }
  header #ham-menu .acd-label            { display: block; font-family: 'Montserrat', sans-serif; font-size: 2.6rem; }
  header #ham-menu .acd-label em         { display: block; position: relative; padding-left: 11px; font-family: 'Noto Sans JP', sans-serif; font-size: 1.4rem; font-weight: 500; }
  header #ham-menu .acd-label em:before  { content: ''; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--main-red); transform: translateY(-50%); }
  header #ham-menu .acd-label span       { position: relative; }
  header #ham-menu .acd-label span:before,
  header #ham-menu .acd-label span:after { content: ''; position: absolute; top: 50%; right: -23px; width: 15px; height: 1px; margin-top: 1px; background: var(--main-black); transition: .3s; }
  header #ham-menu .acd-label span:after { transform: translateY(-50%) rotate(-90deg); }
  header #ham-menu .acd-content          { position: static; width: auto; height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 1.4rem; font-weight: 400; overflow: hidden; }
  header #ham-menu .acd-check:checked + .acd-label span:after     { transform: translateY(-50%); }
  header #ham-menu .acd-check:checked + .acd-label + .acd-content { height: auto; padding: 30px 0; opacity: 1; visibility: visible; }
  header #ham-menu .acd-content li       { width: auto; margin: 15px 0 0; }
  header #ham-menu .acd-content li:nth-child(-n+4) { margin-top: 15px; }
  header #ham-menu .acd-content li:first-child { margin-top: 0; }
  
  header #ham-menu .other    { margin: 0 20px; }
  header #ham-menu .other li { margin: 20px 0 0; }
  header #ham-menu .other li:first-child { margin-top: 0; }
  
  header #ham-menu .share           { padding: 40px 0 50px; text-align: center; }
  header #ham-menu .share p         { font-family: 'Montserrat', sans-serif; font-size: 2.4rem; }
  header #ham-menu .share p a       { font-size: 1.4rem; }
  header #ham-menu .share p a:after { content: '\f061'; margin-left: 10px; font-family: 'Font Awesome 6 Pro'; font-size: 1.8rem; font-weight: 300; }
  header #ham-menu .share ul        { display: flex; justify-content: center; margin: 30px 0; }
  header #ham-menu .share li        { margin: 0 8px; }
  header #ham-menu .share li a      { display: flex; justify-content: center; align-items: center; width: 72px; height: 72px; border: 1px solid #707070; border-radius: 50%; background: #fff; transition: .3s; }
  header #ham-menu .share li img    { width: 27px; }
  
  header #ham-menu .gsc-control-cse   { padding: 0 20px; border: 0; background: var(--main-white); }
  header #ham-menu .gsc-search-box    { position: relative; }
  header #ham-menu .gsc-search-box td { padding: 0 !important; }
  header #ham-menu .gsc-input-box     { border: 0; background: none; }
  header #ham-menu .gsc-input input   { padding: 14px 50px 14px 0 !important; border-bottom: 1px solid #707070 !important; background-color: var(--main-white) !important; }
  header #ham-menu .gsc-search-button { position: absolute; top: 7px; right: 6px; padding: 0; border: 0; background: none; }
  header #ham-menu .gsc-search-button:focus     { outline: 0; }
  header #ham-menu .gsc-search-button-v2:hover  { border: 0; background: none; }
  header #ham-menu .gsc-search-button-v2:before { content: '\f002'; position: absolute; top: 0; right: 0; color: var(--main-black); font-family: 'Font Awesome 6 Pro'; font-size: 2rem; font-weight: 300; }
  header #ham-menu .gsc-results-wrapper-overlay { top: 0; left: 0; width: 100%; max-width: 900px; height: calc(100vh - 75px); }
  header #ham-menu .gsc-results-wrapper-visible{ display: none !important; }
  header #menu-cb:checked ~ #ham-menu .gsc-results-wrapper-visible{ display: block !important; }
  
  header #ham-menu .gsib_b,
  header #ham-menu .gsc-modal-background-image-visible { display: none; }
  
  header .side-menu         { top: auto; right: auto; bottom: 0; left: 0; width: 100%; }
  header .side-menu ul      { width: 100%; padding: 0; border-radius: 0; font-size: 1.6rem; writing-mode: horizontal-tb; }
  header .side-menu li      { width: 50%; }
  header .side-menu li + li { margin-top: 0; }
  header .side-menu li + li a:before { top: 50%; left: 0; }
  header .side-menu li a    { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; }
  
  footer { padding-bottom: 30px; }
  
  footer .share p a:after { margin-left: 10px; }
  footer .share li        { margin: 0 8px; }
  footer .share li a      { width: 72px; height: 72px; }
  footer .share li img    { width: 27px; }
  
  footer nav                     { padding-top: 70px; }
  footer nav > ul                { display: block; }
  footer nav > ul > li           { width: auto; margin-right: 0; }
  footer nav > ul > li > ul      { margin-top: 15px; }
  footer nav .group,
  footer nav .group + .group     { margin-top: 10px; }
  footer nav .group > a          { display: none; }
  footer nav .footer-acd-label            { display: block; position: relative; margin-bottom: 30px; font-family: 'Montserrat', sans-serif; font-size: 2.6rem; line-height: 1.2; }
  footer nav .footer-acd-label em         { display: block; position: relative; margin-top: 8px; padding-left: 11px; font-family: 'Noto Sans JP', sans-serif; font-size: 1.4rem; font-weight: 500; }
  footer nav .footer-acd-label em:before  { content: ''; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--main-red); transform: translateY(-50%); }
  footer nav .footer-acd-label span       { position: relative; }
  footer nav .footer-acd-label span:before,
  footer nav .footer-acd-label span:after { content: ''; position: absolute; top: 50%; right: -23px; width: 15px; height: 1px; margin-top: 1px; background: var(--main-black); transition: .3s; }
  footer nav .footer-acd-label span:after { transform: translateY(-50%) rotate(-90deg); }
  footer nav .footer-acd-label a { pointer-events: none; }
  footer nav .footer-acd-content { height: 0; opacity: 0; padding: 0; transition: .3s; visibility: hidden; overflow: hidden; }
  footer nav .footer-acd-check:checked + .footer-acd-label span:after { transform: translateY(-50%); }
  footer nav .footer-acd-check:checked + .footer-acd-label + .footer-acd-content { height: auto; opacity: 1; padding: 10px 0 30px; visibility: visible; }
  
  footer .relation    { display: block; padding: 30px 0; }
  footer .relation dt { width: auto; margin: 0 0 15px; }
  footer .relation dd { width: auto; }
  footer .relation ul { display: block; line-height: 2.86; }
  footer .relation li { display: inline; }
  
  footer .cr-area           { padding-bottom: 95px; background: url(/common2/images/bg_footer_sp.png) repeat-x center bottom; background-size: auto 35px; }
  footer .cr-area .logo img { width: 168px; }
  footer .cr-area ul        { display: block; margin: 20px 0 0; }
  footer .cr-area li        { display: inline-block; margin: 1.5rem 1rem 0 0; }
  footer .cr-area li + li   { margin-left: 0; }
  footer small              { margin: 35px 0 0; text-align: left; }

  footer #pagetop        { right: 7px; bottom: 65px; width: 57px; height: 57px; padding-top: 0; }
  footer #pagetop span   { display: none; }
  footer #pagetop:before { top: 50%; margin-top: -2px; font-size: 2.4rem; transform: translateY(-50%); }

  .inner,
  .inner-l      { width: 100%; padding: 0 20px; }
  .scroll			  { width: 100%; overflow-x: auto; }
	.scroll-inner	{ width: 1170px; }
  
  .ttl-lv2      { font-size: 3.6rem; }
  .ttl-lv2 span { font-size: 1.6rem; }
}