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

.movie-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#philosophy ul {
list-style-type: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#philosophy ul li {
width: 30%;
}
#philosophy ul li:nth-child(2) {
margin: 0 5%;
}
#philosophy ul li:nth-child(4) {
margin-right: 5%;
}
#philosophy ul li:nth-child(5) {
margin-rleft: 5%;
}
#philosophy ul li img {
border-radius: 50%;
}
#philosophy ul li h3 {
display: table;
margin: 0 auto;
color: #00267F;
}
#philosophy h4 span {
display: inline-block;
background: #CB000B;
color: #fff;
line-height: 150%;
}

#main section#message {
padding-bottom: 0;
}
#message {
background: #e5e9f2;
}
#message h2 span {
display: block;
color: #CB000B;
}
#ceo h4 {
font-weight: normal;
}
#ceo h4 span {
display: table;
}
#ceo h4 span:first-child {
font-weight: bold;
}
#ceo h4 span:last-child {
font-weight: bold;
color: #CB000B;
}

#profile table {
width: 100%;
margin-bottom: 30px;
}

#history ul {
list-style-type: none;
border-left: 10px solid #e5e9f2;
}
#history ul li {
position: relative;
background: url("../images/border.svg") repeat-x left top;
background-size: 2px 2px;
}
#history ul li:last-child {
padding-bottom: 0;
}
#history ul li > span {
position: absolute;
background: #00267F;
color: #fff;
font-weight: bold;
display: grid;
place-items: center;
border-radius: 50%;
}
#history ul li > span.small-circle {
background: #fff;
border: 1px solid #00267F;
}
#history ul li > div {
background: #fff;
transform: translateY(-16px);
}
#history ul li p.day {
font-weight: bold;
color: #00267F;
}
#history ul li p.day span {
font-weight: normal;
color: #000;
}
#history ul li h4 {
display: table;
background: #CB000B;
color: #fff;
}
#history ul li h3 {
color: #00267F;
}

#sdgs h2 {
max-width: 800px;
margin: 0 auto;
}
#sdgs h4 {
text-align: center;
}
#pdf {
list-style-type: none;
display: flex;
justify-content: space-between;
max-width: 640px;
margin: 0 auto;
}
#pdf li {
width: 48%;
max-width: 240px;
}
#pdf li a {
display: block;
background: #768098;
color: #fff;
position: relative;
transition: .6s;
}
#pdf li a:before {
position: absolute;
top: 50%;
transform: translateY(-50%);
content: '\f054';
font-family: "Font Awesome 5 Pro";
transition: .6s;
}
#sdgsMenu {
list-style-type: none;
display: flex;
justify-content: space-between;
max-width: 960px;
margin: 0 auto;
}
#sdgsMenu li a {
display: block;
position: relative;
}
#sdgsMenu li a:before {
position: absolute;
left: 50%;
transform: translateX(-50%);
content: '\f078';
color: #98A6B5;
font-family: "Font Awesome 5 Pro";
font-weight: 700;
transition: .6s;
}
#sdgs article:last-child {
padding-bottom: 0;
}
#sdgs h5 {
display: table;
margin: 0 auto;
}
#sdgs6 h5 {
color: #0397D1;
}
#sdgs7 h5 {
color: #FFAD00;
}
#sdgs8 h5 {
color: #830024;
}
#sdgs9 h5 {
color: #E85102;
}
#sdgs11 h5 {
color: #F68E01;
}
#sdgs17 h5 {
color: #002555;
}
#sdgs dl dd:last-child {
padding-bottom: 0;
}


#actual > ul {
list-style-type: none;
padding-left: 0;
}
#actual > ul > li {
border-bottom: 1px solid #303030;
}
#actual > ul > li:last-child {
margin-bottom: 0;
}
.thumbnail .slick-track {
transform: unset !important;
}
.thumbnail-img {
opacity: 0.3;
transition: opacity .3s linear;
}
.thumbnail .slick-current {
opacity: 1;
}
#actual .flex .item-detail h3 {
border-bottom: 1px solid #CB000B;
}
#actual .flex .item-detail h3 span {
display: block;
font-size: 0.8em;
padding-bottom: 10px;
}
#actual .flex .item-detail dl dt {
color: #CB000B;
font-weight: bold;
}
#actual .flex .item-detail dl dd ul {
padding-left: 20px;
}
p.price span:first-child {
background: #CB000B;
color: #fff;
display: inline-block;
}
p.price span:nth-child(2), p.price span:last-child {
color: #CB000B;
}
p.price span:nth-child(2) {
font-weight: bold;
}

