@charset "UTF-8";
/* CSS Reset */
/*
  Made by Elly Loel - https://ellyloel.com/
*/
*{margin:0;padding:0;line-height:calc(0.25rem+1em+0.25rem)}*,::before,::after{box-sizing:border-box}*:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;}
html{block-size:100%;-webkit-text-size-adjust:none}
@media(prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
body{text-rendering:optimizeSpeed;min-block-size:100%}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:5rem}:where(input,button,textarea,select),:where(input[type="file"])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(textarea){resize:vertical}
@supports(resize:block){:where(textarea){resize:block}}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}
h1{font-size:2em}:where(ul,ol){list-style-position:inside}:where(ul,ol)[role="list"]{list-style:none}
a:not([class]){text-decoration-skip-ink:auto}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){cursor:pointer;touch-action:manipulation}:where(input[type="file"]){cursor:auto}:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{cursor:pointer}
@media(prefers-reduced-motion:no-preference){:focus-visible{transition:outline-offset 145ms cubic-bezier(0.25,0,0.4,1)}:where(:not(:active)):focus-visible{transition-duration:0.25s}}:where(:not(:active)):focus-visible{outline-offset:0px}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"]),:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;text-align:center}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])[disabled]{cursor:not-allowed}
/* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*/
body > header {
    z-index: 1;
}

body > footer {
    z-index: 2;
}
body > main {
    z-index: 0;
}
.js-text-anime {
    opacity: 0;
}
.js-text-anime:has(span) {
    opacity: 1;
}

[data-aos-delay='3100'] {
  transition-delay: 3.1s !important;
}
[data-aos-delay='3200'] {
  transition-delay: 3.2s !important;
}
[data-aos-delay='3300'] {
  transition-delay: 3.3s !important;
}
[data-aos-delay='3400'] {
  transition-delay: 3.4s !important;
}
[data-aos-delay='3500'] {
  transition-delay: 3.5s !important;
}
[data-aos-delay='3600'] {
  transition-delay: 3.6s !important;
}
[data-aos-delay='3700'] {
  transition-delay: 3.7s !important;
}
[data-aos-delay='3800'] {
  transition-delay: 3.8s !important;
}
[data-aos-delay='3900'] {
  transition-delay: 3.9s !important;
}
[data-aos-delay='4000'] {
  transition-delay: 4.0s !important;
}
[data-aos-delay='1050'] {
  transition-delay: 1.05s !important;
}
[data-aos-delay='1150'] {
  transition-delay: 1.15s !important;
}
[data-aos-delay='1250'] {
  transition-delay: 1.25s !important;
}
[data-aos-delay='1350'] {
  transition-delay: 1.35s !important;
}
[data-aos-delay='1450'] {
  transition-delay: 1.45s !important;
}
[data-aos-delay='1550'] {
  transition-delay: 1.55s !important;
}
[data-aos-delay='1650'] {
  transition-delay: 1.65s !important;
}
[data-aos-delay='1750'] {
  transition-delay: 1.75s !important;
}
[data-aos-delay='1850'] {
  transition-delay: 1.85s !important;
}
[data-aos-delay='1950'] {
  transition-delay: 1.95s !important;
}
[data-aos-delay='2050'] {
  transition-delay: 2.05s !important;
}
[data-aos-delay='2150'] {
  transition-delay: 2.15s !important;
}
[data-aos-delay='2250'] {
  transition-delay: 2.25s !important;
}
[data-aos-delay='2350'] {
  transition-delay: 2.35s !important;
}
[data-aos-delay='2450'] {
  transition-delay: 2.45s !important;
}
[data-aos-delay='2550'] {
  transition-delay: 2.55s !important;
}
[data-aos-delay='2650'] {
  transition-delay: 2.65s !important;
}
[data-aos-delay='2750'] {
  transition-delay: 2.75s !important;
}
[data-aos-delay='2850'] {
  transition-delay: 2.85s !important;
}
[data-aos-delay='2950'] {
  transition-delay: 2.95s !important;
}
[data-aos-delay='3050'] {
  transition-delay: 3.05s !important;
}
[data-aos-delay='3150'] {
  transition-delay: 3.15s !important;
}
[data-aos-delay='3250'] {
  transition-delay: 3.25s !important;
}
[data-aos-delay='3350'] {
  transition-delay: 3.35s !important;
}
/* View Transitions APIの有効化 */
@view-transition {
  navigation: auto;
}
::view-transition-old(main) {
  animation: fade-out 10s ease-out;
}
 
