/*!
Theme Name: canvas
Theme URI: http://underscores.me/
Author: 株式会社 キャンバス
Author URI: https://canvas-web.jp/
Description: キャンバスは京都・舞鶴を拠点にWeb・デザインを手がける制作会社です。
Version: 1.2.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: canvas
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

canvas is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
@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: block;}
.spbr{ display: none;}

/*--------------------------------------------------------------
# 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: 72%; order: 1;}
#archive #secondary,
#primary #secondary,
#single-post #secondary{ width: 24%; order: 2;}

/* 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.8em 3.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: 1.0em; 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; 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: 23.5%; margin-right: 2%; position: relative;}
.top-news-list .news-card:nth-child(4n){ margin-right: 0;}
.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: 47%;}
.home-contents section figure img{ width: 100%; height: auto; border-radius: 16px; overflow: hidden;}
.home-contents section .detail{ width: 47%;}
.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: 2.0em;}
.home-contents section .detail nav ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.home-contents section .detail nav ul li{ width: 47%;}
.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: 2;}
.home-contents.right section .detail{ order: 1;}
.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;}
.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% + 3.2rem); 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 32px 32px;}
.contents.home-recruit:after{ content: ""; width: 100%; height: calc(100% + 3.2rem); background:rgba(var(--clr-ac-rgb),0.72); background-size: cover; position: absolute; top: 0; left: 0; z-index: -1; border-radius: 0 0 32px 32px;}
.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: 47%; background: #FFF; border: solid 8px var(--clr-bgs); border-radius: 24px; padding: 2.0em; position: relative;}
.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{ position: absolute; bottom: 2.0em; right: 2.0em;}
.home-recruit .column .inner p{ width: 50%; margin-top: 1.5em;}

/*--------------------------------------------------------------
# middle page
--------------------------------------------------------------*/
#page-title{ width: 90%; margin: 0px auto; max-width: 1200px; position: relative; padding: var(--pd-xl) 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: 54vw; height: 140%; background: #CCC; border-radius: 24px 0 0 24px; position: absolute; top: 50%; left: 46%; transform: translateY(-50%); 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); line-height: 1.2em; color: var(--clr-ac);}
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: 45%;}
.link-banner ul li a{ display: block; border-radius: 24px 0; overflow: hidden; width: 100%; padding-bottom: 40%; 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 */
.contents.hero{ position: relative; z-index: 4; padding-bottom: var(--pd-xl) !important;}
.contents.hero:before{ content: ""; width: 100%; height: calc(100% + 5.2rem); background: #FFF; border-radius: 0; position: absolute; bottom: 0; left: 0; z-index: -2;}
.contents.hero:after{ content: ""; width: 100%; height: calc(100% + 5.2rem); background: url("images/company/s_takihana.webp") no-repeat right top; background-size: contain; position: absolute; bottom: 0; right: 0; 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;}

/* 経営理念 */
.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{ width: 23.5%; padding: 1.0em; line-height: 1.4em; background: var(--clr-bgs);}
.contents.outline section table tr td{ width: 76.5%; padding: 1.0em; padding-left: 2.0em; 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: 48%; 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; justify-content: space-between; 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.5em;}
.navigation section ul.anchor li a:hover{ border-radius: 24px;}
.navigation section ul.anchor li a em{ font-style: normal; position: relative;}
.navigation section ul.anchor li a em:after{ content: "\e313"; font-family: "Material Icons"; position: absolute; top: 50%; left: calc(100% + 1.0em); transform: translateY(-50%); transition: all 0.3s ease 0s;}
.navigation section ul.anchor li a span{ width: 7.2rem; height: 7.2rem; border-radius: 100%; overflow: hidden;}
.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: 45%;}
article.section ul li a{ display: block; border-radius: 24px 0; overflow: hidden; width: 100%; padding-bottom: 40%; 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-l) 2.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{ margin-top: 0 !important; position: absolute; top: 0; right: 0;}

/* 業種特化型IT事業 */
.division.system .column{ margin-top: var(--pd-l); display: flex; justify-content: space-between; flex-wrap: wrap;}
.division.system .column .inner{ width: 48%; 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;}
.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; min-height: 4.0lh;}
.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-s); line-height: 1.0em; position: absolute; bottom: 1.25em; right: 1.28em;}
.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: 31%;}
.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-s); line-height: 1.0em; position: absolute; bottom: 1.25em; right: 1.28em;}
.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: 48%; background: #DCECEF; border-radius: 24px 0; padding: 2.0em; position: relative;}
.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: 1.4em 0;}
.division.ai-iot .column .inner .small-button{ position: absolute; top: 1.6em; right: 2.0em; margin-top: 0 !important;}

