@charset "UTF-8";
/* CSS Document */

/* Color */
/* ビジコミ #F2971B rgba(242,151,27,1)　：　hover #E65903 */

#bizcomm #page-title .base { background: rgba(242,151,27,1); background: linear-gradient(0deg, rgba(242,151,27,1) 0%, rgba(242,151,27,.6) 100%); }
#bizcomm #page-title h1 strong { color: #F2971B; }
#bizcomm #page-title h1 strong span { color: #FFF; }
.bizcomm-bg { background: rgba(242,151,27,.2); }

/* Index */
#bizcomm #index-column ul li a { background: linear-gradient(0deg, rgba(242,151,27,.6) 0%, rgba(242,151,27,1) 100%); }
#bizcomm #index-column ul li a:hover { background: linear-gradient(0deg, rgba(242,151,27,.8) 0%, rgba(242,151,27,1) 100%); }

/* About */
#index-read h2 { font-size: 1.8rem; line-height: 1.4; text-align: center; color: #F2971B; margin-bottom: 1rem; }
#index-read p { font-size: 1.1rem; line-height: 1.8; text-align: center; }
#index-read p span::before { content: "\A"; white-space: pre; }
#bizcomm-course h2 { display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; }
#bizcomm-course h2 strong { font-size: 1.3rem; line-height: 1.3; color: #FFF; margin-right: 1.5rem; padding: .3rem .4rem; background: #F2971B; position: relative; }
#bizcomm-course h2 strong::after { content: ""; width: 1rem; height: .8rem; background: #F2971B; clip-path: polygon(0 0,100% 50%,0 100%); position: absolute; top: 50%; right: -.9rem; transform: translateY(-50%); }
#bizcomm-course h2 span { font-size: 2rem; line-height: 1.3; }
#course-box { margin-bottom: 6rem; position: relative; }
#course-box::before { content: ""; width: 5rem; height: 2px; background: #F2971B; position: absolute; bottom: -3rem; left: 50%; transform: translateX(-50%) rotate(45deg); }
#course-box::after { content: ""; width: 5rem; height: 2px; background: #F2971B; position: absolute; bottom: -3rem; left: 50%; transform: translateX(-50%) rotate(-45deg); }
#program-box { margin-bottom: 2rem; }
.course-program h3 { font-size: 1.8rem; line-height: 1.3; text-align: center; color: #F2971B; padding-bottom: 1rem; }
.cr-box { display: flex; justify-content: space-between; }
#course-box .cr-box dl { width: 30%; }
#program-box .cr-box dl { width: 47.5%; }
.cr-box dl { display: flex; flex-direction: column; }
.cr-box dl dt { font-size: 1.2rem; line-height: 1.3; text-align: center; color: #FFF; height: 4rem; margin-bottom: 1.5rem; padding-bottom: 1rem; background: #F2971B; display: flex; align-items: center; justify-content: center; position: relative; }
.cr-box dl dt span { font-size: 1rem; line-height: 1.2; text-align: center; color: #F2971B; width: 90%; padding: .4rem 0; border: solid 1px #F2971B; background: #FFF; display: block; position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); }
.cr-box dl dd { display: flex; flex-direction: column; flex-grow: 1; }
.cr-box dl dd p { text-align: justify; flex-grow: 1; padding-bottom: .6rem; }
#course-box .cr-box dl dd dl, #program-box .cr-box dl dd dl { width: calc(100% - 1rem); padding: .5rem; background: #FFF; display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; }
.cr-box dl dd dl dt { font-size: 1rem; line-height: 1.3; text-align: center; color: #F2971B; width: 3rem; height: auto; margin-bottom: 0; padding: .2rem 0; background: rgba(242,151,27,.2); }
.cr-box dl dd dl dd { font-size: .9rem; line-height: 1.4; text-align: justify; width: calc(100% - 3.5rem); display: flex; justify-content: center; flex-grow: 0;  }
#combination { padding: 1rem; background: rgba(242,151,27,.2); }
#combination h3 { font-size: 1.5rem; line-height: 1.3; text-align: center; color: #F2971B; padding-bottom: 1rem; }
#combination h3 strong { padding-left: 1rem; }
#comb-box { display: flex; align-items: stretch; justify-content: space-between; }
#comb-box dl { width: calc(24% - 1rem); padding: .5rem; background: #FFF; position: relative; overflow: hidden; }
#comb-box dl dt { height: 6rem; padding-bottom: .5rem; display: flex; align-items: center; justify-content: center; }
#comb-box dl dt span { font-size: .9rem; line-height: 1.2; text-align: center; color: #FFF; width: 7rem; padding: .3rem 0; background: #F2971B; position: absolute; top: .2rem; left: -2.5rem; transform: rotate(-45deg); }
#comb-box dl dt strong { font-size: 1.2rem; line-height: 1.2; text-align: center; z-index: 2; }
#comb-box dl dd { line-height: 1.6; text-align: justify; }

#bizcomm-read { }
#bizcomm-read dl { margin-bottom: 1rem; }
#bizcomm-read dl dt { font-size: 1.2rem; line-height: 1.3; font-weight: bold; text-align: justify; color: #F2971B; margin-bottom: .5rem; padding-bottom: .4rem; border-bottom: solid 1px #F2971B; }
#bizcomm-read dl dd p { text-align: justify; column-count: 2; column-gap: 2rem; }
#bizcomm-read dl dd ul { display: flex; justify-content: space-between; }
#bizcomm-read dl dd ul li { width: 31%; }
#bizcomm-read dl dd ul li h3 { line-height: 1.5; text-align: center; font-weight: bold; margin-bottom: .5rem; padding: .4rem .5rem; background: rgba(242,151,27,.2); }
#bizcomm-read dl dd ul li p { column-count: 1; }
#bizcomm-read h4 { font-size: 1.2rem; line-height: 1.6; text-align: center; color: #F2971B; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #index-read h2 { font-size: 1.3rem; line-height: 1.4; margin-bottom: 1rem; }
  #index-read h2 span::before { content: "\A"; white-space: pre; }
  #index-read p { font-size: 1rem; line-height: 1.6; text-align: justify; }
  #index-read p span::before { content: "";  }
  #bizcomm-course h2 { flex-direction: column; }
  #bizcomm-course h2 strong { text-align: center; width: 100%; margin: 0 0 1rem 0; }
  #bizcomm-course h2 strong::after { clip-path: polygon(0 0,100% 0,50% 100%); top: auto; right: auto; bottom: -.7rem; left: 50%; transform: translate(-50%,0); }
  #bizcomm-course h2 span { font-size: 1.5rem; line-height: 1.3; }
  .course-program h3 { font-size: 1.5rem; line-height: 1.3; }
  .cr-box { flex-direction: column; }
  #course-box .cr-box dl, #program-box .cr-box dl { width: 100%; margin-bottom: 1rem; }
  #course-box .cr-box dl:nth-last-of-type(1), #program-box .cr-box dl:nth-last-of-type(1) { margin-bottom: 0; }
  .cr-box dl dd p { line-height: 1.6; flex-grow: 0; }
  #combination h3 { font-size: 1.3rem; line-height: 1.3; }
  #combination h3 strong { padding-left: 0; }
  #combination h3 strong::before { content: "\A"; white-space: pre; }
  #comb-box { flex-direction: column; }
  #comb-box dl { width: calc(100% - 1rem); margin-bottom: 1rem; }
  #comb-box dl:nth-last-of-type(1) { margin-bottom: 0; }

  #bizcomm-read dl dd p { line-height: 1.6; column-count: 1; }
  #bizcomm-read dl dd ul { flex-direction: column; }
  #bizcomm-read dl dd ul li { width: 100%; margin-bottom: 1rem; }
  #bizcomm-read dl dd ul li:last-child { padding-bottom: 0; }
  #bizcomm-read h4 { text-align: justify; }

}

/* Lecture */
#bizcomm-direct h2 { font-size: 1.8rem; line-height: 1.4; text-align: center; color: #F2971B; }
#bizcomm-direct dl dt { width: min(100%,800px); margin: 1.5rem auto; }
#bizcomm-direct dl dd p { text-align: center; }
#bizcomm-direct dl dd p span::before { content: "\A"; white-space: pre; }
#lecture-list { padding: 2rem 0; display: flex; justify-content: space-between; }
#lecture-list dl { width: 48%; }
#lecture-list dl dt { font-size: 1.3rem; line-height: 1.2; text-align: center; color: #FFF; padding: .3rem 0; border-radius: 1rem; background: #F2971B; }
#lecture-list dl dd ul li { margin-top: 1rem; }
#lecture-list dl dd ul li a { color: #F2971B; min-height: 3rem; padding: .5rem 1rem; border: solid 1px #F2971B; border-radius: 1.5rem; background: rgba(242,151,27,.2); display: flex; align-items: center; justify-content: center; }
#lecture-list dl dd ul li a:hover { color: #FFF; background: rgba(242,151,27,.8); }
#lecture-list dl dd ul li a p { font-size: 1.1rem; line-height: 1.4; font-weight: bold; text-align: center; }
#lecture-list dl dd ul li a p span::before { content: "\A"; white-space: pre; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #bizcomm-direct h2 { font-size: 1.3rem; line-height: 1.4; margin-bottom: 1rem; }
  #bizcomm-direct dl dd p { line-height: 1.6; text-align: justify; }
  #bizcomm-direct dl dd p span::before { content: ""; }
  #lecture-list { padding-bottom: 2rem; flex-direction: column; }
  #lecture-list dl { width: 100%; }
  #lecture-list dl:nth-of-type(1) { margin-bottom: 1rem; }
  #lecture-list dl dt { font-size: 1.1rem; line-height: 1.2; padding: .3rem 0; }
  #lecture-list dl dd ul li { margin-top: .5rem; }
  #lecture-list dl dd ul li a { height: auto; }
  #lecture-list dl dd ul li a p { font-size: 1rem; line-height: 1.3; }
  #lecture-list dl dd ul li a p span::before { content: ""; }
}

#lecture-list2 { border-bottom: solid 1px #F2971B; }
#lecture-list2 dl { display: flex; align-items: stretch; justify-content: space-between; }
#lecture-list2 dl:nth-of-type(1) { margin-bottom: 1rem; }
#lecture-list2 dl dt { line-height: 1.3; text-align: center; color: #FFF; width: 7rem; height: 5rem; border-radius: 1rem; background: #F2971B; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#lecture-list2 dl dd { width: calc(100% - 8rem); }
#lecture-list2 dl dd ul { display: flex; }
#lecture-list2 dl dd ul li { line-height: 1.3; width: calc(33% - .5rem); margin-right: 2%; }
#lecture-list2 dl dd ul li:nth-child(3n) { margin-right: 0; }
#lecture-list2 dl dd ul li a { color: #F2971B; height: calc(5rem - 2px); padding: 0 .5rem; border: solid 1px #F2971B; border-radius: 1rem; background: rgba(242,151,27,.2); display: flex; align-items: center; justify-content: center; }
#lecture-list2 dl dd ul li a:hover { color: #FFF; background: rgba(242,151,27,.8); }
#lecture-list2 dl dd ul li a.active { color: #FFF; background: rgba(242,151,27,.8); }
#lecture-list2 dl dd ul li a p { font-size: .9rem; line-height: 1.3; text-align: center; }
#lecture-list2 dl dd ul li a p span::before { content: "\A"; white-space: pre; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #lecture-list2 dl { flex-direction: column; }
  #lecture-list2 dl dt { width: 100%; height: auto; margin-bottom: .5rem; padding: .2rem 0; display: block; }
  #lecture-list2 dl dd { width: 100%; }
  #lecture-list2 dl dd ul { flex-direction: column; }
  #lecture-list2 dl dd ul li { line-height: 1.3; width: 100%; margin: 0 0 .5rem 0; }
  #lecture-list2 dl dd ul li:last-child { margin-bottom: 0; }
  #lecture-list2 dl dd ul li a { height: auto; padding: .5rem; }
  #lecture-list2 dl dd ul li a p span::before { content: ""; }
}


/* Lecture1-3 */
#lecture-read .inner-box { padding-bottom: 3rem; }
#lecture-read .image { width: min(100%,500px); margin: -3.5rem auto 1.5rem auto; }
#lecture-read dl {  }
#lecture-read dl dt { font-size: 1.4rem; line-height: 1.4; text-align: center; margin-bottom: 1rem; padding: .4rem 0; border-top: solid 1px #F2971B; border-bottom: solid 1px #F2971B; }
#lecture-read dl dt span::before { content: "\A"; white-space: pre; }
#lecture-read dl dd p { text-align: justify; column-count: 2; column-gap: 3rem; }
#lecture-teacher { border-bottom: solid 1px #F2971B; background: rgba(242,151,27,.5); }
#lecture-teacher .inner-box { padding: 0; }
#lecture-teacher dl { display: flex; flex-direction: row-reverse; align-items: stretch; justify-content: space-between; }
#lecture-teacher dl dt { width: 26%; margin-top: -1.5rem; }
#lecture-teacher dl dd { width: 70%; padding-bottom: 1.5rem; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; }
#lecture-teacher dl dd h4 { font-size: 1rem; line-height: 1.3; }
#lecture-teacher dl dd h4 strong { font-size: 1.5rem; line-height: 1.4; padding-right: .5rem; }
#lecture-teacher dl dd p { font-size: .9rem; line-height: 1.4; text-align: right; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #lecture-read dl dt { font-size: 1.2rem; line-height: 1.4; }
  #lecture-read dl dd p { line-height: 1.6; column-count: 1; column-gap: 0; }
  #lecture-teacher dl dt { width: 46%; }
  #lecture-teacher dl dd { width: 50%; padding-bottom: 1rem; }
  #lecture-teacher dl dd h4 { font-size: .9rem; line-height: 1.3; }
  #lecture-teacher dl dd h4 strong { font-size: 1.2rem; line-height: 1.4; }
  #lecture-teacher dl dd p { font-size: .75rem; line-height: 1.4; }
}