::view-transition-new(main) {
  animation: fade-in 10s ease-out;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
 
@keyframes slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
 
@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes scale-up {
  from {
    scale: 0;
  }
}

@keyframes scale-down {
  to {
    scale: 0;
  }
}


/* 縮小しながらフェードアウト */
@keyframes shrink {
  to {
    scale: 0.8;
    opacity: 0.5;
  }
}

/* 拡大しながらフェードイン */
@keyframes grow {
  from {
    scale: 0.8;
    opacity: 0.5;
  }
}
/* どこでも使用可能 */
:root {
    --mplus: "M PLUS 1",sans-serif;
    --kiwi: "Kiwi Maru", serif;
    --noto: "Noto Sans JP", sans-serif;
    --zen: "Zen Old Mincho", serif;
    --emble: "Emblema One", system-ui;
    --patua: "Patua One", serif;
    --jred: rgb(230,0,18);
    --white: #fff;
    --sblack: #333;
    --lgray: #ddd;
    --bg: #f3f8fa;
  }
ul {
    list-style: none;
}
a {
    color: inherit;
    text-decoration: none;
}
a:visited {
    color: initial;
}

body {
    /* font-family: "M PLUS 1",sans-serif; */
    font-family: var(--noto);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;    
    line-height: 1.6;
	background-color: rgb(255, 255, 255);
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.2)), linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 10%);
	/* background-image:
	 linear-gradient(45deg, rgb(245, 245, 245) 25%, transparent 25%,
	  transparent 75%, rgb(245, 245, 245) 75%, rgb(245, 245, 245)),
	 linear-gradient(-45deg, rgb(245, 245, 245) 25%, transparent 25%,
	  transparent 75%, rgb(245, 245, 245) 75%, rgb(245, 245, 245));
	background-size: 30px 30px;
	background-position: 0 0, 15px 15px; */
}
.container {
    position: relative; /* canvasの親要素を相対配置 */
}
canvas {
    position: absolute; /* 絶対配置に変更 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .05;
    pointer-events: none;
    z-index: -1;
}
.m-plus-1 {
    font-family: "M PLUS 1", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }
.zen {
    font-family: var(--zen);
    font-weight: 400;
    font-style: normal;
    font-size: 20px;  
}
.shadow {
    filter: drop-shadow(2px 4px 6px lightgray);
}
.aos-init img {
    filter: grayscale(1);
    transition: 1s;
}
.aos-init.aos-animate img {
    filter: grayscale(0);
    transition-delay: 2s;
}


.underline {
	background: linear-gradient(red, red) 0 100%/0 2px no-repeat;
	transition: background 1s;
	text-decoration: none;
}

.underline-after {
	background-size: 100% 2px;
}

/*=============
.css_button
==============*/
button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
}
button.learn-more {
    width: 13rem;
    height: auto;
}
button.learn-more .circle {
    transition: all 0.45s cubic-bezier(0.65,0,.076,1);
    /* transition: 0.45s; */
    /* transition: cubic-bezier(0.65,0,.076,1); */
    /* @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1)); */
    position: relative;
    display: block;
    margin: 0;
    width: 3rem;
    height: 3rem;
    background: var(--sblack);
    border-radius: 1.625rem;
}
button.learn-more .circle .icon {
    transition: all 0.45s cubic-bezier(0.65,0,.076,1);
    /* @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1)); */
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: var(--white);    
}
button.learn-more .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65,0,.076,1);
    /* @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1)); */
    left: 0.625rem;
    width: 1.125rem;
    height: 0.125rem;
    background: none;  
}
button.learn-more .circle .icon.arrow.reverse {
    left: 1.25rem;
}
button.learn-more .circle .icon.arrow::before {
    position: absolute;
    content: '';
    top: -0.25rem;
    right: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid #fff;
    border-right: 0.125rem solid #fff;
    transform: rotate(45deg);
}
button.learn-more .circle .icon.arrow.reverse::before {
    transform: rotate(225deg);
    right: 0.475rem;
}
button.learn-more .button-text {
    transition: all 0.45s cubic-bezier(0.65,0,.076,1);
    /* @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1)); */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 0;
    margin: 0 0 0 1.85rem;
    color: var(--sblack);
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;   
}

button:hover .circle {
    width: 100%;
    background-color: var(--sblack);
}
button:hover .circle .icon.arrow {
    background: var(--white);
    transform: translate(1rem, 0);
}
button:hover .circle .icon.arrow.reverse {
    background: var(--white);
    transform: translate(.5rem, 0);
}
button:hover .button-text {
    color: var(--white);  
}


/*=============
.bg_pattern
==============*/

._bg_pattern {
    /* width: 100vw; */
    /* height: 100vh; */
    background-color: #fff;
    z-index: -1;
  }
  ._Paper_v2 {
    background-image:
      repeating-linear-gradient(to bottom,
        transparent 25px,
        rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
        transparent 27px,  transparent 51px, 
        rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
        transparent 53px,  transparent 77px, 
        rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
        transparent 79px,  transparent 103px, 
        rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
        transparent 105px,  transparent 129px, 
        rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),
  
      repeating-linear-gradient(to right,
        transparent 25px,
        rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
        transparent 27px,  transparent 51px, 
        rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
        transparent 53px,  transparent 77px, 
        rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
        transparent 79px,  transparent 103px, 
        rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
        transparent 105px,  transparent 129px, 
        rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);
  }
