@charset "utf-8";
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0;	border:0;	outline:0;	list-style:none; vertical-align:middle;	background:transparent; }
html, body { width:100%; max-width:100%; }
html {-webkit-text-size-adjust: 100%; /* 2 */-ms-text-size-adjust: 100%;}
body { line-height:1; z-index: 1; min-height: 100vh; overflow-y:visible; overflow-x:hidden;}
img { border-style: none; max-width: 100%; width:auto; height: auto;}
nav ul, ul, li { list-style:none;}
strong{ vertical-align: baseline;}
*{ box-sizing: border-box;}
/**/
.body-delay{ padding-top: 1px;}
/**/
.resizeNow *, 
.resizeNow span , 
.resizeNow span::after , 
.resizeNow span::before , 
.resizeNow *::after , 
.resizeNow *::before , 
.resizeNow b , 
.resizeNow b::after , 
.resizeNow b::before , 
.resizeNow div , 
.resizeNow div::after , 
.resizeNow div::before , 
.resizeNow p{ transition: 0s !important;}
/*============================
selection
==============================*/
::selection { background: #eee; color: #111;}
::-moz-selection { background:#eee; color: #111;}
@media screen and (min-width: 651px) {
img.pc{ display:block;}img.sp{ display: none;}img.sp.pc{ display: block !important;}.no-pc{ display: none !important;}}
@media screen and (max-width: 650px) {img.pc{ display:none;}img.sp{ display: block;}img.sp.pc{ display: block !important;}.no-sp{ display: none !important;}}
@media screen and (min-width: 851px) {.pc-none{ display: none !important;}}
@media screen and (max-width: 850px) {.sp-none{ display: none !important;}}
/*--フォント---*/
*{ font-family:'line seed jp', 'Noto Sans JP', YuGothic,'ヒラギノ角ゴ ProN W3',"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; color:#222; letter-spacing:0.02em; line-height:1.4em; font-size:16px;}
/*--リンク---*/
a, a *, a:hover, a:hover * { transition: 0.3s ease-in-out;}
a:link, a:visited, a:hover, a:active { color:#1284A7; text-decoration: none;}
a:hover { opacity:1; filter: alpha(opacity=100); color:#1047A8;}
/*--コンテンツ---*/
header, section, footer, .contents, .wrap { width:100%; display: flex; flex-direction:column; align-items: center; position: relative; z-index:3; overflow-y: visible; overflow-x: hidden;}
.inner { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction:column; position: relative;}
/*==============================================
  text 色変化
================================================*/
.txtIn{ display: inline-block; position: relative; transition: 0.8s; color: #ccc;}
.txtIn::after{ color:#111; width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: attr(data-txt); clip: rect(0,0,200px,0);transition: clip 1.5s linear; transition: 4.0s;}
.setView.txtIn::after{ clip: rect(0,650px,200px,0) !important;}
/*===================
 アニメーション
=====================*/
.mvAnime > span, 
.mvAnime2 > span, 
.setAnime > span { display: inline-block; will-change: transform, opacity; opacity: 0; overflow: hidden; -webkit-transform: translateY(60px); transform: translateY(60px); }
.setView.setAnime > span{ opacity:1; -webkit-transform: translateY(0px); transform: translateY(0px);}
.setView.setAnime > span:nth-child(1){ transition:0.6s 0.0s !important;}
.setView.setAnime > span:nth-child(2){ transition:0.6s 0.05s !important;}
.setView.setAnime > span:nth-child(3){ transition:0.6s 0.1s !important;}
.setView.setAnime > span:nth-child(4){ transition:0.6s 0.15s !important;}
.setView.setAnime > span:nth-child(5){ transition:0.6s 0.2s !important;}
.setView.setAnime > span:nth-child(6){ transition:0.6s 0.25s !important;}
.setView.setAnime > span:nth-child(7){ transition:0.6s 0.3s !important;}
.setView.setAnime > span:nth-child(8){ transition:0.6s 0.35s !important;}
.setView.setAnime > span:nth-child(9){ transition:0.6s 0.4s !important;}
.setView.setAnime > span:nth-child(10){ transition:0.6s 0.45s !important;}
.setView.setAnime > span:nth-child(11){ transition:0.6s 0.5s !important;}
.setView.setAnime > span:nth-child(12){ transition:0.6s 0.6s !important;}
.setView.setAnime > span:nth-child(13){ transition:0.6s 0.65s !important;}
.setView.setAnime > span:nth-child(14){ transition:0.6s 0.7s !important;}
.setView.setAnime > span:nth-child(15){ transition:0.6s 0.75s !important;}
.setView.setAnime > span:nth-child(16){ transition:0.6s 0.8s !important;}
.setView.setAnime > span:nth-child(17){ transition:0.6s 0.85s !important;}
.setView.setAnime > span:nth-child(18){ transition:0.6s 0.9s!important;}
.setView.setAnime > span:nth-child(19){ transition:0.6s 0.95s!important;}
.setView.setAnime > span:nth-child(20){ transition:0.6s 1.0s!important;}
.setView.setAnime > span:nth-child(21){ transition:0.6s 1.05s!important;}
.setView.setAnime > span:nth-child(22){ transition:0.6s 1.1s!important;}
.setView.setAnime > span:nth-child(23){ transition:0.6s 1.15s!important;}
.setView.setAnime > span:nth-child(24){ transition:0.6s 1.2s!important;}
.setView.setAnime > span:nth-child(25){ transition:0.6s 1.25s!important;}
.setView.setAnime > span:nth-child(26){ transition:0.6s 1.3s!important;}
.setView.setAnime > span:nth-child(27){ transition:0.6s 1.35s!important;}
.setView.setAnime > span:nth-child(28){ transition:0.6s 1.4s!important;}
.setView.setAnime > span:nth-child(29){ transition:0.6s 1.45s!important;}
.setView.setAnime > span:nth-child(30){ transition:0.6s 1.5s!important;}
.setView.setAnime > span:nth-child(31){ transition:0.6s 1.55s!important;}
.setView.setAnime > span:nth-child(32){ transition:0.6s 1.6s!important;}
.setView.setAnime > span:nth-child(33){ transition:0.6s 1.65s!important;}
.setView.setAnime > span:nth-child(34){ transition:0.6s 1.7s!important;}
.setView.setAnime > span:nth-child(35){ transition:0.6s 1.75s!important;}
.setView.setAnime > span:nth-child(36){ transition:0.6s 1.8s!important;}
.setView.setAnime > span:nth-child(37){ transition:0.6s 1.85s!important;}
.setView.setAnime > span:nth-child(38){ transition:0.6s 1.9s!important;}
.setView.setAnime > span:nth-child(39){ transition:0.6s 1.95s!important;}
.setView.setAnime > span:nth-child(40){ transition:0.6s 2.0!important;}


/*============================
 「」
==============================*/
.line{ width: 10px; height: 10px; position: absolute; z-index: 1; transition:0.8s; border-radius: 100%;}
.setView > .line{ width: 20px; height: 20px;}
.line::before, 
.line::after{ content: ""; transition: 1.2s; border-radius: 15px; position: absolute; }
.line.lt, 
.line.lt::before, 
.line.lt::after{ left: 0; top: 0;}
.line.lb, 
.line.lb::before, 
.line.lb::after{ left: 0; bottom: 0;}
.line.rt, 
.line.rt::before, 
.line.rt::after{ right: 0; top: 0;}
.line.rb, 
.line.rb::before, 
.line.rb::after{ right: 0; bottom: 0;}
.line.lt::before, 
.line.lb::before, 
.line.rt::before, 
.line.rb::before{ width: 0px; height: 10px; }
.line.lt::after, 
.line.lb::after, 
.line.rt::after, 
.line.rb::after{ width: 10px; height: 0px;}
/**/
.setView > .line.lt::before, 
.setView > .line.lb::before, 
.setView > .line.rt::before, 
.setView > .line.rb::before{ width: 40px;}
.setView > .line.lt::after, 
.setView > .line.lb::after, 
.setView > .line.rt::after, 
.setView > .line.rb::after{ height: 40px;}

/*==============================================
  header menuBtn
================================================*/

#menuBtn{ width: 60px; height: 60px; display: flex; justify-content: flex-end; position: fixed; right: 2px; top:2px;  z-index: 1000000010000000;}
#menuBtn.d::after{ width: 200px; height: 200px; content: ""; position: absolute; left: 0px; bottom: 0px; margin: 0 0 -30px -30px; border-radius: 100%; box-shadow: 0 2px 4px rgba(0,0,0,.0); background: rgba(255,255,255,.9); transition: 0.3s; cursor: pointer; border: solid 1px #0db9e1;}
#menuBtn.d:hover::after{ width: 60px; height: 60px; margin: 0; background: rgba(255,255,255,.7); z-index: 1; box-shadow: 0 8px 12px rgba(0,0,0,.1);}
#menuBtn.open::after{ width: 0px; height: 0px; margin: 0 0 30px 30px;}
#menuBtn .menuBtn-line{ width: 50px; height: 50px; margin: 5px; display: block; position: relative; z-index: 10; border-radius: 100%; cursor: pointer;}
/*
#menuBtn.open{ width: 100%; box-shadow: 0; background: linear-gradient(to right, rgba(255,255,255,1) 70%,rgba(221,221,221,1) 100%);}
#menuBtn.open .menuBtn-line{ box-shadow: none; background: rgba(255,255,255,.0);}
*/
#menuBtn.open{ background: rgba(0,0,0,.9); border-radius: 20px;}
#menuBtn .menuBtn-line::after{ width:24px; height: 1px; background: #000; position: absolute; left: 13px; top: 50%; content: ""; transition: 0.4s;}
#menuBtn.open .menuBtn-line::after { width: 0px; }
#menuBtn .menuBtn-line .l1, 
#menuBtn .menuBtn-line .l2{ width: 24px; height: 1px; position: absolute; left: 13px; top: 50%; background: #000; transition: 0.4s;}
#menuBtn .menuBtn-line .l1{ margin-top: 8px;}
#menuBtn .menuBtn-line .l2{ margin-top: -8px;}
#menuBtn.open .menuBtn-line .l1{ margin-top: 0px; transform:rotate(45deg); background: #fff;}
#menuBtn.open .menuBtn-line .l2{ margin-top: 0px; transform:rotate(-45deg); background: #fff;}
/**/
.openH #mv,  
.openH .mvBox,
.openH main, 
.openH .pc-cta, 
.openH .sp-cta, 
.openH #pageup, 
.openH .takken{ filter: blur(10px);}

header{ display: flex; position: fixed; flex-direction: column; justify-content: center; z-index: 10000000; width: 100%; height:100%; min-height: 400px;opacity: 0; pointer-events: none;}
.menu-overlay{ width: 100%; height: 100%; position: fixed; z-index: 10000; left: 0; top: 0; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; cursor: pointer;}
.openH .menu-overlay, 
.openH header{ opacity: 1; pointer-events:all;}

/**/
header .innerWrap{ width: 94%; max-width: 400px; height:90%; max-height: 800px; z-index: 11000; display: flex; justify-content: center; align-items: center; background:#0db9e1; border-radius: 20px; padding: 20px; overflow-y: auto; overflow-x: hidden; margin-top: -100px; transition: 0.2s; opacity: 0;}



.openH header .innerWrap{ margin-top: 0; opacity: 1;}
header .innerWrap nav{ display: block;}
header .innerWrap h1{ width: 100%; display: flex; justify-content: center; margin-top: 30px;}
header .innerWrap h1 img{ width: 80px; height: 100%; display: block;}
header .innerWrap ul{ display: flex; flex-direction: column; justify-content: center;}
header .innerWrap ul li{ display: block; margin: 5px 0;}
header .innerWrap ul li a{ display: flex; justify-content: flex-start; align-items: center; padding: 6px 0;}
header .innerWrap ul li a span{ display: block; color: #fff !important; font-size: 18px;}
header .innerWrap ul li a:hover span { color: #ccc; text-decoration: underline;}
header .innerWrap ul li a:hover img{ opacity: 0.4;}
header .innerWrap ul li a::before{ content: "・"; color: #fff;}
header .innerWrap ul li a.btn1::before, 
header .innerWrap ul li a.btn2::before{ display: none;}
header .innerWrap ul li a.btn1{ width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; background: #E33D40; margin:10px 0 10px; font-size: 18px; font-weight: bold; color: #fff;}
header .innerWrap ul li a.btn1:hover{ background:#801517;}
header .innerWrap ul li a.btn2{ width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: #fff; font-size: 18px; border: solid 1px #aaa;}
header .innerWrap ul li a.btn2:hover{ opacity: 0.7;}

/*============================
MV
==============================*/
.mvBox{ display: block; width: 100%; height: 120vh; min-height: 700px; pointer-events: none;}
#mv{ width: 100%; height: 120vh; min-height: 700px; display: flex; justify-content: center; align-items: center; background: #0db9e1; position: fixed; left: 0; right: 0; top: 0; z-index: 1; overflow: hidden; }
#mv .innerDiv{ width: 100%; height: 100%; display: block; position: relative;}
#mv .logo{ width: 120px; height: auto; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; left: 50%; top: 15px; margin: 0 0 0 -520px;}
#mv .logo h1{ width: 100%; display: block;}
#mv .logo h2{ width: 100%; display: flex; flex-direction: column;}
#mv .logo h2 span{ width: 100%; display: flex; justify-content: center; align-items: center; font-size: 10px; line-height: 1em; color: #0db9e1; background:#fff; border-radius: 2px; margin-top: 6px; padding: 3px 0;}
/**/









.body-delay #mv .title svg .svg-set-1 { stroke-dashoffset: 0; fill: rgb(255, 255, 255);}


#mv .bk img{ width: 100%; height: auto; opacity: 0;}
#mv .bk.image1 { z-index: 10; position: absolute; width: 84%; max-width: 1400px; left: -10%; top: 20%; background: url("../img/mv/img1.png") 50% 50% no-repeat; background-size: cover;}
#mv .bk.image2 { width: 300px; position: absolute; right: -8%; top: 6%; background: url("../img/mv/img2.png") 50% 50% no-repeat; background-size: cover; }
#mv .bk.image3 { width: 200px; position: absolute; left: -220px; top: 70%; background: url("../img/mv/img3.png") 50% 50% no-repeat; background-size: cover; animation: hikosen 44.0s ease-in-out infinite forwards; z-index: 50;}
@keyframes hikosen{
0% { opacity: 0; left: -220px; top: 70%;}
10% { opacity: 1; left: -220px; top:70%;}
90% { opacity: 1; left: calc(110% + 260px); top: -80%;}
99% { opacity: 0; left: calc(110% + 260px); top: -80%;}
100% { opacity: 0; left: -220px; top: 70%;}
}
#mv .bk.image4 { z-index: 5; width: 150px; position: absolute; right: 10%; top: -180px; background: url("../img/mv/img4.png") 50% 50% no-repeat; background-size: cover; animation: fune1 150.0s linear infinite forwards;}
@keyframes fune1{
0% { opacity: 1; right: 5%; top: 3%;}
70% { opacity: 1; right: 200%; top: 50%;}
71% { opacity: 0; right: 200%; top: 50%;}
72% { opacity: 0; right: -10%; top: -160px;}
90% { opacity: 1; right: -10%; top: -160px;}
100% { opacity: 1; right: 5%; top: 3%;}
}
#mv .bk.image5 { width: 150px; position: absolute; right: 1%; bottom: 15%; background: url("https://fukuya-hd.co.jp/recruit/img/index/about_island.webp") 0% 0% no-repeat; background-size: 100% auto; animation: sakana 26.0s ease-in infinite forwards; z-index: 20;}
@keyframes sakana{
0% { right: 1%;}
30% { right: 3%;}
350% { right: 3%;}
75% { right: 1%;}
100% { right: 1%;}
}
#mv .bk.image6 { width: 200px; position: absolute; left: 4%; top:7%; background: url("../img/mv/img6.png") 50% 50% no-repeat; background-size: cover; animation: fune2 20.0s ease-in infinite forwards; z-index: 3;}
@keyframes fune2{
0% { left: 4%;}
30% { left: 2%;}
350% { left: 4%;}
75% { left: 4%;}
100% { left: 4%;}
}
/**/
#mv .title{ height: 80vh; max-height: 600px; min-height: 400px; position: absolute; right: 20%; top: 10vh; display: flex; justify-content: center; align-items: center; z-index: 100;}
#mv .title span{ position: absolute; left: 0; top: 0; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; width: 1em; font-size: 5.15vh; display: flex; text-align: center; padding-left:15px; letter-spacing: 0.12em; justify-content: center; align-items: center; transition: 0; white-space: nowrap; color: rgba(255,255,255,.0);}
#mv .svg-set-1{ fill: #fff; stroke: #fff; stroke-width: 2px; fill-rule: evenodd;}
/**/


/***************************************************
 * Generated by SVG Artista on 12/20/2024, 11:20:28 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
#mv .title svg .svg-set-1 {
  stroke-dashoffset: 4902.8388671875px;
  stroke-dasharray: 4902.8388671875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 6s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
  fill 4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  transition: stroke-dashoffset 6s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
  fill 4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
@media screen and (max-width: 1300px) {
#mv .logo{ left: 2%; top: 15px; margin: 0;}
#mv .bk.image1 { width: 90%; left: -15%; top:auto; bottom: 12%;}
#mv .bk.image6 { margin: -8% 0 0 22%;}
}
@media screen and (max-width: 1000px) {
#mv .bk.image1 { width: 120%; left:auto; right: 20%; bottom: 15%;}
#mv .bk.image6 { margin: -10% 0 0 22%;}
}
@media screen and (max-width:700px) {
.scroll #mv .bk{ margin-top: auto; }
#mv{ height: 100vh; min-height: 600px;}
#mv .title{ height: 53vh; max-height: 500px; min-height: 350px; position: absolute; right: calc(50% - 26px); top: 2vh;}
#mv .title span{ display: none;}
#mv .bk.image1 { width: 125%; left:auto; right: 0%; bottom: -8%; background: url("../img/mv/img1.png") 100% 0% no-repeat; background-size: cover;}
#mv .bk.image2 { width:40%; right: -15%; top: 10%; background: url("../img/mv/img2.png") 50% 50% no-repeat; background-size: cover; }
#mv .bk.image5 { width: 30%; right: -20%; bottom: auto; top: 26%; z-index: 20;}
#mv .bk.image3 { width: 300px; left: -300px; top: 80%; animation: hikosen-sp 44.0s ease-in-out infinite forwards; z-index: 60;}
#mv .bk.image4 { z-index: 5; width: 110px; right: 10%; top: -180px; animation: fune1-sp 150.0s linear infinite forwards;}
#mv .bk.image6 { width: 120px; left: -21%; top:auto; bottom: 40%; margin: 0;}
}
@media screen and (max-width:550px) {
#mv{ height: 100vh; min-height: 600px;}
#mv .title{ height: 35vh; max-height: 500px; min-height: 280px; position: absolute; right: calc(50% - 26px); top: 2vh;}
#mv .title span{ display: none;}
#mv .bk{ transition: 0.2s !important;}
#mv .bk.image1 { width: 140vh; height: auto; left:auto; right: 0%; bottom: -10%; background: url("../img/mv/img1.png") 100% 0% no-repeat; background-size: contain;}
#mv .bk.image2 { width: 40%; right: -12%; top: auto; bottom:60%; background: url("../img/mv/img2.png") 50% 50% no-repeat; background-size: cover; }
#mv .bk.image5 { width: 40%; right: 0%; margin-right: -8%; bottom: 44%; z-index: 20;}
#mv .bk.image3 { width: 300px; left: -300px; top: 80%; animation: hikosen-sp 44.0s ease-in-out infinite forwards; z-index: 60;}
#mv .bk.image4 { z-index: 5; width: 110px; right: 10%; top: -180px; animation: fune1-sp 150.0s linear infinite forwards;}
#mv .bk.image6 { width: 120px; left: -25%; top:auto; bottom: 75%; margin: 0;}
}
@keyframes hikosen-sp{
0% { opacity: 1; left: 8%; top: 70%;}
70% { opacity: 1; left: 105%; top: -80%;}
71% { opacity: 0; left: 105%; top: -80%;}
72% { opacity: 0; left: -300px; top: 80%;}
90% { opacity: 1; left: -300px; top: 80%;}
100% { opacity: 1; left: 8%; top: 70%;}
}
@keyframes fune1-sp{
0% { opacity: 1; right: 2%; top: 3%;}
70% { opacity: 1; right: 200%; top: 50%;}
71% { opacity: 0; right: 200%; top: 50%;}
72% { opacity: 0; right: -10%; top: -160px;}
90% { opacity: 1; right: -10%; top: -160px;}
100% { opacity: 1; right: 2%; top: 3%;}	
}

/**/

#mv .bk{ position: absolute; pointer-events: none; opacity: 0.4; filter: blur(16px);}
.nobody #mv .bk.image1 { transition:1.4s 0.8s !important;}
.nobody #mv .bk.image2 { transition:1.6s 0.8s !important;}
.nobody #mv .bk.image3 { transition:1.0s 0.2s !important;}
.nobody #mv .bk.image4 { transition:1.4s 1.4s !important;}
.nobody #mv .bk.image5 { transition:1.0s 1.0s !important;}
.nobody #mv .bk.image6 { transition:1.4s 1.8s !important;}
.body-delay #mv .bk { filter: blur(0); opacity: 1;}

/*===========================
 main
============================*/
main{ position: relative; z-index: 10; background: #fff; margin-bottom: 120vh;}
.tit-eng-h2, 
.tit-eng-h2 *{ font-size: 50px; }
.tit-jpn-h2, 
.tit-jpn-h2 *{ font-size: 16px; font-weight: bold; line-height: 1em;}
@media screen and (max-width:600px) {
.tit-eng-h2, 
.tit-eng-h2 *{ font-size: 8.8vw; font-weight: 900;}
.tit-jpn-h2, 
.tit-jpn-h2 *{ font-size: 5.0vw; font-weight: 900;}
}
/*===========================
 message
============================*/
#message{ padding: 120px 3%;}
#message .inner{ max-width: 620px;}
#message .inner h2{ display: flex; flex-direction: column; margin-bottom: 50px;}
#message .inner p{ display: flex; flex-direction: column; align-items: flex-start;}
#message .inner p span{ font-weight: bold; letter-spacing: 2px; font-size: 24px; line-height: 1.8em; margin: 20px 0;}
#message .inner p span ruby{ font-size: 24px;}
#message .inner p span.c, 
#message .inner p span.c *{ color: #ddd; transition: 1.4s;}
#message .inner p span.setView.c, 
#message .inner p span.setView.c *{ color: #111;}

@media screen and (max-width:700px) {
#message{ padding: 50px 3% 100px;}
#message .inner p span{ font-size: 16px;}
#message .inner p span.c{ font-size: 16px;}
#message .inner p span.c ruby{ font-size: 16px; letter-spacing: 0;}
#message .inner p span.c ruby *{line-height: 1.2em; font-size: 12px;}
}
/*===========================
 #info1
============================*/
#info1 { background: #ddd;}
#info1 .line, 
#info1 .line::before, 
#info1 .line::after{ background: #f0f;}
#info1 .inner .itemList .item > spanm, 
#info1 .inner .itemList .item > span::before, 
#info1 .inner .itemList .item > span::after{ background:#f0f; }
#info1 .inner { width: 94%; max-width: 800px; background: #fff; border-radius: 30px; margin: 60px 3%; padding: 30px; }
#info1 .inner h2{ display: flex; flex-direction: column; margin-bottom: 30px;}
#info1 .inner .itemList{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
#info1 .inner .itemList .item{ width: 46%; margin:30px 0; display: block; padding: 10px; border-radius: 13px; background: #ddd; position: relative; overflow: hidden;}
#info1 .inner .itemList .item.setView{ background: #fff; box-shadow: 0 12px 20px rgba(0,0,0,.1);}
#info1 .inner .itemList .item .item-inner{ height: 100%; background: #fff; border-radius: 8px; padding:40px 20px; position: relative; z-index: 5; display: flex; justify-content: flex-start; align-items: center; flex-direction: column;}
#info1 .inner .itemList .item .item-inner h3{ display: flex; justify-content: center;}
#info1 .inner .itemList .item.full .item-inner h3{ margin-bottom: 20px;}
#info1 .inner .itemList .item .item-inner h3 span{ font-size: 26px;}
#info1 .inner .itemList .item .item-inner > div{ display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}
#info1 .inner .itemList .item .item-inner > div h4{ display: flex; align-items: baseline;}
#info1 .inner .itemList .item .item-inner > div h4 span, 
#info1 .inner .itemList .item .item-inner > div h4 span * { font-size: 60px; letter-spacing: 0;}
#info1 .inner .itemList .item .item-inner .t2{ width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; z-index: 50;}
#info1 .inner .itemList .item .item-inner .t2.set1{ right: 0%; bottom: 45%;}
#info1 .inner .itemList .item .item-inner .t2.set2{ left: 3%; bottom: 20%;}
#info1 .inner .itemList .item .item-inner .t2.set3{ left: -10%; top: 26%;}
#info1 .inner .itemList .item .item-inner .t2.set4{ left: 15%; top: 19%; flex-direction: row;}
#info1 .inner .itemList .item .item-inner .t2 .t3{ font-size: 12px;}
#info1 .inner .itemList .item .item-inner .t2 .bot{ font-size: 12px;letter-spacing: 0; display: flex; justify-content: center; align-items: baseline;}
#info1 .inner .itemList .item .item-inner .t2 .bot span{ font-size: 22px; font-size:bold;}
/* 描画エリアの指定 */
.pie-container { z-index: 10; position: relative; padding-bottom: 20rem; width: 20rem; margin-top: 40px; display: none; justify-content: center; align-items: center; text-align-last: center;}
.pie-container2{ display: block;}
.pie-svg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible;}
.pie-svg,
.pie-svg .pie{ width: 300px; height: 300px; -moz-width: 300px; -moz-height: 300px;}
/* グラフ部分の指定 */
.pie { fill: transparent; cx: 32; cy: 32; r: 16; stroke-width: 32; stroke-dashoffset: 25; transition: 1.8s;}
.data1 { stroke: #44aff6; stroke-dasharray: 0 100;}
.data2 { stroke: #3fc9ac; stroke-dasharray: 0 0 0 100;}
.data3 { stroke: #ffe622; stroke-dasharray: 0 0 0 100;}
.data4 { stroke: #ff78a8; stroke-dasharray: 0 0 0 100;}
.svg1 { fill: #44aff6; fill-rule: evenodd;}
.svg2 { fill: #3fc9ac; fill-rule: evenodd;}
.svg3 { fill: #ffe622; fill-rule: evenodd;}
.svg4 { fill: #ff78a8; fill-rule: evenodd;}
.setView .data1 { stroke-dasharray: 42.6 57.4;}
.setView .data2 { stroke-dasharray: 0 42.6 41.7 15.7;}
.setView .data3 { stroke-dasharray: 0 84.3 13.4 2.3;}
.setView .data4 { stroke-dasharray: 0 97.7 2.3 0;}
@media screen and (max-width:850px) {
#info1 .inner .itemList .item.full{ width: 100%;}
}
@media screen and (max-width:800px) {
#info1 .inner .itemList .item{ width: 100%;}
}
@media screen and (max-width:500px) {
.pie-svg,
.pie-svg .pie{ width: 80%; height: 80%; -moz-width: 80%; -moz-height: 80%; margin: 0 10%;}
#info1 .inner .itemList .item .item-inner{ padding:40px 10px;}
#info1 .inner .itemList .item .item-inner h3 span{ font-size: 24px;}
}


/*safari*/_::-webkit-full-page-media, _:future, :root .pie-container { display: none;}
/*safari*/_::-webkit-full-page-media, _:future, :root .pie-container2 { display: flex;}
/*safari*/@media screen and (-webkit-min-device-pixel-ratio:0) { ::i-block-chrome, .pie-container { display: none;}}
/*safari*/@media screen and (-webkit-min-device-pixel-ratio:0) { ::i-block-chrome, .pie-container2 { display: flex;}}
/**/
/*chrome*/@media screen and (-webkit-min-device-pixel-ratio:0) { .pie-container { display: flex; }}
/*chrome*/@media screen and (-webkit-min-device-pixel-ratio:0) { .pie-container2 { display: none; }}
/*firefox*/@-moz-document url-prefix() { .pie-container { display: none; }}
/*firefox*/@-moz-document url-prefix() { .pie-container2 { display: flex; }}
/*===========================
 #info2
============================*/
#info2 { padding: 60px 0; background:#64B593;}
#info2 .line::before, 
#info2 .line::after{ background: #64B593;}
.mBox.view .innerBox ul li .n, 
.mBox.view .innerBox h2 span b{ background:#008342;}
/**/
#info2 h2{ padding: 60px 0 20px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#info2 h2 .tit-jpn-h2{ margin-top: 20px;}
#info2 h2 .tit-jpn-h2, 
#info2 h2 .tit-jpn-h2 span{ letter-spacing: 2px; font-size: 26px;}
#info2 h2 *{ color: #fff;}
#info2 .itemArea{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#info2 .itemArea .itembox{ width: 94%; max-width: 840px; display: flex; align-items: center; justify-content: center; padding: 20px 30px 40px; box-shadow: 0 8px 16px rgba(0,0,0,.1); border-radius: 20px; margin: 20px 0; background: #fff;}
#info2 .itemArea .itembox .img{ width: 25%; display: block;}
#info2 .itemArea .itembox .txt{ width: 65%; margin-left: 10%; display: flex; flex-direction: column;}
#info2 .itemArea .itembox .txt h3{ padding: 20px 0 30px 120px; position: relative;}
#info2 .itemArea .itembox .txt h3 .txtIn, 
#info2 .itemArea .itembox .txt h3 .txtIn *{ font-size: 30px;}
#info2 .itemArea .itembox .txt h3 b { width: 110px; height: 50px; position: absolute; left: 0; top: 50%; margin-top: -30px; border-radius: 10px; background: #333; display: flex; justify-content: center; align-items: center;}
#info2 .itemArea .itembox .txt h3 b span{ color: #fff; font-size: 18px;}
#info2 .itemArea .itembox .txt .infoBox{ display: flex; align-items: flex-start; justify-content: flex-start; padding-left: 20px;}
#info2 .itemArea .itembox .txt .infoBox h4{ width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; position: relative; border-radius: 6px; margin-top: 10px;}
#info2 .itemArea .itembox .txt .infoBox h4 .line{ width: 6px; height: 6px; background: none;}
#info2 .itemArea .itembox .txt .infoBox h4 .line::before, 
#info2 .itemArea .itembox .txt .infoBox h4 .line::after{ border-radius: 8px;}
#info2 .itemArea .itembox .txt .infoBox h4 .line.lt::before, 
#info2 .itemArea .itembox .txt .infoBox h4 .line.lb::before, 
#info2 .itemArea .itembox .txt .infoBox h4 .line.rt::before, 
#info2 .itemArea .itembox .txt .infoBox h4 .line.rb::before{ width: 0px; height: 6px; }
#info2 .itemArea .itembox .txt .infoBox h4 .line.lt::after, 
#info2 .itemArea .itembox .txt .infoBox h4 .line.lb::after, 
#info2 .itemArea .itembox .txt .infoBox h4 .line.rt::after, 
#info2 .itemArea .itembox .txt .infoBox h4 .line.rb::after{ width: 6px; height: 0px;}
/**/
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.lt::before, 
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.lb::before, 
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.rt::before, 
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.rb::before{ width: 16px;}
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.lt::after, 
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.lb::after, 
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.rt::after, 
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.rb::after{ height: 16px;}
#info2 .itemArea .itembox .txt .infoBox ul li::before { background: #111;}
#info2 .itemArea .itembox .txt .infoBox ul{ flex: 1; display: flex; flex-direction: column; margin-left: 30px;}
#info2 .itemArea .itembox .txt .infoBox ul li{ font-size: 18px; font-weight: bold; padding-left: 14px; margin: 5px 0; position: relative;}
#info2 .itemArea .itembox .txt .infoBox ul li::before{ width: 0px; height: 0px; position: absolute; left: 5px; top: 50%; margin: 0 0 6px 0; content: ""; border-radius: 100%; transition: 0.6s;}
#info2 .itemArea .itembox .txt .infoBox ul.setView li::before{ width:6px; height: 6px; margin-top: -3px; left: 2px; }
#info2 .itemArea .itembox .txt .m{ display: flex; justify-content: flex-start;}
#info2 .itemArea .itembox .txt .m br{ display: none;}
#info2 .itemArea .itembox .txt .m .modalBtn{ width: auto; font-weight: bold; display: block; padding: 6px 14px; background:#FFD62C; border-radius: 30px; cursor: pointer; transition: 0.3s; margin-top: 20px;}
#info2 .itemArea .itembox .txt .m .modalBtn:hover{ background: #FF7600; color: #fff;}
@media screen and (max-width:1000px) {
#info2 .itemArea .itembox .img{ width: 30%; display: block;}
#info2 .itemArea .itembox .txt{ width: 70%; margin-left: 0%;}
}
@media screen and (max-width:850px) {
#info2 .itemArea .itembox .txt h3 .txtIn, 
#info2 .itemArea .itembox .txt h3 .txtIn *{ font-size: 4.0vw;}
}
@media screen and (max-width:700px) {
#info2 { padding: 0px 0 80px;}
}
@media screen and (max-width:650px) {
#info2 .itemArea .itembox{ width: 90%; flex-direction: column-reverse; padding: 0;}
#info2 .itemArea .itembox .txt{ width: 100%;}
#info2 .itemArea .itembox .txt h3{ display: flex; justify-content: flex-start; padding: 4px; background:#006644; border-radius: 20px 20px 0 0; }
#info2 .itemArea .itembox .txt h3 .txtIn{ flex: 1; text-align: center; display: flex; justify-content: center; flex-wrap: nowrap; white-space: nowrap; margin: 10px 0;}
#info2 .itemArea .itembox .txt h3 .txtIn, 
#info2 .itemArea .itembox .txt h3 .txtIn *{ font-size: 7.2vw; color: #ccc;}
#info2 .itemArea .itembox .txt h3 .txtIn::after{ color: #fff;}
#info2 .itemArea .itembox .txt h3 b { width: auto; height: auto; position: relative; left: auto; top: auto; margin-top: 0; border-radius: 20px 2px 2px 2px; background: #fff; padding: 4px 10px; margin-right: 10px;}
#info2 .itemArea .itembox .txt h3 b span{ color: #006644; font-size: 14px; letter-spacing: 0; white-space: nowrap;}
#info2 .itemArea .itembox .txt .infoBox{ width: 90%; margin: 0 5%; flex-direction: column; align-items: center; justify-content: center; padding-left:0;}
#info2 .itemArea .itembox .txt .infoBox h4{ width: 100%; height: 60px; margin-bottom: 20px;}
#info2 .itemArea .itembox .txt .infoBox h4 .text { font-size: 5.0vw;}
#info2 .itemArea .itembox .txt .infoBox h4 .text br{ display: none;}
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.lt::before, 
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.lb::before, 
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.rt::before, 
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.rb::before{ width: 260px;}
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.lt::after, 
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.lb::after, 
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.rt::after, 
#info2 .itemArea .itembox .txt .infoBox h4.setView > .line.rb::after{ height: 34px;}
#info2 .itemArea .itembox .txt .infoBox ul li::before { background: #111;}
#info2 .itemArea .itembox .txt .infoBox ul{ flex: 1; display: flex; flex-direction: column; margin: 0px;}
#info2 .itemArea .itembox .txt .infoBox ul li{ font-size: 5.0vw; font-weight: bold; padding-left: 14px; margin: 8px 0; position: relative;}	
#info2 .itemArea .itembox .txt .infoBox ul li::before, 
#info2 .itemArea .itembox .txt .infoBox ul.setView li::before{ width:6px; height: 6px; margin: 0px 0 0;  top: 12px; left: 2px; }
#info2 .itemArea .itembox .txt .m{ width: 90%; margin: 0 5%; display: flex; justify-content: center;}
#info2 .itemArea .itembox .txt .m br{ display: block;}
#info2 .itemArea .itembox .txt .m .modalBtn{ width: 100%; padding: 6px; border-radius: 8px; text-align: center; position: relative; background: #DD4E51; color: #fff;}
#info2 .itemArea .itembox .txt .m .modalBtn::after{ width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; border-radius: 100%; font-size: 9px; color: #DD4E51; font-weight: 900; background: #FFD62C; border: solid 2px #fff; box-shadow: 0 4px 6px rgba(0,0,0,.1); content: "Click"; line-height: 40px; transition: 0.8s;}
#info2 .itemArea .itembox .txt .m .modalBtn.setView::after{ transform: rotate(-25deg);}
}

/*----------*/
.mBox{ display: none;}
.mBox.view{ display: flex; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 100000000; justify-content: center; align-items: center; padding: 20px;}
.mBox.view .overRay{  width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,.8); z-index: 1; cursor: pointer;}
.mBox.view .innerBox{ width: 90%; max-width: 540px; background: #fff; box-shadow: 0 8px 14px rgba(0,0,0,.5); border-radius: 10px; position: relative; z-index: 10; overflow-y: auto; display: flex; flex-direction: column;}
.mBox.view .innerBox h2{ display: block; position: relative; border-radius: 10px 10px 0 0; overflow: hidden;}
.mBox.view .innerBox h2 span{ position: absolute; top: 0; left: 0; z-index: 11; width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end; font-weight: bold; background: rgba(0,0,0,.4);}
.mBox.view .innerBox h2 span b{ display: inline-block; width: auto; line-height: 1.2em;  letter-spacing: 2px; font-size: 22px; padding: 10px 20px 8px; color: #fff; border-radius: 40px; margin-bottom: 20px; border: solid 1px #fff;}
.mBox.view .innerBox h2 img{ display: block; width: 100%; height: auto;position: relative; z-index: 1;}
body.fixed { overflow: hidden;}
.mBox.view .innerBox ul{ padding: 0px 20px; width: 100%; display: flex; flex-direction: column;}
.mBox.view .innerBox ul li{ padding: 10px 0 10px 32px; width: 100%; position: relative;}
.mBox.view .innerBox ul li .n{ width: 24px; height: 24px; position: absolute; left: 0; top: 50%; margin-top: -12px; display: flex; justify-content: center; align-items: center; border-radius: 100%; font-size: 14px; color: #fff;}
.mBox.view .innerBox ul li .p{ display: block; font-size: 18px;}
.mBox.view .innerBox .close{ display: flex; justify-content: center; margin: 10px; }
.mBox.view .innerBox .close span{ width: 80px; height: 26px; line-height: 26px; border-radius: 30px; background: #D0474A; color: #fff; font-size: 12px; display: flex; font-weight: bold; justify-content: center; align-items: center; cursor: pointer; transition: 0.3s;}
.mBox.view .innerBox .close:hover span{ background: #921618;}
@media screen and (max-width:650px) {
.mBox.view .innerBox h2{ height: 120px; overflow: hidden;}
.mBox.view .innerBox h2 span b{ font-size: 3.8vw; padding: 10px; border-radius: 4px;}
.mBox.view .innerBox ul li{ padding: 6px 0 6px 30px;}
.mBox.view .innerBox ul li .n{ width: 20px; height: 20px; top: 23px; font-size: 12px;}
.mBox.view .innerBox ul li .p{ font-size: 15px;}
.mBox.view .innerBox .close span{ width: 100%; height: 42px; line-height: 42px; border-radius: 8px;}
}
/*===========================
 #info3
============================*/
#info3 { padding: 40px 0; background:#fff;}
#info3 .inner{ width: 96%; max-width: 800px;}
#info3 h2{ padding: 40px 0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#info3 h2 .tit-jpn-h2{}
#info3 h2 .tit-jpn-h2, 
#info3 h2 .tit-jpn-h2 span{ letter-spacing: 2px; font-size: 26px;}
/**/
#info3 .inner .m-case{ display: flex; align-items: stretch; background: #fff; border-radius: 8px 14px 14px 8px; margin-bottom: 40px; overflow: hidden; position: relative;}
#info3 .inner .m-case .left{ width: 25%; display: block; position: relative; background: #fff;}
#info3 .inner .m-case .left img{ display: none;}
#info3 .inner .m-case .left .l-box{ width: 100%; height: 100%; display: flex;}
#info3 .inner .m-case .left .l-box > div{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: 1.4s;}
#info3 .inner .m-case .left .l-box > .image1{ opacity: 1; z-index: 5;}
#info3 .inner .m-case .left .l-box > .image2{ opacity: 0; z-index: 10;}
#info3 .inner .m-case.set2ViewDiv .left .l-box > .image1{ opacity: 0;}
#info3 .inner .m-case.set2ViewDiv .left .l-box > .image2{ opacity: 1;}
#info3 .inner .m-case#m1 .left .l-box .image1{ background: url("../img/info3/i1-1.jpg") 30% 100% no-repeat; background-size: cover;}
#info3 .inner .m-case#m1 .left .l-box .image2{ background: url("../img/info3/i1-2.jpg") 40% 100% no-repeat; background-size: cover;}
#info3 .inner .m-case#m2 .left .l-box .image1{ background: url("../img/info3/i2-1.jpg") 30% 100% no-repeat; background-size: cover;}
#info3 .inner .m-case#m2 .left .l-box .image2{ background: url("../img/info3/i2-2.jpg") 0 0% no-repeat; background-size: cover;}
#info3 .inner .m-case .left .image1 {}
#info3 .inner .m-case .left .image2 {}
#info3 .inner .m-case .right{ width: 75%; padding: 10px; background:#B5C5CD;}
#info3 .inner .m-case .right .box{ display: flex; flex-direction: column; margin:30px 0;}
#info3 .inner .m-case .right .box > .set{ opacity: 0; transition: 0.6s; transform:translateY(100px)}
#info3 .inner .m-case .right .box > .set.setView{ opacity:1; transform:translateY(0px)}
#info3 .inner .m-case .right .box h3{ width: 85%; display: block; margin-right: 15%; border-radius: 8px; font-weight: bold;padding: 10px; background: #fff; margin-bottom: 10px;}
#info3 .inner .m-case .right .box p{ width: 85%; display: block; margin-left: 15%; border-radius: 8px; padding: 10px; background: #fff; font-size: 14px;}
#info3 .inner .m-case .right .box ul{ width: 85%; display: block; margin-left: 15%; border-radius: 8px; padding: 10px; background: #fff;}
#info3 .inner .m-case .right .box ul li{ width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; margin: 5px 0;}
#info3 .inner .m-case .right .box ul li span{ display: block; width: 58px; font-size: 14px;}
#info3 .inner .m-case .right .box ul li b{ flex: 1; display: block; font-size: 14px;}
@media screen and (max-width:850px) {
*, 
section, 
.m-case { overflow: visible !important;}
#info3 .inner .m-case::after{ width: 10%; height: 100%; position: absolute; left: 10%; top: 0; z-index: 1; background: #B5C5CD; content: ""; border-radius: 10px 0 0 10px;}
#info3 .inner .m-case .right{ border-radius: 0 10px 10px 0 ;}
#info3 .inner .m-case .left { width: 20%; max-height:200px; display: block; position: sticky; left: 0; top: 50px; z-index: 10; background: none;}
#info3 .inner .m-case .left img{ display: block; width: 100%; height: auto;  opacity: 0;}
#info3 .inner .m-case .left > div{  position: absolute; left: 0; top: 0; right: 0; bottom: 0; transition: 1.4s;}
#info3 .inner .m-case .left .l-box{ width: 100%; height: auto;}
#info3 .inner .m-case .left .l-box{ width: 100%; height: 100%; display: flex;}
#info3 .inner .m-case .left .l-box > div{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: 1.4s; border-radius: 10px;}
}
/*===========================
 #info4
============================*/
#info4 { padding: 0 0 80px; background:#FBF7E4;}
#info4 .inner{ width: 96%; max-width: 800px;}
#info4 h2{ padding: 40px 0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#info4 h2 .tit-jpn-h2{}
#info4 h2 .tit-jpn-h2, 
#info4 h2 .tit-jpn-h2 span{ letter-spacing: 2px; font-size: 26px;}
#info4 .inner .oubo h3 span{ background: #aed000;}
/**/
#info4 .inner .flow-zu{ display: flex; justify-content: space-between;}
#info4 .inner .flow-zu li{ width: 18%; display: flex; flex-direction: column; align-items: center; margin: 0 1%; padding: 20px 0%; border: solid 1px #aaa; border-radius: 4px; position: relative; z-index: 1;}
#info4 .inner .flow-zu li::before{ content: "▼"; color: #c2d94e; position: absolute; right: -28px; top: 44%; transform: rotate(-90deg); font-size: 30px; z-index: 10;}
#info4 .inner .flow-zu li:last-child::before{ display: none; content: "";}
#info4 .inner .flow-zu li img{ width: 70%; height: auto;}
#info4 .inner .flow-zu li span{ width: 90%; text-align: center; margin-top: 10px; color: #fff; border-radius: 30px; font-weight: bold; background: #555;}
/**/
#info4 .inner .oubo{ width: 100%; display: flex; justify-content: space-between; padding: 30px; border-radius: 20px; margin-top: 40px; background: #fff; border: solid 4px #aed000;}
#info4 .inner .oubo div{ display: flex; flex-direction: column; align-items: flex-start;}
#info4 .inner .oubo h3{ display: flex; flex-direction: column; align-items: flex-start; margin-right: 40px;}
#info4 .inner .oubo h3 span{width: 100%; height: 22px; margin-bottom: 5px; font-size: 12px; display: flex; justify-content: center; color: #fff; border-radius: 30px; align-items: center; line-height: 1em; }
#info4 .inner .oubo h3 b{ display: block; white-space: nowrap; }
#info4 .inner .oubo .list{ }
#info4 .inner .oubo .list ul{ width: 100%; display: block;}
#info4 .inner .oubo .list ul li{ width: 100%; display: flex;justify-content: flex-start; margin: 4px 0;}
#info4 .inner .oubo .list ul li b{width: 80px; font-size: 12px;}
#info4 .inner .oubo .list ul li span{ font-size: 12px; flex: 1;}
#info4 .inner .oubo .list .cap{ width: 100%; display: block; padding: 8px; margin-top: 10px; border: solid 1px #ddd; border-radius: 4px;}
#info4 .inner .oubo .list .cap span{ width: 100%; display: block; font-size: 11px; padding-left: 20px; text-indent: -20px;}
@media screen and (max-width:750px) {
#info4 .inner .oubo{ flex-direction: column; justify-content: flex-start;}
#info4 .inner .oubo h3{ width: 100%; flex-direction: row; align-items: center; padding-bottom: 10px; border-bottom: double 3px #aed000; margin-bottom: 10px; }
#info4 .inner .oubo h3 span{ width: auto; height: 26px; margin:0 15px 0 0; padding: 0 15px; background: #99B700; border-radius: 4px;}
#info4 .inner .oubo h3 b{ font-size: 24px;}
}
@media screen and (max-width:650px) {
#info4 .inner .flow-zu li{ background: #fff; border: solid 1px #666;}
#info4 .inner .flow-zu li span{ display: flex; align-items: center; font-size: 3.0vw; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; border-radius: 2px; background: none; color: #444;}
}
@media screen and (max-width:550px) {
#info4 .inner .flow-zu li span{ font-size: 5.0vw;}
}

/*===========================
 #info5
============================*/
#info5 h2{ margin-bottom: 15px; display: flex; align-items: baseline;}
#info5 h2 .tit-eng-h2{ margin-right: 15px;}
#info5 .inner{ width: 94%; max-width: 600px;}
#info5 .inner dl > dt b{ background:#0db9e1; color: #fff; border: solid 1px #0db9e1;}
#info5 .inner dl > dd b{ background: #fff; color: #0db9e1; border: solid 1px #0db9e1;}
#info5 { padding: 60px 0 ; background:#fff;}
#info5 .inner dl{ width: 100%; display: block;}
#info5 .inner dl > *{ width: 100%; display: flex; padding: 10px 10px 10px 36px; position: relative;}
#info5 .inner dl dt{ border-bottom: dotted 1px #aaa;}
#info5 .inner dl dd{ margin-bottom: 40px;}
#info5 .inner dl > * b{ width: 26px; height: 26px; position: absolute; left: 0; top: 7px; font-size: 14px; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
#info5 .inner dl > dd b{ margin-top: 2px;}
#info5 .inner dl ＞ * span{}


/*===========================
 #page-up
============================*/
#pageup { position: fixed; right:-30px; bottom: 5px; z-index: 1000; opacity: 0; pointer-events: none; transition: 0.4s;}
.pageupOn #pageup{ opacity: 1; pointer-events: fill; right: 10px;}
#pageup a { width: 140px; height: 30px; display: flex; font-size: 12px; justify-content: center; align-items: center; color: #444; background: #fff; border-radius: 2px; border: solid 1px #444;}
#pageup a:hover{ color: #fff; background: #444;}

@media screen and (max-width:1100px) {
#pageup a { width: 110px; height: 22px; font-size: 10px;}
}
@media screen and (max-width:850px) {
#pageup { bottom: 70px;}
.pageupOn #pageup{ right: 0px;}

#pageup a { width: 40px; height: 60px; color: #fff; background: #444; border-radius: 2px 0 0 2px;}

}
/*===========================
 #pc-cta
============================*/
.pc-cta{display: flex; position: fixed; right: -30px; z-index: 1000; opacity: 0; pointer-events: none; transition: 0.4s;}
.pageupOn .pc-cta{ opacity: 1; pointer-events: fill; right: 10px;}
.pc-cta.hp{ bottom:160px; }
.pc-cta.mainavi{ bottom:50px; }
.pc-cta a{ width: 140px; height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius:4px;}
.pc-cta.hp a{ background:#D7393B;}
.pc-cta.hp a:hover{ background:#AA0002;}
.pc-cta.hp a * { color:#fff;}
.pc-cta.mainavi a{ border: solid 1px #444; padding: 0 5px; background: #fff;}
.pc-cta.mainavi a:hover{ background:#ddd;}
.pc-cta a *{ }
.pc-cta a span { font-size:22px; font-weight: 900;}
.pc-cta a b{ font-size: 10px; font-weight: 700; line-height: 1em;}
.pc-cta.mainavi a b{ padding: 4px 6px; border-radius: 20px; background:#00aaeb; color: #fff; margin-top: 2px;}
.pc-cta a .mainabi{ width: 100%; mix-blend-mode: multiply;}
.pc-cta a .icon{ width: 20px; height: 20px; margin-top: 10px; transition: 0.4s;}
.pc-cta a:hover .icon{ margin-left: 5px;}

@media screen and (max-width:1100px) {
.pc-cta.hp{ bottom:110px; }
.pc-cta.mainavi{ bottom:32px; }
.pc-cta a{ width: 110px; height: 70px;}
.pc-cta a span { font-size:16px;}
.pc-cta a b{ font-size: 7px;}
.pc-cta a .icon{ width: 14px; height: 14px; margin-top: 5px;}
}
@media screen and (max-width:850px) {
.pc-cta, 
.pageupOn .pc-cta{ display: none !important;}
}

/*===========================
 #sp-cta
============================*/
@media screen and (min-width:850.1px) {
#sp-cta{ display: none !important;}
}

@media screen and (max-width:850px) {
#sp-cta{ display: flex !important; justify-content: center; align-items: center; width: 100%; padding: 10px; background: rgba(0,0,0,.7); position: fixed; right: 0; bottom: -30px; z-index: 1000000; opacity: 0; pointer-events: none; transition: 0.4s;}
.pageupOn #sp-cta{ opacity: 1; pointer-events: fill; bottom: 0px;}	
#sp-cta a{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 42%; height: 44px; max-width: 220px; margin: 0 10px;}
#sp-cta a.hp{ background: #0D8851;}
#sp-cta a.hp * { color: #fff;}
#sp-cta a.mainavi{ border: solid 1px #444; padding: 2px 5px; background: #fff;}
#sp-cta a.hp b{ font-size: 16px;}
#sp-cta a.hp .txt{ display: flex; align-items: center; font-size: 8px; margin-top: 2px; color: #0D8851; background: #fff; padding: 1px 10px; border-radius: 10px;}
#sp-cta a .txt .icon{ width: 10px; height: auto; margin-right: 5px;}	
#sp-cta a.mainavi b{ font-size: 16px;}
#sp-cta a.mainavi .mainabi{ height: 24px; width: auto;}
#sp-cta a.mainavi .txt{ font-size: 8px; margin-top: 2px; color: #fff; background: #00aaeb; padding: 1px 10px; border-radius: 10px;}
}
@media screen and (max-width:500px) {
#sp-cta{ padding: 10px 0;}
#sp-cta a{ width: 46%; margin: 0 2%;}

}