#intro h2 {
text-align: center;
border-bottom: 1px solid #0EA19B;
display: table;
margin: 0 auto;
}
#intro h2 span {
display: block;
color: #0EA19B;
font-weight: bold;
}
#intro p {
display: table;
margin: 0 auto;
}
#intro ul {
list-style-type: none;
padding-left: 0;
display: flex;
justify-content: space-between;
}
#intro ul li {
width: 48%;
}
#intro ul li img {
border-radius: 8px;
}
#reseved1, #reseved1 img {
position: relative;
}
#reseved1 .box {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
#reseved1 h2 {
background: #CB000B;
color: #fff;
font-weight: bold;
}
#reseved1 h3 {
color: #fff;
}
#reseved1 h3 span {
color: #CB000B;
}
#reseved1 p {
background: #fff;
}
#reseved2 {
background: #FFF68B;
}

#imageMovie h2, #imageSlide h2, #welcome h2, #welcome h3 {
text-align: center;
}
#welcome {
position: relative;
}
#welcome:before {
position: absolute;
top: 0;
left: 0;
content: "";
display: block;
width: 100%;
background: #FDC6E6;
z-index: 0;
}
#welcome .box_m {
position: relative;
z-index: 1;
}

#business ul {
list-style-type: none;
padding-left: 0;
}
#business p {
text-align: center;
font-weight: bold;
}
#business h3 {
text-align: center;
}
#business h3 span {
display: block;
color: #CB000B;
}
#business ul {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
#business ul li a {
display: block;
position: relative;
background: #000;
}
#business ul li a span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
color: #fff;
font-weight: bold;
white-space: nowrap;
}
#business ul li a img {
opacity: .5;
}

#main > section#access {
padding-bottom: 0;
}

@media (max-width: 560px){
.nobr {
display: none;
}

#area {
padding-bottom: 40px;
}

#philosophy ul {
padding-bottom: 30px;
}
#philosophy ul li:nth-child(-n+3) {
padding-bottom: 20px;
}
#philosophy ul li img {
margin: 0 auto 5px;
}
#philosophy ul li h3 {
font-size: 2rem;
}
#philosophy h4 span {
padding: 0 4px;
}

#main section#message {
padding-top: 80px;
margin-bottom: 80px;
}
#message h2 {
padding-bottom: 40px;
font-size: 2.2rem;
text-align: center;
}
#message h2 span {
font-size: 5rem;
}
#message h3 {
text-align: center;
font-size: 6vw;
padding-bottom: 30px;
}
#ceo p {
line-height: 200%;
}
#ceo h4 {
transform: translateY(120%);
font-size: 1.8rem;
}
#ceo h4 span:first-child {
font-size: 2.4rem;
}
#ceo h4 span:last-child {
font-size: 1.6rem;
}
#ceo img {
width: 100%;
padding-left: 20%;
}

#profile table {
border-collapse: separate;
border-spacing: 0 30px;
}
#profile table th, #profile table td {
display: block;
width: 100%;
}
#profile table th {
background: #CB000B;
color: #FFF;
text-align: left;
padding: 8px;
}
#profile table td {
font-size: 1.5rem;
padding: 8px 0;
line-height: 200%;
}

#history ul li {
padding: 0 0 40px 30px;
}
#history ul li > span {
width: 50px;
height: 50px;
transform: translate(-60px,-25px);
}
#history ul li > span.small-circle {
width: 20px;
height: 20px;
transform: translate(-45px,-10px);
}
#history ul li > div {
padding-left: 4px;
}
#history ul li p.day {
font-size: 2rem;
padding-bottom: 8px;
}
#history ul li p.day span {
font-size: 1.6rem;
padding-left: 10px;
}
#history ul li img {
padding-bottom: 6px;
}
#history ul li h4 {
padding: 4px 8px;
margin-bottom: 6px;
}
#history ul li h3 {
font-size: 2.5rem;
}
#history ul li h3.h3s {
font-size: 1.8rem;
padding-bottom: 8px;
}

