@charset "utf-8";
/*home*/
::-webkit-scrollbar{display:none}
.loading{height:100vh;width:100%;position: fixed;top: 0;left: 0;z-index: 999; background: #2c5382;display: flex;
justify-content: center;align-items: center;}

.loading img{width: 80%;height: auto;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
/*メイン写真スライド*/
#mainimg{width: 100%;height: 520px;overflow: hidden;background:#2c5382;text-align: center;position:relative;margin-bottom: 100px}

#mainimg h2 span{background: #fff;padding: 4px;}
#slide_wrapp {  position: relative;  overflow: hidden;}
#slide_wrapp .slide_item {  opacity: 0; transform: scale(1);  transition: opacity 2s linear, transform 7.5s linear;  position: relative;  z-index: 1;}
#slide_wrapp .slide_item:not(:first-child) {  position: absolute;  top: 0;  left: 0;right: 0;margin: auto}
#slide_wrapp .slide_item.show_ {  opacity: 1;}
#slide_wrapp .slide_item.zoom_ {  transform: scale(1.1);}
#slide_wrapp .slide_item img {  display:inline-block;width: 100%}
@media screen and (min-width:768px){ /*PC独自設定*/
#mainimg h2 { 
position: relative;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
font-size: 2.1rem;text-align: left;letter-spacing: 0.1em;line-height: 2.6em;z-index: 5;position:absolute;  top:32%;  left:50%;  transform:translate(-50%, -32%);}
}
@media screen and (max-width: 768px) {
#mainimg{height:auto;overflow: hidden;margin-bottom: 50px}
#mainimg h2 { 
position: relative;
font-size: 1.8rem;text-align: left;letter-spacing: 0.1em;line-height: 2.6em;z-index: 5;position:absolute;  top:50%;left: 6%; transform:translate(0%, -50%);}
}
}


/*ニュース*/
#news{}
#news .tab {margin: 20px 0;text-align: left;}
#news .tab li {  color: #333;background: #d2d0dc; display:inline-block;width: 160px;text-align: center;  padding: 6px;  cursor: pointer;  transition: .3s;}
#news .tab li.active {  color: #fff;  background: #2c5382;  cursor: auto;}
#news .area li a{position: relative;padding-left: 16px;}
#news .area li a:after {display: block;content: "";position: absolute;top: 50%;left: 2px;width: 4px;height: 4px;margin: -2px 0 0 0;border-top: solid 1px #2c5382;border-right: solid 1px #2c5382;-webkit-transform: rotate(45deg);        transform: rotate(45deg);}
#news .area div {  display: none;}
#news .area div.show {  display: block;}
#news .area ul{}
#news .area li{text-align: left;border-bottom: 1px dashed #ccc;padding-bottom: 10px;margin-bottom: 10px}
#news .area li a{text-decoration: underline}

#news .area p{border: 1px solid #2c5382;padding: 6px;margin: 40px auto 0;width: 230px;}
#news .area p a{display: block;color: #2c5382;position: relative;}
#news .area p a:after {
display: block;
content: "";
position: absolute;
top: 50%;
right: 12%;
width: 6px;
height: 6px;
margin: -4px 0 0 0;
border-top: solid 2px #2c5382;
border-right: solid 2px #2c5382;
-webkit-transform: rotate(45deg);
        transform: rotate(45deg);
}
@media screen and (max-width: 768px) {
#news{}
}
/*事業紹介*/
#service{margin-top: 100px;}
#service h2{margin-bottom: 40px}
#service1{background: url(../images/service1_bg.jpg) no-repeat top left;padding: 80px 0 50px 0;border-bottom: 1px solid #ccc;background-size:66% auto;}
#service2{background: url(../images/service2_bg.jpg) no-repeat top right;padding: 80px 0 50px 0;margin-top: 60px;border-bottom: 1px solid #ccc;background-size:66% auto;}
#service3{background: url(../images/service3_bg.jpg) no-repeat top left;padding: 80px 0 0px 0;margin-top: 60px;background-size:66% auto;}
#service1 .box{background-color: rgba(255,255,255,0.9);padding:50px;text-align: left;width: 58%;margin-left: auto;box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);}
#service2 .box{background-color: rgba(255,255,255,0.9);padding:50px;text-align: left;width: 58%;margin-right: auto;box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);}
#service3 .box{background-color: rgba(255,255,255,0.9);padding:50px;text-align: left;width: 58%;margin-left: auto;box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);}