/* レスポンシブデザイン */
.header_wrap {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #f0f0f0;
    padding: 10px;
    z-index: 100;
    font-weight: 600;
    filter: none;
    /* backdrop-filter: drop-shadow(2px 4px 6px lightgray); */
    /* filter: drop-shadow(2px 4px 6px lightgray); */
    /* box-shadow: 2px 4px 6px lightgray; */
}

.header-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    /* justify-content: space-between; */
    /* align-items: center; */
    /* flex-direction: column; */
    /* align-items: flex-start; */
}

.header-inner .logo {
    width: 200px;
}
.header-inner .logo a,
.header-inner .logo a img {
    width: 100%;
}
.header-inner .logo a {
    display: grid;
    align-items: center;
    justify-items: center;
}
.header-inner > nav {
    display: none;
}
.header-inner > div.sp_nav {
    display: block;
}

/* メニューのスタイル */
.menu {
    position: fixed;
    top: -100%;
    right: 0;
    /* right: -100%; 初期状態では画面の外に隠れている */
    width: 300px;
    /* height: 100%; */
    /* background-color: #eee; */
    background-color: #fff;
    color: #333;
    transition: top 0.6s ease; /* スライドインのアニメーション */
    padding: 20px;
    box-sizing: border-box;
    z-index: 10;
    background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),

    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);    
}

.menu.open {
    top: 0;
    filter: drop-shadow(2px 4px 6px lightgray);
    /* right: 0; */
}
  
/* ボタンのスタイル */
.hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    cursor: pointer;
    z-index: 20;
}
.menu ul {
    display: flex;
    flex-direction: column;
}
.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #333;
    margin: 5px 0;
    transition: 0.4s;
}

/* バツ印に変化するスタイル */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* メニューリストのスタイル */
.menu ul {
    list-style-type: none;
    padding: 0;
    margin-top: 60px;
}
  
.menu li {
    padding: 20px 10px;
    border-bottom: 1px dotted #444;
}

.menu li a {
    color: #333;
    text-decoration: none;
    display: block;
}

nav ul {
    /* flex-direction: column; */
    list-style: none;
    display: flex;
}


nav li a::after {
    content: '';
    display: block;
    background-color: var(--jred);
    height: 2px;
    width: 100%;
    transition: .2s;
    justify-content: center;
    transform: rotateY(90deg);
}
nav li a:hover::after {
    transform: rotateY(0deg);
}
header ~ main {
    padding-top: 38px;
}

/* メインコンテンツ */
main {
    /* max-width: 960px; */
    margin: 0 auto;
    /* padding: 20px; */
}
main > section.bk {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color:rgba(255,255,255,0.9);
    background-blend-mode:lighten;    
}
section > .wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 100px 20px;
}

/* スライダー */
.splide {
    width: 100%;
    height: clamp(12.5rem, 3.571rem + 44.64vw, 25rem);
    background-color: #ccc; /* スライダーの色 */
}
.top_mv {
    position: relative;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    width: 100%;
    transition: 3s;
    opacity: 0;
}
.top_mv video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top_mv.delay {
    opacity: 1;
}
.mv_border {
    width: 100%;
    height: 100%;
  /* background: */
    /* repeating-linear-gradient(0deg, rgba(0,255,0,.05) 0px, rgba(0,255,0,.05) 2px, rgba(0,255,0,0)2px,rgba(0,255,0,0) 4px) left / 50% 100%, */
    /* repeating-linear-gradient(0deg, rgba(255,0,0,.05) 0px, rgba(255,0,0,.05) 2px, rgba(255,0,0,0) 2px, rgba(255,0,0,0) 4px) right / 50% 100%; */
    /* background-repeat: no-repeat; */
    background:repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.1) 2px,rgba(0,0,0,0) 4px
        );
}
.top_mv > * {
    grid-row: 1;
    grid-column: 1;
}
.splide__track,
.splide__list,
.splide__slide,
.splide__slide img {
    width: 100%;
    height: 100%;
}
.splide__slide img,
.splide__slide video {
    object-fit: cover;
}
.splide_wrap,
.mv {
    display: grid;
    align-items: center;
    justify-items: center;
}
.splide_wrap > div > div.splide {
    opacity: 0;
    transition: 3s;
}
.splide_wrap > div > div.splide.is-initialized {
    opacity: 1;
}
.mv_text {
    position: absolute;
}
.js-text-anime {
    font-size: clamp(1.625rem, 0.194rem + 6.11vw, 3.125rem);
}
.js-text-anime.detail {
    font-size: clamp(1.25rem, 0.875rem + 1.88vw, 2rem);
}
.js-text-anime span {
    display: inline-block;
    opacity: 0;
    transition: 0.5s;
    filter: blur(5px);
    transform: scale(.8);
}
.js-text-anime span.true {
    filter: blur(0);
    transform: scale(1);
    text-shadow: 0 0 10px #fff,
    0 0 10px #fff,
    0 0 10px #fff,
    0 0 10px #fff,
    0 0 10px #fff;
}

