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

/* トップページ専用のスタイル
----------------------------------------------------------- */
.slider {
position: relative;
}
.slide_box {
position: relative;
height: auto;
overflow: hidden;
}
.slider .slide_box .slide_box_in ,
.slider .slide_box .slide_box_in div {
position: relative;
width: 100%;
display: flex;
align-items: center;
}
.slider .slide_box .slide_box_in picture {
position: relative;
width: 100%;
height: 100%;
display: flex !important;
align-items: center;
}
.slider .slide_box .slide_box_in img {
display: block;
object-fit: cover;
height: 100%;
width: 100%;
margin-top: 70px;
}
.slider .slide_box .catch {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 1000px;
height: 100%;
margin: 0 auto;
padding: 0 15px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.slider .slide_box .catch h3 {
 /* -ms-writing-mode: tb-rl;
writing-mode: vertical-rl;*/
text-align: left;
}
.slider .slide_box .catch h3 span {
display: block;
background: rgba(255,255,255,0.8);
font-size: 3.0rem;
line-height: 1.2;
color: #89836f;
padding: 1em .4em;
-webkit-font-feature-settings: normal;
-moz-font-feature-settings: normal;
-ms-font-feature-settings: normal;
-o-font-feature-settings: normal;
font-feature-settings: normal;
}
.slider .slide_box .catch h3 span:not(:last-of-type) {
margin-left: .4em;
}

.top main .news {
padding: 30px 0;
/*background: blanchedalmond;*/
}
.top main .news .box {
display: flex;
border: solid 1px #ccc;
justify-content: center;
padding: 30px 50px;
}
.top main .news .box .box_l {
display: flex;
align-items: center;
white-space: nowrap;
padding-right: 35px;
border-right: solid 1px rgba(158,150,151,1.00);
}
.top main .news .box .box_l h3 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.top main .news .box .box_l h3 span ,
.top main .news .box .box_l h3 em {
display: block;
font-size: 0.8em;
line-height: 1.1;
color: rgba(158,150,151,1.00);
}
.top main .news .box .box_l h3 span {
color: #333333;
margin-bottom: .3em;
font-size: 40px;
}
.top main .news .box .box_l h3 em {
letter-spacing: 0.2em;
}
.top main .news .box .box_r {
padding-left: 25px;
letter-spacing: 0.03em;
}
.top main .news .box .box_r section {
display: flex;
}
.top main .news .box .box_r section:not(:last-of-type) {
margin-bottom: .4em;
}
.top main .news .box .box_r section time {
display: block;
white-space: nowrap;
font-size: 1.6rem;
font-weight: 700;
color: #333333;
margin-right: 1em;
/*下記追加CSS*/
 /* margin-top: 5px;*/
}
.top main .news .box .box_r section p a {
/*font-size: 1.3rem;
font-weight: 700;*/
word-break: break-all;
}
/* sp
----------------------------------------------------------- */
@media screen and (max-width: 767px) {
.slider {
height: 100vh;
}
.slider .slide_box .slide_box_in ,
.slider .slide_box .slide_box_in div {
height: 100vh;
}
.slider .slide_box .catch {
width: 100vw;
padding: 0 4%;
padding-bottom: 5vh;
}
.slider .slide_box .catch h3 {
font-size: 2.5rem;
}

.top main .news {
padding: 10vw 0;
}
.top main .news .box {
display: flex;
justify-content: flex-start;
flex-direction: column;
}
.top main .news .box .box_l {
display: flex;
align-items: center;
white-space: nowrap;
padding-right: 0;
padding-bottom: 5vw;
border-right: none;
border-bottom: solid 2px #313131;
}
.top main .news .box .box_l h3 span {
font-size: 2.0rem;
}
.top main .news .box .box_r {
padding-left: 0;
padding-top: 5vw;
}
.top main .news .box .box_r section {
display: flex;
flex-direction: column;
}
.top main .news .box .box_r section time {
white-space: inherit;
margin-right: 0;
}
.top main .movie {
max-width: 100%;
padding: 10vw 4%;
}
.top main .movie .movie_box {
margin-bottom: 5vw;

}

.top main .movie h3 {
text-align: left;
font-size: 2.0rem;
}
.top main .about {
padding: 10vw 0;
}
.top main .about .box h3 {
font-size: 2.0rem;
}
.top main .about .box .comment {
max-width: 100%;
}
.top main .about .box .btn a {
font-size: 2.0rem;
}
.top main .btn_list {
padding-top: 6vw;
padding-bottom: 6vw;
display: flex;
flex-direction: column;
}
.top main .btn_list section {
width: 100%;
height: auto;
}
.top main .btn_list section a {
padding: 5vw 6vw;
}
.top main .btn_list section a::before {
top: 2vw;
left: 2vw;
width: calc(100% - (4vw + ( 2px * 2)));
height: calc(100% - (4vw + ( 2px * 2)));
}
.top main .btn_list section a h3 {
font-size: 2.0rem;
}
.top main .btn_list section a h3.line01 {
padding: 0;
}
.top main .btn_list section a p {
max-width: 100%;
}
.top main .banner_list {
padding-bottom: 10vw;
}
.top main .banner_list section:not(:last-of-type) {
margin-bottom: 5vw;
}
.top main .banner_list section a {
height: auto;
}
.top main .banner_list section a::before {
position: absolute;
top: inherit;
bottom: 0;
z-index: 1;
width: 100%;
height: 20vw;
}
.top main .banner_list section a .box {
top: inherit;
bottom: 0;
align-items: flex-end;
padding-bottom: 2vw;
}
.top main .banner_list section a .box h3 > span {
font-size: 2.5rem;
}
.top main .banner_list section a .box h3 > span em {
font-size: 2.0rem;
}
}
.top main .bg .about {
position: relative;
margin-bottom: 60px;
}
.top main .bg .about::after {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 335px;
background: rgba(0, 111, 208, .3);
content: '';
}
.top main .bg .about .w1000 {
position: relative;
z-index: 2;
padding: 0 100px;
padding-top: 70px;
}
.top main .bg .about .w1000::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 50%;
height: 335px;
background: rgba(0, 111, 208, .3);
content: '';
}
.top main .bg .about .w1000 h3 {
font-size: 6.0rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: .4em;
}
.top main .bg .about .w1000 .comment {
font-size: 2.0rem;
font-weight: 700;
margin-bottom: 3.5em;
}
.top main .bg .about .w1000 .box {
display: flex;
flex-wrap: wrap;
counter-reset: number;
}
.top main .bg .about .w1000 .box section {
position: relative;
width: 30%;
}
.top main .bg .about .w1000 .box section:not(:last-of-type) {
margin-right: 5%;
}
.top main .bg .about .w1000 .box section:before {
position: absolute;
top: -.6em;
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: inline-block;
white-space: nowrap;
background: #313131;
font-size: 3.5rem;
font-weight: 700;
line-height: 1.1;
padding: .3em;
color: #FFF;
counter-increment: number;
content: counter(number , decimal-leading-zero) '';
}
.top main .bg .about .w1000 .box section h4 {
position: relative;
background: #FFF;
border: solid 3px #89836f;
margin-bottom: 10px;
}
.top main .bg .about .w1000 .box section h4::before {
display: block;
padding-top: 100%;
content: '';
}
.top main .bg .about .w1000 .box section h4 span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
}
.top main .bg .about .w1000 .box section h4 span em ,
.top main .bg .about .w1000 .box section h4 span i {
display: block;
text-align: center;
line-height: 1.3;
font-weight: 700;
}
.top main .bg .about .w1000 .box section h4 span em {
font-size: 3.5rem;
color: #89836f;
}
.top main .bg .about .w1000 .box section h4 span i {
font-size: 2.0rem;
color: #898989;
}