/*--------------------------------------------------------------
# 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: 4.0em; margin-top: var(--pd-s);}
.work .column dl{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.work .column dl:nth-child(n+2){ margin-top: var(--pd-m);}
.work .column dl dt{ width: 18.4%; padding-bottom: 18.4%; background: var(--clr-prim); border-radius: 100%; position: relative;}
.work .column dl dt span{ color: #FFF; line-height: 1.0em; display: block; text-align: center; position: absolute; bottom: 64%; left: 50%; transform: translateX(-50%);}
.work .column dl dt strong{ display: block; width: 80%; text-align: center; font-size: var(--font-m); line-height: 1.2em; font-weight: 700; color: #FFF; position: absolute; top: 48%; left: 50%; transform: translateX(-50%); word-break: keep-all;}
.work .column dl dd{ width: calc(96% - 18.4%); font-weight: 700; line-height: 1.6em;}

.desc{}
.desc .column{ margin-top: var(--pd-m); display: flex; justify-content: space-between; flex-wrap: wrap;}
.desc .column .inner{ width: 23.5%;}
.desc .column .inner figure{ margin-bottom: 1.0em;}
.desc .column .inner figure img{ width: 100%; height: auto; border-radius: 16px; overflow: hidden;}
.desc .column .inner h3{ font-size: var(--font-s); line-height: 1.2em; font-weight: 700; margin-bottom: 0.5em;}

.work-movie figure{ width: 64%; padding-bottom: 36%; 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: 31%; border-radius: 24px 0; background: #FFF; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.16);}
.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:before{ content: ""; width: 96%; height: 100%; background: #FFF; border-radius: 40px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;}
.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: 100%; 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-xl) 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;}
@media screen and (min-width: 769px){
.marquee-item { width: 20vw; padding: 0 15px; }
}
.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: calc(100% - 10vw); margin-left: auto;}
.schedule .column .inner{ width: 31%;}
.schedule .column .inner h3{ 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: 2.5em 0; position: relative;}
.schedule .column .inner h3:after{ content: "\e313"; font-family: "Material Icons"; line-height: 1.0em; position: absolute; bottom: 2.0rem; left: 50%; transform: translateX(-50%);}
.schedule .column .inner h3 span{ width: 8.0rem; height: 8.0rem; border-radius: 100%; background: #EEE; position: absolute; top: -4.0rem; 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-l);}
.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); position: relative;}
.schedule .column .inner dl dt{ font-weight: 700;}
.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{ min-height: 5.0lh;}
.schedule .column .inner dl.time1800 dd{ min-height: 1.0lh !important;}
.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.sales01 dl:after{ content: "\e8b5"; font-family: "Material Icons"; font-size: var(--font-m); line-height: 1.0em; color: var(--clr-prim); position: absolute; top: 1.0em; left: -10vw;}
.schedule .column .inner.sales01 dl:before{ font-size: var(--font-m); line-height: 1.0em; font-weight: 700;color: var(--clr-prim); position: absolute; top: 1.0em; left: -8.0vw;}
.schedule .column .inner.sales01 dl.time0845:before{ content: "08:45";}
.schedule .column .inner.sales01 dl.time0900:before{ content: "09:00";}
.schedule .column .inner.sales01 dl.time0905:before{ content: "09:05";}
.schedule .column .inner.sales01 dl.time1200:before{ content: "12:00";}
.schedule .column .inner.sales01 dl.time1300:before{ content: "13:00";}
.schedule .column .inner.sales01 dl.time1400:before{ content: "14:00";}
.schedule .column .inner.sales01 dl.time1500:before{ content: "15:00"; top: 0.5em;}
.schedule .column .inner.sales01 dl.time1500:after{ top: 0.5em;}
.schedule .column .inner.sales01 dl.time1600:before{ content: "16:00";}
.schedule .column .inner.sales01 dl.time1700:before{ content: "17:00";}
.schedule .column .inner.sales01 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: 31%; background: #FFF; border-radius: 24px 0; padding: 1.0em; position: relative;}
.benefits .column .inner:nth-child(n+4){ 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: 47%;}
.environment .column .inner:nth-child(n+3){ 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: 3.0em; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}
.btm-contact ul li{ width: 31%; margin-right: 3.5%;}
.btm-contact ul li:last-child{ margin-right: 0;}
.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-l);}
.anchor-list li{ width: 31%; position: relative; z-index: 1;}
.anchor-list li:nth-child(1):after{ content: ""; width: 8.0rem; height: 8.0rem; background: url("images/recruit/icon_01.svg") no-repeat; background-size: cover; border-radius: 100%; position: absolute; top: -27%; left: 50%; transform: translateX(-50%); z-index: 2;}
.anchor-list li:nth-child(2):after{ content: ""; width: 8.0rem; height: 8.0rem; background: url("images/recruit/icon_02.svg") no-repeat; background-size: cover; border-radius: 100%; position: absolute; top: -27%; left: 50%; transform: translateX(-50%); z-index: 2;}
.anchor-list li:nth-child(3):after{ content: ""; width: 8.0rem; height: 8.0rem; background: url("images/recruit/icon_03.svg") no-repeat; background-size: cover; border-radius: 100%; position: absolute; top: -27%; 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: 4.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: 50%; list-style-type: disc; list-style-position: inside;}
body#recruit .contents.guideline section table tr td ul li:nth-child(n+3){ margin-top: 0.24em;}

.contents.flow{}
.contents.flow .column{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: var(--pd-s);}
.contents.flow .column .inner{ width: 13%; margin-right: 1.5%; position: relative;}
.contents.flow .column .inner:after{ content: "\e5df"; font-family: "Material Icons"; font-size: var(--font-m); line-height: 1.0em; color: var(--clr-ac); position: absolute; top: 18%; right: -13%;}
.contents.flow .column .inner:last-child{ margin-right: 0;}
.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 { display: flex; flex-direction: column; gap: var(--pd-l); width: 100% !important; max-width: none !important;}
.contents.menu .half { display: grid; grid-template-columns: minmax(0, 1fr) 600px 36px 564px minmax(20px, 1fr); align-items: center; width: 100%;}
.contents.menu .half .inner { grid-column: 4; padding: var(--pd-xl) 0; width: 100%; position: relative; z-index: 2;}
.contents.menu .half .inner h2 { font-size: var(--font-l); font-weight: 700; 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 { grid-column: 1 / 3; grid-row: 1; margin: 0; width: 100%; height: 100%; position: relative; z-index: 1;}
.contents.menu .half figure img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 32px 32px 0;}
@media (max-width: 1240px) { .contents.menu .half { grid-template-columns: 0 50% 3% 47% minmax(20px, 1fr);}}
@media (max-width: 768px) { .contents.menu .half { display: block; padding: 0 20px;} .contents.menu .half figure { margin: 0 -20px var(--pd-m); height: auto;} .contents.menu .half figure img { border-radius: 0; aspect-ratio: 3 / 2;} .contents.menu .half .inner { padding: 0 0 var(--pd-m);}}

/*--------------------------------------------------------------
# 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: 47%; order: 1;}
.contents.briefing header figure img{ width: 100%; height: auto; border-radius: 16px; overflow: hidden;}
.contents.briefing header .inner{ width: 47%; order: 2; position: relative;}
.contents.briefing header .inner h2{ font-size: var(--font-xl); line-height: 1.2em;}
.contents.briefing header .inner p{ margin-top: var(--pd-s);}
.contents.briefing header .inner .small-button{ margin-top: 0 !important; position: absolute; top: 0.1em; right: 0;}
.contents.briefing .column03{ margin-top: var(--pd-l); display: flex; justify-content: space-between; flex-wrap: wrap;}
.contents.briefing .column03 .inner{ width: 31%; background: #FFF; border-radius: 24px 0; padding: 1.0em;}
.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{}
.contents.internship figure{ width: 100%; padding-bottom: 23.5%; border-radius: 24px; margin-bottom: var(--pd-s); overflow: hidden; position: relative;}
.contents.internship figure img{ width: 100%; height: auto; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}

.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{ width: 23.5%; padding: 1.0em; line-height: 1.4em; background: var(--clr-bgs);}
.contents.guideline section table tr td{ width: 76.5%; padding: 1.0em; padding-left: 2.0em; 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{ padding-left: 1.0em;}
.contents.guideline section table tr td span{ display: block;}

.contents.entry{}
.contents.entry ul{ width: 64%; margin: var(--pd-s) auto 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
.contents.entry ul li{ width: 47%;}
.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-l);}
.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: 72%;}
.tips ol li{ width: 31%;}
.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;}
.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-m); 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 */
body.wp-singular .breadcrumbs span.post-post{}
#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: 2.4rem 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: 240px;}
header#masthead .site-branding .site-logo img{ width: 100%; height: auto;}
header#masthead .site-branding .site-title{ margin-left: 0.56em; line-height: 1.1em;}
header#masthead .site-branding .site-title span.en{ display: block; font-size: 1.0em; 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(249,243,235,0.8); 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: var(--pd-m) auto 0; 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; margin-top: 2.0em;}
#global-cta section ul li{ width: 23.5%; margin: 0 1%;}
#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: 32%;}
footer#colophon article header h2{ width: 240px; font-size: 1.4rem; line-height: 1.2em;}
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);}
footer#colophon article header ul{ margin-top: 0.5em; display: flex; justify-content: flex-start; 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: 64%;}
footer#colophon article section nav{ display: flex; justify-content: space-between; flex-wrap: wrap;}
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:nth-child(n+2){ margin-top: 0.5em;}
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%; margin-top: 0.5em;}
footer#colophon article section nav ul li ul li{}
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-s); padding-top: var(--pd-s); width: 90%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
footer#colophon #ft-bottom dl{ display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}
footer#colophon #ft-bottom dl dt{}
footer#colophon #ft-bottom dl dd{ padding-left: 1.5em;}
footer#colophon #ft-bottom dl dd ul{ display: flex; justify-content: flex-start; 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);}

