@charset "utf-8";

/*------------------------------
  リセット
------------------------------*/
html { font-family: 'Hiragino Sans', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'Avenir','Helvetica Neue','Helvetica','Arial', sans-serif; }
body { width: 100%;  max-width: 100%;  min-width: 100%; margin: 0; padding: 0; font-size: calc(10px*13/16); -webkit-text-size-adjust: 100%; color: #133D83; background-color: #E6E5E6; overflow-x: hidden; }
* { margin: 0; padding: 0; text-align: left; line-height: 1.5em; box-sizing: border-box; }
a { text-decoration: none; }
img { width: 100%; border: none; display: block; }
li { list-style: none; }
dl, dt, dd { padding: 0; margin: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
input, select { vertical-align: middle; }
header, main, footer { width: 100%; padding: 0; margin: 0; }
h1, h2, h3, h4, h5 { font-size: 1em; font-weight: 700; }
.cf { zoom:100%; }
.cf:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; }

/*common*/
main { font-size: 1.6em; overflow-x: hidden; position: relative; z-index: 1; }
.section_inner { display: flex; flex-direction: column; position: relative; justify-content: space-between; }
section { min-height: 100vh; }
section h2 { margin-bottom: clamp(.75em, calc(14.95vh - 2.52em), 3em); font-size: 2.25em; font-family: verdana, sans-serif; font-weight: 700; letter-spacing: .05em; line-height: 1.2; color: #133D83; text-align: center; }
section h2 p { text-align: center; }
section  p.letter_body { width: calc(100% - 14em - 18.42vw); max-width: 37.5em; margin: 0 auto; font-size: 1.25em; font-weight: 300; letter-spacing: .1em; line-height: clamp(1.8em, calc(3.16vh + .4em), 2.5em); color: #133D83; }
section .section_face { width: 90%; max-width: 87.5em; margin: 0 auto 0; padding: .625em 0 clamp(2em, calc(10.83vh - 4em), 5em); }
section .section_face img { width: 12.5em; margin-left: auto; display: block; }

span.weight600 { font-weight: 600; }
.jump_anchor { width: 16em; margin: 0 auto; position: absolute; left: 50%; z-index: 10; transform: translateX(-50%); }
.jump_anchor a { font-size: 1.125em; font-weight: 600; letter-spacing: .1em; line-height: 1.5; color: #133D83; display: flex; flex-direction: column; align-items: center; }
.jump_anchor a:hover { color: #AC8A54; }
.jump_anchor a span { line-height: 1.5; }
.jump_anchor a span.arrow { width: 3.12em; height: 1.56em; margin-top: 1.5em; background-repeat: no-repeat; background-size: 100%; background-position: 50%; }
.jump_anchor a span.arrow.down { background-image: url(../img/ico/ico_ard_blue.svg); }
.jump_anchor a:hover span.arrow.down { background-image: url(../img/ico/ico_ard_brown.svg); }
.jump_anchor a span.arrow.up { background-image: url(../img/ico/ico_aru_blue.svg); }
.jump_anchor a:hover span.arrow.up { background-image: url(../img/ico/ico_aru_brown.svg); }

/*-- ヘッダーロゴ --*/
.header_bar { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none; opacity: 0; animation: delay-appearance2 .5s ease-in 4.8s 1 forwards; }
.header_bar h1 { width: 20em; position: absolute; top: 50%; left: min(13em, 7.29vw); z-index: 1000; transform: translateY(calc(-50% - 3em)); pointer-events: none; opacity: 0; animation: delay-appearance .5s ease-in 5s 1 forwards; }
.header_bar h1 a svg .cls-1 { fill: #133D83; transition: .3s ease; }

/*-- ヘッダーメニューボタン --*/
#headmenu { display: none; }
.headmenu_btn { width: 7.3vw; max-width: 12em; min-width: 7em; height: 9em; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; right: 0; z-index: 1000; transform: translateY(calc(-50% - 3em)); transition: 0.2s; pointer-events: none; opacity: 0; animation: delay-appearance .5s ease-in 5.2s 1 forwards; }
.headmenu_btn span, .headmenu_btn span::before, .headmenu_btn span::after { content: ""; width: 6em; height: 3px; background-color: #133D83; border-radius: .2em; display: block; position: relative; transition: 0.3s; }
.headmenu_btn span { background-color: transparent; }
.headmenu_btn span::before { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); transition: 0.3s; }
.headmenu_btn span::after { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); transition: 0.3s; }
.headmenu_btn:hover { transition: 0.3s; }
.headmenu_btn:hover span::before, .headmenu_btn:hover span::after { background-color: #AC8A54; }

/*-- メニューリスト --*/
.headmenu_list { max-width: 58em; min-width: 30em; width: 100%;  height: 100vh; color: #FFF; background-color: #133D83; display: block; position: fixed; top: 0; right: -58em; transition: 0.1s ease-in; z-index: 100; overflow: scroll; -ms-overflow-style: none; scrollbar-width: none; -ms-overflow-style: none; pointer-events: all }
.headmenu_list::-webkit-scrollbar{ display: none; }

.headmenu_list .headmenu-items { max-width: 58em; min-width: 30em; width: 100%; margin: 0 auto; position: absolute; top: 50%; left: 0; transform: translateY(calc(-50% - 4em)); }
.headmenu_list .headmenu-items li { max-width: 58em; min-width: 30em; width: 100%; height: 8em; padding: 0 9em 0 0; transition: .25s ease-in; }
.headmenu_list .headmenu-items li a { width: 100%; height: 100%; padding-left: 3.75em; font-size: 2.4em; font-family: "M PLUS 1p", sans-serif; font-weight: 700; letter-spacing: 0.2em; line-height: 1.5; color: #C8C5C9; transition: 0.2s ease-in; display: flex; align-items: center; }
.headmenu_list .headmenu-items li a:hover { padding-left: 3.5417em; color: #AC8A54; }

/*-- メニュー開閉動作 --*/
#headmenu:checked ~ .headmenu_btn span::before { width: 6.6em; background-color: #C8C5C9; bottom: 0; transform: translateX(-50%) rotate(45deg); }
#headmenu:checked ~ .headmenu_btn span::after { width: 6.6em; background-color: #C8C5C9; top: 0; transform: translateX(-50%) rotate(-45deg); }
#headmenu:checked ~ .headmenu_btn:hover span::before, #headmenu:checked ~ .headmenu_btn:hover span::after { background-color: #AC8A54; }
#headmenu:checked ~ .headmenu_list { right: 0; transition: 0.3s ease; }
#headmenu:checked ~ .bg-shade { opacity: 1; pointer-events: auto; transition: opacity 0.5s ease-in-out; }
#headmenu:checked ~ .headmenu_list .headmenu-items {  transition: 0.3s ease-out; }
.bg-shade { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; }
.headmenu_list .menu_logo { width: 28em; margin: 0 auto; position: absolute; bottom: 2em; left: 50%; transform: translateX(-50%); }

@keyframes delay-appearance {
  0% { opacity: 0; pointer-events: none; }
  100% { opacity: 1; pointer-events: all; }
}

@keyframes delay-appearance2 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/*------------------------------

 ouze_HP_TOP main

------------------------------*/
/*-- ファーストビュー --*/
.fv { height: 100vh; min-height: 40em; background-color: #E6E5E6; position: relative; }
.fv::before { content: ""; width: 100%; height: 100vh; background-image: url(../img/bg_moodgray_mid.jpg); background-repeat: repeat; background-size: 32em; background-position: top left; position: fixed; top: 0; left: 0; z-index: 0;}
.fv .target_item { width: 20.3125%; min-width: 33.375em; margin: 0 auto; display: block; scale: 1; position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); animation: face-shrink 1.8s cubic-bezier(.75, 0, .5, 1) 2.5s 1 forwards, none 1s ease-out 0s forwards; transition-property: width, min-width, scale, left; transition-duration: 0s, 0s, 0s, .5s; transition-timing-function:ease, ease, ease, ease-out; }
.fv .target_item::before { content: ""; width: 2.5em; height: 2.5em; background-color: #222; position: absolute; top: 0; left: 0; }
.fv .target_item.moved { width: 12.1875%!important; min-width: 20em!important; }
.fv .target_item.active { scale: .625; left: 140%; animation: face-shrink 1.8s cubic-bezier(.75, 0, .5, 1) 2.5s 1 none, parabora 1s ease-out 0s forwards; transition-duration: .4s, .4s, .4s, 1.8s; transition-timing-function: ease-in, ease-in, ease-in, ease-out; }

@keyframes face-shrink {
  0% { width: 20.3125%; min-width: 33.375em; }
  100% { width: 12.1875%; min-width: 20em; }
}

@keyframes parabora {
  0% { top: 50%; animation-timing-function: ease-out }
  25% { top: 40%; animation-timing-function: ease-in }
  100% { top: 400%; animation-timing-function: ease-in-out; }
}

.animated {
  fill: transparent;
  stroke: #133D83;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.animated.piece_o { animation: line-animation_w 1s ease-in 1s 1 forwards, fill-color2 1.75s ease-in 1s 1 forwards; }
.animated.piece_o path { animation-name: curve_up; animation-duration: .75s; animation-timing-function: ease-out; animation-delay: 2.4s; animation-iteration-count: 1; animation-fill-mode: forwards; }
.animated.piece_u { animation: line-animation_w 1s ease-in 1.1s 1 forwards, fill-color2 1.75s ease-in 1.2s 1 forwards; }
.animated.piece_u path { animation-name: curve_right; animation-duration: .75s; animation-timing-function: ease-out; animation-delay: 3.15s; animation-iteration-count: 1; animation-fill-mode: forwards; }
.animated.piece_z { animation: line-animation_w 1s ease-in 1.2s 1 forwards, fill-color2 1.75s ease-in 1.4s 1 forwards; }
.animated.piece_z path { transform-origin: center; animation-name: curve_left; animation-duration: .9s; animation-timing-function: ease-out; animation-delay: 3.4s; animation-iteration-count: 1; animation-fill-mode: forwards; }
.animated.piece_e { animation: line-animation_w 1s ease-in 1.3s 1 forwards, fill-color2 1.75s ease-in 1.6s 1 forwards; }
.animated.piece_e path { animation-name: curve_down; animation-duration: .85s; animation-timing-function: ease-out; animation-delay: 3s; animation-iteration-count: 1; animation-fill-mode: forwards; }
.animated.piece_circle { animation: line-animation_c 2.5s ease-in 3.15s 1 forwards;}

@keyframes line-animation_c {
  0% { stroke-dashoffset: 1000; fill: transparent; }
  50% { fill: transparent; stroke-opacity: 0; }
  75% { stroke-dashoffset: 500; fill: #133D83; stroke-opacity: 0; }
  100% { stroke-dashoffset: 1000; fill: #133D83; stroke-opacity: 0; }
}

@keyframes line-animation_w {
  0% { stroke-dashoffset: 1000; }
  75% { stroke-dashoffset: 800; stroke-opacity: 1; }
  100% { stroke-dashoffset: 800; stroke-opacity: 1; }
}

@keyframes fill-color {
  0% { stroke-dashoffset: 1000; fill: transparent; }
  50% { fill: transparent; stroke-opacity: 0; }
  75% { stroke-dashoffset: 400; fill: #133D83; stroke-opacity: 0; }
  100% { stroke-dashoffset: 1000; fill: #133D83; stroke-opacity: 0; }
}

@keyframes fill-color2 {
  0% { fill: transparent; }
  50% {  fill: transparent; }
  75% { stroke-opacity: 1; }
  100% { fill: #133D83; stroke-opacity: 0; }
}

@keyframes curve_up {
  0% { transform: translate(0, 0); animation-timing-function: ease-out; }
  50% { transform: translate(0, -7%); animation-timing-function: ease-in; }
  100% { transform: translate(0, 0); animation-timing-function: ease-in;  }
}

@keyframes curve_down {
  0% { transform: translate(0, 0); animation-timing-function: ease-out; }
  50% { transform: translate(0, 7%); animation-timing-function: ease-in; }
  100% { transform: translate(0, 0); animation-timing-function: ease-in;  }
}

@keyframes curve_right {
  0% { transform: translate(0, 0); animation-timing-function: ease-out; }
  50% { transform: translate(7%, 0); animation-timing-function: ease-in; }
  100% { transform: translate(0, 0); animation-timing-function: ease-in;  }
}

@keyframes curve_left {
  0% { transform: translate(0, 0); animation-timing-function: ease-out; }
  50% { transform: translate(-7%, 0); rotate: -10deg; animation-timing-function: ease-in; }
  95% { transform: translate(2%, 0); rotate: 3deg; animation-timing-function: ease-out; }
  100% { transform: translate(0, 0); rotate: 0deg; animation-timing-function: ease-in;  }
}

.fv .jump_anchor { bottom: 6.25em; pointer-events: none; opacity: 0; animation: delay-appearance .5s ease-in 5.4s 1 forwards; }

/*-- 各セクションフェイスマークアニメーション --*/
.mission .section_face.active { transform: translateY(0); opacity: 1; }
.mission .section_face.active img {  animation: shake .5s ease-in-out .65s 1 forwards; }
.it-infrastructure .section_face.active img { animation: floating .5s ease-in-out 0s 1 forwards; }
.cloud .section_face.active img { animation: spin 1.25s ease-in-out 0s 1 forwards; }
.inteligence .section_face.active img { animation: thinking 1.5s ease-in-out 0s 1 forwards; }

@keyframes shake {
  0% { transform: translateX(0) rotate(0) scale(1, 1); transform-origin: center center; animation-timing-function: ease-in; }
  5% { transform: translateX(1%) rotate(1deg) scale(.95, 1.05); transform-origin: bottom right; animation-timing-function: ease-out; }
  30% { transform: translateX(-5%) rotate(-5deg); animation-timing-function: ease-in; }
  60% { transform: translateX(2.5%) rotate(3deg); animation-timing-function: ease-in-out; }
  90% { transform: translateX(-1) rotate(-1deg); animation-timing-function: ease-in; }
  100% { transform: translateX(0) rotate(0); animation-timing-function: ease-out; }
}

@keyframes floating {
  0% { transform: translateY(0); animation-timing-function: ease-in; }
  2% { transform: translateY(1%); animation-timing-function: ease-out; }
  30% { transform: translateY(-20%); animation-timing-function: ease-in; }
  80% { transform: translateY(0); animation-timing-function: ease-out; }
  90% { transform: translateY(-2.5%); animation-timing-function: ease-in; }
  100% { transform: translateY(0) translateX(0); animation-timing-function: ease-in; }
}

@keyframes spin {
  0% { transform: rotateY(0deg); animation-timing-function: ease-out; }
  30% { transform: rotateY(360deg); animation-timing-function: ease-out; }
  40% { transform: rotateY(380deg); animation-timing-function: ease-out; }
  70% { transform: rotateY(350deg); animation-timing-function: ease-in-out; }
  100% { transform: rotateY(360deg); animation-timing-function: ease-in-out; }
}

@keyframes thinking {
  0% { transform: rotate(0deg); animation-timing-function: ease-out; }
  10% { transform: rotate(10deg); animation-timing-function: ease-out; }
  60% { transform: rotate(11deg); animation-timing-function: ease-in; }
  70% { transform: rotate(-7deg); animation-timing-function: ease-out; }
  80% { transform: rotate(0deg); animation-timing-function: ease-in; }
  90% { transform: rotate(-7deg); animation-timing-function: ease-out; }
  100% { transform: rotate(0deg); animation-timing-function: ease-in-out; }
}

/*-- Mission ＆ Values --*/
.mission { width: 100%; height: 100vh; min-height: fit-content; margin: 15em 0; padding: 0 min(8.125em, 7.29vw) 0 min(4.375em, 3.93vw); background-color: #FFF; position: relative; }
.mission::before, .mission::after { content: ""; width: 100%; height: 15em; position: absolute; left: 0; }
.mission::before { background-image: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); top: calc(-15em + 1px); }
.mission::after { background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); bottom: calc(-15em + 1px); }
.mission .section_inner { min-height: 100vh; padding-top: clamp(10px, calc(58.59375vh - 28.08em), 4.375em); padding-left: min(3.75em, 3.36vw); padding-bottom: clamp(10px, calc(58.59375vh - 28.08em), 4.375em); }
.mission h2 { margin-top: clamp(1.11em, calc(30vh - 7.89em), 90px); }
.mission p.letter_body .color_accent { color: #AC8A54; }
.mission p.letter_body .wrap_frag { display: inline-block; }
.mission .section_face { transform: translateY(90%); opacity: 0; transition: transform .3s ease-out .4s, opacity .1s ease-out .4s; }
.mission .jump_anchor { bottom: clamp(3.25em, calc(48.75vh - 20.75em), 6.25em); }

/*-- Business --*/
.business section { padding: clamp(10px, calc(58.59375vh - 28.08em), 4.375em) min(8.125em, 7.29vw) clamp(10px, calc(58.59375vh - 28.08em), 4.375em) min(4.375em, 3.93vw); position: relative; }
.business section .section_inner { padding-top: clamp(2.5em, calc(30vh - 17.75em), 90px); padding-left: min(3.75em, 3.36vw); height: calc(100vh - 117.1875vh + 56.16em); min-height: fit-content;  z-index: 1; }
.business section .section_inner::before { content: ""; width: 100%; height: 100%; background-color: rgba(200, 197, 201, 0); position: absolute; top: 10px; left: 0; z-index: -1; transition: .5s ease-out; }
.business section .section_inner:has(.section_face.active)::before { background-color: rgba(200, 197, 201, .4); top: 0; }
.business section h2 p { font-size: 1.3333em; color: #E6E5E6; }
.business section h3 { width: calc(100% - 9.107em - 16.78vw); max-width: 28.57em; margin: 0 auto clamp(.75em, calc(8.94vh - 2.14em), 1.714em); font-size: 1.75em; font-family: "M PLUS 1p", sans-serif; font-weight: 500; letter-spacing: .1em; line-height: 1.2; }
.business section.inteligence h3 p { font-size: .857em; }
.business section.it-infrastructure h3 { color: #7E6C7B; }
.business section.cloud h3 { color: #AC8A54; }
.business section.inteligence h3 { color: #ED6D46; }
.business section h3 span { display: inline-block; }
.business section h3 .subtit { margin-top: .15em; font-size: .714em; letter-spacing: .2em; line-height: 1.75; color: #BBB6BC; display: block; }
.business .jump_anchor { bottom: clamp(3.25em, calc(48.75vh - 20.75em), 6.25em); }
.business section.it-infrastructure .jump_anchor a:hover { color: #7E6C7B; }
.business section.it-infrastructure .jump_anchor a:hover span.arrow.down { background-image: url(../img/ico/ico_ard_d-magenta.svg); }
.business section.inteligence .jump_anchor a:hover { color: #ED6D46; }
.business section.inteligence .jump_anchor a:hover span.arrow.down { background-image: url(../img/ico/ico_ard_orange.svg); }

/*-- Company Profile --*/
.company_prof { width: 100%; height: 100vh; min-height: fit-content; margin: 15em 0 0; padding: 0 min(8.125em, 7.29vw) 0 min(4.375em, 3.93vw); background-color: #FFF; position: relative; }
.company_prof::before { content: ""; width: 100%; height: 15em; background-image: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); position: absolute; top: calc(-15em + 1px); left: 0; }
.company_prof .section_inner { min-height: 100vh;  padding-top: clamp(10px, calc(58.59375vh - 28.08em), 4.375em); padding-left: min(3.75em, 3.36vw); padding-bottom: clamp(10px, calc(58.59375vh - 28.08em), 4.375em); }
.company_prof h2 { margin-top: clamp(1.11em, calc(30vh - 7.89em), 90px); }
.company_prof ul { width: calc(100% - 17.5em - 18.42vw); max-width: 50em; margin: 0 auto; }
.company_prof li { display: flex; margin-bottom: 1.5em; }
.company_prof li.interval { margin-bottom: 3.375em; }
.company_prof li h4 { width: 4.5em; min-width: 4.5em; margin: .1875em 1.25em 0 0; font-size: 1em; font-weight: 300; letter-spacing: .1em; line-height: 3.375; color: #BBB6BC; white-space: nowrap; }
.company_prof li>p { font-size: 1.25em; letter-spacing: .1em; line-height: 1.5; color: #133D83; display: flex; align-items: center; flex-wrap: wrap; }
.company_prof li>p span { display: inline-block; }
.company_prof li>p span.annotation { margin-left: 1.5em; font-size: .8em; }
.company_prof .section_face .section_face_height { height: 11.8em; }
.company_prof .jump_anchor { bottom: clamp(3.25em, calc(48.75vh - 20.75em), 7.5em); }

/*-- footer --*/
footer { padding: 10em 0 2em; background-color: #FFF; position: relative; z-index: 1; }
footer .foot_logo { width: 28em; margin: 0 auto 5.7em; display: block; }
footer .copyright { font-size: 1.6em; letter-spacing: .1em; line-height: 1; text-align: center; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
footer .copyright span { display: inline-block; }
footer .copyright span.copy_mark { font-size: 1.5em; }



/*------------------------------
  MediaQuery
------------------------------*/
/*-- スマートデバイスホバー挙動制御 --*/
@media (hover: none) {
  .headmenu_btn:hover span::before, .headmenu_btn:hover span::after { background-color: #133D83; }
  .headmenu_btn:active span::before, .headmenu_btn:active span::after { background-color: #AC8A54; }
  #headmenu:checked ~ .headmenu_btn:hover span::before, #headmenu:checked ~ .headmenu_btn:hover span::after { background-color: #C8C5C9; }
  #headmenu:checked ~ .headmenu_btn:active span::before, #headmenu:checked ~ .headmenu_btn:active span::after { background-color: #AC8A54; }
  .jump_anchor a:hover { color: #133D83; }
  .jump_anchor a:active { color: #AC8A54; }
  .jump_anchor a:hover span.arrow.down { background-image: url(../img/ico/ico_ard_blue.svg); }
  .jump_anchor a:active span.arrow.down { background-image: url(../img/ico/ico_ard_brown.svg); }
  .jump_anchor a:hover span.arrow.up { background-image: url(../img/ico/ico_aru_blue.svg); }
  .jump_anchor a:active span.arrow.up { background-image: url(../img/ico/ico_aru_brown.svg); }
  .business section.it-infrastructure .jump_anchor a:hover { color: #133D83; }
  .business section.it-infrastructure .jump_anchor a:active { color: #7E6C7B; }
  .business section.it-infrastructure .jump_anchor a:hover span.arrow.down { background-image: url(../img/ico/ico_ard_blue.svg); }
  .business section.it-infrastructure .jump_anchor a:active span.arrow.down { background-image: url(../img/ico/ico_ard_d-magenta.svg); }
  .business section.inteligence .jump_anchor a:hover { color: #133D83; }
  .business section.inteligence .jump_anchor a:active { color: #ED6D46; }
  .business section.inteligence .jump_anchor a:hover span.arrow.down { background-image: url(../img/ico/ico_ard_blue.svg); }
  .business section.inteligence .jump_anchor a:active span.arrow.down { background-image: url(../img/ico/ico_ard_orange.svg); }
}

/*-- ビューポート高さに応じた調整 --*/
@media screen and (min-width:1024px) and (min-height:720px){
  .business section .section_inner { min-height: calc(100vh - 8.75em); }
}

/*-- iPad pro --*/
@media screen and (min-width:1024px) and (max-width:1200px){
  section  p.letter_body { width: calc(30vw + 9,11em); margin: 0 0 0 calc(1vw + 13.22em); }
  .business section h3 { width: calc(30vw + 11.3em); margin: 0 0 clamp(.75em, calc(8.94vh - 2.14em), 1.714em) calc(1vw + 8.44em); }
  .company_prof ul { width: calc(30vw + 16.69em); margin: 0 0 0 calc(1vw + 16.31em); }
}


/*-- iPad --*/
@media screen and (min-width:600px) and (max-width:1023px){
  /*common*/
  section h2 { margin-bottom: clamp(.75em, calc(25vh - 5.54em), 2.6em); }
  section p.letter_body { width: 90%; max-width: 480px; }
  section .section_face { padding: 2em 0 3em; }
  section .section_face img { width: 120px; }

  /*-- ヘッダーロゴ --*/
  .header_bar { height: 60px; background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); }
  .header_bar h1 { width: 110px; top: 12.5px; left: 10px; transform: translateY(0); }

  /*-- ヘッダーメニューボタン --*/
  .headmenu_btn { width: 50px; min-width: 50px; height: 40px; top: 5px; right: 5px; transform: translateY(0); }
  .headmenu_btn span, .headmenu_btn span::before, .headmenu_btn span::after { content: ""; width: 40px; }
  .headmenu_btn span::before { position: absolute; bottom: 8px; }
  .headmenu_btn span::after { position: absolute; top: 8px; }

  /*-- メニューリスト --*/
  .headmenu_list { width: 78.3vw; right: -78.3vw; }

  /*-- メニュー開閉動作 --*/
  #headmenu:checked ~ .headmenu_btn span::before, #headmenu:checked ~ .headmenu_btn span::after { width: 52px; }

  /*-- ファーストビュー --*/
  .fv .target_item.active { scale: .375; left: 130%; }
  .fv .jump_anchor { bottom: 4em; }

  /*-- Mission ＆ Values --*/
  .mission { margin: 11.25em 0; padding: 0 3.36vw 0 0; }
  .mission::before, .mission::after { height: 11.25em; }
  .mission::before { top: calc(-11.25em + 1px); }
  .mission::after { bottom: calc(-11.25em + 1px); }
  .mission .section_inner { padding-top: clamp(4.375em, calc(5.56vh + 1em), 5em); }
  .mission .section_face { padding: 2em 0 15em; }
  .mission .jump_anchor { bottom: 4em; }

  /*-- Business --*/
  .business section { padding: clamp(4.375em, calc(5.56vh + 1em), 5em) 60px 12em 0; }
  .business section .section_inner { height: calc(100vh - 17em); }
  .business section h3 { width: calc(90% + 32px); max-width: 512px; margin: 0 auto clamp(.75em, calc(8.94vh - 2.14em), 1.67em); }
  .business section.inteligence h3 p { font-size: .875em; }
  .business .jump_anchor { bottom: 4em; }

  /*-- Company Profile --*/
  .company_prof { margin: 11.25em 0 0; padding: 0 3.36vw 0 0; }
  .company_prof::before { height: 11.25em; top: calc(-11.25em + 1px); }
  .company_prof .section_inner { padding-top: clamp(4.375em, calc(5.56vh + 1em), 5em); }
  .company_prof ul { width: 90%; max-width: 480px; }
  .company_prof li h4 { margin: .0625em 1.25em 0 0; }
  .company_prof li>p { font-size: 1.125em; }
  .company_prof .section_face { padding: 2em 0 15em; }
  .company_prof .section_face .section_face_height { height: 8.71em; }
  .company_prof .jump_anchor { bottom: 5em; }
}


/*-- iPhone --*/
@media screen and (max-width:599px) {
  /*リセット*/
  body { font-size: 10px; }
  /*common*/
  section h2 { margin-bottom: 2.22em; font-size: 1.125em; }
  section p.letter_body { width: 90%; max-width: 480px; font-size: .9375em; line-height: 2; }
  section .section_face { padding: 1.25em 0 1.875em; }
  section .section_face img { width: 80px; }
  .jump_anchor a { font-size: .875em; }
  .jump_anchor a span.arrow { width: 32px; height: 16px; margin-top: .5em; }

  /*-- ヘッダーロゴ --*/
  .header_bar { height: 60px; background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); }
  .header_bar h1 { width: 110px; top: 12.5px; left: 10px; transform: translateY(0); }
  .header_bar:has(#headmenu:checked) h1 a svg .cls-1 { fill: #C8C5C9; }

  /*-- ヘッダーメニューボタン --*/
  .headmenu_btn { width: 50px; min-width: 50px; height: 40px; top: 5px; right: 5px; transform: translateY(0); }
  .headmenu_btn span, .headmenu_btn span::before, .headmenu_btn span::after { content: ""; width: 40px; }
  .headmenu_btn span::before { position: absolute; bottom: 8px; }
  .headmenu_btn span::after { position: absolute; top: 8px; }

  /*-- メニューリスト --*/
  .headmenu_list { width: 100%; max-width: 100%; right: -100%; }
  .headmenu_list .headmenu-items li { padding: 0 30px 0 0; }
  .headmenu_list .headmenu-items li a { padding-left: 1.25em; }
  .headmenu_list .headmenu-items li a:hover { padding-left: 1.0417em; }
  .headmenu_list .menu_logo { display: none; }

  /*-- メニュー開閉動作 --*/
  #headmenu:checked ~ .headmenu_btn span::before, #headmenu:checked ~ .headmenu_btn span::after { width: 52px; }

  /*-- ファーストビュー --*/
  .fv { min-height: 480px; }
  .fv .target_item { width: 25%; min-width: 267px; transition-duration: 0s, 0s, 0s, .35s; }
  .fv .target_item.moved { width: 15%!important; min-width: 160px!important; }
  .fv .target_item.active { scale: .5; left: 135%; }
  .fv .jump_anchor { bottom: 25vh; }

  @keyframes face-shrink {
    0% { width: 25%; min-width: 267px; }
    100% { width: 15%; min-width: 160px; }
  }

  /*-- Mission ＆ Values --*/
  .mission { margin: 7.5em 0; padding: 0 3.36vw 0 0; }
  .mission::before, .mission::after { height: 7.5em; }
  .mission::before { top: calc(-7.5em + 1px); }
  .mission::after { bottom: calc(-7.5em + 1px); }
  .mission .section_inner { padding-top: 2.875em; padding-bottom: 0; }
  .mission h2 { margin-top: clamp(33px, calc(30vh - 284px), 90px); }
  .mission p.letter_body .wrap_frag { display: inline; }
  .mission .section_face { padding: 1em 0 10.875em; }
  .mission .jump_anchor { bottom: 5.125em; }

  /*-- Business --*/
  .business section { padding: 4.125em 27px 11.375em 0; }
  .business section .section_inner { height: calc(100vh - 15.5em); padding-top:clamp(33px, calc(30vh - 284px), 90px); }
  .business section h2 p { font-size: 1em; }
  .business section h3 { width: calc(90% + 20px); max-width: 500px; margin: 0 auto 1.67em; font-size: 1.125em; }
  .business section.inteligence h3 p { font-size: 1em; line-height: 1.33; }
  .business section.inteligence h3 p span { line-height: 1.33; }
  .business section h3 .subtit { font-size: .83em; line-height: 1.5; }
  .business .jump_anchor { bottom: 6.375em; }

  /*-- Company Profile --*/
  .company_prof { margin: 7.5em 0 0; padding: 0 3.36vw 0 0; }
  .company_prof::before { height: 7.5em; top: calc(-7.5em + 1px); }
  .company_prof .section_inner { padding-top: 2.875em; padding-bottom: 0; }
  .company_prof h2 { margin-top: clamp(33px, calc(30vh - 284px), 90px); }
  .company_prof ul { width: 90%; max-width: 480px; }
  .company_prof li { display: block; margin-bottom: .9375em; }
  .company_prof li.interval { margin-bottom: 2.3125em; }
  .company_prof li h4 { margin: 0; font-size: .9375em }
  .company_prof li>p { font-size: .9375em; }
  .company_prof li>p span.annotation { margin-left: 1.5em; font-size: .87em; }
  .company_prof .section_face { padding: 1em 0 10.875em; }
  .company_prof .section_face .section_face_height { height: 5em; }
  .company_prof .jump_anchor { bottom: 6.375em; }

  /*-- footer --*/
  footer { padding: 2em 0 3em; }
  footer .foot_logo { width: 19em; margin: 0 auto 1.7em; }
  footer .copyright { font-size: 1.4em; }
}