h1 {
    font-family: var(--kiwi);
    font-weight: normal;
}
h1.js-text-anime:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: solid 4px rgb(230, 0, 18);
	animation: border_anim 2s linear forwards;
}
h1.js-text-anime.detail:before {
    animation: none;
}
h1.js-text-anime.detail span {
    border-bottom: solid 2px var(--jred);
}
@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}
section > .wrap div + div.btn_wrap,
section form dl + div.btn_wrap {
    margin-top: 40px;
}
.h3_style {
    margin-bottom: 10px;
}
.h2_style {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    justify-items: center;
    align-items: center;
    margin-bottom: 10px;
}
.bk_eng {
    grid-row: 1;
    grid-column: 1;
    -webkit-text-stroke: 1px var(--sblack);
    text-stroke: 1px var(--sblack);
    text-shadow: -2px -2px 0 var(--white);
    color: rgba(0, 0, 0, 0);
    font-family: var(--patua);
    opacity: .3;
    line-height: 1;
    font-size: 40px;
    padding-bottom: 40px;
    z-index: 0;
}
.h2_style h2 {
    grid-row: 1;
    grid-column: 1;
    z-index: 1;
}
h2 {
    font-size: 24px;
    display: flex;
    /* margin-bottom: 20px; */
    /* display: inline-block; */
    /* font-weight:bold; */
    /* border-left: solid 5px #38b3f2; */
    /* border-bottom: solid 1px #38b3f2; */
    /* margin: 0 0 20px 0; */
    /* padding: 0 10px 5px 10px; */
}
/* h2 span:has(img) {
    border-left: solid 5px #e60012;
}
h2 span {
    margin: 0 0 20px 0;
    padding: 0 10px 5px 10px;
    border-bottom: solid 1px #e60012;   
} */
h2 img {
    width: 40px;
    margin-right: 20px;
}


.grid_wrap {
    display: grid;
    grid-template-columns: .5fr 1fr .5fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
}
.left {
    grid-template-areas:
    ".... image ...."
    ".... ..... ...."
    "text text text";
}
.right {
    grid-template-areas:
    "image image image"
    ".... ..... ...."
    "text text text";
}
.image {
    grid-area: image;
    justify-items: center;
}
.text {
    grid-area: text;
}
.background_movie {
    /* position: relative; */
    opacity: .1;
    z-index: 0;
    object-fit: cover;
    height: 100%;
}