/* Navigation */
.menu-navigation-container{ display: none;}
#site-navigation{}
#site-navigation{}
#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,
.sp-button{ display: none;}


@media screen and (max-width: 1240px) {
#primary-menu{ margin-right: 8.8rem;}
#primary-menu li#menu-item-38,
#primary-menu li#menu-item-39,
#primary-menu li#menu-item-42,
#primary-menu li#menu-item-45,
#primary-menu li#menu-item-46,
#primary-menu li#menu-item-47{ display: none;}
.drawer-toggle{ display: flex !important;}
}

/* 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: 2.4rem; right: 2%; z-index: 10000; width: 8.0rem; height: 4.8rem; background: transparent; border: none; background: var(--clr-ac); border-radius: 2.4rem; cursor: pointer; display: none; justify-content: center; align-items: center;}
.hamburger-lines { position: relative; width: 24px; height: 2px; background-color: #FFF; transition: all 0.4s ease-in-out;}
.hamburger-lines::before, .hamburger-lines::after { content: ''; position: absolute; left: 0; width: 24px; height: 2px; background-color: #FFF; transition: all 0.4s ease-in-out;}
.hamburger-lines::before { top: -8px;}
.hamburger-lines::after { top: 8px;}
.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 { width: 100%; max-width: 800px; padding: 2.4rem; max-height: 100dvh; overflow-y: auto; box-sizing: border-box;}
.drawer-inner::-webkit-scrollbar { width: 6px;}
.drawer-inner::-webkit-scrollbar-track { background: transparent;}
.drawer-inner::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 3px;}
.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: 1.2em 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.8em;}
.drawer-inner ul#drawer-menu li ul li{ width: 100%;}
.drawer-inner ul#drawer-menu li ul li a{ padding: 0.4em 0 0.4em 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;}