#service h3{text-align: center;font-size: 2.8rem;letter-spacing: 0.1em;color: #2c5382;margin-bottom: 30px;line-height: 1.1em}
#service p {margin-left: 1em;text-indent: -1em;}

@media screen and (max-width: 768px) {
#service{margin-top: 50px;}
#service1,#service2,#service3{background-size: contain; padding: 100px 0 30px 0;}
#service1 .box,#service2 .box,#service3 .box{padding:20px;width: 90%;margin-left: auto;margin-right: auto}
#service h3{font-size: 2.0rem;margin-bottom: 20px;}
}

/*といあわせ*/
#toiawase{margin-top: 100px;background: url(../images/toiawase_bg.jpg) no-repeat center top;background-size: 100% auto}
#toiawase .waku{width: 50%;margin-left: auto;background-color: rgba(0,24,42,0.75);padding:60px 40px;text-align: left;color: #fff}
#toiawase h2{font-size:2.6rem;line-height: 2.2em }
#toiawase .bt{background: #fff;margin: 40px auto 0;border-radius: 4px;font-size:1.8rem;}
#toiawase .bt a{display: block;padding: 12px;text-align: center;position: relative;}
#toiawase .bt a:after {
display: block;
content: "";
position: absolute;
top: 50%;
right: 12%;
width: 6px;
height: 6px;
margin: -4px 0 0 0;
border-top: solid 2px #2c5382;
border-right: solid 2px #2c5382;
-webkit-transform: rotate(45deg);
        transform: rotate(45deg);
}
@media screen and (max-width: 768px) {
#toiawase{margin-top: 50px;background:none;}
#toiawase img{max-width: 100%;height: auto}
#toiawase .waku{width: 100%;margin-left: auto;margin-right: auto;padding:20px;text-align: left;color: #fff}
#toiawase h2{font-size:1.6rem;}
#toiawase .bt{margin: 20px auto 0;font-size:1.4rem;}
}

/*特徴*/
#point{padding: 100px 0; background: #f7f8f8}
#point h2{margin-bottom: 40px}
#point ul{font-size: 0}
#point ul li{font-size: 14px;text-align: left; width: 30%;margin-left: 3%;display: inline-block;vertical-align: top}
#point ul li:first-child{margin-left: 0}
#point li .egl{color:#3d6ba3;font-size: 1.6rem;font-family: 'Saira Condensed', sans-serif; }
#point h3{font-size: 1.8rem;border-bottom: 1px solid #999;padding-bottom: 12px;margin-bottom: 12px}
@media screen and (max-width: 768px) {
#point{padding: 50px 0 30px;}
#point ul{width: 80%;margin: auto}
#point ul li{font-size: 14px; width: 100%;margin-left: 0%;display:block;margin-bottom: 20px}
#point h3{font-size: 1.6rem;}
}




/*概要*/
.outline h2{margin-bottom: 40px}
.outline dl{overflow: hidden;zoom: 1;border-bottom: 1px dashed #ccc;padding-bottom: 10px;}
.outline dl dt {
width: 200px;float: left;clear: both;font-weight: bold;border-top: 1px dashed #ccc;padding-top: 10px;margin-top: 10px
}
.outline dl dd {text-align: left;margin-left: 200px;border-top: 1px dashed #ccc;padding-top: 10px;margin-top: 10px}
.outline .last{border-top: none}
@media screen and (max-width: 768px) {
.outline.mT70{margin-top: 30px}
.outline h2{margin-bottom: 20px}
.outline dl dt {width: 80px;}
.outline dl dd {text-align: left;margin-left: 80px;}
}


/*地図*/
#maps{}
.video{
  position:relative;
  width:100%;
  padding-bottom: 20%;    /* padding-topでもOK */
  overflow: hidden;
  height: 0;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}
@media screen and (max-width: 768px) {
.video{
padding-bottom: 40%;
}
}