@charset "UTF-8";

.intro {}
.intro img{width: 100%;margin-bottom: 7vw;}
.intro .en{font-family: balboa;font-weight: 300;color: var(--green01);font-size: 4vw;margin-bottom: 0;letter-spacing: 0.08em;}
.intro .ttl{font-size: 5.6vw;font-family: var(--mincho);margin-bottom: 6vw;font-weight: 600;border-bottom: 1px solid #888;padding-bottom: 5vw;line-height: 1.5;}

.intro li{position: relative;margin-bottom: 12vw;}
.intro li img{width: 100%;margin-bottom: 4vw;}
.intro li .sub{writing-mode: vertical-rl;font-family: balboa;font-weight: 300;font-size: 4vw;margin-bottom: 0;letter-spacing: 0.08em;position: absolute;top: -2vw;right: 1vw;}
.intro li .read{margin-bottom: 1vw;font-size: 4vw;color: var(--green01);font-weight: bold;}

.history{padding: 7%;background: var(--gray);}
.history ul{text-align: left;}
.history li {overflow: hidden;position: relative;width: 100%;}
.history .date {width: 100%;display:block;text-align:left;padding: 0 0 0 5vw;margin: 0;border-left: 1px solid #222;font-weight: bold;margin-bottom:0;color: var(--green01);font-size: 4vw;}
.history .list {width:100%;border-left: 1px solid #222;padding: 0px 0 6% 5%;vertical-align: top;text-align: justify;}
.history .list:before {content: '';width: 12px;height: 12px;background: #222;position: absolute;left: -5px;top: 9px;border-radius: 100%;}

.history .list li{text-indent: 0;padding-left: 0;line-height: 1.6;margin-bottom: 1vw;color: #444;}
.history .list li:before{content: "・";}

.gallery{margin-bottom: 10vw;}
.gallery span{font-family: balboa;font-weight: 300;}
.gallery img { height: auto; width: 100%;}
.gallery .slider { margin-bottom: 2vw;}
.gallery .thumbnail img { border:1px solid #fff;}


.top-company { padding: 16vw 0; background: var(--gray); }
.top-company-title{text-align-last: left;}
.top-company-content { width: 90vw; margin: 0 auto; }
.top-company-items { width: 100%; border-top: 1px solid #9a9b9a; }
.top-company-items li { width: 100%; border-bottom: 1px solid #9a9b9a; }
.top-company-items a { padding: 5vw 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: center; align-items: center; }

.top-company-item-image { width: 25vw; margin-right: 5vw; }
.top-company-item-title { flex: 1; }
.top-company-item-title .en { margin-bottom: 2.5vw; font-size: 7.8vw; font-family: balboa; font-weight: 300; letter-spacing: 0.04em; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: center; align-items: center; }
.top-company-item-title .en .plus { width: 2.5vw; height: 2.5vw; margin-left: 2vw; position: relative; }
.top-company-item-title .en .plus:before { content: ''; width: 100%; height: 2px; background: #000; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.top-company-item-title .en .plus:after { content: ''; width: 2px; height: 100%; background: #000; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.top-company-item-title .jp { font-size: 3.42vw; opacity: 0.6; display: block; }


/* ============================================= 
pc
================================================*/
@media screen and (min-width: 736px) { 
.intro{}
.intro img{margin-bottom: 40px;}
.intro .en{font-size: 18px;margin-bottom: 10px;}
.intro .ttl{font-size: 30px;margin-bottom: 40px;line-height: 1.6;padding-bottom: 36px;}
.intro p{line-height: 1.9;}

.intro ul{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: flex-start;align-items: flex-start;}
.intro li{margin-bottom: 20px;width: 47%;}
.intro li img{margin-bottom: 20px;}
.intro li .sub{font-size: 20px;top: -12px;right: 10px;}
.intro li .read{margin-bottom: 10px;font-size: 20px;}

.history{padding: 50px 0 0 0;}
.history img{width: 100%;max-width: 600px;object-fit: cover;height: 400px;margin: 0;}
.history li {display: -webkit-flex;display: flex;-webkit-justify-content: flex-start;justify-content: flex-start;}
.history .date {width: 110px;padding: 0 90px 0 0px;padding-right: 30px;border-left: none;font-size: 16px;margin-bottom: 0;line-height: 1.6;}
.history .list {padding: 0 0 30px 40px;}
.history .list:before {left: 98px;top: 6px;}

.history .list li{margin-bottom: 4px;}
.history .list li:before{content: "・";}

.gallery{width: 90%;margin: 0 auto 100px;}
.gallery span{font-family: balboa;font-weight: 300;font-size: 20px;}
.gallery img { height: auto; width: 100%;}
.gallery .slider { margin-bottom: 2vw;}
.gallery .thumbnail img { border:1px solid #fff;}


.top-company { padding: 140px 0; }
.top-company-content {width: clamp(730px, 90%, 1200px);display: -webkit-box;display: -webkit-flex;display: flex;justify-content: space-between;align-items: flex-start;}
.top-company-items {width: 100%;max-width: 810px;margin-left: 5vw;}
.top-company-items li { z-index: 1; position: relative; }
.top-company-items li:hover:before { width: 100%; }
.top-company-items li:hover a { opacity: 1; }
.top-company-items li:hover .top-company-item-title .en { letter-spacing: 4px; }
.top-company-items li:hover .top-company-item-title .jp { letter-spacing: 2px; }
.top-company-items li:hover .top-company-item-image{margin-left: 20px;transition: .6s;}
.top-company-items li:hover .top-company-item-more { right: 20px; }
.top-company-items li:before {content: '';width: 0;height: 100%;background: #74daac;z-index: -1;position: absolute;top: 0;left: 0;-moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);-o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);-webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);}
.top-company-items a { padding: 30px 0; }
.top-company-item-image { width: 110px; margin-right: 20px; transition: .6s;}
.top-company-item-title { padding-right: 130px; }

.top-company-item-title .en { margin-bottom: 8px; font-size: 36px; letter-spacing: 2px; -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
.top-company-item-title .jp { font-size: 15px; -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
.top-company-item-more { font-size: 20px; font-family: balboa; font-weight: 300; letter-spacing: 1px; position: absolute; top: 50%; right: 10px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: center; align-items: center; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
.top-company-item-more .plus { width: 10px; height: 10px; margin-left: 15px; position: relative; }
.top-company-item-more .plus:before { content: ''; width: 100%; height: 1px; background: #000; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.top-company-item-more .plus:after { content: ''; width: 1px; height: 100%; background: #000; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.top-company-item-more .plus:hover{background: #fff;}
.top-company-item-more .plus:before:hover{background: #fff;}
.top-company-item-more .plus:after:hover{background: #fff;}

}