/* Project1-3 */
#project-read .inner-box { padding-bottom: 3rem; }
#project-read .logo { width: min(100%,800px); margin: -3.5rem auto 1.5rem auto; }
#project-read .chart { width: min(100%,640px); margin: -3.5rem auto 1.5rem auto; }
#project-box { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
#project-box .block { margin-bottom: 4%; border-radius: 1rem; background: #FFF; position: relative; }
#project-box .block1 { width: calc(32% - 4rem); padding: 0 2rem 1.5rem 2rem; }
#project-box .block2 { width: calc(64% - 4rem); padding: 0 2rem 1.5rem 2rem; }
#project-box .block3 { width: calc(100% - 4rem); padding: 0 2rem 1.5rem 2rem; }
#project-box .block2 h2, #project-box .block3 h2 { font-size: 1.8rem; line-height: 1.3; text-align: justify; color: #F2971B; margin-bottom: 1.5rem; padding: 1rem 0 .5rem 2.5rem; border-bottom: solid 1px #F2971B; position: relative; }
#project-box .block2 h2 strong, #project-box .block3 h2 strong { width: 5rem; height: 5rem; border-radius: 50%; background: #F2971B; position: absolute; top: 50%; left: -3rem; transform: translateY(-50%); }
#project-box .block2 h2 span i, #project-box .block3 h2 span i { font-style: normal; }
#project-box .block h3 { font-size: 1.05rem; line-height: 1.4; text-align: justify; padding-bottom: 1.2rem; }
#project-box .block1 h3 { text-align: center; }
#project-box .block1 h3 span::before { content: "\A"; white-space: pre; }
#project-box .block p { line-height: 1.6; text-align: justify; }
#project-box .block2 dl.photo { display: flex; flex-direction: row-reverse; justify-content: space-between; }
#project-box .block2 dl.photo dt { width: 40%; padding-top: .2rem; }
#project-box .block2 dl.photo dt span { font-size: .8rem; line-height: 1.4; text-align: justify; padding-top: .5rem; display: block; }
#project-box .block2 dl.photo dd { width: 54%; }
#project-box dl.chara { margin-top: -1rem; }
#project-box dl.chara#kojiro dt { width: 110px; margin: 0 auto; z-index: 2; }
#project-box dl.chara#kikurin dt, #project-box dl.chara#elly dt { width: min(100%,240px); margin: 0 auto; }
#project-box dl.chara dd { line-height: 1.4; text-align: center; padding: .5rem 0 1rem 0; }
#project-box dl.chara dd span { font-size: .8rem; line-height: 1.3; }
#project-box dl.chara dd strong { display: block; }
#project1 #project-box .block1 .goods { margin: -1rem auto .8rem auto; }
#project1 #project-box #action2-sub .goods { width: 110%; margin-left: -5%; }
#project1 #project-box #action3-sub .goods { width: 150%; margin-left: -25%; }
#project2 #project-box .block1 .goods { margin: 1.5rem auto .8rem auto; }
#project2 #project-box #action2-sub, #project2 #project-box #action3-sub { padding-top: 1.5rem; }
#project2 #project-box #action2-sub .picture, #project2 #project-box #action3-sub .picture { padding-top: .5rem; }
#project2 #project-box #action2-sub .picture span { font-size: .75rem; line-height: 1.4; text-align: justify; padding-top: .4rem; display: block; }
.subtitle-box { position: relative; }
.subtitle-box h3 { width: 56%; }
.subtitle-box dl { width: 40%; position: absolute; right: 0; bottom: 0; }
.subtitle-box dl dt { text-align: right; }
.subtitle-box dl dt img { width: 60%; }
.subtitle-box dl dd { color: #FFF; width: calc(100% - .6rem); padding: .3rem; background: rgba(242,151,27,.8); position: absolute; bottom: .5rem; right: 0; }
.subtitle-box dl dd h5 { font-size: .9rem; line-height: 1.3; text-align: right; }
.subtitle-box dl dd h5 span { font-size: .75rem; line-height: 1.3; padding-left: .3rem; }
.subtitle-box dl dd p { font-size: .65rem; line-height: 1.2 !important; text-align: right !important; }
.subtitle-box dl dd p span::before { content: "\A"; white-space: pre; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #project-box { flex-direction: column; }
  #project-read .image { margin: -2.5rem auto 2rem auto; }
  #project-box .block { margin-bottom: 0; border-radius: 1rem; background: #FFF; position: relative; }
  #project-box .block1 { width: calc(100% - 2rem); margin-bottom: 2rem; padding: 0 1rem 1rem 1rem; }
  #project-box .block2 { width: calc(100% - 2rem); margin-bottom: .5rem; padding: 0 1rem 1rem 1rem; }
  #project-box #action1-main { order: 1; }
  #project-box #action1-sub { order: 2; }
  #project-box #action2-main { order: 3; }
  #project-box #action2-sub { order: 4; z-index: 2; }
  #project-box #action3-main { order: 5; }
  #project-box #action3-sub { margin-bottom: 0; order: 6; }
  #project-box .block2 h2, #project-box .block3 h2 { font-size: 1.3rem; line-height: 1.3; margin-bottom: 1rem; padding: .5rem 0 .5rem 4rem; }
  #project-box .block2 h2 strong, #project-box .block3 h2 strong { width: 5rem; height: 5rem; top: 50%; left: -1.5rem; }
  #project-box .block2 h2 span i::before, #project-box .block3 h2 span i::before { content: "\A"; white-space: pre; }
  #project-box .block h3 { padding-bottom: .8rem; }
  #project-box .block1 h3 span::before { content: ""; }
  #project-box .block p { line-height: 1.5; }
  #project-box .block2 dl.photo { flex-direction: column; }
  #project-box .block2 dl.photo dt { width: 100%; padding: 0 0 .5rem 0; }
  #project-box .block2 dl.photo dd { width: 100%; }
  #project1 #project-box #action3-sub .goods { width: 120%; margin-left: -10%; }
  .subtitle-box { padding-bottom: 4rem; }
  .subtitle-box h3 { width: 60%; }
  .subtitle-box dl { width: 100%; }
  .subtitle-box dl dt img { width: 36%; }
  .subtitle-box dd {}
  .subtitle-box dl dd p span { padding-left: .5em;}
  .subtitle-box dl dd p span::before { content: ""; }
}

#subconte-link.top-line { border-top: solid 1px #F2971B; }
#subconte-link ul li a { color: #F2971B; border-color: #F2971B; background: #FFF; }
#subconte-link ul li a::after { background: #F2971B; }
#subconte-link ul li a:hover { background: rgba(242,151,27,.2); }
#subconte-link ul li a.active { color: #FFF; background: rgba(242,151,27,.8); background: linear-gradient(0deg, rgba(242,151,27,.7) 0%, rgba(242,151,27,1) 100%); }
#subconte-link ul li a.active::after { background: #FFF; }