.common_contact {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    background:repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.1) 2px,rgba(0,0,0,0) 4px
        );
}
.common_contact > video {
    height: 100%;
    aspect-ratio: initial;
}
.common_contact > video,
.common_contact > .wrap {
    grid-column: 1;
    grid-row: 1;
}
/* お知らせ */
.news {
    background-image: url(img/info_bk.webp);
}
/* .news {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto 1fr;
    background:repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.1) 2px,rgba(0,0,0,0) 4px
        );
}
.news .background_movie {
    width: 100%;
    object-fit: cover;
}
.news > * {
    grid-row: 1/4;
    grid-column: 1/4;
} */
.news .wrap {
    width: 100%;
    z-index: 2;
    display: grid;
}
.common_contact .wrap p {
    text-align: center;
    font-size: clamp(0.875rem, 0.461rem + 0.86vw, 1rem);
}
.common_contact .wrap {
    width: 100%;
}
.common_contact .wrap > * + * {
    margin-top: 40px;
}
.news .wrap .news_lst {
    /* grid-row: 1; */
}
.news .wrap .blog_lst {
    /* grid-row: 3; */
}
.news .wrap > * {
    width: 100%;
    /* grid-column: 1; */
}
.news .wrap > * + * {
    margin-top: 60px;
}
.news-list,
.news-list ul {
    width: 100%;
}
.news-list li {
    width: 100%;
    white-space: wrap;
    overflow: initial;
    text-overflow: initial; 
}
.news-list a {
    background-image: -moz-linear-gradient(left, rgba(230, 0, 18, 0.7) 0%,rgba(230, 0, 18, 0.7) 80%, rgba(230, 0, 18, 0) 100%);
    background-image: -webkit-linear-gradient(left, rgba(230, 0, 18, 0.7) 0%,rgba(230, 0, 18, 0.7) 80%, rgba(230, 0, 18, 0)  100%);
    background-image: linear-gradient(to right, rgba(230, 0, 18, 0.7) 0%,rgba(230, 0, 18, 0.7) 80%, rgba(230, 0, 18, 0)  100%);
    background-position: 0px 98%;
    background-size: 0px 2px;
    background-repeat: no-repeat;
        -webkit-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    transition: 0.5s ease;
    padding-bottom: 5px;
    padding-right: 30px;
}
.news-list a:hover {
    background-size: 100% 2px;
}
.news-list ul > li {
    padding-bottom: 15px;
    border-bottom: dotted 1px #000;
    font-size: clamp(0.875rem, 0.461rem + 0.86vw, 1rem);
}
.news-list ul > li + li {
    margin-top: 15px;
}
/*お知らせ・ブログ（下層）*/
.news.mv {
    background-image: url(img/news.webp);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: clamp(12.5rem, 8.036rem + 22.32vw, 18.75rem);
}
.blog.mv {
    background-image: url(img/blog.webp);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: clamp(12.5rem, 8.036rem + 22.32vw, 18.75rem);
}
.news_list {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    background:repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.1) 2px,rgba(0,0,0,0) 4px
        );
}
.news_list > video {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 16 / 4;
    width: 100%;
}
.news_list > .wrap {
    width: 100%;
    grid-column: 1;
    grid-row: 1;
}
.contents_wrap > * + * {
    margin-top: 20px;
}
.pnavi {
    margin: 30px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.pnavi > * {
    color: var(--sblack);
    background-color: var(--white);
    width: 40px;
    height: 40px;
    font-family: var(--kiwi);
    font-size: 18px;
    /* border-radius: 50%; */
    padding: 0 20px;
    border-radius: 3px;
    border: solid 1px var(--sblack);
    display: grid;
    align-items: center;
    justify-content: center;
    margin: 5px;
}
.pnavi > .prev,
.pnavi > .next {
    width: 100px;
}
.pnavi > .current {
    color: var(--white);
    background-color: var(--sblack);
}


/* 会社概要 */
.company-overview {
    background-image: url(img/news_bk.webp);
}



.company-overview p {
    margin-bottom: 10px;
}

/* 会社概要ページ【下層】 */
.company.mv {
    background-image: url(img/company.webp);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: clamp(12.5rem, 8.036rem + 22.32vw, 18.75rem);
}

.message {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    background:repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.1) 2px,rgba(0,0,0,0) 4px
        );
}
.message > * {
    grid-row: 1/2;
    grid-column: 1/2;
}
.company-text > h3 + p,
.company-text > p + p {
    margin-top: 20px;
}
.ceo {
    text-align: right;
}
.ceo strong {
    font-size: 20px;
}
.purpose {
    background-image: url(img/purpose.webp); 
}
.company_detail {
    background-image: url(img/about_us.webp); 
}
.base_list {
    background-image: url(img/base_lst.webp); 
}
.company_detail table,
.recruit_tbl table,
.base_list table {
    border-collapse: collapse;
    width: 100%;
}
.company_detail table tr dl > div,
.recruit_tbl table tr dl > div {
    display: flex;
}
.company_detail table tr dl > div + div,
.recruit_tbl table tr dl > div + div {
    padding-top: 5px;
}
.company_detail table tr dl.executive > div dt {
    width: 180px;
}
.company_detail table tr dl.history > div dt {
    width: 100px;
}
.company_detail table tr,
.recruit_tbl table tr,
.base_list table tr {
    border-bottom: dotted 1px var(--sblack);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.company_detail table tr > *,
.recruit_tbl table tr > *,
.base_list table tr > *  {
    padding-bottom: 10px;
    /* width: 100%; */
}
.company_detail table tr + tr > *,
.recruit_tbl table tr + tr > *,
.base_list table tr + tr > * {
    padding-top: 10px;
}
.base_list table tr td a img {
    width: 50px;
    height: auto;
}
/* .base_list table tr td br {
    display: block;
} */


/* 実績紹介 */
.top_result {
    background-image: url(img/works_bk.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color:rgba(255,255,255,0.9);
    background-blend-mode:lighten;
    /* margin-top: 40px; */
}
.top_result > .wrap > p {
    margin-bottom: 40px;
}
.result-list video,
.result-lst .wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.result-list ,
.result-lst .wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 5列で均等分割 */
    /* grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); */
    grid-gap: 20px;
}
.result-item h3 {
    font-size: clamp(0.813rem, 0.634rem + 0.76vw, 1rem);
    font-family: var(--noto);
    font-weight: 500;
}
.result-item {
    border: 1px solid #ccc;
    background-color: var(--white);
    padding: 10px;
}

.result-item a, 
.result-item .img_wrap {
    max-width: 100%;
    overflow: hidden;
}

.result-item .img_wrap img {
    width: 100%;
    transition: 8s;
}

.result-item .img_wrap img.zoom-up {
    scale: 120%;
}
/* 実績紹介ページ【下層】 */
.result.mv {
    background-image: url(img/result.webp);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: clamp(12.5rem, 8.036rem + 22.32vw, 18.75rem);
}

.result_list {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    background:repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.1) 2px,rgba(0,0,0,0) 4px
        );
}
.result_list > * {
    grid-row: 1/2;
    grid-column: 1/2;
}

