@charset "UTF-8";

/* color setting */
:root{
--clr-prim:#EF7B28;
--clr-sec:#F2E87F;
--clr-ac:#282B33;
--clr-bgc:#F9F3EB;
--clr-bgs:#F0EAE3;
--clr-cta: linear-gradient(to right, #EFBA28, #EF7B28);
}
:root{
--clr-prim-rgb:239,123,40;
--clr-sec-rgb:242,232,127;
--clr-ac-rgb:40,43,51;
}
/* contents padding setting */
:root {
--pd-xl: clamp(4.8rem, 6vw, 9.6rem);
--pd-l: clamp(3.2rem, 4vw, 6.4rem);
--pd-m: clamp(2.4rem, 2vw, 3.2rem);
--pd-s: clamp(1.6rem, 2vw, 2.4rem);
}
/* fonts setting */
:root{
--font-xl: clamp(2.8rem, 2.5vw, 4.2rem);;
--font-l: clamp(2.4rem, 2vw, 3.2rem);
--font-m: clamp(1.8rem, 1.5vw, 2.4rem);
--font-s: clamp(1.6rem, 1.25vw, 2.0rem);
}

.en,
#primary-menu li#menu-item-50,
#page-title h1 span,
.event-month{ font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal;}

.pcbr{ display: none;}
.spbr{ display: block;}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* index */
main#toppage{ position: relative; z-index: 5;}
main#toppage article.contents{ width: 100%; position: relative; z-index: 4; padding: var(--pd-xl) 0;}
main#toppage article.contents section{ width: 90%; margin: 0px auto; max-width: 1200px;}

/* static */
#static{ padding-bottom: var(--pd-xl);}
main#static article.contents{ width: 100%; position: relative; z-index: 4; padding: var(--pd-l) 0;}
main#static article.contents section{ width: 90%; margin: 0px auto; max-width: 1200px;}
main#static article.contents section > p{ margin-top: var(--pd-s);}

/* category / archive / single */
#archive,
#primary,
#single-post{ width: 90%; max-width: 1200px; margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap; padding: var(--pd-xl) 0;}
#archive #archive-list,
#primary #container,
#single-post #detail{ width: 100%; order: 1;}
#archive #secondary,
#primary #secondary,
#single-post #secondary{ width: 100%; order: 2; margin-top: var(--pd-xl);}

/* page layout */
body.page-template-default header.entry-header{ display: none;}
body.page-template-default #container main{ width: 100%; margin: 0px auto;}
body.page-template-default #container #secondary{ display: none;}

/* link button */
.small-button{ margin-top: var(--pd-s);}
.small-button a{ display: inline-block; color: #FFF; text-decoration: none; font-weight: 700; line-height: 1.0em; padding: 0.64em 2.0em; border-radius: 20px 0 20px 0; position: relative; z-index: 1; overflow: hidden;}
.small-button a:hover{ color: #FFF; border-radius: 20px;}
.small-button a:after{ content: "\e5c8"; font-family: "Material Icons"; position: absolute; top: 50%; right: 0.8em; transform: translateY(-50%);}
.small-button.blank a:after{ content: "\e895";}
.small-button a:before{ content: ""; width: 100%; height: 100%; background: var(--clr-cta); position: absolute; top: 0; right: 0; z-index: -1; transition: all 0.3s ease 0s;}
.small-button a:hover:before{ width: 200%;}
.small-button.right{ text-align: right;}

/*--------------------------------------------------------------
# TOP PAGE
--------------------------------------------------------------*/
body.home #global-cta{ padding-top: var(--pd-xl) !important;}
body.home #wrapper{ padding-top: 0;}

/* hero area */
article.hero-container { position: relative; width: 100%; height: 100vh; min-height: 500px; background-image: linear-gradient(40deg, #c6e8db, #fdffec); overflow: hidden; z-index: 1;}
article.hero-container:after{ content: ""; display: block; width: 100%; height: 0; padding-top: 3.125%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='60' viewBox='0 0 1920 60'%3E%3Cpath fill='%23F9F3EB' transform='translate(-152)' d='M2072,60H152V17.453c11.517,2.971,22.609,6.169,33.336,9.261l.008,0c11.387,3.282,23.161,6.676,35.465,9.806,13.8,3.511,26.827,6.31,39.817,8.556,15.589,2.7,31.455,4.676,48.5,6.052,19.139,1.545,39.268,2.3,61.536,2.3s42.4-.751,61.537-2.3c17.049-1.376,32.915-3.356,48.505-6.052,12.989-2.247,26.014-5.045,39.818-8.557,12.3-3.127,24.062-6.519,35.44-9.8l.034-.01.008,0c11.387-3.283,23.161-6.677,35.466-9.807,13.8-3.51,26.826-6.31,39.817-8.556C646.88,5.652,662.746,3.672,679.8,2.3,698.935.751,719.063,0,741.333,0s42.4.751,61.536,2.3c17.051,1.376,32.917,3.356,48.505,6.052,12.991,2.247,26.016,5.046,39.818,8.556,12.306,3.13,24.083,6.525,35.472,9.808l.041.012c11.377,3.28,23.141,6.671,35.435,9.8,13.8,3.511,26.829,6.31,39.818,8.557,15.59,2.7,31.456,4.676,48.505,6.052,19.138,1.545,39.267,2.3,61.537,2.3s42.4-.751,61.536-2.3c17.049-1.376,32.916-3.356,48.505-6.052,12.989-2.247,26.013-5.045,39.818-8.557,12.307-3.13,24.083-6.525,35.472-9.809l.035-.01c11.379-3.28,23.145-6.672,35.44-9.8,13.8-3.51,26.825-6.309,39.817-8.556,15.589-2.7,31.455-4.676,48.505-6.052C1440.268.751,1460.4,0,1482.666,0s42.4.751,61.536,2.3c17.049,1.376,32.915,3.356,48.505,6.052,12.992,2.247,26.016,5.046,39.818,8.557,12.3,3.127,24.062,6.519,35.441,9.8l.033.01.013,0c11.385,3.282,23.158,6.676,35.461,9.805,13.8,3.511,26.829,6.31,39.818,8.557,15.59,2.7,31.456,4.676,48.505,6.052,19.138,1.545,39.267,2.3,61.537,2.3,35.831,0,74.318-2.023,114.392-6.014,33.6-3.346,68.678-8.107,104.273-14.152V60Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center bottom; background-size: 100% 101%; position: absolute; bottom: -1px; left: 0; z-index: 100;}
section.hero-title { width: 90%; position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 10;}
section.hero-title h2 { font-size: clamp(4.0rem,3.2vw,6.4rem); line-height: 1.4em; font-weight: 700; color: #111; text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;}
section.hero-title h2 strong{ font-weight: 700; color: var(--clr-prim);}
section.hero-title p { margin-top: var(--pd-s); font-weight: 700; line-height: 1.6em; color: #111; text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;}
.marquee-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; pointer-events: none;}
ul.marquee-content { display: flex; gap: 5vw; height: 100%; align-items: center; list-style: none; padding: 0; margin: 0; width: max-content;}
.animate-scroll { animation: scroll-left linear infinite;}
.animate-scroll li { flex-shrink: 0;}
.animate-scroll img { display: block; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);}
.layer-back { z-index: 1; opacity: 0.4;}
.layer-back ul.marquee-content { animation-duration: 200s;}
.layer-back li:nth-child(odd) img { height: 80px; margin-bottom: 45vh;}
.layer-back li:nth-child(even) img { height: 110px; margin-top: 50vh; margin-left: 30px;}
.layer-middle { z-index: 2; opacity: 0.8;}
.layer-middle ul.marquee-content { animation-duration: 160s;}
.layer-middle li:nth-child(3n+1) img { height: 180px; margin-top: -25vh;}
.layer-middle li:nth-child(3n+2) img { height: 220px; margin-top: 30vh;}
.layer-middle li:nth-child(3n+3) img { height: 160px; margin-top: 5vh;}
.layer-front { z-index: 3;}
.layer-front ul.marquee-content { animation-duration: 120s;}
.layer-front img { box-shadow: 0 15px 30px rgba(0,0,0,0.2);}
.layer-front li:nth-child(odd) img { height: 240px; margin-top: 40vh;}
.layer-front li:nth-child(even) img { height: 320px; margin-bottom: 35vh; margin-left: 8vw;}

@keyframes scroll-left {
0% { transform: translateX(0);}
100% { transform: translateX(-50%);}
}

/* お知らせ */
.home-news{}
.home-news header{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.home-news header h2{ display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: flex-end; color: var(--clr-prim); font-weight: 700; line-height: 1.2em;}
.home-news header h2 span{ font-size: var(--font-l); color: #333; line-height: 1.0em; margin-right: 0.24em;}
.home-news header p a{ display: inline-block; color: #333; text-decoration: none; position: relative; padding-right: 4.8rem;}
.home-news header p a:before{ content: "\e5c8"; font-family: "Material Icons"; width: 3.6rem; line-height: 3.2rem; font-size: 1.6rem; text-align: center; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease 0s; color: #333; z-index: 2;}
.home-news header p a:after{ content: ""; width: 3.2rem; height: 3.2rem; border: solid 1px rgba(51,51,51,0.24); border-radius: 1.6rem; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease 0s; z-index: 1;}
.home-news header p a:hover:before{ color: #FFF;}
.home-news header p a:hover:after{ background: var(--clr-ac); border-color: rgba(0,0,0,0);}
.top-news-list{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: var(--pd-s);}
.top-news-list .news-card{ width: 48%; margin-right: 4%; position: relative;}
.top-news-list .news-card:nth-child(2n){ margin-right: 0;}
.top-news-list .news-card:nth-child(n+3){ margin-top: 1.0em;}
.top-news-list .news-card .news-image{ border-radius: 8px; overflow: hidden;}
.top-news-list .news-card .news-image img{ width: 100%; height: auto;}
.top-news-list .news-card .news-meta{ margin-top: var(--pd-s);}
.top-news-list .news-card .news-meta .news-date{ font-size: 1.4rem; line-height: 1.2em; color: rgba(51,51,51,0.48);}
.top-news-list .news-card .news-meta h3{ line-height: 1.2em; transition: all 0.3s ease 0s;}
.top-news-list .news-card:hover .news-meta h3{ color: var(--clr-prim);}
.top-news-list .news-card a span{ display: none;}
.top-news-list .news-card a:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}

/* contents */
.home-contents section{ display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 1; padding: var(--pd-l);}
.home-contents section figure{ width: 100%;}
.home-contents section figure img{ width: 100%; height: auto; border-radius: 16px; overflow: hidden;}
.home-contents section .detail{ width: 100%; margin-top: var(--pd-m);}
.home-contents section .detail h2 span{ display: block; font-weight: 700; color: var(--clr-prim); line-height: 1.2em; margin-bottom: 0.5em;}
.home-contents section .detail h2 a{ color: #333; text-decoration: none;  display: inline-block; font-size: clamp(3.2rem,4.0vw,5.6rem); line-height: 1.0em; color: #333; position: relative; padding-right: 5.6rem;}
.home-contents section .detail h2 a:before{ content: "\e5c8"; font-family: "Material Icons"; width: 4.2rem; line-height: 4.0rem; font-size: 2.4rem; text-align: center; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease 0s; color: #FFF; z-index: 2;}
.home-contents section .detail h2 a.blank:before{ content: "\e895";}
.home-contents section .detail h2 a:after{ content: ""; width: 4.0rem; height: 4.0rem; background: var(--clr-ac); border-radius: 2.4rem; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease 0s; z-index: 1;}
.home-contents section .detail h2 a:hover:before{ color: #FFF;}
.home-contents section .detail h2 a:hover:after{ background: var(--clr-prim);}
.home-contents section .detail h3{ font-size: var(--font-m); line-height: 1.2em; font-weight: 700; margin-top: var(--pd-l);}
.home-contents section .detail p{ margin-top: var(--pd-s);}
.home-contents section .detail nav{ margin-top: 1.0em;}
.home-contents section .detail nav ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.home-contents section .detail nav ul li{ width: 100%;}
.home-contents section .detail nav ul li:nth-child(n+2){ margin-top: 0.5em;}
.home-contents section .detail nav ul li a{ display: block; padding: 1.0em 1.4em; text-decoration: none; font-weight: 700; line-height: 1.2em; color: #FFF; position: relative; border-radius: 24px 0 24px 0; z-index: 1; overflow: hidden;}
.home-contents section .detail nav ul li a:hover{ border-radius: 24px;}
.home-contents section .detail nav ul li a:before{ content: ""; width: 100%; height: 100%; background: var(--clr-cta); position: absolute; top: 0; right: 0; z-index: -1; transition: all 0.3s ease 0s;}
.home-contents section .detail nav ul li a:hover:before{ width: 200%;}
.home-contents section .detail nav ul li a:after{ content: "\e5c8"; font-family: "Material Icons"; color: #FFF; position: absolute; top: 50%; transform: translateY(-50%); right: 1.8em; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; opacity: 1.0;}
.home-contents section .detail nav ul li a:hover:after{ opacity: 1.0; right: 1.4em;}
.home-contents.left section figure{ order: 1;}
.home-contents.left section .detail{ order: 2;}
.home-contents.right section figure{ order: 1;}
.home-contents.right section .detail{ order: 2;}
.home-contents.left section:before{ content: ""; width: 200%; height: 100%; background: #FFF; border-radius: 32px; position: absolute; top: 0; left: 0; z-index: -1;}
.home-contents.right section:before{ content: ""; width: 200%; height: 100%; background: #FFF; border-radius: 32px; position: absolute; top: 0; right: 0; z-index: -1;}

/* faq */
.home-faq{ padding-bottom: var(--pd-xl) !important;}
.home-faq section h2 span{ display: block; font-weight: 700; color: var(--clr-prim); line-height: 1.2em; margin-bottom: 0.5em;}
.home-faq section h2 a{ color: #333; text-decoration: none;  display: inline-block; font-size: clamp(3.2rem,4.0vw,5.6rem); line-height: 1.0em; color: #333; position: relative; padding-right: 5.6rem;}
.home-faq section h2 a:before{ content: "\e5c8"; font-family: "Material Icons"; width: 4.2rem; line-height: 4.0rem; font-size: 2.4rem; text-align: center; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease 0s; color: #FFF; z-index: 2;}
.home-faq section h2 a:after{ content: ""; width: 4.0rem; height: 4.0rem; background: var(--clr-ac); border-radius: 2.4rem; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease 0s; z-index: 1;}
.home-faq section h2 a:hover:before{ color: #FFF;}
.home-faq section h2 a:hover:after{ background: var(--clr-prim);}
.home-faq section > p{ margin-top: var(--pd-s);}
.home-faq dl { margin-top: var(--pd-m);}
.home-faq dt { background: var(--clr-sec); padding: 0.8em 2.4em; border-radius: 8px; position: relative; cursor: pointer; font-weight: bold; transition: color 0.3s;}
.home-faq dl dt:nth-of-type(n+2){ margin-top: 2.4rem;}
.home-faq dt:hover { color: var(--clr-ac);}
.home-faq dt span{ position: absolute; top: 0.8em; left: 0.8em;}
.home-faq dt::before, .home-faq dt::after { content: ""; position: absolute; top: 50%; right: 20px; background-color: #333; transition: transform 0.4s ease;}
.home-faq dt::before { width: 16px; height: 2px; margin-top: -1px;}
.home-faq dt::after { width: 2px; height: 16px; margin-top: -8px; right: 27px;}
.home-faq dt.is-active::after { transform: rotate(90deg);}
.home-faq dd { height: 0; overflow: hidden; opacity: 0; transition: height 0.4s ease, opacity 0.4s ease;}
.home-faq dd.is-open { opacity: 1;}
.home-faq .faq-inner { padding: 1.0em 0 0 2.4em; position: relative;}
.home-faq .faq-inner span{ color: var(--clr-prim); position: absolute; top: 1.0em; left: 0.8em;}

/* recruit */
.contents.home-recruit{ z-index: 3 !important; padding-bottom: var(--pd-xl) !important;}
.contents.home-recruit:before{ content: ""; width: 100%; height: calc(100% + 2.4rem); background: url("images/home/background_recruit.webp") no-repeat; background-size: cover; position: absolute; top: 0; left: 0; z-index: -2; border-radius: 0 0 24px 24px;}
.contents.home-recruit:after{ content: ""; width: 100%; height: calc(100% + 2.4rem); background:rgba(var(--clr-ac-rgb),0.72); background-size: cover; position: absolute; top: 0; left: 0; z-index: -1; border-radius: 0 0 24px 24px;}
.home-recruit h2{}
.home-recruit h2 span{ display: block; font-weight: 700; color: var(--clr-prim); line-height: 1.2em;}
.home-recruit h2 a{ color: #FFF; text-decoration: none;  display: inline-block; font-size: clamp(3.2rem,4.0vw,5.6rem); line-height: 1.0em; position: relative; padding-right: 5.6rem;}
.home-recruit h2 a:before{ content: "\e5c8"; font-family: "Material Icons"; width: 4.2rem; line-height: 4.0rem; font-size: 2.4rem; text-align: center; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease 0s; color: #FFF; z-index: 2;}
.home-recruit h2 a:after{ content: ""; width: 4.0rem; height: 4.0rem; background: var(--clr-ac); border-radius: 2.4rem; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease 0s; z-index: 1;}
.home-recruit h2 a:hover:before{ color: #FFF;}
.home-recruit h2 a:hover:after{ background: var(--clr-prim);}
.home-recruit section > p{ margin-top: var(--pd-s); color: rgba(255,255,255,0.72);}
.home-recruit .column{ margin-top: var(--pd-m); display: flex; justify-content: space-between; flex-wrap: wrap;}
.home-recruit .column .inner{ width: 100%; background: #FFF; border: solid 8px var(--clr-bgs); border-radius: 24px; padding: 2.0em; position: relative;}
.home-recruit .column .inner:nth-child(n+2){ margin-top: var(--pd-m);}
.home-recruit .column .inner h3{ font-size: var(--font-m); line-height: 1.2em; font-weight: 700;}
.home-recruit .column .inner h3 a{ display: inline-block; padding-right: 4.0rem; position: relative; color: #333; text-decoration: none;}
.home-recruit .column .inner h3 a:hover{}
.home-recruit .column .inner h3 a:before{ content: "\e5c8"; font-family: "Material Icons"; width: 3.0rem; line-height: 2.8rem; font-size: 1.6rem; text-align: center; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease 0s; color: #333; z-index: 2;}
.home-recruit .column .inner h3 a:after{ content: ""; width: 2.8rem; height: 2.8rem; border: solid 1px rgba(51,51,51,0.24); border-radius: 2.4rem; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease 0s; z-index: 1;}
.home-recruit .column .inner h3 a:hover:before{ color: #FFF;}
.home-recruit .column .inner h3 a:hover:after{ background: var(--clr-ac); border-color: rgba(0,0,0,0);}
.home-recruit .column .inner figure{ width: 64%; margin: 1.5em auto 0;}
.home-recruit .column .inner figure img{ width: 100%; height: auto;}
.home-recruit .column .inner p{ width: 100%; margin-top: 1.5em;}

/*--------------------------------------------------------------
# middle page
--------------------------------------------------------------*/
#page-title{ width: 90%; margin: 0px auto; max-width: 1200px; position: relative; padding: 37vw 0 var(--pd-m) 0; z-index: 1;}
#page-title h1{ font-size: var(--font-s); line-height: 1.2em; color: var(--clr-prim); font-weight: 700;}
#page-title h1 span{ display: block; font-size: clamp(4.0rem,3.2vw,6.4rem); line-height: 1.0em; color: #111;}
#page-title:before{ content: ""; width: 95vw; height: 35vw; background: #CCC; border-radius: 24px 0 0 24px; position: absolute; top: 0; right: -5%; z-index: -1;}

#page-title.work:before{ content: ""; background: url("images/promo/work.webp") no-repeat center center; background-size: cover;}
#page-title.sales:before{ content: ""; background: url("images/promo/sales.webp") no-repeat center center; background-size: cover;}
#page-title.developer:before{ content: ""; background: url("images/promo/developer.webp") no-repeat center center; background-size: cover;}
#page-title.human:before{ content: ""; background: url("images/promo/human.webp") no-repeat center center; background-size: cover;}
#page-title.schedule:before{ content: ""; background: url("images/promo/schedule.webp") no-repeat center center; background-size: cover;}
#page-title.event:before{ content: ""; background: url("images/promo/event.webp") no-repeat center center; background-size: cover;}
#page-title.environment:before{ content: ""; background: url("images/promo/environment.webp") no-repeat center -40px; background-size: cover;}
#page-title.faq:before{ content: ""; background: url("images/promo/faq.webp") no-repeat center center; background-size: cover;}
#page-title.recruit:before{ content: ""; background: url("images/promo/recruit.webp") no-repeat center center; background-size: cover;}
#page-title.briefing:before{ content: ""; background: url("images/promo/briefing.webp") no-repeat center center; background-size: cover;}
#page-title.internship:before{ content: ""; background: url("images/promo/internship.webp") no-repeat center top; background-size: cover;}

#page-title.news:before,
#page-title.notice:before,
#page-title.archive:before,
body#error-404 #page-title:before{ content: ""; background: url("images/promo/news.webp") no-repeat center center; background-size: cover;}

/* heading
--------------------------------------------------------------*/
h2.heading { font-size: var(--font-l); font-weight: 700; line-height: 1.2em; background: var(--clr-cta); -webkit-background-clip: text; background-clip: text; color: transparent;}
h2.sub-heading{ font-size: var(--font-m); line-height: 1.2em; font-weight: 700; color: var(--clr-ac);}
h3.heading{ font-size: var(--font-m); line-height: 1.2em; padding: 0.24em 0; padding-left: 0.56em; margin-top: var(--pd-l); position: relative;}
h3.heading:before{ content: ""; width: 4px; height: 54%; border-radius: 2px; background: var(--clr-prim); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}

/* common
--------------------------------------------------------------*/
ul.ul-style{ margin-top: 0.76em;}
ul.ul-style li{ line-height: 1.2em; padding: 0.24em 0; padding-left: 1.0em; position: relative;}
ul.ul-style li:before{ content: ""; width: 6px; height: 6px; border: solid 2px var(--clr-sec); border-radius: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}

ol.ol-style{ margin-top: 0.76em; padding-left: 1.5em;}
ol.ol-style li{ line-height: 1.2em; padding: 0.24em 0; list-style-type: decimal; list-style-position: outside; position: relative;}

.column02{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.column02 .inner{ width: 47%;}
.column02 .inner:nth-child(n+3){ margin-top: var(--pd-m);}

.half{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.half figure{ width: 47%;}
.half figure img{ width: 100%; height: auto; border-radius: 16px; overflow: hidden;}
.half .inner{ width: 47%;}
.half.left figure{ order: 1;}
.half.left .inner{ order: 2;}
.half.right figure{ order: 2;}
.half.right .inner{ order: 1;}

.link-buttons{ display: flex; justify-content: center; flex-wrap: wrap; margin-top: var(--pd-l);}
.link-buttons li{ width: 23.5%; margin: 0 1%;}
.link-buttons li a{ display: block; text-align: center; line-height: 1.0em; font-weight: 700; color: #FFF; text-decoration: none; padding: 1.2em 0; border-radius: 100px; overflow: hidden; position: relative; z-index: 1;}
.link-buttons li a:before{ content: ""; width: 100%; height: 100%; background: var(--clr-cta); position: absolute; top: 0; right: 0; z-index: -1; transition: all 0.3s ease 0s;}
.link-buttons li a:hover:before{ width: 200%;}
.link-buttons li a:after{ content: "\e5c8"; font-family: "Material Icons"; position: absolute; top: 50%; transform: translateY(-50%); right: 2.0em; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; opacity: 1.0;}
.link-buttons li a:hover:after{ opacity: 1.0; right: 1.5em;}

.back-button{ margin-top: 2.0em; text-align: center;}
.back-button a{ display: inline-block; color: #333; text-decoration: none; font-weight: 700; line-height: 1.0em; padding: 0.8em 3.0em; background: rgba(0,0,0,0.16); border-radius: 20px 0 20px 0; position: relative; z-index: 1; overflow: hidden;}
.back-button a:hover{ color: #FFF; background: var(--clr-ac); border-radius: 20px;}
.back-button a:after{ content: "\e314"; font-family: "Material Icons"; position: absolute; top: 50%; left: 1.0em; transform: translateY(-50%);}

/* intro
--------------------------------------------------------------*/
.contents.intro{ padding-top: var(--pd-m) !important;}
.contents.intro h2{ font-size: var(--font-l); color: var(--clr-ac); line-height: 1.2em; font-weight: 700;}

/* section
--------------------------------------------------------------*/
.link-banner h2.heading{ font-weight: 700;}
.link-banner ul{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: var(--pd-s);}
.link-banner ul li{ width: 100%;}
.link-banner ul li:nth-child(n+2){ margin-top: 0.8em;}
.link-banner ul li a{ display: block; border-radius: 24px 0; overflow: hidden; width: 100%; padding-bottom: 32%; position: relative;}
.link-banner ul.clm03 li{ width: 31%;}

.link-banner ul li.briefing a{ color: #FFF; text-decoration: none; background: url("images/common/banner_briefing.webp") no-repeat center right; background-size: cover;}
.link-banner ul li.briefing a span{ display: inline-block; font-size: var(--font-s); line-height: 1.2em; font-weight: 700; position: absolute; top: 50%; left: 10%; transform: translateY(-50%); z-index: 2;}
.link-banner ul li.briefing a span em{ display: inline-block; font-style: normal; position: relative;}
.link-banner ul li.briefing a span em:after{ content: "\e5c8"; font-family: "Material Icons"; position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 1.0em); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; opacity: 1.0;}
.link-banner ul li.briefing a:hover span em:after{ opacity: 1.0; left: calc(100% + 1.5em);}
.link-banner ul li.briefing a:before{ content: ""; width: 200%; height: 100%; background-image: linear-gradient(90deg, #000000cc, #00000052 50%, #0000003d); position: absolute; top: 0; left: -100%; transition: all 0.3s ease 0s; z-index: 1;}
.link-banner ul li.briefing a:hover:before{ left: 0%;}

.link-banner ul li.work a{ color: #FFF; text-decoration: none; background: url("images/common/banner_work.webp") no-repeat center right; background-size: cover;}
.link-banner ul li.work a span{ display: inline-block; font-size: var(--font-s); line-height: 1.2em; font-weight: 700; position: absolute; top: 50%; left: 10%; transform: translateY(-50%); z-index: 2;}
.link-banner ul li.work a span em{ display: inline-block; font-style: normal; position: relative;}
.link-banner ul li.work a span em:after{ content: "\e5c8"; font-family: "Material Icons"; position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 1.0em); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; opacity: 1.0;}
.link-banner ul li.work a:hover span em:after{ opacity: 1.0; left: calc(100% + 1.5em);}
.link-banner ul li.work a:before{ content: ""; width: 200%; height: 100%; background-image: linear-gradient(90deg, #000000cc, #00000052 50%, #0000003d); position: absolute; top: 0; left: -100%; transition: all 0.3s ease 0s; z-index: 1;}
.link-banner ul li.work a:hover:before{ left: 0%;}

.link-banner ul li.sales a{ color: #FFF; text-decoration: none; background: url("images/common/banner_sales.webp") no-repeat center right; background-size: cover;}
.link-banner ul li.sales a span{ display: inline-block; font-size: var(--font-s); line-height: 1.2em; font-weight: 700; position: absolute; top: 50%; right: 15%; transform: translateY(-50%); z-index: 2;}
.link-banner ul li.sales a span em{ display: inline-block; font-style: normal; position: relative;}
.link-banner ul li.sales a span em:after{ content: "\e5c8"; font-family: "Material Icons"; position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 1.0em); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; opacity: 1.0;}
.link-banner ul li.sales a:hover span em:after{ opacity: 1.0; left: calc(100% + 1.5em);}
.link-banner ul li.sales a:before{ content: ""; width: 200%; height: 100%; background-image: linear-gradient(270deg, #000000cc, #00000052 50%, #0000003d); position: absolute; top: 0; right: -100%; transition: all 0.3s ease 0s; z-index: 1;}
.link-banner ul li.sales a:hover:before{ right: 0%;}

.link-banner ul li.developer a{ color: #FFF; text-decoration: none; background: url("images/common/banner_developer.webp") no-repeat center right; background-size: cover;}
.link-banner ul li.developer a span{ display: inline-block; font-size: var(--font-s); line-height: 1.2em; font-weight: 700; position: absolute; top: 50%; right: 15%; transform: translateY(-50%); z-index: 2;}
.link-banner ul li.developer a span em{ display: inline-block; font-style: normal; position: relative;}
.link-banner ul li.developer a span em:after{ content: "\e5c8"; font-family: "Material Icons"; position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 1.0em); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; opacity: 1.0;}
.link-banner ul li.developer a:hover span em:after{ opacity: 1.0; left: calc(100% + 1.5em);}
.link-banner ul li.developer a:before{ content: ""; width: 200%; height: 100%; background-image: linear-gradient(270deg, #000000cc, #00000052 50%, #0000003d); position: absolute; top: 0; right: -100%; transition: all 0.3s ease 0s; z-index: 1;}
.link-banner ul li.developer a:hover:before{ right: 0%;}

/*--------------------------------------------------------------
# 1. COMPANY
--------------------------------------------------------------*/

/* heading */
h2.heading.bold{ font-weight: 700; position: relative;}
h2.heading.bold:after{ content: ""; width: 1.0em; height: 2px; background: var(--clr-prim); position: absolute; bottom: -0.32em; left: 0;}

/* intro */
#page-title.company{ padding-top: 10vw; padding-bottom: 0 !important;}
body#company .contents.hero{ position: relative; z-index: 4; padding: 0 !important;}
body#company .contents.hero:before{ content: ""; width: 40vw; height: 48.3vw; background: url("images/company/s_takihana_sp.webp") no-repeat; background-size: contain; position: absolute; top: 5%; right: 5%;}
/*.contents.hero:before{ content: ""; width: 100%; height: 100%; background: #FFF; border-radius: 0; position: absolute; bottom: 0; left: 0; z-index: -2;}
.contents.hero:after{ content: ""; width: 100%; height: 100%; background: url("images/company/s_takihana.webp") no-repeat right top; background-size: contain; position: absolute; bottom: 0; right: -2vw; z-index: -1;}*/
.contents.hero #page-title:before{ content: none !important;}
.contents.hero h2{ font-size: var(--font-l); color: var(--clr-ac); line-height: 1.2em; font-weight: 700; width: 50%;}
.contents.hero section{ padding: var(--pd-l) 0;}
.contents.hero section p br{ display: none;}

/* 経営理念 */
.philosophy{}
.philosophy h3{ font-size: var(--font-l); line-height: 1.2em; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; margin-top: 0.8em;}

/* 社名に込めた想い */
.idea{}
.idea h3{ font-size: var(--font-l); line-height: 1.2em; font-weight: 700; margin-top: var(--pd-s);}
.idea h3 strong{ color: var(--clr-prim);}
.idea h3 span{ display: block; font-size: var(--font-m); color: rgba(51,51,51,0.48);}
.idea p strong{ color: var(--clr-prim);}

/* ブランドステートメント */
.statement{}
.statement h3{ font-size: var(--font-l); line-height: 1.2em; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; margin-top: 0.8em;}

/* Mission / Vision / Value */
.mvv{}
.mvv figure{ width: 72%; margin: 2.0em auto 0;}
.mvv figure img{ width: 100%; height: auto;}

/* 会社概要 */
.outline{}
.contents.outline section{ background: #FFF; border-radius: 24px; padding:var(--pd-m) var(--pd-s); position: relative;}
.contents.outline section table{ border-top: solid 1px #DDD; width: 100%; margin-top: 2.0em;}
.contents.outline section table tr{ border-bottom: solid 1px #DDD;}
.contents.outline section table tr th{ display: block; width: 100%; padding: 0.72em; line-height: 1.4em; background: var(--clr-bgs);}
.contents.outline section table tr td{ display: block; width: 100%; padding: 0.72em; line-height: 1.4em;}
.contents.outline section table tr td dl dt{ margin-top: var(--pd-s);}
.contents.outline section table tr td dl dd{ padding-left: 1.0em;}
.contents.outline section table tr td span{ display: block;}
.contents.outline section .small-button{ margin-top: 0 !important; position: absolute; top: var(--pd-m); right: var(--pd-s);}

/* アクセス */
.googlemap{ margin-top: var(--pd-s); padding-bottom: 72%; border: solid 8px #FFF; border-radius: 24px 0; overflow: hidden; position: relative;}
.googlemap iframe{ width: 100%; height: 100%; position: absolute; top: 0; right: 0;}

/*--------------------------------------------------------------
# 2. WORK
--------------------------------------------------------------*/

/* 事業 */
.navigation section ul.anchor{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: var(--pd-s);}
.navigation section ul.anchor li{ width: 31%;}
.navigation section ul.anchor li a{ display: flex; flex-flow: column; align-items: center; font-size: var(--font-s); line-height: 1.2em; text-decoration: none; color: #333; font-weight: 700; background: #FFF; border-radius: 24px 0; padding: 1.0em 0.5em;}
.navigation section ul.anchor li a:hover{ border-radius: 24px;}
.navigation section ul.anchor li a em{ display: inline-block; font-style: normal; position: relative; text-align: center; min-height: 3.0lh; padding-bottom: 1.0em; order: 2;}
.navigation section ul.anchor li a em:after{ content: "\e313"; font-family: "Material Icons"; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: all 0.3s ease 0s;}
.navigation section ul.anchor li a span{ width: 4.8rem; height: 4.8rem; border-radius: 100%; overflow: hidden; order: 1; margin-bottom: 0.5em;}
.navigation section ul.anchor li a span img{ width: 100%; height: auto;}
.navigation section ul.anchor li:nth-child(1) a:hover em:after{ color: #AED4D0;}
.navigation section ul.anchor li:nth-child(2) a:hover em:after{ color: #EFC5A3;}
.navigation section ul.anchor li:nth-child(3) a:hover em:after{ color: #83CED9;}

/* 部門 */
article.section ul{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: var(--pd-m);}
article.section ul li{ position: relative; width: 100%;}
article.section ul li:nth-child(n+2){ margin-top: 1.0em;}
article.section ul li a{ display: block; border-radius: 24px 0; overflow: hidden; width: 100%; padding-bottom: 32%; position: relative;}
article.section ul li.sales a{ color: #FFF; text-decoration: none; background: url("images/common/banner_sales.webp") no-repeat center right; background-size: cover;}
article.section ul li.sales a span{ display: inline-block; font-size: var(--font-s); line-height: 1.2em; font-weight: 700; position: absolute; top: 50%; right: 15%; transform: translateY(-50%); z-index: 2;}
article.section ul li.sales a span em{ display: inline-block; font-style: normal; position: relative;}
article.section ul li.sales a span em:after{ content: "\e5c8"; font-family: "Material Icons"; position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 1.0em); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; opacity: 1.0;}
article.section ul li.sales a:hover span em:after{ opacity: 1.0; left: calc(100% + 1.5em);}
article.section ul li.sales a:before{ content: ""; width: 200%; height: 100%; background-image: linear-gradient(270deg, #000000cc, #00000052 50%, #0000003d); position: absolute; top: 0; right: -100%; transition: all 0.3s ease 0s; z-index: 1;}
article.section ul li.sales a:hover:before{ right: 0%;}
article.section ul li.developer a{ color: #FFF; text-decoration: none; background: url("images/common/banner_developer.webp") no-repeat center right; background-size: cover;}
article.section ul li.developer a span{ display: inline-block; font-size: var(--font-s); line-height: 1.2em; font-weight: 700; position: absolute; top: 50%; left: 7.2%; transform: translateY(-50%); z-index: 2;}
article.section ul li.developer a span em{ display: inline-block; font-style: normal; position: relative;}
article.section ul li.developer a span em:after{ content: "\e5c8"; font-family: "Material Icons"; position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 1.0em); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; opacity: 1.0;}
article.section ul li.developer a:hover span em:after{ opacity: 1.0; left: calc(100% + 1.5em);}
article.section ul li.developer a:before{ content: ""; width: 200%; height: 100%; background-image: linear-gradient(90deg, #000000cc, #00000052 50%, #0000003d); position: absolute; top: 0; left: -100%; transition: all 0.3s ease 0s; z-index: 1;}
article.section ul li.developer a:hover:before{ left: 0%;}

/* common */
.division section{ padding: var(--pd-m) 1.0em; position: relative;}
.division.left section:before{ content: ""; width: 200%; height: 100%; background: #FFF; border-radius: 0 40px 40px 0; position: absolute; top: 0; right: 0; z-index: -1;}
.division.right section:before{ content: ""; width: 200%; height: 100%; background: #FFF; border-radius: 40px 0 0 40px; position: absolute; top: 0; left: 0; z-index: -1;}
.division header{ position: relative;}
.division header h2{ font-size: var(--font-l); font-weight: 700; line-height: 1.2em;}
.division header h2 span{ display: block; font-size: var(--font-s); line-height: 1.2em; color: var(--clr-prim);}
.division header > p{ margin-top: var(--pd-s);}
.division header .small-button{}

/* 業種特化型IT事業 */
.division.system .column{ margin-top: var(--pd-l); display: flex; justify-content: space-between; flex-wrap: wrap;}
.division.system .column .inner{ width: 100%; border-radius: 24px 0; padding: 2.0em; position: relative;}
.division.system .column .inner:nth-child(1){ background: #D5ECDB;}
.division.system .column .inner:nth-child(2){ background: #E1EBF9; margin-top: var(--pd-m);}
.division.system .column .inner h3{ font-size: var(--font-m); line-height: 1.2em; font-weight: 700;}
.division.system .column .inner > p{ margin-top: 1.5em;}
.division.system .column .inner .banner{}
.division.system .column .inner .banner a{ display: block; border: solid 4px #DDD; background: #FFF; border-radius: 24px 0; padding: 0.48em; position: relative;}
.division.system .column .inner .banner a:hover{ border-radius: 24px;}
.division.system .column .inner .banner a:after{ content: "\e895"; font-family: "Material Icons"; font-size: var(--font-l); line-height: 1.0em; position: absolute; bottom: 0.5em; right: 0.5em;}
.division.system .column .inner .banner a img{ width: 88%; height: auto;}
.division.system .column .inner:nth-child(1) .banner a{ border-color: #B6C7AC;}
.division.system .column .inner:nth-child(2) .banner a{ border-color: #698BD1;}
.division.system .column .inner:nth-child(1) .banner a:after{ color: #B6C7AC;}
.division.system .column .inner:nth-child(2) .banner a:after{ color: #698BD1;}

/* 通販事業 */
.division.ecommerce .clm{ margin-top: var(--pd-l); display: flex; justify-content: space-between; flex-wrap: wrap;}
.division.ecommerce .clm li{ width: 100%;}
.division.ecommerce .clm li:nth-child(n+2){ margin-top: var(--pd-m);}
.division.ecommerce .clm li a{ display: block; border: solid 4px #DDD; border-radius: 24px 0; padding: 0.48em; position: relative;}
.division.ecommerce .clm li a:hover{ border-radius: 24px;}
.division.ecommerce .clm li a:after{ content: "\e895"; font-family: "Material Icons"; font-size: var(--font-l); line-height: 1.0em; position: absolute; bottom: 0.5em; right: 0.5em;}
.division.ecommerce .clm li a img{ width: 88%; height: auto;}
.division.ecommerce .clm li:nth-child(1) a{ border-color: #9DC2A6;}
.division.ecommerce .clm li:nth-child(2) a{ border-color: #E8D1AF;}
.division.ecommerce .clm li:nth-child(3) a{ border-color: #EEC1B4;}
.division.ecommerce .clm li:nth-child(1) a:after{ color: #9DC2A6;}
.division.ecommerce .clm li:nth-child(2) a:after{ color: #E8D1AF;}
.division.ecommerce .clm li:nth-child(3) a:after{ color: #EEC1B4;}

/* AI・IoT研究開発事業 */
.division.ai-iot .column{ margin-top: var(--pd-l); display: flex; justify-content: space-between; flex-wrap: wrap;}
.division.ai-iot .column .inner{ width: 100%; background: #DCECEF; border-radius: 24px 0; padding: 1.0em; position: relative;}
.division.ai-iot .column .inner:nth-child(n+2){ margin-top: var(--pd-m);}
.division.ai-iot .column .inner h3{ font-size: var(--font-m); line-height: 1.2em; font-weight: 700;}
.division.ai-iot .column .inner h4{ line-height: 1.2em; color: #FFF; background: #499FAC; padding: 0.72em; margin: 0.72em 0;}
.division.ai-iot .column .inner .small-button{}

/*--------------------------------------------------------------
# 3. SALES
--------------------------------------------------------------*/
body#sales #page-title::before{}
body#sales .intro section h2,
body#sales .intro section p{}
body#sales .menu .half .inner p.text{ font-size: var(--font-s); line-height: 1.2em;}


/*--------------------------------------------------------------
# 4. DEVELOPER
--------------------------------------------------------------*/
body#developer #page-title::before{}
body#developer .intro section h2,
body#developer .intro section p{}

.work{}
.work .column{ background: #FFF; border-radius: 24px 0; padding: 1.0em; margin-top: var(--pd-s);}
.work .column dl{ display: flex; flex-flow: column; flex-wrap: wrap; align-items: center;}
.work .column dl:nth-child(n+2){ margin-top: var(--pd-m);}
.work .column dl dt{ width: 100%; background: var(--clr-prim); border-radius: 8px; position: relative; padding: 0.4em 0;}
.work .column dl dt span{ color: #FFF; line-height: 1.0em; display: block; text-align: center;}
.work .column dl dt strong{ display: block; width: 100%; text-align: center; font-size: var(--font-m); line-height: 1.2em; font-weight: 700; color: #FFF;}
.work .column dl dd{ font-weight: 700; line-height: 1.6em; text-align: left; margin-top: 0.5em;}
.work .column dl dd br{ display: none;}

.desc{}
.desc .column{ margin-top: var(--pd-m); display: flex; justify-content: space-between; flex-wrap: wrap;}
.desc .column .inner{ width: 100%;}
.desc .column .inner:nth-child(n+2){ margin-top: var(--pd-l);}
.desc .column .inner figure{ margin-bottom: 1.0em; padding-bottom: 60%; position: relative; overflow: hidden; border-radius: 16px;}
.desc .column .inner figure img{ width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.desc .column .inner h3{ font-size: var(--font-s); line-height: 1.2em; font-weight: 700; margin-bottom: 0.5em; padding-left: 0.5em; position: relative;}
.desc .column .inner h3:before{ content: ""; width: 2px; height: 80%; background: var(--clr-prim); border-radius: 2px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}

.work-movie figure{ width: 100%; padding-bottom: 56.25%; margin: 0px auto; border-radius: 24px 0; overflow: hidden; position: relative;}
.work-movie figure iframe{ width: 100%; height: 100%; position: absolute; top: 0; right: 0;}

body#developer .menu .half .inner p.text{ font-size: var(--font-s); line-height: 1.2em;}

/*--------------------------------------------------------------
# 5. HUMAN
--------------------------------------------------------------*/
body#human #static{ padding-bottom: 0 !important;}

.interview{}
.interview .column{ margin-top: var(--pd-m); display: flex; justify-content: space-between; flex-wrap: wrap;}
.interview .column .inner{ width: 72%; margin: 0px auto; border-radius: 24px 0; background: #FFF; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.16);}
.interview .column .inner:nth-child(n+2){ margin-top: var(--pd-xl);}
.interview .column .inner figure{ width: 100%; padding-bottom: 56.25%; position: relative; border-radius: 24px 0; overflow: hidden;}
.interview .column .inner figure iframe{ width: 100%; height: 100%; position: absolute; top: 0; right: 0;}
.interview .column .inner dl{ padding: 1.0em;}
.interview .column .inner dl dt{ font-size: var(--font-s); line-height: 1.2em; font-weight: 700;}
.interview .column .inner dl dt span{ display: block; margin-bottom: 0.32em;}
.interview .column .inner dl dt span em{ display: inline-block; font-style: normal; font-size: 1.4rem; line-height: 1.0em; font-weight: normal; color: #FFF; background: var(--clr-prim); padding: 0.24em 0.8em; border-radius: 2px;}
.interview .column .inner dl dd{ margin-top: var(--pd-s);}

.contents.human{ position: relative; padding: 0 !important; margin-top: var(--pd-xl);}
.human section{ padding: var(--pd-l) 0;}
.human figure{ width: 100%; padding-bottom: 32%; border-radius: 16px; overflow: hidden; margin-bottom: var(--pd-s); position: relative;}
.human figure img{ width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

body#human .contents.menu .half:nth-child(2){ margin-bottom: var(--pd-xl);}

.sns{ padding: clamp(7.2rem, 8.0vw, 16.0rem) 0 !important; position: relative; z-index: 1;}
.sns:before{ content: ""; width: 100%; height: 100%; background: url("images/human/background_sns.webp") no-repeat center center; background-size: 150%; position: absolute; top: 0; left: 0; z-index: -2;}
.sns:after{ content: ""; width: 100%; height: 100%; background:rgba(var(--clr-ac-rgb),0.72); position: absolute; top: 0; left: 0; z-index: -1;}
.sns h2,
.sns p{ color: #FFF;}
.sns ul{ margin-top: var(--pd-m); display: flex; justify-content: center; flex-wrap: wrap;}
.sns ul li{ margin: 0 1.6%;}
.sns ul li a{ display: flex; justify-content: center; align-items: center; width: 4.8rem; height: 4.8rem; border-radius: 100%; background: var(--clr-prim); text-align: center;}
.sns ul li a span{ width: 2.4rem; height: 2.4rem;}
.sns ul li a span svg{ width: 100%; height: 100%;}
.sns ul li a:hover{ background: rgba(var(--clr-prim-rgb),0.64);}

/*--------------------------------------------------------------
# 6. EVENT
--------------------------------------------------------------*/
.calendar{}
.calendar figure{ margin-top: var(--pd-s);}
.calendar figure img{ width: 100%; height: auto; border-radius: 24px; overflow: hidden;}

.marquee-container { width: 100%; overflow: hidden; padding: var(--pd-l) 0;}
.marquee-wrap { display: flex; width: max-content; animation: scroll-loop 60s linear infinite;}
.marquee-item { width: 33.3vw; padding: 0 5px; box-sizing: border-box; flex-shrink: 0;}
.event-card { position: relative; text-align: center; overflow: hidden; border-radius: 16px;}
.event-image { margin: 0; position: relative; width: 100%; padding-bottom: 100%;}
.event-image img { width: auto; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.event-month { position: absolute; top: 25%; left: 0; transform: translateY(-50%); background: #333; color: #fff; padding: 0.4em 0.8em; border-radius: 0 16px 16px 0; z-index: 2;}
.event-title { font-family: "Zen Kurenaido", sans-serif; font-weight: 400; font-style: normal; color: #FFF; font-size: var(--font-s); line-height: 1.2em; width: 100%; background: rgba(0,0,0,0.64); text-align: center; padding: 0.72em; position: absolute; bottom: 0; left: 0;}

@keyframes scroll-loop {
0% { transform: translateX(0);}
100% { transform: translateX(-50%);}
}

/* 色分け（前回と同じ） */
.event-month.january { background-color: #E66363;}
.event-month.february { background-color: #839BCB;}
.event-month.march { background-color: #DCBD42;}
.event-month.april { background-color: #F186B1;}
.event-month.may { background-color: #30A73C;}
.event-month.june { background-color: #3CAEA6;}
.event-month.july { background-color: #2FB5D8;}
.event-month.august { background-color: #2F35D8;}
.event-month.september { background-color: #9EB248;}
.event-month.october { background-color: #C47317;}
.event-month.november { background-color: #6D4545;}
.event-month.december { background-color: #9E73C1;}

.vlog {}
.vlog-list { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin-top: var(--pd-s);}
.video-item { width: 47%; box-sizing: border-box; border: solid 10px #FFF; border-radius: 24px 0 24px 0; overflow: hidden;}
.video-item:nth-child(n+3){ margin-top: var(--pd-m);}
.video-responsive { position: relative; width: 100%; height: auto;}
.video-responsive iframe { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; display: block;}
.video-responsive iframe[src*="shorts"] { aspect-ratio: 9 / 16;}
@media screen and (max-width: 768px) { .video-item { width: 48%; margin-bottom: 20px;}}
@media screen and (max-width: 480px) { .video-item { width: 100%;}}

/*--------------------------------------------------------------
# 7. SCHEDULE
--------------------------------------------------------------*/
.schedule .column{ display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin-left: auto;}
.schedule .column .inner{ width: 100%;}
.schedule .column .inner:nth-child(n+2){ margin-top: clamp(6.4rem, 9.6vw, 12.0rem);}
.schedule .column .inner h3{ width: 100%; margin: 0px auto; font-size: var(--font-s); line-height: 1.2em; text-align: center; font-weight: 700; background: #FFF; border-radius: 24px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.16); padding: 1.8em 0; position: relative;}
.schedule .column .inner h3:after{ content: "\e313"; font-family: "Material Icons"; line-height: 1.0em; position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);}
.schedule .column .inner h3 span{ width: 5.6rem; height: 5.6rem; border-radius: 100%; background: #EEE; position: absolute; top: -3.2rem; left: 50%; transform: translateX(-50%);}
.schedule .column .inner h3 span em{ display: inline-block; text-align: center; font-style: normal; line-height: 1.0em; padding-top: 1.4rem; color: #FFF;}
.schedule .column .inner h3 span em strong{ display: block; text-align: center; line-height: 1.0em; font-size: var(--font-m);}
.schedule .column .inner.sales01 h3 span{ background: #91D4BB;}
.schedule .column .inner.developer01 h3 span{ background: #ADC9EC;}
.schedule .column .inner.sales02 h3 span{ background: #F5B5CF;}

.schedule .column .inner dl{ margin-top: var(--pd-s); padding-top: var(--pd-l); position: relative;}
.schedule .column .inner dl:nth-child(n+2){ margin-top: var(--pd-m);}
.schedule .column .inner dl dt{ font-weight: 700; width: 100%; margin: 0px auto; text-align: center; font-size: var(--font-m); line-height: 1.0em;}
.schedule .column .inner dl dt figure{ margin-bottom: 1.0em;}
.schedule .column .inner dl dt figure img{ width: 100%; height: auto; border-radius: 16px; overflow: hidden;}
.schedule .column .inner dl dd{ text-align: center; line-height: 1.4em; width: 100%; margin: 0px auto;}
.schedule .column .inner ul{ width: 100%; margin: var(--pd-s) auto 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
.schedule .column .inner ul li{ width: 48%;}
.schedule .column .inner ul li a{ display: block; text-align: center; line-height: 1.0em; font-weight: 700; color: #FFF; text-decoration: none; padding: 0.8em 0; border-radius: 100px; overflow: hidden; position: relative; z-index: 1;}
.schedule .column .inner ul li a:before{ content: ""; width: 100%; height: 100%; background: var(--clr-cta); position: absolute; top: 0; right: 0; z-index: -1; transition: all 0.3s ease 0s;}
.schedule .column .inner ul li a:hover:before{ width: 200%;}
.schedule .column .inner ul li a:after{ content: "\e5c8"; font-family: "Material Icons"; position: absolute; top: 50%; transform: translateY(-50%); right: 1.2em; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; opacity: 1.0;}
.schedule .column .inner ul li a:hover:after{ opacity: 1.0; right: 0.72em;}

.schedule .column .inner dl:after{ content: "\e8b5"; font-family: "Material Icons"; font-size: var(--font-m); line-height: 1.0em; color: var(--clr-prim); position: absolute; top: 0.1em; left: 0;}
.schedule .column .inner dl:before{ font-size: var(--font-m); line-height: 1.0em; font-weight: 700;color: var(--clr-prim); position: absolute; top: 0; left: 1.2em;}
.schedule .column .inner dl.time0845:before{ content: "08:45";}
.schedule .column .inner dl.time0900:before{ content: "09:00";}
.schedule .column .inner dl.time0905:before{ content: "09:05";}
.schedule .column .inner dl.time1200:before{ content: "12:00";}
.schedule .column .inner dl.time1300:before{ content: "13:00";}
.schedule .column .inner dl.time1400:before{ content: "14:00";}
.schedule .column .inner dl.time1500:before{ content: "15:00";}
.schedule .column .inner dl.time1600:before{ content: "16:00";}
.schedule .column .inner dl.time1700:before{ content: "17:00";}
.schedule .column .inner dl.time1800:before{ content: "18:00";}

.schedule .column .inner dl.time1500{ position: relative;}
.schedule .column .inner dl.time1500 dt{ border: dotted 2px var(--clr-prim); border-radius: 8px; font-weight: 700; text-align: center; line-height: 1.2em; color: var(--clr-prim); padding: 2.0em 1.0em;}
.schedule .column .inner dl.time1500 dd{ position: absolute; top: calc(100% - 1.0em); left: 50%; transform: translateX(-50%); z-index: 10;}
.schedule .column .inner dl.time1500 dd span{ display: inline-block; color: #FFF; font-weight: 700; line-height: 1.0em; background: var(--clr-prim); padding: 0.24em 0.8em; border-radius: 100px;}

.modal { cursor: pointer; position: relative;}
.modal iframe { pointer-events: none;}
/* モーダルのスタイル（16:9比率） */
.yt-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; display: flex; justify-content: center; align-items: center; animation: modalFade 0.3s ease-out forwards;}
.yt-modal-content { position: relative; width: 90%; max-width: 960px; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; animation: modalPop 0.4s ease-out forwards;}
.yt-modal-content iframe { width: 100%; height: 100%; border-radius: 8px;}
.yt-close { position: absolute; top: -40px; right: 0; color: #fff; font-size: 35px; cursor: pointer; line-height: 1;}

/*--------------------------------------------------------------
# 8. ENVIRONMENT
--------------------------------------------------------------*/
.benefits{}
.benefits .column{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: var(--pd-s);}
.benefits .column .inner{ width: 100%; background: #FFF; border-radius: 24px 0; padding: 1.0em; position: relative;}
.benefits .column .inner:nth-child(n+2){ margin-top: var(--pd-m);}
.benefits .column .inner h3{ display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; font-size: var(--font-s); line-height: 1.2em;}
.benefits .column .inner h3 span{ width: 3.2rem; height: 3.2rem; border-radius: 100%; overflow: hidden; margin-right: 0.32em;}
.benefits .column .inner h3 span img{ width: 100%; height: auto;}
.benefits .column .inner p{ margin-top: var(--pd-s);}
.benefits .column .inner .tiktok{ display: block; width: 3.2rem; height: 3.2rem; background: var(--clr-ac); border-radius: 100%; padding: 0.48em; position: absolute; top: 1.0em; right: 1.0em;}
.benefits .column .inner .tiktok:hover{ background: rgba(var(--clr-ac-rgb),0.64);}
.benefits .column .inner .tiktok img{ width: 100%; height: auto;}

.environment .column{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: var(--pd-s);}
.environment .column .inner{ width: 100%;}
.environment .column .inner:nth-child(n+2){ margin-top: var(--pd-l);}
.environment .column .inner figure{}
.environment .column .inner figure img{ width: 100%; height: auto; border-radius: 16px; overflow: hidden;}
.environment .column .inner h3{ font-size: var(--font-m); line-height: 1.2em; margin-top: var(--pd-s);}
.environment .column .inner p{ margin-top: var(--pd-s);}

@keyframes modalFade { from { opacity: 0;} to { opacity: 1;}}
@keyframes modalPop { from { opacity: 0; transform: translateY(20px) scale(0.95);} to { opacity: 1; transform: translateY(0) scale(1);}}
.tiktok-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; display: flex; justify-content: center; align-items: center; animation: modalFade 0.3s ease-out forwards;}
.tiktok-modal-content { position: relative; width: 90%; max-width: 400px; height: 80vh; max-height: 800px; background: #000; border-radius: 8px; animation: modalPop 0.4s ease-out forwards;}
.tiktok-modal-content iframe { width: 100%; height: 100%; border-radius: 8px;}
.tiktok-close { position: absolute; top: -40px; right: 0; color: #fff; font-size: 35px; cursor: pointer; line-height: 1;}

/*--------------------------------------------------------------
# 9. FAQ
--------------------------------------------------------------*/
.faq-list{}
.faq-list h2.heading:nth-of-type(n+2){ margin-top: var(--pd-xl);}
.faq-list dl { margin-top: var(--pd-m);}
.faq-list dt { background: var(--clr-sec); padding: 1.2em 2.4em; font-size: var(--font-s); line-height: 1.2em; border-radius: 16px; position: relative; cursor: pointer; font-weight: bold; transition: color 0.3s;}
.faq-list dl dt:nth-of-type(n+2){ margin-top: var(--pd-m);}
.faq-list dt:hover { color: var(--clr-ac);}
.faq-list dt span{ position: absolute; top: 1.2em; left: 1.2em;}
.faq-list dt::before,
.faq-list dt::after { content: ""; position: absolute; top: 50%; right: 20px; background-color: #333; transition: transform 0.4s ease;}
.faq-list dt::before { width: 16px; height: 2px; margin-top: -1px;}
.faq-list dt::after { width: 2px; height: 16px; margin-top: -8px; right: 27px;}
.faq-list dt.is-active{ border-radius: 16px 16px 0 0;}
.faq-list dt.is-active::after { transform: rotate(90deg);}
.faq-list dd { height: 0; overflow: hidden; opacity: 0; transition: height 0.4s ease, opacity 0.4s ease;}
.faq-list dd.is-open { opacity: 1;}
.faq-list .faq-inner { padding: 1.0em; padding-left: 2.4em; background: #FFF; border-radius: 0 0 16px 16px; position: relative;}
.faq-list .faq-inner span{ color: var(--clr-prim); position: absolute; top: 1.0em; left: 1.0em;}
.faq-list .faq-inner .small-button.blank a:after{ content: "\e895";}

.btm-contact{}
.btm-contact h3{ font-weight: 700; margin-top: var(--pd-s);}
.btm-contact ul{ margin-top: var(--pd-s); display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}
.btm-contact ul li{ width: 100%;}
.btm-contact ul li:nth-child(n+2){ margin-top: var(--pd-s);}
.btm-contact ul li.phone{ line-height: 1.2em;}
.btm-contact ul li.phone a{ display: inline-block; color: #333; text-decoration: none; font-size: var(--font-l); line-height: 1.0;}
.btm-contact ul li.phone a:hover{ color: rgba(51,51,51,0.64);}
.btm-contact ul li.button{}
.btm-contact ul li.button a{ display: block; font-size: var(--font-s); line-height: 1.2em; font-weight: 700; color: #FFF; text-decoration: none; padding: 1.0em 0; text-align: center; border-radius: 24px 0 24px 0; overflow: hidden; position: relative; z-index: 1;}
.btm-contact ul li.button a:hover{ border-radius: 24px;}
.btm-contact ul li.button a span{ display: flex; justify-content: center; align-items: center; min-height: 2lh;}
.btm-contact ul li.button a:before{ content: ""; width: 100%; height: 100%; background: var(--clr-cta); position: absolute; top: 0; right: 0; z-index: -1; transition: all 0.3s ease 0s;}
.btm-contact ul li.button a:hover:before{ width: 200%;}
.btm-contact ul li.button a:after{ content: "\e895"; font-family: "Material Icons"; position: absolute; top: 50%; right: 2.0em; transform: translateY(-50%); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;}
.btm-contact ul li.button a:hover:after{ right: 1.6em;}

/*--------------------------------------------------------------
# 10. RECRUIT
--------------------------------------------------------------*/
.anchor-list{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: var(--pd-xl);}
.anchor-list li{ width: 31%; position: relative; z-index: 1;}
.anchor-list li:nth-child(1):after{ content: ""; width: 4.8rem; height: 4.8rem; background: url("images/recruit/icon_01.svg") no-repeat; background-size: cover; border-radius: 100%; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); z-index: 2;}
.anchor-list li:nth-child(2):after{ content: ""; width: 4.8rem; height: 4.8rem; background: url("images/recruit/icon_02.svg") no-repeat; background-size: cover; border-radius: 100%; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); z-index: 2;}
.anchor-list li:nth-child(3):after{ content: ""; width: 4.8rem; height: 4.8rem; background: url("images/recruit/icon_03.svg") no-repeat; background-size: cover; border-radius: 100%; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); z-index: 2;}
.anchor-list li:before{ content: ""; width: 100%; height: 100%; background: var(--clr-cta); position: absolute; top: 0; left: 0; z-index: -1; border-radius: 24px 0 24px 0;}
.anchor-list li a{ display: block; padding: 3.0em 0 2.0em; font-size: var(--fomt-s); font-weight: 700; line-height: 1.2em; text-align: center; color: #333; text-decoration: none; border-radius: 24px 0 24px 0; background: #FFF; box-shadow: 0 2px 8px rgba(0,0,0,0.16); position: relative; overflow: hidden; z-index: 1;}
.anchor-list li a:after{ content: "\e313"; font-family: "Material Icons"; position: absolute; font-size: var(--font-s); bottom: 0.48em; left: 50%; transform: translateX(-50%); transition: all 0.3s ease 0s;}
.anchor-list li a:hover{ color: #FFF; box-shadow: none; background: none;}
.anchor-list li a:hover:after{ bottom: 0.24em;}

body#recruit .contents.guideline section table tr td dl dt:first-child{ margin-top: 0;}
body#recruit .contents.guideline section table tr td dl dd dl{ display: flex; justify-content: space-between; flex-wrap: wrap;}
body#recruit .contents.guideline section table tr td dl dd dl dt{ width: 7.0em; margin-top: 0;}
body#recruit .contents.guideline section table tr td dl dd dl dd{ width: calc(100% - 7.0em);}
body#recruit .contents.guideline section table tr td dl dd dl dd:before{ content: ":"; padding-right: 1.0em;}
body#recruit .contents.guideline section table tr td ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
body#recruit .contents.guideline section table tr td ul li{ width: 100%; list-style-type: disc; list-style-position: inside;}
body#recruit .contents.guideline section table tr td ul li:nth-child(n+2){ margin-top: 0.08em;}

.contents.flow{}
.contents.flow .column{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: var(--pd-s);}
.contents.flow .column .inner{ width: 48%; margin-right: 4%; position: relative;}
.contents.flow .column .inner:nth-child(n+3){ margin-top: var(--pd-m);}
.contents.flow .column .inner:after{ content: "\e5df"; font-family: "Material Icons"; font-size: var(--font-xl); line-height: 1.0em; color: var(--clr-ac); position: absolute; top: 11%; right: -12%;}
.contents.flow .column .inner:nth-child(2n):after{ content: none;}
.contents.flow .column .inner:nth-child(2n),
.contents.flow .column .inner:last-child{ margin-right: 0;}
.contents.flow .column .inner:last-child{ width: 100%;}
.contents.flow .column .inner:last-child:after{ content: none;}
.contents.flow .column .inner h4{ font-size: var(--font-s); line-height: 1.2em; font-weight: 700; text-align: center; background: #FFF; border-radius: 24px 0; padding: var(--pd-s) 0; box-shadow: 0 0 4px rgba(0,0,0,0.08);}
.contents.flow .column .inner h4 span{ display: block; text-align: center; font-size: var(--font-l); line-height: 1.0em; color: var(--clr-prim);}
.contents.flow .column .inner:last-child h4{ background: var(--clr-prim); color: #FFF;}
.contents.flow .column .inner:last-child h4 span{ color: rgba(255,255,255,0.64);}
.contents.flow .column .inner .box{ margin-top: var(--pd-s); background: var(--clr-bgs); padding: 1.0em; border-radius: 24px 0;}
.contents.flow .column .inner .box p{ line-height: 1.2em;}
.contents.flow .column .inner .box p span{ display: block; font-size: 1.4rem; line-height: 1.2em;}
.contents.flow .column .inner .box ul{ padding-left: 1.0em;}
.contents.flow .column .inner .box ul li{ list-style-type: disc; list-style-position: outside; line-height: 1.2em;}
.contents.flow .column .inner .box ul li:nth-child(n+2){ margin-top: 0.24em;}
.contents.flow .column .inner ol{ margin-top: var(--pd-s);}
.contents.flow .column .inner ol li:nth-child(n+2){ margin-top: 0.48em;}
.contents.flow .column .inner ol li a{ display:block; color: #FFF; text-decoration: none; font-weight: 700; line-height: 1.0em; padding: 0.8em 1.0em; text-align: left; border-radius: 20px 0 20px 0; position: relative; z-index: 1; overflow: hidden;}
.contents.flow .column .inner ol li a:hover{ color: #FFF; border-radius: 20px;}
.contents.flow .column .inner ol li a:before{ content: ""; width: 100%; height: 100%; background: var(--clr-cta); position: absolute; top: 0; right: 0; z-index: -1; transition: all 0.3s ease 0s;}
.contents.flow .column .inner ol li a:hover:before{ width: 200%;}
.contents.flow .column .inner ol li a:after{ content: "\e895"; font-family: "Material Icons"; position: absolute; top: 50%; right: 1.2em; transform: translateY(-50%); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;}
.contents.flow .column .inner ol li a:hover:after{ right: 0.72em;}

.contents.menu { width: 100%; overflow: hidden;}
.contents.menu section {}
.contents.menu .half { display: flex; justify-content: space-between; flex-wrap: wrap;}
.contents.menu .half + .half{ margin-top: var(--pd-xl);}
.contents.menu .half .inner { width: 100%; margin-top: var(--pd-m); order: 2;}
.contents.menu .half .inner h2 { font-size: var(--font-l); line-height: 1.2em; color: var(--clr-ac); margin: 0;}
.contents.menu .half .inner p.text { margin-top: var(--pd-s);}
.contents.menu .half .inner p.small-button { margin-top: 1.5em;}
.contents.menu .half figure { width: 100%; order: 1;}
.contents.menu .half figure img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 24;}

/*--------------------------------------------------------------
# 11. BRIEFING
--------------------------------------------------------------*/
.contents.briefing{}
.contents.briefing header + header{ margin-top: var(--pd-l);}
.contents.briefing header{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.contents.briefing header figure{ width: 100%; order: 1;}
.contents.briefing header figure img{ width: 100%; height: auto; border-radius: 16px; overflow: hidden;}
.contents.briefing header .inner{ width: 100%; order: 2; position: relative; margin-top: var(--pd-m);}
.contents.briefing header .inner h2{ font-size: var(--font-l); line-height: 1.2em;}
.contents.briefing header .inner p{ margin-top: var(--pd-s);}
.contents.briefing header .inner .small-button{}
.contents.briefing .column03{ margin-top: var(--pd-l); display: flex; justify-content: space-between; flex-wrap: wrap;}
.contents.briefing .column03 .inner{ width: 100%; background: #FFF; border-radius: 24px 0; padding: 1.0em;}
.contents.briefing .column03 .inner:nth-child(n+2){ margin-top: var(--pd-m);}
.contents.briefing .column03 .inner h3{ font-size: var(--pd-s); line-height: 1.2em; border-bottom: solid 1px rgba(0,0,0,0.08); padding: 0.5em 0; color: var(--clr-prim); position: relative;}
.contents.briefing .column03 .inner ul{ margin-top: var(--pd-s); padding-left: 1.2em;}
.contents.briefing .column03 .inner ul li{ list-style-type: disc; list-style-position: outside; line-height: 1.2em;}
.contents.briefing .column03 .inner ul li:nth-child(n+2){ margin-top: 0.32em;}
.contents.briefing .column03 .inner p{ margin-top: var(--pd-s);}
.contents.briefing .column03 .inner ol{ margin-top: var(--pd-s); padding-left: 1.5em;}
.contents.briefing .column03 .inner ol li{ list-style-type: decimal; list-style-position: outside;}
.contents.briefing .column03 .inner ol li:nth-child(n+2){ margin-top: 0.32em;}

/*--------------------------------------------------------------
# 12. INTERNSHIP
--------------------------------------------------------------*/
.contents.internship header .inner{ width: 100%;}
.contents.internship figure{ width: 100%; border-radius: 24px; margin-bottom: var(--pd-s); overflow: hidden; position: relative;}
.contents.internship figure img{ width: 100%; height: auto;}

.contents.guideline section{ background: #FFF; border-radius: 24px; padding:var(--pd-m) var(--pd-s);}
.contents.guideline section table{ border-top: solid 1px #DDD; width: 100%; margin-top: var(--pd-s);}
.contents.guideline section table tr{ border-bottom: solid 1px #DDD;}
.contents.guideline section table tr th{ display: block; width: 100%; padding: 0.72em; line-height: 1.4em; background: var(--clr-bgs);}
.contents.guideline section table tr td{ display: block;  width: 100%; padding: 0.72em; line-height: 1.4em;}
.contents.guideline section table tr td dl dt{ margin-top: var(--pd-s);}
.contents.guideline section table tr td dl dd{}
.contents.guideline section table tr td span{ display: block;}

.contents.entry{}
.contents.entry ul{ width: 80%; margin: var(--pd-s) auto 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
.contents.entry ul li{ width: 100%;}
.contents.entry ul li:nth-child(n+2){ margin-top: var(--pd-s);}
.contents.entry ul li a{ display: block; font-size: var(--font-s); line-height: 1.2em; font-weight: 700; color: #FFF; text-decoration: none; padding: 1.0em 0; text-align: center; border-radius: 24px 0 24px 0; overflow: hidden; position: relative; z-index: 1;}
.contents.entry ul li a:hover{ border-radius: 24px;}
.contents.entry ul li a span{ display: flex; justify-content: center; align-items: center; min-height: 2lh;}
.contents.entry ul li a:before{ content: ""; width: 100%; height: 100%; background: var(--clr-cta); position: absolute; top: 0; right: 0; z-index: -1; transition: all 0.3s ease 0s;}
.contents.entry ul li a:hover:before{ width: 200%;}
.contents.entry ul li a:after{ content: "\e895"; font-family: "Material Icons"; position: absolute; top: 50%; right: 2.0em; transform: translateY(-50%); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;}
.contents.entry ul li a:hover:after{ right: 1.6em;}

.tips{ margin-top: var(--pd-xl);}
.tips h3{ font-size: var(--font-m); line-height: 1.2em; text-align: center; font-weight: 700; color: var(--clr-prim);}
.tips ol{ display: flex; justify-content: space-between; flex-wrap: wrap; margin: var(--pd-s) auto 0; width: 100%;}
.tips ol li{ width: 100%;}
.tips ol li:nth-child(n+2){ margin-top: var(--pd-s);}
.tips ol li figure{ width: 64%; margin: 0px auto;}
.tips ol li figure img{ width: 100%; height: auto; border-radius: 16px; overflow: hidden;}
.tips ol li span{ display: block; margin-top: var(--pd-s); font-weight: 700; line-height: 1.2em; text-align: center;}
.tips ol li span em{ display: block; font-weight: normal; font-style: normal;}
.tips ol li.finish{ width: 100%; margin-top: var(--pd-s);}
.tips ol li.finish span{ font-size: var(--font-s); line-height: 1.2em; text-align: center;}
.tips ol li.finish span em{ font-size: 1.6rem; line-height: 1.2em; text-align: center;}

/*--------------------------------------------------------------
# 404 not found
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# post
--------------------------------------------------------------*/
/*　archive/category　*/
#archive-list{}
#archive-list ul{}
#archive-list ul li{ border-bottom: solid 1px rgba(0,0,0,0.08); padding: 1.5em 0;}
#archive-list ul li .archive-meta{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 0.24em;}
#archive-list ul li .archive-meta time{ color: var(--clr-prim); font-size: 1.4rem; line-height: 1.2em;}
#archive-list ul li .archive-meta .archive-cat{ margin-left: 1.0em; font-size: 1.4rem; line-height: 1.2em;}
#archive-list ul li .archive-meta .archive-cat a{ display: inline-block; color: #333; text-decoration: none;}
#archive-list ul li .archive-meta .archive-cat a:hover{ color: rgba(51,51,51,0.64);}
#archive-list ul li h2 a{ display: block; font-size: var(--font-s); line-height: 1.4em; color: #333; text-decoration: none; padding-right: 2.0em; position: relative;}
#archive-list ul li h2 a:hover{ color: rgba(51,51,51,0.64);}
#archive-list ul li h2 a:after{ content: "\e315"; font-family: "Material Icons"; position: absolute; top: 50%; right: 0; transform: translateY(-50%); opacity: 0.24; transition: all 0.3se ease 0s;}
#archive-list ul li h2 a:hover:after{ opacity: 1.0; color: var(--clr-prim);}

/* pagenation */
.wp-pagenavi{ margin-top: var(--pd-l); display: flex; justify-content: center; flex-wrap: wrap;}
.wp-pagenavi a,
.wp-pagenavi span{ border: solid 1px rgba(0,0,0,0.08); padding: 0.64em; line-height: 1.0em; border-radius: 4px; margin: 0 0.24em; text-align: center; min-width: 38px; color: #333; text-decoration: none;}
.wp-pagenavi span.current{ color: #FFF; background: var(--clr-ac); border-color: rgba(0,0,0,0);}
.wp-pagenavi a:hover{ background: rgba(0,0,0,0.08); color: #333;}

/* single */
#single-post .entry-header{}
#single-post .entry-header h2.entry-title{ font-size: var(--font-m); line-height: 1.2em; padding: 0.64em 0; font-weight: 700; color: var(--clr-ac);}
#single-post .entry-header .entry-meta{ display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 0.8em 0;}
#single-post .entry-header .entry-meta span{ font-size: 1.4rem; line-height: 1.2em; margin-right: 1.0em;}
#single-post .entry-header .entry-meta span a{ display: inline-block; color: #333; text-decoration: none; background: #FFF; border-radius: 16px 0; padding: 0.8em;}
#single-post .entry-header .entry-meta span a:hover{ color: rgba(51,51,51,0.64); text-decoration: underline;}
#single-post .post-thumbnail{ width: 100%; padding-bottom: 48%; position: relative; margin-top: 2.0em; overflow: hidden; border-radius: 24px;}
#single-post .post-thumbnail img{ width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#single-post .entry-content h3{ font-size: var(--font-s); line-height: 1.2em; font-weight: 700; color: var(--clr-prim); margin-top: var(--pd-l); padding-bottom: 0.8em; border-bottom: solid 1px rgba(0,0,0,0.16);}
#single-post .entry-content h4{ font-size: var(--font-s); line-height: 1.2em; font-weight: 700; margin-top: var(--pd-m); padding-left: 0.64em; position: relative;}
#single-post .entry-content h4:before { content: ""; width: 4px; height: 80%; background: var(--clr-prim); position: absolute; top: 50%; left: 0; transform: translateY(-50%); border-radius: 2px;}
#single-post .entry-content h5{ font-weight: 700; line-height: 1.2em; margin-top: var(--pd-s);}
#single-post .entry-content p,
#single-post .entry-content dl,
#single-post .entry-content ul,
#single-post .entry-content ol,
#single-post .entry-content table{ margin-top: var(--pd-s);}
#single-post .entry-content ul{ padding-left: 1.2em;}
#single-post .entry-content ul li{ list-style-type: disc; list-style-position: outside; line-height: 1.4em;}
#single-post .entry-content ul li:nth-child(n+2){ margin-top: 0.48em;}
#single-post .entry-content ol{ padding-left: 1.8em;}
#single-post .entry-content ol li{ list-style-type: decimal; list-style-position: outside; line-height: 1.4em;}
#single-post .entry-content ol li:nth-child(n+2){ margin-top: 0.48em;}

.has-fixed-layout{ table-layout: auto !important; border-color: #CCC;}
.has-fixed-layout tbody th{ background: var(--clr-sec); border-color: #CCC;}
.has-fixed-layout tbody td{ background: #FFF; border-color: #CCC;}

/* side navigation */
.widget{ margin-top: var(--pd-m); background: rgba(0,0,0,0.04); padding: 1.0em; border-radius: 16px 0;}
.widget:nth-child(1){ margin-top: 0;}
.widget h2{ font-size: var(--font-s); line-height: 1.2em; position: relative; padding: 0.4em 0; padding-left: 1.2em;}
.widget h2:before{ content: "\e241"; font-family: "Material Icons"; color: var(--clr-prim); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.widget ul{ padding: 0.4em 0;}
.widget ul li{ line-height: 1.2em; border-bottom: solid 1px rgba(0,0,0,0.08);}
.widget ul li:last-child{ border-bottom: none;}
.widget ul li a{ display: block; color: #333; text-decoration: none; padding: 0.64em 0; padding-right: 1.6em; position: relative;}
.widget ul li a:after{ content: "\e315"; font-family: "Material Icons"; position: absolute; top: 50%; right: 0; transform: translateY(-50%); opacity: 0.4; transition: all 0.3s ease 0s;}
.widget ul li a:hover:after{ opacity: 1.0; color: var(--clr-prim);}
.widget ul li a:hover{ color: rgba(51,51,51,0.64);}


/* next back */
.post-navigation{ width: 100%; margin: 0px auto; }
.nav-links{ display: flex; justify-content: space-between; flex-wrap: wrap; border-top: double 3px #E4E4E4; padding-top: 2.0rem; margin: 0px auto;}
.nav-previous .nav-subtitle,
.nav-next .nav-subtitle{ display: none;}
.nav-previous a,
.nav-next a{ color: #333; text-decoration: none; display: inline-block; position: relative;}
.nav-previous a:hover,
.nav-next a:hover{ color: rgba(51,51,51,0.6);}
.nav-previous a:before{ content: "\e5e1"; font-family: "Material Icons"; color: var(--clr-prim); padding-right: 0.5em;}
.nav-next a:after{ content: "\e5e1"; font-family: "Material Icons"; color: var(--clr-prim); padding-left: 0.5em;}

/*--------------------------------------------------------------
# contact form
--------------------------------------------------------------*/
.wpcf7-form{}
.wpcf7-form dl{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.wpcf7-form dl dt{ width: 32%; padding: 1.6em 0; position: relative; border-bottom: solid 1px #EEE; display: flex; flex-wrap: wrap; align-items: center;}
.wpcf7-form dl dt .require{ font-size: 1.4rem; line-height: 1.2em; font-weight: 700; color: #FF0000; margin-left: 0.5em;}
.wpcf7-form dl dt em{ display: block; font-size: 1.4rem; line-height: 1.2em; font-style: normal;}
.wpcf7-form dl dd{ width: 68%; padding: 1.6em 0; padding-left: 2.0em; border-bottom: solid 1px #EEE;}
.wpcf7-form dl dd input[type="tel"],
.wpcf7-form dl dd input[type="text"],
.wpcf7-form dl dd input[type="email"],
.wpcf7-form dl dd textarea{ border: solid 1px #DDD; background: #F9F9F9; padding: 1.0em; border-radius: 4px; transition: all 0.3s ease 0s;}
.wpcf7-form dl dd input[type="tel"]:focus,
.wpcf7-form dl dd input[type="text"]:focus,
.wpcf7-form dl dd input[type="email"]:focus,
.wpcf7-form dl dd textarea:focus{ outline: none; background: #FFF; border: solid 1px #DDD;}
.wpcf7-form dl dd input.wpcf7-not-valid,
.wpcf7-form dl dd textarea.wpcf7-not-valid{}
.wpcf7-form-control.wpcf7-checkbox{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item{ margin-left: 0px; padding-right: 2.0em;}
.wpcf7-form-control.wpcf7-acceptance.optional .wpcf7-list-item{ margin-left: 0px;}
.wpcf7-not-valid-tip{ font-size: 1.4rem !important; line-height: 1.2em !important; font-weight: 600; color: #FF0000 !important; margin-top: 0.5em;}
.wpcf7-list-item.first{ margin-left: 0;}

.wpcf7-spinner{ display: none !important;}
.submit-container{ text-align: center;}
.submit-container input[type="button"]{ background: #EEE; border-color: E4E4E4; font-size: 1.6rem; font-weight: 600; line-height: 1.0em; padding: 1.25em 2.0em; border-radius: 0; cursor: pointer; border-radius: 8px; margin-right: 2.0em;}
.submit-container input[type="submit"]{ background: var(--txt-blue); color: #FFF; border-color: var(--txt-blue); font-size: 1.6rem; font-weight: 600; line-height: 1.0em; padding: 1.25em 4.0em; border-radius: 0; cursor: pointer; border-radius: 8px;}

.wpcf7-response-output{ text-align: center; background: #FFF;}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
#wrapper{ width: 100%; margin: 0px auto; position: relative; overflow: hidden; padding-top: 9.6rem;}

/* header */
header#masthead{ width: 100%; margin: 0px auto; padding: 1.6rem 2%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; position: fixed; top: 0; left: 0; z-index: 9;}
header#masthead .site-branding{ display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}
header#masthead .site-branding .site-logo{ width: 48px;}
header#masthead .site-branding .site-logo img{ width: 100%; height: auto;}
header#masthead .site-branding .site-title{ margin-left: 0.56em; font-size: 1.4rem; line-height: 1.1em;}
header#masthead .site-branding .site-title span.en{ display: block; font-size: 0.8em; line-height: 1.1em; color: var(--clr-prim);}
header#masthead .site-branding .site-description{ display: none;}
.site-header { transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, box-shadow 0.3s ease;}
.site-header.is-scrolled { background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);}

/* breadcrumb */
.breadcrumbs{ width: 90%; margin: 0 auto; max-width: 1200px; position: relative; z-index: 8;}
.breadcrumbs > span{ padding: 0 0.5em; color: rgba(51,51,51,0.64);}
.breadcrumbs > span a{ color: rgba(51,51,51,1.0); text-decoration: none;}
.breadcrumbs > span a:hover{ color: var(--clr-prim);}
.breadcrumbs > span:first-of-type{ padding-left: 1.5em; position: relative;}
.breadcrumbs > span:first-of-type:before{ content: "\e88a"; font-family: "Material Icons"; font-size: 2.0rem; position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: rgba(51,51,51,1.0);}

/* global-cta */
#global-cta{ padding: var(--pd-xl) 0; position: relative; z-index: 1;}
#global-cta:after{ content: ""; display: block; width: 100%; height: 0; padding-top: 3.125%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='60' viewBox='0 0 1920 60'%3E%3Cpath fill='%23ffffff' transform='translate(-152)' d='M2072,60H152V17.453c11.517,2.971,22.609,6.169,33.336,9.261l.008,0c11.387,3.282,23.161,6.676,35.465,9.806,13.8,3.511,26.827,6.31,39.817,8.556,15.589,2.7,31.455,4.676,48.5,6.052,19.139,1.545,39.268,2.3,61.536,2.3s42.4-.751,61.537-2.3c17.049-1.376,32.915-3.356,48.505-6.052,12.989-2.247,26.014-5.045,39.818-8.557,12.3-3.127,24.062-6.519,35.44-9.8l.034-.01.008,0c11.387-3.283,23.161-6.677,35.466-9.807,13.8-3.51,26.826-6.31,39.817-8.556C646.88,5.652,662.746,3.672,679.8,2.3,698.935.751,719.063,0,741.333,0s42.4.751,61.536,2.3c17.051,1.376,32.917,3.356,48.505,6.052,12.991,2.247,26.016,5.046,39.818,8.556,12.306,3.13,24.083,6.525,35.472,9.808l.041.012c11.377,3.28,23.141,6.671,35.435,9.8,13.8,3.511,26.829,6.31,39.818,8.557,15.59,2.7,31.456,4.676,48.505,6.052,19.138,1.545,39.267,2.3,61.537,2.3s42.4-.751,61.536-2.3c17.049-1.376,32.916-3.356,48.505-6.052,12.989-2.247,26.013-5.045,39.818-8.557,12.307-3.13,24.083-6.525,35.472-9.809l.035-.01c11.379-3.28,23.145-6.672,35.44-9.8,13.8-3.51,26.825-6.309,39.817-8.556,15.589-2.7,31.455-4.676,48.505-6.052C1440.268.751,1460.4,0,1482.666,0s42.4.751,61.536,2.3c17.049,1.376,32.915,3.356,48.505,6.052,12.992,2.247,26.016,5.046,39.818,8.557,12.3,3.127,24.062,6.519,35.441,9.8l.033.01.013,0c11.385,3.282,23.158,6.676,35.461,9.805,13.8,3.511,26.829,6.31,39.818,8.557,15.59,2.7,31.456,4.676,48.505,6.052,19.138,1.545,39.267,2.3,61.537,2.3,35.831,0,74.318-2.023,114.392-6.014,33.6-3.346,68.678-8.107,104.273-14.152V60Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center bottom; background-size: 100% 101%; position: absolute; bottom: -1px; left: 0; z-index: 1;}
#global-cta:before{ content: ""; width: 100%; height: 120%; background: var(--clr-cta); position: absolute; top: 0; left: 0; z-index: -1;}
#global-cta section{ width: 90%; margin: 0px auto; max-width: 1200px;}
#global-cta section h2{ font-size: var(--font-l); line-height: 1.2em; text-align: center; color: #FFF; font-weight: 700; text-shadow: 0 0.1em 0 rgba(0,0,0,0.24);}
#global-cta section h2 strong{ display: block; text-align: center; font-size: var(--font-xl); line-height: 1.2em; text-align: center; font-weight: 700;}
#global-cta section ul{ display: flex; justify-content: center; flex-wrap: wrap; width: 80%; margin: 2.0em auto 0;}
#global-cta section ul li{ width: 100%; margin: 0;}
#global-cta section ul li:nth-child(n+2){ margin-top: 0.64em;}
#global-cta section ul li a{ display: block;  color: var(--clr-prim); background: #FFF; font-weight: 700; padding: 1.5em 0; text-align: center; line-height: 1.0em; text-decoration: none; position: relative; border-radius: 24px 0 24px 0; overflow: hidden;}
#global-cta section ul li a:hover{ color: #FFF; background: var(--clr-ac); border-radius: 24px;}
#global-cta section ul li a:before{ content: "\e5c8"; font-family: "Material Icons"; position: absolute; top: 50%; right: 2.0em; transform: translateY(-50%); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;}
#global-cta section ul li a:hover:before{ right: 1.6em;}
#global-cta section ul li:nth-child(2) a:before,
#global-cta section ul li:nth-child(3) a:before{ content: "\e895";}

/* footer */
footer#colophon{ position: relative; z-index: 1; padding: var(--pd-m) 0 var(--pd-s) 0; background: #FFF;}
footer#colophon article{ width: 90%; margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
footer#colophon article header{ width: 100%;}
footer#colophon article header h2{ width: 200px; font-size: 1.4rem; line-height: 1.2em; margin: 0px auto; text-align: center;}
footer#colophon article header h2 img{ width: 100%; height: auto;}
footer#colophon article header p{ margin-top: var(--pd-s); padding-top: 1.0em; border-top: solid 1px rgba(0,0,0,0.08); text-align: center;}
footer#colophon article header ul{ display: flex; justify-content: center; flex-wrap: wrap;}
footer#colophon article header ul li{ font-size: var(--font-m); line-height: 1.2em;}
footer#colophon article header ul li span{ display: inline-block; font-size: 1.4rem;}
footer#colophon article header ul li:nth-child(2){ margin-left: 1.0em;}
footer#colophon article section{ width: 100%;}
footer#colophon article section nav{ display: none;}
footer#colophon article section nav ul{ width: 23.5%;}
footer#colophon article section nav ul li{ line-height: 1.2em;}
footer#colophon article section nav ul li a{ display: block; color: #333; text-decoration: none; padding: 0.24em 0; position: relative;}
footer#colophon article section nav ul li a:hover{ color: var(--clr-prim); text-decoration: none;}
footer#colophon article section nav ul li ul{ width: 100%;}
footer#colophon article section nav ul li ul li{ font-size: 1.4rem;}
footer#colophon article section nav ul li ul li a{ color: rgba(51,51,51,0.64);}
footer#colophon article section nav ul li ul li a:hover{ color: rgba(51,51,51,1.0);}
footer#colophon article section nav ul li ul li a:after{ content: "\e5c8"; font-family: "Material Icons"; color: var(--clr-prim); position: absolute; top: 50%; transform: translateY(-50%); left: -1.6em; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; opacity: 0.0;}
footer#colophon article section nav ul li ul li a:hover:after{ opacity: 1.0; left: -1.2em;}
footer#colophon article section nav ul li a span{ display: inline-block; position: relative;}
footer#colophon article section nav ul li a span:before{ content: "\e895"; font-family: "Material Icons"; position: absolute; top: 0; left: calc(100% + 0.5em); opacity: 0.0; transition: all 0.3s ease 0s; color: var(--clr-prim);}
footer#colophon article section nav ul li a:hover span:before{ opacity: 1.0;}

footer#colophon #ft-bottom{ border-top: solid 1px rgba(0,0,0,0.08); margin: 0px auto; margin-top: var(--pd-m); padding-top: var(--pd-m); width: 90%;}
footer#colophon #ft-bottom dl{}
footer#colophon #ft-bottom dl dt{ text-align: center;}
footer#colophon #ft-bottom dl dd{}
footer#colophon #ft-bottom dl dd ul{ display: flex; justify-content: center; flex-wrap: wrap;}
footer#colophon #ft-bottom dl dd ul li:nth-child(n+2){ margin-left: 0.8rem;}
footer#colophon #ft-bottom dl dd ul li a span{ display: block; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center;}
footer#colophon #ft-bottom dl dd ul li a{ display: block; width: 40px; height: 40px; border-radius: 20px; background: var(--clr-ac); display: flex; justify-content: center; align-items: center;}
footer#colophon #ft-bottom dl dd ul li a:hover{ background: rgba(var(--clr-ac-rgb),0.16);}
footer#colophon #ft-bottom dl dd ul li a:hover span svg path{ fill:var(--clr-ac);}
.copyright{ text-align: center; margin-top: 1.0em;}

/* Navigation */
.menu-navigation-container{ display: none;}
#site-navigation{ margin-right: 8.8rem;}
#site-navigation{ display: none;}
#primary-menu{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
#primary-menu li{position: relative; line-height: 1.0em;}
#primary-menu li:nth-child(n+2){}
#primary-menu li a{ display: block; position: relative; cursor: pointer; color: #333; text-decoration: none; padding: 0.8em;}
#primary-menu li a:hover{ color: var(--clr-prim);}
#primary-menu li ul{ display: block; position: absolute; width: 100%; min-width: 14.0em; top: 110%; left: 50%; transform: translateX(-50%); nowhitespace: afterproperty; opacity: 0; transition: all 0.3s ease 0s; visibility: hidden; z-index: 100; background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.16); border-radius: 8px; padding: 0.48em 0.24em;}
#primary-menu li:hover ul{ top: 100%; margin: 0; opacity: 1; visibility: visible;}
#primary-menu li ul li{ text-align: center; border-bottom: solid 1px rgba(0,0,0,0.08);}
#primary-menu li ul li:last-child{ border-bottom: none;}
#primary-menu li ul li a{ display: block;}
#primary-menu li ul li a:hover{}

#primary-menu li#menu-item-37,
#primary-menu li#menu-item-52{ display: none;}
.sp-button{ position: absolute; top: 1.6rem; right: calc(4.8rem + 4%); z-index: 5;}
.sp-button a{ display: block; color: #FFF; text-decoration: none; font-weight: 700; width: 4.8rem; height: 4.8rem; border-radius: 24px; position: relative; overflow: hidden; z-index: 10;}
.sp-button a span{ color: #FFF; font-size: 1.0rem; font-weight: 700; position: absolute; top: 44%; left: 50%; transform: translateX(-50%);}
.sp-button a:hover{ color: #FFF;}
.sp-button a:before{ content: ""; width: 100%; height: 100%; background: var(--clr-cta); position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.3s ease 0s;}
.sp-button a:hover:before{ width: 200%;}
.sp-button a:after{ content: "\e85d"; font-family: "Material Icons"; font-size: 2.4rem; position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%);}

/* entry button */
#primary-menu li#menu-item-50{ margin-left: 1.6rem;}
#primary-menu li#menu-item-50 a{ color: #FFF; line-height: 4.8rem; padding: 0 3.2em; border-radius: 24px; position: relative; overflow: hidden; z-index: 10;}
#primary-menu li#menu-item-50 a:before{ content: ""; width: 100%; height: 100%; background: var(--clr-cta); position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.3s ease 0s;}
#primary-menu li#menu-item-50 a:hover:before{ width: 200%;}
#primary-menu li#menu-item-50 a:after{ content: "\e895"; font-family: "Material Icons"; position: absolute; top: 50%; right: 1.5em; transform: translateY(-50%);}

.menu-toggle { display: none;}

/* Drawer Menu Animation Styles */
.drawer-toggle { position: fixed; top: 1.6rem; right: 2%; z-index: 10000; width: 4.8rem; height: 4.8rem; background: transparent; border: none; background: var(--clr-ac); border-radius: 2.4rem; cursor: pointer; display: flex; justify-content: center; align-items: center;}
.hamburger-lines { position: relative; width: 20px; height: 2px; background-color: #FFF; transition: all 0.4s ease-in-out;}
.hamburger-lines::before,
.hamburger-lines::after { content: ''; display: inline-block; position: absolute; left: 0; width: 16px; height: 2px; background-color: #FFF; transition: all 0.4s ease-in-out;}
.hamburger-lines::before { top: -6px;}
.hamburger-lines::after { top: 6px;}
.drawer-toggle[aria-expanded="true"] .hamburger-lines { background-color: transparent;}
.drawer-toggle[aria-expanded="true"] .hamburger-lines::before { top: 0; transform: rotate(45deg);}
.drawer-toggle[aria-expanded="true"] .hamburger-lines::after { top: 0; transform: rotate(-45deg);}
.drawer-nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(var(--clr-ac-rgb),0.9); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
.drawer-nav.is-active { opacity: 1; visibility: visible;}
.drawer-inner { max-height: 100dvh; overflow-y: auto; padding: 2.4rem; padding-bottom: 50px;}
.drawer-inner ul#drawer-menu{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.drawer-inner ul#drawer-menu li{ width: 100%;}
.drawer-inner ul#drawer-menu li a{ display: block; color: #FFF; text-decoration: none; padding: 0.8em 0; border-bottom: solid 1px rgba(255,255,255,0.48); position: relative;}
.drawer-inner ul#drawer-menu li a:hover{ color: var(--clr-prim);}
.drawer-inner ul#drawer-menu li a:before{ content: ""; width: 0; height: 1px; background: var(--clr-prim); position: absolute; bottom: -1px; right: 0; transition: all 0.3s ease 0s;}
.drawer-inner ul#drawer-menu li a:hover:before{ width: 100%; left: 0;}
.drawer-inner ul#drawer-menu li.menu-item-50 a:after{ content: "\e895"; font-family: "Material Icons"; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.drawer-inner ul#drawer-menu li ul{ margin-top: 0.4em;}
.drawer-inner ul#drawer-menu li ul li{ width: 100%;}
.drawer-inner ul#drawer-menu li ul li a{ padding: 0.32em 0 0.32em 1.5em; border-bottom: none;}
.drawer-inner ul#drawer-menu li ul li a:before{ content: none;}
.drawer-inner ul#drawer-menu li ul li a:after{}
.drawer-inner ul#drawer-menu li ul li a:after{ content: "\e5c8"; font-family: "Material Icons"; color: var(--clr-prim); position: absolute; top: 50%; transform: translateY(-50%); right: 0.8em; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; opacity: 0.0;}
.drawer-inner ul#drawer-menu li ul li a:hover:after{ opacity: 1.0; right: 0;}

body.drawer-open { overflow: hidden;}

/* Forms
========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { overflow: visible;}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { text-transform: none;}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] { -webkit-appearance: button;}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText;}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] { box-sizing: border-box; padding: 0;}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto;}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px;}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Posts and pages
--------------------------------------------- */
.sticky { display: block;}
.post,
.page {}
.updated:not(.published) { display: none;}
.page-content,
.entry-content,
.entry-summary { margin: 0 auto;}
.entry-content{ padding: 0;}
.page-links { clear: both;}

/* Comments
--------------------------------------------- */
.comment-content a { word-wrap: break-word;}
.bypostauthor { display: block;}

/* Widgets
--------------------------------------------- */
.widget {}
.widget select {}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0;}

/* Make sure logo link wraps around logo image. */
.custom-logo-link { display: inline-block;}

/* Captions
--------------------------------------------- */
.wp-caption { margin-bottom: 1.5em; max-width: 100%;}
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto;}
.wp-caption .wp-caption-text { margin: 0.8075em 0;}
.wp-caption-text { text-align: center;}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer { display: none;}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer { display: block;}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;}
.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000;}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus { outline: 0;}

/* Alignments
--------------------------------------------- */
.alignleft { float: left; margin-right: 1.5em; margin-bottom: 1.5em;}
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1.5em;}
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em;}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] { border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; color: rgba(0, 0, 0, 0.8); line-height: 1; padding: 0.6em 1em 0.4em;}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover { border-color: #ccc #bbb #aaa;}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus { border-color: #aaa #bbb #bbb;}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px;}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus { color: #111;}
select { border: 1px solid #ccc;}
textarea { width: 100%;}

/*=============================================================
	common
=============================================================*/
*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

body{ 
	margin:0;
	padding:0;
	text-align:center;
	font-size: 1.6rem;
	line-height: 1.8em;
	font-family: YakuHanJP,"Noto Sans JP", "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Biz UDHaGothic", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
	font-optical-sizing: auto;
	color: #333;
	background: var(--clr-bgc);
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position:relative;
}

a{color: #257bb0; text-decoration:underline; transition: all 0.3s ease 0s;}
a:hover{color: #c14428; text-decoration:none;}

h1,
h2,
h3,
h4,
h5{ font-family: YakuHanJP,"LINE Seed JP", "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Biz UDHaGothic", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;}

/*=============================================================
	reset
=============================================================*/
html { height:100%; font-size: 62.5%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,blockquote,th,td,img,p{ margin: 0px; padding: 0px; font-weight: 400;}
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;}
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{ text-align: left; display: block;}
table { border-collapse: collapse; border-spacing: 0;}
caption,th { text-align: left;}
q:before,q:after { content: '';}
img,
object,
embed { vertical-align: top;}
legend{ display: none;}
h1,h2,h3,h4,h5,h6 { font-size: 100%;}
img,abbr,acronym,fieldset{ border:none;}
li{ list-style-type: none;}
svg{ fill: currentColor;}
input[type="submit"]{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none;}
figure{ margin-bottom: 0;}

/*---------- align ----------*/
.align-left{ text-align: left;}
.align-right{ text-align: right;}
.align-center{ text-align: center;}

/*----- clearfix -----*/
.container,
.clearfix { zoom:1;}
.container:after,
.clearfix:after{ content: ""; display: block; clear: both;}
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px;}

/*---- Google Budou-X ----*/
main p,
main dt,
main dd,
main li,
main td { word-break: auto-phrase; overflow-wrap: break-word;}