#sdgs h2 {
padding-bottom: 20px;
}
#sdgs h3 {
padding-bottom: 40px;
}
#sdgs h4 {
font-size: 3rem;
padding-bottom: 30px;
}
#pdf, #sdgsMenu {
padding-bottom: 60px;
}
#pdf li a {
font-size: 1.6rem;
padding: 6px 10px;
}
#sdgsMenu {
flex-wrap: wrap;
}
#sdgsMenu li {
width: 32%;
padding-bottom: 30px;
}
#sdgsMenu li a {
padding-bottom: 30px;
}
#sdgsMenu li a:before {
font-size: 2rem;
}
#sdgs article {
padding-bottom: 50px;
}
#sdgs article img {
padding-bottom: 40px;
}
#sdgs h5 {
font-size: 2rem;
padding-bottom: 30px;
}
#sdgs dl dt {
padding-bottom: 6px;
}
#sdgs dl dd {
padding-bottom: 20px;
}

#actual > ul > li {
padding-bottom: 50px;
margin-bottom: 50px;
}
#actual .flex .photo {
padding-bottom: 40px;
}
#actual .flex .photo .slider {
padding-bottom: 10px;
}
#actual .flex .photo .thumbnail li {
padding: 0 3px;
}
#actual .flex .item-detail h3 {
font-size: 2rem;
padding-bottom: 8px;
margin-bottom: 12px;
}
#actual .flex .item-detail dl {
padding-bottom: 20px;
}
#actual .flex .item-detail dl dt {
font-size: 1.8rem;
padding-bottom: 8px;
}
#actual .flex .item-detail dl dd {
padding-bottom: 20px;
}
p.kibou {
font-size: 1.2rem;
}
p.price span:first-child {
padding: 4px 8px;
margin-right: 10px;
}
p.price span:nth-child(2) {
font-size: 3rem;
}
p.price span:last-child {
font-size: 1.6rem;
}

#intro h2 {
font-size: 5vw;
margin-bottom: 20px;
}
#intro h2 span {
font-size: 6.6vw;
}
#intro p {
padding-bottom: 40px;
}
#intro > img {
padding-bottom: 30px;
}

#reseved1 .box {
width: 100%;
height: 100%;
}
#reseved1 .box h2 {
text-align: center;
padding: 4px 0;
margin-bottom: 10px;
}
#reseved1 .box h3 {
text-align: center;
font-size: 6vw;
}
#reseved1 .box p {
font-size: 3vw;
position: absolute;
bottom: 0;
padding: 8px;
width: 100%;
text-align: center;
}
#reseved1 .box h2 br {
display: none;
}
#reseved2 {
padding: 10px 0;
}
#reseved2 img {
display: block;
width: 60%;
margin: 0 auto;
}
#reseved2 h4 {
font-size: 2.2rem;
padding-bottom: 10px;
}
#reseved2 p {
font-size: 5vw;
}
#imageMovie h2, #imageSlide h2 {
font-size: 6vw;
padding-bottom: 20px;
}
#welcome {
padding-top: 30px;
}
#welcome:before {
height: 40vw;
}
#welcome h2 {
font-size: 6vw;
}
#welcome h3 {
font-size: 4.5vw;
padding-bottom: 20px;
}

#komiokmi {
padding-bottom: 80px;
}

#business p {
font-size: 4vw;
padding-bottom: 30px;
}
#business h3 {
font-size: 5vw;
padding-bottom: 50px;
}
#business h3 span {
font-size: 6vw;
padding-bottom: 6px;
}
#business ul li a {
font-size: 2.4rem;
}

#access iframe {
height: 50vh;
}
}

@media (min-width: 561px){
#area {
padding-bottom: 40px;
}

#philosophy ul {
padding-bottom: 40px;
}
#philosophy ul li:nth-child(-n+3) {
padding-bottom: 60px;
}
#philosophy ul li h3 {
font-size: 3.6rem;
}
#philosophy h4 {
text-align: center;
font-size: 2.2rem;
line-height: 240%;
}
#philosophy h4 span {
padding: 0 8px;
}