li.result-item > a:nth-child(n+2) {
    display: none;
}
.result-lst {
    background-image: linear-gradient(0deg, transparent 31px, #e0ffff 32px), linear-gradient(90deg,  transparent 31px, #e0ffff 32px);
    background-size: 32px 32px;
}
.result-lst .wrap h3 {
    text-align: center;
    margin-bottom: 15px;
}
.result-lst .wrap li + li {
    margin-top: 10px;
}
.result-lst .wrap li {
    border-bottom: dotted 1px var(--sblack);
}

/* 求人ページ【下層】 */
.recruit.mv {
    background-image: url(img/recruit.webp);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: clamp(12.5rem, 8.036rem + 22.32vw, 18.75rem);
}
.requirement {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    background:repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.1) 2px,rgba(0,0,0,0) 4px
        );
}
.requirement > * {
    grid-row: 1/2;
    grid-column: 1/2;
}
.entry_form {
    background-image: url(img/entry_bk.webp);    
}

.requirement .wrap,
.entry_form .wrap,
.contact_form .wrap {
    /* position: absolute; */
    z-index: 2;
}
.requirement .wrap > * + * {
    margin-top: 40px;
}
.requirement .description h3 {
    margin-top: 20px;
}
.requirement .description ul {
    list-style: disc;
    list-style-position: inside;
}
/* .requirement p + .recruit_tbl {
    margin-top: 40px;
} */
.recruit_tbl table tr dl > div + div {
    margin-top: 5px;
}
.recruit_tbl table tr dl > div dt {
    width: 110px;
}
.recruit_tbl table tr dl > div dd {
    width: calc(100% - 110px);
}

