@font-face { font-family: 'Noto Serif Japanese'; src: url('https://s3-ap-northeast-1.amazonaws.com/disco-production/static-content/en/company_list/00016874/original/osk/fonts/notoserif-r.woff') format('woff'); font-style: normal; font-weight: 400; }


.cf-custom-content-01 { }

#zensho { font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; font-size: 17px; line-height: 2.1; color: #333; -webkit-text-size-adjust: none; margin: 30px 0 120px 0; position: relative; }
h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, caption, img { margin: 0; padding: 0; border: none; font-style: normal; font-weight: normal; font-size: 100%; list-style-type: none; }
hr { display: none; }
img { width: 100%; height: auto; vertical-align: bottom; }
.mincho { font-family: "Noto Serif Japanese", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
a { color: #06C; text-decoration: none; transition: .4s; }
a:hover { color: #C00; text-decoration: none; }


/* Hamburger Menu */
#toggle { width: 60px; height: 60px; box-shadow: 0 0 0 2px #FFF; display: block; position: absolute; top: 0; right: 0; z-index: 1000; }
.fixed { position: fixed !important; top: 10px !important; right: calc((100% - 1180px) / 2) !important; }
.nav_toggle { width: 100%; height: 100%; background: #00A0D4; background: linear-gradient(180deg, #025C95 0%, #00A0D4 70%); position: relative; display: block; transition: .3s; }
.nav_toggle.show { background: #025C95; background: linear-gradient(180deg, #00A0D4 0%, #025C95 70%); }
.nav_toggle i { width: calc(100% - 30px); height: 3px; background: #FFF; position: absolute; display: block; transition: transform .3s, opacity .3s; }
.nav_toggle i:nth-child(1) { top: 27.5%; left: 50%; transform: translateX(-50%); }
.nav_toggle i:nth-child(2) { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.nav_toggle i:nth-child(3) { bottom: 27.5%; left: 50%; transform: translateX(-50%); }
.nav_toggle.show i:nth-child(1) { box-shadow: none; transform: translate(-50%,385%) rotate(-45deg); }
.nav_toggle.show i:nth-child(2) { opacity: 0; }
.nav_toggle.show i:nth-child(3) { box-shadow: none; transform: translate(-50%,-385%) rotate(45deg); }

#hamburger {}
#hamburger .nav { width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); position: fixed; top: 0; left: 0; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 999; }
#hamburger .nav ul { width: 24em; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#hamburger .nav ul li { font-size: 2vw; line-height: 1.2; text-align: center; }
#hamburger .nav ul li a { color: #FFF; padding: .8em 1em; display: block; }
#hamburger .nav ul li a:hover { color: #F93; }
#hamburger .nav ul li a.active { color: #F93; }
#hamburger .nav ul li a.active:hover { color: #F93; }
#hamburger .nav.show { opacity: 1; visibility: visible; }


/* Index */
#message { position: relative; }
#head-logo { width: 230px; }
#main-visual { width: 900px; position: absolute; top: 0; right: 0; z-index: 2; }
#message-read { width: 900px; margin: 80px 0 140px 0; padding: 45% 0 15% 0; background: #00A0D4; background: linear-gradient(180deg, #025C95 0%, #00A0D4 70%); position: relative; }
#message-read h2 { width: 700px; position: absolute; top: 5%; left: 4%; z-index: 3; }
#message-read h3 { font-size: 170%; line-height: 1.3; text-align: justify; color: #FFF; margin-bottom: .5em; padding-left: 280px; position: relative; }
#message-read h3::before { content: ""; width: 260px; height: 1px; background: #FFF; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#message-read h3 span::before { content: "\A"; white-space: pre; }
#message-read p { font-size: 123%; color: #FFF; padding-left: 282px; }
#message-read p i { font-style: normal; }
#message-read p i::before { content: "\A"; white-space: pre; }
#message-read h4 { width: 640px; position: absolute; bottom: 15%; left: 4%; z-index: 1; }
#message-read ul { width: 700px; padding: 0; display: flex; position: absolute; left: 280px; bottom: 0; transform: translateY(50%); z-index: 3; }
#message-read ul li { width: 200px; height: 200px; margin-right: 50px; }
#message-accordion { width: 800px; margin-left: 380px; background: #D7E2E1; position: relative; }
#message-accordion::before { content: ""; width: 800px; height: 300px; background: #D7E2E1; position: absolute; right: 0; top: -300px; z-index: -1; }
#message-accordion dl { position: relative; z-index: 5; }
#message-accordion dl dt { width: 200px; height: 0; padding-top: 200px; background: #00A0D4; background: linear-gradient(180deg, #025C95 0%, #00A0D4 70%); position: absolute; top: -240px; left: 400px; }
#message-accordion dl dt div { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(-50%); cursor: pointer; transition: .3s; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#message-accordion dl dt:hover { background: #025C95; background: linear-gradient(180deg, #00A0D4 0%, #025C95 70%); box-shadow: 0 0 1em rgba(255,255,255,.8); }
#message-accordion dl dt strong { font-size: 150%; line-height: 1.3; font-weight: normal; text-align: center; color: #FFF; padding-bottom: 1em; }
#message-accordion dl dt span { width: 42px; height: 42px; transition: .3s; }
#message-accordion dl dt.open span { transform: rotate(-180deg); }
#message-accordion dl dd { margin-left: -380px; display: flex; justify-content: space-between; }
#message-accordion dl dd #message-img { width: 39%; padding-top: 50px; }
#message-accordion dl dd #message-txt { width: 56%; padding: 50px 70px 100px 0; position: relative; }
#message-accordion dl dd #message-txt div { width: 450px; position: absolute; top: 0; right: 100px; z-index: -1; }
#message-accordion dl dd #message-txt h5 { font-size: 200%; line-height: 1.2; color: #005EAB; padding-bottom: .6em; }
#message-accordion dl dd #message-txt p { text-align: justify; padding-bottom: 1em; }
#world { padding: 3em 0; }

.index-column { width: 100%; margin-bottom: 5rem; position: relative; }
.index-column h2 { width: min(80%,640px); margin: 0 auto 1rem auto; padding-bottom: 4rem; position: relative; }
.index-column h2::after { content: ""; width: 1px; height: 4rem; background: #AAA; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

.business-column { margin-top: 6rem; padding: 4.5rem 0; background: #D7E2E1; background: linear-gradient(90deg, #D7E2E1 0%, #D7E2E1 83%, #FFF 83%, #FFF 100%); position: relative; }
.business-right { background: linear-gradient(-90deg, #D7E2E1 0%, #D7E2E1 83%, #FFF 83%, #FFF 100%); }
.business-main { width: 50%; height: auto; position: absolute; top: -4rem; right: 0; }
.business-right .business-main { right: auto; left: 0; }
.business-inner { width: 50%; padding: 1.5% 8% 0 5%; }
.business-right .business-inner { margin-left: 50%; padding: 1.5% 5% 0 8%; }
.business-column h3 { font-size: 150%; line-height: 1.2; text-align: center; color: #FFF; width: 9em; padding: .4em 0; background: #00A0D4; background: linear-gradient(180deg, #025C95 0%, #00A0D4 70%); position: absolute; top: 0; left: 3%; transform: translateY(-50%); z-index: 2; }
.business-right h3 { right: 3%; left: auto; }
.business-column h4 { font-size: 220%; line-height: 1.8; color: #005EAB; padding-bottom: 1em; }
.business-column h4 span::before { content: "\A"; white-space: pre; }
.business-column p { text-align: justify; }
.business-column dl { width: 100%; margin: 0 auto; padding: 5rem 0 0 5%; position: relative; }
.business-right dl { padding: 5rem 5% 0 20%; }
.business-column dl dt { width: 110px; height: 0; padding-top: 110px; background: #00A0D4; background: linear-gradient(180deg, #025C95 0%, #00A0D4 70%); position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); }
.business-column dl dt div { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(-50%); cursor: pointer; transition: .3s; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.business-column dl dt:hover { background: #025C95; background: linear-gradient(180deg, #00A0D4 0%, #025C95 70%); box-shadow: 0 0 1em rgba(255,255,255,.8); }
.business-column dl dt strong { font-size: 135%; line-height: 1.3; font-weight: normal; text-align: center; color: #FFF; padding-bottom: .8em; position: relative; }
.business-column dl dt strong i { font-style: normal; }
.business-column dl dt strong i::before { content: "\A"; white-space: pre; }
.business-column dl dt strong::after { content: ""; width: .8em; height: .8em; border-right: solid 1px #FFF; border-bottom: solid 1px #FFF; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) rotate(45deg); transition: .3s; }
.business-column dl dt.open strong::after { bottom: -.5em; transform: translate(-50%,-25%) rotate(-135deg); }
.business-column dl dd { padding-top: 2rem; }
.business-column dl dd h5 { font-size: 150%; line-height: 1.2; color: #005EAB; margin-bottom: .5em; padding: .2em; background: #FFF; }
#business1 #mmd, #business3 dl { padding-right: 25%; }
#business1 #mmd p { text-align: justify; padding-bottom: 4em; }
#business1 ul { display: flex; justify-content: space-between; }
#business1 ul li { width: 23%; }
#business1 ul li div { margin-bottom: 25%; position: relative; }
#business1 ul li div strong { width: 35%; height: auto; display: block; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,50%); }
#business1 ul li p { line-height: 1.6; text-align: justify; }

#business2 ul, #business3 ul { display: flex; flex-direction: column; }
#business2 ul li, #business3 ul li { padding: 2rem 0; border-bottom: solid 1px #FFF; display: flex; align-items: flex-start; justify-content: space-between; }
#business2 ul li { flex-direction: row-reverse; }
#business2 ul li:last-child, #business3 ul li:last-child { padding-bottom: 0; border-bottom: none; }
#business2 ul li .business-img, #business3 ul li .business-img { width: 36%; }
#business2 ul li .business-txt, #business3 ul li .business-txt { width: 60%; }
#business2 ul li h6, #business3 ul li h6 { font-size: 123%; line-height: 1.4; font-weight: bold; color: #005EAB; padding-bottom: .5em; }
#business2 ul li p, #business3 ul li p { line-height: 1.6; text-align: justify; }

#project { padding-bottom: 5rem; }
#project dl { margin-bottom: 5rem; }
#project dl a { display: flex; flex-direction: row-reverse; align-items: stretch; justify-content: space-between; }
#project dl#project-btn2 a { flex-direction: row; }
#project dl a dt { width: 50%; }
#project dl a dd { width: 50%; padding: 0 4%; background: #00A0D4; background: linear-gradient(180deg, #025C95 0%, #00A0D4 70%); }
#project dl a:hover dt img { opacity: .8; }
#project dl a:hover dd { background: #025C95; background: linear-gradient(180deg, #00A0D4 0%, #025C95 70%); }
#project dl a dd h3 { margin-bottom: 2rem; position: relative; }
#project dl a dd h3 strong { font-size: 115%; line-height: 1.2; font-weight: normal; color: #FFF; width: 100%; position: absolute; bottom: .5rem; left: 0; }
#project dl a dd p { font-size: 200%; line-height: 1.8; color: #FFF; }
#project dl a dd p i { font-style: normal; }
#project dl a dd p i::before { content: "\A"; white-space: pre; }

#work h3 { font-size: 200%; line-height: 1.4; text-align: center; color: #005EAB; }
#work ul#toggle-box { margin-top: 2rem; display: flex; justify-content: space-between; }
#work ul#toggle-box li { width: 50%; }
#work ul#toggle-box li dl { display: flex; align-items: stretch; justify-content: space-between; cursor: pointer; }
#work ul#toggle-box li dl dt { width: 50%; }
#work ul#toggle-box li dl dd { width: 50%; background: #00A0D4; background: linear-gradient(180deg, #025C95 0%, #00A0D4 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; }
#work ul#toggle-box li dl dd:hover { background: #025C95; background: linear-gradient(180deg, #00A0D4 0%, #025C95 70%); }
#work ul#toggle-box li dl dd div.icon { width: 35%; }
#work ul#toggle-box li dl dd h4 { font-size: 200%; line-height: 1.2; letter-spacing: .5em; text-align: center; color: #FFF; padding: .6em 0 .8em .5em; }
#work ul#toggle-box li dl dd div.arrow { width: 18%; transition: .3s; }
#work ul#toggle-box li.open dl dd div.arrow { transform: rotate(-180deg); }
.work-ac { margin-top: 5rem; padding: 3rem 5rem 6rem 5rem; background: #D7E2E1; position: relative; }
.work-ac::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 3rem 2rem; border-color: transparent transparent #D7E2E1 transparent; position: absolute; top: -6rem; transform: translateX(-50%); }
.work-ac1::before { left: 37.5%; }
.work-ac2::before { left: 87.5%; }
.work-column { margin-top: 3rem; padding-top: 3rem; border-top: solid 2px #005EAB; display: flex; align-items: stretch; justify-content: space-between; }
.work-ac1 .work-column { min-height: 26rem; }
.work-column .work-ttl { width: 24%; display: flex; flex-direction: column;  position: relative; }
.work-column .work-ttl h5 { font-size: 180%; line-height: 1.2; color: #005EAB; }
.work-column .work-ttl div { position: absolute; bottom: 0; }
.work-column .work-txt { width: 72%; }
.work-column .work-txt dl { margin-bottom: 3rem; }
.work-column .work-txt dl:last-of-type { margin-bottom: 0; }
.work-column .work-txt dl dt { font-size: 135%; line-height: 1.2; font-weight: bold; color: #005EAB; padding-bottom: .4em; }
.work-column .work-txt dl dd p { line-height: 1.6; text-align: justify; }
.work-column .work-txt dl dd ul.attention li { font-size: 93%; line-height: 1.4; text-indent: -1em; padding: .3em 0 0 1em; }

#entry-box ul { display: flex; justify-content: space-between; }
#entry-box ul li { width: 50%; }
#entry-box ul li:first-child { width: calc(50% - 1px); }
#entry-box ul li a { font-size: 200%; line-height: 1.2; color: #FFF; height: 18rem; background: #00A0D4; background: linear-gradient(180deg, #025C95 0%, #00A0D4 70%); display: flex; align-items: center; justify-content: center; position: relative; }
#entry-box ul li a:hover { background: #025C95; background: linear-gradient(180deg, #00A0D4 0%, #025C95 70%); }
#entry-box ul li a::before { content: ""; width: 90%; height: 1px; background: #FFF; position: absolute; top: calc(50% + 1em); left: 0; }
#entry-box ul li a::after {  content: ""; width: 1.5em; height: 1px; background: #FFF; position: absolute; top: calc(50% + .5em); left: calc(90% - 1.25em); transform: rotate(45deg); }

/* PROJECT STORY */ 
#story-head { position: relative; }
#story-main { width: 50%; position: absolute; top: 0; right: 0; }
#story-main strong { display: block; position: relative; }
#story-main strong span { width: min(30%, 180px); position: absolute; bottom: -25%; right: 5%; }
#story-read { width: 65%; margin-top: 40px; background: #00A0D4; background: linear-gradient(180deg, #025C95 0%, #00A0D4 70%); }
#story-read h2 { font-size: 123%; line-height: 1.2; font-weight: bold; color: #FFF; margin: 0 0 2rem 3rem; padding: 3rem 0 .5rem 0; border-bottom: solid 1px #FFF; }
#story-read h3 { font-size: 230%; line-height: 1.6; color: #FFF; width: 75%; min-height: 7em; padding-left: 3rem; }
#story-read h3 i { font-style: normal; }
#story-read h3 i::before { content: "\A"; white-space: pre; }
#story-read .main-read { font-size: 115%; line-height: 1.8; text-align: justify; color: #FFF; padding: 3rem 3rem 0 3rem; background: url("../images/common/project_title.png") no-repeat; background-size: 100% auto; }
dl.profile { width: calc(100% - 6rem); margin: 0 auto; padding: 2rem 0; display: flex; align-items: stretch; justify-content: space-between; }
dl.profile dt { width: 25%; }
dl.profile dd { width: calc(75% - 5px); padding: 1rem; border: solid 2px #FFF; display: flex; flex-direction: column; justify-content: space-between; }
dl.profile dd p { font-size: 93%; line-height: 1.4; text-align: justify; color: #FFF; }
dl.profile dd p i { font-style: normal; }
dl.profile dd p i::before { content: "/"; padding: 0 .5em; }
dl.profile dd p strong { font-size: 150%; line-height: 1.2; margin-bottom: .3em; padding-bottom: .3em; border-bottom: solid 1px #FFF; display: block; }
dl.profile dd p strong span { font-size: 60%; font-weight: normal; }

.story { padding: 5% 0; background: #D7E2E1; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, #D7E2E1 20%, #D7E2E1 100%); position: relative; }
.story-left { background: #EDF1F1; background: linear-gradient(90deg, #EDF1F1 0%, #EDF1F1 80%, rgba(255,255,255,0) 80%, rgba(255,255,255,0) 100%); }
.story::before { content: ""; width: 100%; height: 120px; background: #D7E2E1; position: absolute; top: -120px; z-index: -1; }
.story-left::before { background: #EDF1F1; }
.story dl { width: 95%; display: flex; justify-content: space-between; }
.story dl dt { width: 32%; padding-top: 3em; }
.story dl dd { width: 64%; }
.story-left dl { margin-left: 5%; flex-direction: row-reverse; }
.story dl dd h2 { font-size: 160%; line-height: 1.4; color: #005EAB; padding-bottom: 1rem; }
.story dl dd p { text-align: justify; padding-bottom: 1em; }

.back-btn { margin-top: 4rem; }
.back-btn a { font-size: 150%; line-height: 1.2; text-align: center; color: #FFF; width: 8em; margin: 0 auto; padding: .6em 0 1em 0; background: #00A0D4; background: linear-gradient(180deg, #025C95 0%, #00A0D4 70%); display: block; position: relative; }
.back-btn a:hover { background: #025C95; background: linear-gradient(180deg, #00A0D4 0%, #025C95 70%); }
.back-btn a::before { content: ""; width: 90%; height: 1px; background: #FFF; position: absolute; bottom: .8em; right: 0; }
.back-btn a::after { content: ""; width: 1.2em; height: 1px; background: #FFF; position: absolute; bottom: 1.2em; left: 7.5%; transform: rotate(-45deg); }

@media only screen and (min-width:1281px){
	.cf-custom-content-01 { }
}

@media only screen and (max-width: 1280px) {
	.cf-custom-content-01 { }
  .fixed { position: fixed !important; right: 1.5% !important; }
  #head-logo { width: 20%; }
  #main-visual { width: 75%; }
  #message-read { width: 85%; margin: 5% 0 12% 0; }
  #message-read h2 { width: 70%; top: 4%; left: 4%; }
  #message-read h3 { font-size: 160%; padding-left: 29%; }
  #message-read h3::before { width: 26%; }
  #message-read p { font-size: 115%; padding-left: 29%; }
  #message-read h4 { width: 65%; }
  #message-read ul { width: calc(100vw - 29%); left: 29%; }
  #message-read ul li { width: min(180px,24%); height: auto; margin-right: 5%; }
  #message-accordion { width: 85%; margin-left: 15%; }
  #message-accordion::before { width: 100%; height: 200px; top: -200px; }
  #message-accordion dl dt { width: 22.5%; margin-top: -25.4%; padding-top: 22.5%; top: 0; right: 10%; left: auto; }
  #message-accordion dl dd { margin-left: -15%; display: flex; justify-content: space-between; }
  #message-accordion dl dd #message-txt div { width: 80%; }
  
  .business-inner { padding: 1% 6% 0 3%; }
  .business-right .business-inner { margin-left: 50%; padding: 1% 3% 0 6%; }
  .business-column h3 { font-size: 123%; line-height: 1.2; }
  .business-column h4 { font-size: 180%; line-height: 1.6; padding-bottom: .7em; }
  .business-column dl { padding-left: 3%; }
  .business-right dl { padding-left: 23%; }
  .business-column dl dt { transform: translate(-30%,-80%); }
  .business-right dl dt { transform: translate(-70%,-80%); }
  #business1 #mmd { padding-right: 23%; }
  
  #project dl a dd p { font-size: 160%; line-height: 1.8; color: #FFF; }
  
/* PROJECT STORY */ 
  #story-read h3 { font-size: 200%; line-height: 1.6; min-height: 6em; }

}

@media only screen and (max-width: 959px) {
	.cf-custom-content-01 { }
}

@media only screen and (max-width: 599px) {
	.cf-custom-content-01 { }
  .fixed { position: fixed !important; top: 8% !important; right: 4% !important; }
  #hamburger .nav ul li { font-size: 5vw; line-height: 1.2; text-align: center; }
  #zensho { margin: 30px 0 50px 0; }
  #head-logo { width: 40%; padding-bottom: 1em; }
  #main-visual { width: 100%; position: relative; }
  #message-read { width: 100%; margin: 0 0 50px 0; padding: 110px 4% 20% 4%; }
  #message-read::after { content: ""; width: 100%; height: 60px; background: #D7E2E1; position: absolute; bottom: -60px; left: 0; }
  #message-read h2 { width: 240px; top: -60px; left: 4%; }
  #message-read h3 { font-size: 123%; padding-left: 0; }
  #message-read h3::before { display: none; }
  #message-read h3 span::before { content: ""; }
  #message-read p { font-size: 100%; line-height: 1.6; text-align: justify; padding-left: 0; }
  #message-read p i::before { content: ""; }
  #message-read h4 { width: 85%; bottom: 20%; }
  #message-read ul { width: 92%; left: 4%; }
  #message-read ul li { width: 30%; height: auto; }
  #message-accordion { width: 100%; margin-left: 0; }
  #message-accordion::before { display: none; }
  #message-accordion dl { }
  #message-accordion dl dt { width: 28%; margin-top: -50px; padding-top: 28%; top: 0; right: 4%; left: auto; transform: translateY(-50%); }
  #message-accordion dl dd { margin-left: -15%; display: flex; justify-content: space-between; }
  #message-accordion dl dd #message-txt div { width: 80%; }
  #message-accordion dl dt strong { font-size: 93%; line-height: 1.3; padding-bottom: .5em; }
  #message-accordion dl dt span { width: 21px; height: 21px; transition: .3s; }
  #message-accordion dl dd { margin-left: 0; flex-direction: column; }
  #message-accordion dl dd #message-img { width: 92%; margin: 0 auto; padding: 1em 0; }
  #message-accordion dl dd #message-txt { width: 92%; margin: 0 auto; padding: 0; }
  #message-accordion dl dd #message-txt div { width: 80%; right: 0; }
  #message-accordion dl dd #message-txt h5 { font-size: 150%; line-height: 1.2; }
  #message-accordion dl dd #message-txt p { line-height: 1.6; text-align: justify; }

  .index-column h2 { margin: 0 auto; padding-bottom: 3rem; position: relative; }
  .index-column h2::after { height: 3rem; }

  .business-column, .business-right { margin-top: 4rem; padding: 0 0 5rem 0; background: #D7E2E1; background: #D7E2E1; }
  .business-main, .business-right .business-main { width: 100%; position: relative; top: 0; }
  .business-inner, .business-right .business-inner { width: 100%; margin-left: 0; padding: 5% 4% 0 4%; }
  .business-column h3, .business-right h3 { font-size: 123%; line-height: 1.2; width: 9em; top: 0; right: auto; left: 50%; transform: translate(-50%,-50%); z-index: 2; }
  .business-column h4 { font-size: 150%; line-height: 1.6; padding-bottom: .4em; }
  .business-column h4 span::before { content: ""; }
  .business-column p { line-height: 1.6; }
  .business-column dl { width: 100%; padding: 0; position: relative; }
  .business-column dl dt { width: 100%; height: 0; padding-top: 2.5em; position: absolute; top: auto; bottom: -3.5em; left: 50%; transform: translate(-50%,0); }
  .business-column dl dt div {  }
  .business-column dl dt strong { font-size: 123%; line-height: 1.3; padding: 0 2em 0 0; }
  .business-column dl dt strong i { padding-left: .5em; }
  .business-column dl dt strong i::before { content: ""; }
  .business-column dl dt strong::after { top: 50%; right: 0; bottom: auto; left: auto; transform: translate(0,-75%) rotate(45deg); }
  .business-column dl dt.open strong::after { bottom: -.5em; right: -.5em; transform: translate(-50%,-25%) rotate(-135deg); }
  .business-column dl dd { width: 92%; margin: 0 auto; }
  .business-column dl dd h5 { font-size: 115%; line-height: 1.2; }
  #business1 #mmd, #business3 dl { padding-right: 0; }
  #business1 #mmd p { line-height: 1.6; padding-bottom: 2em; }
  #business1 ul { flex-direction: column; }
  #business1 ul li { width: 100%; padding-bottom: 2em; }
  #business1 ul li:last-child { padding-bottom: 0; }
  #business2 ul li, #business3 ul li { flex-direction: column; }
  #business2 ul li .business-img, #business3 ul li .business-img { width: 100%; padding-bottom: .8em; }
  #business2 ul li .business-txt, #business3 ul li .business-txt { width: 100%; }

  #project { padding-bottom: 0; }
  #project h2 { margin-bottom: 1rem; }
  #project dl { margin-bottom: 2rem; }
  #project dl a, #project dl#project-btn2 a { flex-direction: column; }
  #project dl a dt { width: 100%; }
  #project dl a dd { width: 100%; padding-bottom: 1.5rem; }
  #project dl a dd h3 { margin-bottom: 1rem; position: relative; }
  #project dl a dd h3 strong { font-size: 100%; line-height: 1.2; bottom: 0; }
  #project dl a dd p { font-size: 135%; line-height: 1.4; color: #FFF; }
  #project dl a dd p i::before { content: ""; }
  
  #work h3 { font-size: 135%; line-height: 1.4; }
  #work ul#toggle-box li dl dd h4 { font-size: 4vw; line-height: 1.2; letter-spacing: 0; padding: .4em 0; }
  .work-ac { margin-top: 3rem; padding: 2% 4% 6% 4%; background: #D7E2E1; position: relative; }
  .work-ac::before { border-width: 2rem 1.5rem; top: -4rem; }
  .work-column { margin-top: 3%; padding-top: 3%; flex-direction: column; }
  .work-column .work-ttl { width: 100%; padding-bottom: 2rem; display: flex; flex-direction: column;  position: relative; }
  .work-column .work-ttl h5 { font-size: 150%; line-height: 1.2; }
  .work-column .work-ttl div { padding-top: 1rem; position: relative; }
  .work-column .work-txt { width: 100%; }
  .work-column .work-txt dl { margin-bottom: 2rem; }
  .work-column .work-txt dl dt { font-size: 123%; line-height: 1.2; padding-bottom: .3em; }

  #entry-box ul li a { font-size: 105%; line-height: 1.2; height: 8rem; }

/* PROJECT STORY */ 
  #story-main { width: 100%; position: relative; }
  #story-main strong span { width: 25%; bottom: -10%; right:4%; }
  #story-read { width: 100%; margin-top: 0; }
  #story-read h2 { font-size: 115%; line-height: 1.2; font-weight: bold; color: #FFF; margin: 0 0 2% 4%; padding: 1.2rem 0 1rem 0; border-bottom: solid 1px #FFF; }
  #story-read h3 { font-size: 180%; line-height: 1.6; width: 92%; min-height: auto; margin: 0 auto; padding: 0 0 2rem 0; }
  #story-read h3 i::before { content: ""; }
  #story-read .main-read { font-size: 100%; line-height: 1.6; padding: 4% 4% 0 4%; }
  dl.profile { width: 94%; }
  dl.profile dd p { font-size: 85%; line-height: 1.4; }
  dl.profile dd p i::before { content: "\A"; white-space: pre; padding: 0; }
  .story { padding: 4% 0; background: #D7E2E1; }
  .story-left { background: #EDF1F1; }
  .story::before, .story-left::before { height: 0; display: none; }
  .story dl, .story-left dl { width: 94%; margin: 0 auto; flex-direction: column; }
  .story dl dt { width: 100%; padding: 0 0 1rem 0; }
  .story dl dd { width: 100%; }
  .story dl dd h2 { font-size: 150%; line-height: 1.4; }
}