.top main .bg .business {
/*position: relative;
margin-bottom: 80px;*/
}
/*.top main .bg .business::after {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 335px;
background: rgba(0, 111, 208, 1);
content: '';
}*/
.top main .bg .business .w1000 {
position: relative;
z-index: 2;
/*padding: 0 100px;*/
/*padding-top: 70px;*/
}
.top main .bg .business .w1000::before {
position: absolute;
top: 0;
right: 0;
z-index: -1;
width: 50%;
height: 335px;
/*background: rgba(0, 111, 208, 1)*/;
content: '';
}
.top main .bg .business .w1000 .box {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.top main .bg .business .w1000 .box .box_l {
border-right: solid 1px #FFF;
padding-right: 30px;
white-space: nowrap;
}
.top main .bg .business .w1000 .box .box_l h3 {
font-size: 4.0rem;
font-weight: 700;
color: #FFF;
line-height: 1.2;
margin-bottom: .1em;
}
.top main .bg .business .w1000 .box .box_l dl {
display: flex;
align-items: center;
}
.top main .bg .business .w1000 .box .box_l dl dt {
font-size: 2.0rem;
font-weight: 700;
color: #FFF;
list-style: 1.2;
margin-right: .5em;
}
.top main .bg .business .w1000 .box .box_l dl dd {
margin-left: auto;
}
.top main .bg .business .w1000 .box .box_l dl dd a {
display: block;
background: #FFF;
border: solid 1px #FFF;
font-size: 1.4rem;
font-weight: 700;
color: #89836f;
padding: .3em 1.2em .2em;
}
.top main .bg .business .w1000 .box .box_l dl dd a:hover {
background: #89836f;
border: solid 1px #FFF;
color: #FFF;
}
.top main .bg .business .w1000 .box .box_r {
padding-left: 30px;
font-size: 1.4rem;
color: #FFF;
}
.top main .bg .business .w1000 .btn {
display: flex;
/*flex-wrap: wrap;*/
justify-content: space-between;
}
.top main .bg .business .w1000 .btn section {
position: relative;
margin: 0 5%;
background: #FFF;
}
.top main .bg .business .w1000 .btn section:not(:last-of-type) {
margin-right: 5%;
}
.top main .bg .business .w1000 .btn section a {
position: relative;
display: block;
}
.top main .bg .business .w1000 .btn section a h4 {
position: absolute;
bottom: 0;
left: 0;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.top main .bg .business .w1000 .btn section a h4span {
display: block;
/*font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro','Noto Serif JP',serif;*/
font-size: 6.0rem;
line-height: 1.2;
color: rgba(255, 255, 255, .6);
margin-bottom: -.1em;
letter-spacing: .2em;
-webkit-font-feature-settings: normal;
-moz-font-feature-settings: normal;
-ms-font-feature-settings: normal;
-o-font-feature-settings: normal;
font-feature-settings: normal;
}

.top main .bg .banner {
display: flex;
}
.top main .bg .banner section {
width: 47.5%;
background: #FFF;
}
.top main .bg .banner section:first-of-type {
margin-right: 5%;
}
.top main .bg .banner section a {
position: relative;
display: block;
}
.top main .bg .banner section a::before {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 30%;
height: 100%;
display: block;
background: rgba(0, 111, 208, .5);
content: '';
}
.top main .bg .banner section a p {
}
.top main .bg .banner section a h4 {
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
display: flex;
flex-direction: column;
line-height: 1.2;
}
.top main .bg .banner section a h4 span ,
.top main .bg .banner section a h4 em {
display: block;
font-weight: 700;
color: #FFF;
}
.top main .bg .banner section a h4 span {
font-size: 4.0rem;
margin-bottom: .2em;
}
.top main .bg .banner section a h4 em {
font-size: 1.6rem;
}
.top main .loop .slick-slide {
width: 250px;
}
.top main section.news_box .loop .slick-slide {
width:500px;
}
@media screen and (max-width: 1000px) {
.slider .slide_box .catch {
width: calc(100vw - (20px * 2));
}
.top main .news {
padding-left: 20px;
padding-right: 20px;
}
.top main .bg .about .w1000 {
padding-left: 20px;
padding-right: 20px;
}
.top main .bg .business .w1000 {
padding-left: 20px;
padding-right: 20px;
}
}
@media screen and (max-width: 920px) {
.top main .loop .slick-slide {
width: 200px;
}
}

/* sp
----------------------------------------------------------- */
@media screen and (max-width: 767px) {

.slider {
height: 100vh;
}
.slider .slide_box .slide_box_in ,
.slider .slide_box .slide_box_in div {
height: 100vh;
}
.slider .slide_box .catch {
width: 100vw;
padding: 0 4%;
}
.slider .slide_box .catch h3 span {
font-size: 2.0rem;
padding: 1em .4em;
}
.top main .news {
padding: 10vw 4%;
}
.top main .news .box {
display: flex;
align-items: flex-start;
flex-direction: column;
padding: 30px;
}
.top main .news .box .box_l {
width: 100%;
border-right: none;
border-bottom: solid 1px #d2b0b0;
display: flex;
justify-content: flex-start;
padding-right: 0;
padding-bottom: 4vw;
}
.top main .news .box .box_l .box_in {
display: flex;
align-items: center;
width: 100%;
}
.top main .news .box .box_l .box_in h3 {
margin-bottom: 0;
margin-right: 5vw;
}
.top main .news .box .box_l .box_in h3 span {
font-size: 2.5rem;
margin-bottom: .2em;
}
.top main .news .box .box_l .box_in h3 em {
font-size: 0.8rem;
}
.top main .news .box .box_l .box_in p {
text-align: center;
margin-left: auto;
}
.top main .news .box .box_l .box_in p a {
font-size: 1.4rem;
padding: .3em 2.5em .2em;
}
.top main .news .box .box_l .box_in p a:hover {
background: #89836f;
border: solid 1px #FFF;
color: #FFF;
}
.top main .news .box .box_r {
width: 100%;
padding-left: 0;
padding-top: 4vw;
font-size: 1.4rem;
}
.top main .loop .slick-slide {
width: 46vw;
}

}