.entry_form dl > div,
.contact_form dl > div {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}
.entry_form dl > div + div,
.contact_form dl > div + div {
    margin-top: 30px;
}
.entry_form dl > div > dt,
.contact_form dl > div > dt {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.entry_form dl > div > dt.required::after,
.contact_form dl > div > dt.required::after {
    content: '必須';
    margin-left: 20px;
    font-size: 14px;
    color: var(--white);
    background-color: var(--sblack);
    padding: 2px 8px;
}
.entry_form dl > div > dd ul.form_tel,
.contact_form dl > div > dd ul.form_tel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.entry_form dl > div > dd ul.form_tel input,
.contact_form dl > div > dd ul.form_tel input {
    width: 100%;
}
/* .entry_form dl > div > dd ul.form_tel li + li::before {
    content:"-";
    display: block;
    margin: 0 10px;
} */
.entry_form dl > div > dd,
.contact_form dl > div > dd {
    width: 100%;
    display: flex;
    align-items: center;

}
.entry_form dl > div > dt,
.contact_form dl > div > dt {
    margin-bottom: 10px;
}
.entry_form dl > div > dd > ul,
.contact_form dl > div > dd > ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.entry_form dl > div > dd > ul li,
.contact_form dl > div > dd > ul li {
    display: flex;
    align-items: center;
}
.entry_form dl > div > dd > ul li > input[type="radio"],
.contact_form dl > div > dd > ul li > input[type="radio"] {
    margin: 0 5px;
}
.entry_form dl > div > dd > ul li:has(input[type="radio"]) + li:has(input[type="radio"]),
.contact_form dl > div > dd > ul li:has(input[type="radio"]) + li:has(input[type="radio"]) {
    margin-left: 30px;
}
.entry_form dl > div input,
.entry_form dl > div select,
.entry_form dl > div textarea,
.contact_form dl > div input,
.contact_form dl > div select,
.contact_form dl > div textarea {
    border: solid 1px var(--sblack);
    background-color: var(--bg);
    border-radius: 3px;
    padding: 5px 10px;
}
.entry_form dl > div dd li div > input,
.entry_form dl > div dd li div > select,
.contact_form dl > div dd li div > input,
.contact_form dl > div dd li div > select {
    margin-left: 10px;
    margin-right: 30px;
}

.entry_form dl > div dd .small,
.contact_form dl > div dd .small  {
    width: 30%;
}
.entry_form dl > div dd .half,
.contact_form dl > div dd .half {
    width: 100%;
}
.entry_form dl > div dd .full,
.entry_form dl > div dd .large,
.contact_form dl > div dd .full,
.contact_form dl > div dd .large {
    width: 100%;
}
.entry_form dl > div dd li:has(p),
.contact_form dl > div dd li:has(p) {
    width: 100%;
    margin-top: 20px;
}
.entry_form dl > div dd li > p,
.contact_form dl > div dd li > p {
    width: 100%;
}

.entry_form dl > div dd:has(.error),
.entry_form dl > div dd li:has(.error),
.contact_form dl > div dd:has(.error),
.contact_form dl > div dd li:has(.error) {
    flex-wrap: wrap;
}
.error {
    width: 100%;
    color: red;
}
small.error {
    display: block;
}
.confirm > * + * {
    margin-top: 40px;
}
.confirm > h3,
.confirm > p,
.finish {
    text-align: center;
}

/* お問い合わせ【下層】 */
.contact.mv {
    background-image: url(img/contact.webp);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: clamp(12.5rem, 8.036rem + 22.32vw, 18.75rem);
}
.phone {
    background-image: url(img/phone_bk.webp);    
}
.phone p,
.contact_tel {
    text-align: center;
}
.contact_tel {
    color: var(--sblack);
    font-size: 24px;
    font-weight: 700;
}
.contact_tel span {
    font-family: var(--patua);
    font-weight: normal;
    font-size: 36px;
}
.contact_form {
    background-image: url(img/contact_form.webp);    
}
/* サイトマップ */
.sitemap.mv {
    background-image: url(img/sitemap.webp);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: clamp(12.5rem, 8.036rem + 22.32vw, 18.75rem);
}
.sitemap_lst ul {
    font-size: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sitemap_lst ul li + li {
    margin-top: 20px;
}
.sitemap_lst ul li a::after {
    content: '';
    display: block;
    background-color: var(--jred);
    height: 2px;
    width: 100%;
    transition: .2s;
    justify-content: center;
    transform: rotateY(90deg);
}
.sitemap_lst ul li a:hover::after {
    transform: rotateY(0deg);
}
/* プライバシーポリシー */
.privacy.mv {
    background-image: url(img/privacy.webp);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: clamp(12.5rem, 8.036rem + 22.32vw, 18.75rem);
}
.privacy_detail h2 {
    text-align: center;
    display: block;
    font-size: 24px;
    font-weight: 700;
}
.privacy_detail .wrap > * + * {
    margin-top: 30px;
}
.privacy_detail .wrap dl > div > dt {
    font-weight: 600;
}
.privacy_detail .wrap dl > div + div,
.privacy_detail .wrap dl p ~ ul,
.privacy_detail .wrap dl ul.doted li + li {
    margin-top: 20px;
}
.privacy_detail .wrap dl ul.doted li dt::before {
    content: '・';
}
.privacy_detail .wrap dl ul.doted li dd {
    text-indent: 1rem;
}
/* 投稿 */
main.container,
main.post_news {
    min-height: calc(100vh - 68px);
}
section.detail h1 {
    text-align: center;
}
section.detail > .wrap > * + * {
    margin-top: 40px;
}
.detail_ttl {
    display: grid;
    align-items: center;
    justify-content: center;
}
.detail_ttl h1 {
    display: inline;
}
section.detail {
    /* min-height: calc(100vh - 67px); */
}

/* 404エラー */
.notfound.mv {
    background-image: url(img/404_mv.webp);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: clamp(12.5rem, 8.036rem + 22.32vw, 18.75rem);
}
.error404 {
    background-image: url(img/404_02.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.error404 p {
    text-align: center;
    color: var(--sblack);
    margin-bottom: 20px;
}

/* フッター */
footer {
    background-color: #333;
    color: var(--white);
    padding: 20px;
    text-align: center;
}

footer ul {
    max-width: 960px;
    padding: 0 20px;
    margin: 0 auto;
    line-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
footer ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
}
footer ul img {
    width: 150px;
    height: auto;
}
footer ul li {
    margin-top: 30px;
}
footer ul li:has(img) {
    order: -1;
    margin-top: 0;
}

footer ul span,
footer ul small {
    color: var(--white);
}
footer ul span {
    margin-right: 20px;
}
.btn_wrap {
    display: grid;
    align-items: center;
    justify-content: center;
}
.btn_wrap > form + form {
    margin-top: 40px;
}
.btn_wrap:has(.privacy_check) {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.btn_wrap:has(.privacy_check) .privacy_check ~ button {
    filter: opacity(.3);
    pointer-events: none;
}
.btn_wrap:has(.privacy_check) .privacy_check.checked ~ button {
    filter: opacity(1);
    pointer-events: initial;
}
.btn_wrap:has(.privacy_check) > * + * {
    margin-top: 30px;
}
.btn_wrap .privacy_check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.btn_wrap .privacy_check a {
    border-bottom: dotted 1px var(--sblack);
}
.btn_wrap input {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.cmn_btn {
    /* width: 150px; */
    border-radius: 5px;
    transition: .3s;
    color: var(--white);
    background-color: var(--sblack);
    text-align: center;
    filter: drop-shadow(4px 3px 0px var(--jred));
    -webkit-filter: drop-shadow(4px 3px 0px var(--jred));
    -moz-filter: drop-shadow(4px 3px 0px var(--jred));

    /* border-right: solid 3px var(--jred); */
    /* border-bottom: solid 4px var(--jred); */
}
.cmn_btn:hover {
    background-color: var(--jred);
    filter: drop-shadow(4px 3px 0px var(--sblack));
    -webkit-filter: drop-shadow(4px 3px 0px var(--sblack));
    -moz-filter: drop-shadow(4px 3px 0px var(--sblack));
    /* border-right: solid 3px var(--sblack); */
    /* border-bottom: solid 4px var(--sblack); */
}

.cmn_btn > a {
    display: block;
    padding: 10px 20px;
}
    
@media (min-width: 768px) {
    /* スマホ無効 */
    .sp {
        display: none;
    }

    /* ヘッダー */
    .header_wrap {
        padding: 20px;
        filter: drop-shadow(2px 4px 6px lightgray);
    }
    .header-inner {
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
    }
    .header-inner > nav {
        display: block;
        font-size: clamp(0.875rem, 0.375rem + 1.04vw, 1rem);
    }
    .header-inner > div.sp_nav {
        display: none;
    }
    nav li {
        margin-left: 20px;
    }
    nav a {
        text-decoration: none;
        color: #333;
    }
    header ~ main {
        padding-top: 80px;
    }
    footer ul {
        flex-direction: row;
    }
    footer ul li {
        margin-top: 0px;
    }
    footer ul li:has(img) {
        order: initial;
        margin: 0 60px;
    }
    .splide,
    .top_mv {
        height: 400px;
    }
    .top_mv {
        grid-template-rows: 400px;
    }
    .company.mv,
    .result.mv {
        height: 300px;
    }
    .grid_wrap {
        grid-template-rows: 1fr;
        gap: 20px;
    }
    .grid_wrap.left {
        grid-template-columns: .2fr auto .8fr;
    }
    .grid_wrap.right {
        grid-template-columns: 1fr auto 1fr;
    }
    .left {
        grid-template-areas:"image ... text";
    }
    .right {
        grid-template-areas:"text ... image";
    }
    .company-overview,
    .top_result {
        background-size: 100%;
    }
    a[href*="tel:"] {
        pointer-events: none; /*①アンカーのtelを無効化*/
        cursor: default; /*②アンカーのポインターをデフォルトにする*/
        text-decoration: none;
    }

    .news .wrap,
    .common_contact .wrap {
        display: grid;
        grid-template-columns: auto clamp(22.125rem, -1.875rem + 50vw, 28.125rem) 20px clamp(22.125rem, -1.875rem + 50vw, 28.125rem) auto;
        grid-template-rows: auto;
    }
    .news-list li {
        width: inherit;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
    }
    .news .wrap .news_lst,
    .common_contact .wrap .common_tel {
        grid-column: 2 / 3;
    }
    .news .wrap .blog_lst,
    .common_contact .wrap .common_form {
        grid-column: 4 / 5;
    }
    .news .wrap > * ,
    .common_contact .wrap > * {
        /* width: auto; */
        grid-row: 1 / 2;
    }
    .news .wrap > * + *,
    .common_contact .wrap > * + * {
        margin-top: 0px;
    }
    .common_contact > video {
        aspect-ratio: 16 / 4;
    }
    /*お知らせ（下層）*/
    .news_list {
        grid-template-columns: 1fr clamp(46.25rem, 0.733rem + 94.83vw, 60rem) 1fr;
    }
    .news_list > video {
        grid-column: 1 / 4;
    }
    .news_list > .wrap {
        grid-column: 2/3;
    }
    /* 会社概要ページ【下層】 */
    .company_detail table tr,
    .recruit_tbl table tr {
        flex-direction: row;
        align-items: flex-start;
    }
    .base_list table tr {
        flex-direction: row;
        align-items: center;   
    }    
    .company_detail table tr th,
    .recruit_tbl table tr th,
    .base_list table tr th {
        width: 150px;
    }
    .base_list table tr td.add {
        width: 550px;
    }
    /* .base_list table tr td br {
        display: none;
    } */

    /* 実績リスト */
    .result-list ,
    .result-lst .wrap {
        grid-template-columns: repeat(3, 1fr); /* 5列で均等分割 */
    }
    /* 求人ページ【下層】 */
    .entry_form dl > div,
    .contact_form dl > div {
        align-items: center;
        flex-direction: row;
    }
    .entry_form dl > div > dt,
    .contact_form dl > div > dt {
        width: 200px;
    }
    .entry_form dl > div > dd,
    .contact_form dl > div > dd {
        width: calc(100% - 200px);
    }
    .entry_form dl > div > dt,
    .contact_form dl > div > dt {
        margin-bottom: 0;
    }
    .entry_form dl > div > dt + dd,
    .contact_form dl > div > dt + dd {
        margin-left: 40px;
    }
    .entry_form dl > div > dt.required::after,
    .contact_form dl > div > dt.required::after {
        margin-left: 0;
    }

    .entry_form dl > div dd .small,
    .contact_form dl > div dd .small {
        width: 25%;
    }
    .entry_form dl > div dd div:has(.short),
    .contact_form dl > div dd div:has(.short) {
        width: 65%;
    }
    .entry_form dl > div dd div .short,
    .contact_form dl > div dd div .short {
        width: 100%;
    }
    .entry_form dl > div dd .half,
    .contact_form dl > div dd .half {
        width: 50%;
    }
}