#main section#message {
padding-top: 120px;
margin-bottom: 120px;
}
#message > div.box {
display: flex;
justify-content: space-between;
}
#companyPhoto, #ceo {
width: 48%;
}
#companyPhoto {
background: url("../images/company.webp") no-repeat center bottom 40px;
background-size: 100% auto;
}
#message h2 {
padding-bottom: 60px;
}
#message h2 span {
font-size: 6rem;
}
#ceo h4 {
transform: translateY(100%);
}

#profile table th, #profile table td {
padding: 20px 10px;
font-size: 1.8rem;
}
#profile table th {
color: #CB000B;
border-bottom: 1px solid #CB000B;
}
#profile table td {
border-bottom: 1px solid #000;
}

#history ul li {
padding-bottom: 60px;
}
#history ul li > span {
width: 80px;
height: 80px;
font-size: 2.6rem;
}
#history ul li > span.small-circle {
width: 30px;
height: 30px;
}
#history ul li > div {
padding-left: 10px;
}
#history ul li p.day {
font-size: 3rem;
padding-bottom: 10px;
}
#history ul li p.day span {
font-size: 2rem;
padding-left: 20px;
}
#history ul li img {
padding-bottom: 10px;
}
#history ul li img.history-s {
width: 48%;
}
#history ul li h4 {
font-size: 1.8rem;
padding: 4px 12px;
margin-bottom: 10px;
}
#history ul li h3 {
font-size: 4rem;
}
#history ul li h3.h3s {
font-size: 2rem;
padding-bottom: 10px;
}

#sdgs h2 {
padding-bottom: 40px;
}
#sdgs h3 {
text-align: center;
padding-bottom: 70px;
}
#sdgs h4 {
font-size: 5rem;
padding-bottom: 40px;
}
#pdf, #sdgsMenu {
padding-bottom: 100px;
}
#pdf li a {
font-size: 2rem;
padding: 10px 20px;
}
#sdgsMenu li {
margin: 0 5px;
}
#sdgsMenu li a {
padding-bottom: 60px;
}
#sdgsMenu li a:before {
font-size: 2.8rem;
}
#sdgs article {
padding-bottom: 80px;
}
#sdgs article img {
padding-bottom: 40px;
}
#sdgs h5 {
padding-bottom: 50px;
}
#sdgs dl {
text-align: center;
}
#sdgs dl dt {
padding-bottom: 10px;
}
#sdgs dl dd {
padding-bottom: 30px;
}

#actual > ul > li {
padding-bottom: 80px;
margin-bottom: 80px;
}
#actual .flex {
display: flex;
justify-content: space-between;
}
#actual .flex .photo, #actual .flex .item-detail {
width: 48%;
}
#actual .flex .photo .slider {
padding-bottom: 20px;
}
#actual .flex .photo .thumbnail li {
padding: 0 5px;
}
#actual .flex .item-detail h3 {
font-size: 2.4rem;
padding-bottom: 10px;
margin-bottom: 20px;
}
#actual .flex .item-detail dl {
padding-bottom: 40px;
}
#actual .flex .item-detail dl dt {
font-size: 2rem;
padding-bottom: 10px;
}
#actual .flex .item-detail dl dd {
padding-bottom: 30px;
}
p.kibou {
font-size: 1.4rem;
padding-bottom: 20px;
}
p.price span:first-child {
padding: 4px 12px;
margin-right: 16px;
}
p.price span:nth-child(2) {
font-size: 4rem;
}
p.price span:last-child {
font-size: 1.8rem;
}

#intro h2 {
margin-bottom: 30px;
}
#intro p {
margin-bottom: 50px;
}
#intro > img {
padding-bottom: 50px;
}

#reseved1 .box, #reseved2 .box_m {
display: flex;
}
#reseved1 h2 {
border-radius: 50%;
display: grid;
place-items: center;
}
#reseved1 p {
text-align: center;
}
#reseved2 {
padding: 40px 0;
}
#reseved2 .box_m {
justify-content: space-between;
flex-direction: row-reverse;
align-items: center;
}
#reseved2 .box_m img {
width: 40%;
}
#reseved2 .box_m div {
width: 56%;
text-align: center;
}
#reseved2 .box_m h4 {
font-size: 2.8rem;
padding-bottom: 20px;
}
#reseved2 .box_m p {
font-size: 2.2rem;
}

#imageMovie h2, #imageSlide h2 {
font-size: 4rem;
padding-bottom: 50px;
}
#welcome {
padding-top: 40px;
}
#welcome h2 {
padding-bottom: 10px;
}
#welcome h3 {
padding-bottom: 30px;
}

#komiokmi {
padding-bottom: 120px;
}

#business p {
font-size: 2.8rem;
padding-bottom: 40px;
}
#business h3 {
font-size: 3.6rem;
padding-bottom: 80px;
}
#business h3 span {
font-size: 5rem;
padding-bottom: 10px;
}
#business ul {
display: flex;
}
#business ul li {
width: 25%;
}

#access iframe {
height: 500px;
}
}

@media (min-width: 561px) and (max-width: 960px){
#message h3 {
font-size: 2.5rem;
}
#ceo h4 {
font-size: 2rem;
}
#ceo h4 span:first-child {
font-size: 3rem;
}
#ceo h4 span:last-child {
font-size: 1.8rem;
}
#ceo img {
width: 100%;
padding-left: 20%;
}

#history ul li {
padding-left: 100px;
}
#history ul li > span {
overflow: hidden;
transform: translate(-145px,-40px);
}
#history ul li > span.small-circle {
transform: translate(-120px,-15px);
}

#sdgs h3 {
font-size: 1.5rem;
}
#sdgs h5 {
font-size: 3.6rem;
}

#intro h2 {
font-size: 3rem;
}
#intro h2 span {
font-size: 4.5rem;
}
#intro p {
font-size: 1.8rem;
}

#reseved1 .box {
top: 10px;
justify-content: space-between;
}
#reseved1 h2 {
width: 180px;
height: 180px;
font-size: 3rem;
}
#reseved1 .box > div {
width: calc(100% - 220px);
}
#reseved1 h3 {
font-size: 5.3rem;
}
#reseved1 p {
padding: 6px 0;
}
#welcome:before {
height: 300px;
}
#welcome h2 {
font-size: 4.5rem;
}
#welcome h3 {
font-size: 3rem;
}

#business ul li a {
font-size: 1.8rem;
}
}

@media (max-width: 960px){
#ceo p {
line-height: 150%;
}

#pdf li a:before {
right: 10px;
}
#sdgsMenu li a:before {
bottom: 0;
}
}

@media (min-width: 961px){
#message h3 {
font-size: 3rem;
}
#ceo p {
font-size: 1.8rem;
line-height: 200%;
}
#ceo h4 {
font-size: 2.4rem;
}
#ceo h4 span:first-child {
font-size: 3.6rem;
}
#ceo h4 span:last-child {
font-size: 2rem;
}

#history ul li {
padding-left: 200px;
}
#history ul li > span {
transform: translate(-245px,-40px);
}
#history ul li > span.small-circle {
transform: translate(-220px,-15px);
}

#sdgs h3 {
font-size: 2rem;
}
#pdf li a:hover {
background: #c8cdd8;
color: #000;
}
#pdf li a:before {
right: 20px;
}
#pdf li a:hover:before {
right: 10px;
}
#sdgsMenu li a:before {
bottom: 10px;
}
#sdgsMenu li a:hover:before {
bottom: 0;
}
#sdgs h5 {
font-size: 5rem;
}
#sdgs dl dt {
font-size: 2rem;
}
#sdgs dl dd {
font-size: 1.8rem;
}

#intro h2 {
font-size: 3.6rem;
}
#intro h2 span {
font-size: 6rem;
}
#intro p {
font-size: 2.2rem;
}

#reseved1 .box {
top: 50px;
justify-content: center;
}
#reseved1 h2 {
width: 300px;
height: 300px;
font-size: 5.5rem;
margin-right: 40px;
}
#reseved1 h3 {
font-size: 9rem;
}
#reseved1 p {
font-size: 2rem;
padding: 8px 0;
}

#welcome:before {
height: 350px;
}
#welcome h2 {
font-size: 5.5rem;
}
#welcome h3 {
font-size: 3.6rem;
}

#business ul li a {
font-size: 2rem;
overflow: hidden;
}
#business ul li a img {
transition: .6s;
}
#business ul li a:hover img {
filter: blur(15px);
transform: scale(1.1);
}
}

@media (min-width: 961px) and (max-width: 1280px){

}

@media (min-width: 1281px){

}