/* デザイン */
.location-box{position: relative;}



.notes-area{ margin: 0% auto 0; }



.location-box .sec1,
.location-box .sec2{padding: 80px 0;}
.location-box h2{color: #00a0e9; font-size: 1.9rem;line-height: 2.5; letter-spacing: 0.1em;font-weight: normal!important;margin-bottom: 30px}
.location-box .copy{font-size: 1rem;letter-spacing: 0.1em;line-height: 3.5}
.location-box .sec2 h2{margin-top: 50px}

@media screen and (max-width: 668px) {/*スマホ設定*/
.location-box .sec1{padding: 50px 0;}
.location-box .sec1 .logo{width: 80%;margin: auto}
.location-box h2{font-size: 1rem;}
.location-box .copy{font-size: 0.8rem;line-height: 2.5}

}
picture{display: block;position: relative}
picture figcaption{position: absolute;right: 30px;bottom: 10px;text-align: right;color: #fff;font-size: 12px;}
@media screen and (max-width:767px){/*スマホ設定*/
picture figcaption{right: 5px;bottom: 5px;}

.mobile-scroll {width: 100%; overflow-x: scroll;padding-bottom: 12px}
.mobile-scroll p{width: 800px;}
.notive{font-size: 12px;text-align: center}
}


@media screen and (max-width: 668px) {/*スマホ設定*/


}
.location-box .map{margin: 80px 0}
@media screen and (max-width: 668px) {/*スマホ設定*/
.location-box .map{margin: 40px 0}
}

.life-information{text-align: left}
.life-information h4{padding-bottom: 10px; margin-bottom: 20px; color: #00a0e9;border-bottom: 3px solid #00a0e9;font-size: 1.3rem;letter-spacing: 0.05em;font-weight: normal}
.location-li-item {margin-bottom: 50px;}
.location-li-item ul {list-style-type:none;margin:0;padding:0;}
.location-li-item ul li {position:relative;margin-bottom:10px;line-height:1.5;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between;-webkit-align-items:flex-end;-ms-align-items:flex-end;align-items:flex-end;border-bottom: 1px dotted #666;margin-bottom: 8px;padding-bottom: 8px}
.location-li-item ul li.nonline{border-bottom: none;padding-bottom: 0}
.location-li-item ul li:last-child {margin-bottom: 0;}
.location-li-item ul li span {position:relative;z-index:1;display:inline-block;padding-right:10px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%;}
.location-li-item ul li > span:first-child {width: calc(100% - 13.5em);position: relative;overflow: hidden;}
.location-li-item ul li > span:last-child {text-align: right;display: inline-block;
  width: 13em; /* 最も長い文字数に合わせてem単位で幅を指定する */
  text-align: justify;
  text-align-last: justify;}
@media screen and (max-width: 668px) {/*スマホ設定*/
.life-information .col2{width: 100%}
}


.pc{display: block}
.sp{display: none}
@media screen and (max-width: 668px) {/*スマホ設定*/
.sp{display: block}
.pc{display: none}
}

.loop-slider {  overflow: hidden; /* はみ出た部分を隠す */  width: 100%;}
.loop-track {  display: flex;  width: max-content;  animation: loop 70s linear infinite; /* 速度とループの指定 */}
.loop-track.reverse {  display: flex;  width: max-content;  animation: loop2 70s linear infinite; /* 速度とループの指定 */}
.loop-list {  display: flex;  list-style: none;  margin: 0;  padding: 0;}
.loop-list li {  width: 400px; /* 画像の幅 */  margin-right: 0px; /* 画像同士の間隔 */position: relative;}

.loop-list img {  width: 100%;  height: auto;  vertical-align: bottom;}
.slide-paused:hover .loop-track{  animation-play-state: paused;}

.loop-list li p {
    color: #fff;
    font-size: 12px;
    position: absolute;
    right: 0.5em;
    bottom: 0.2em;
    z-index: 2;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

/* アニメーション定義 */
@keyframes loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 全体の半分（1グループ分）だけ左へ移動 */
  }
}
@keyframes loop2 {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%); /* 全体の半分（1グループ分）だけ左へ移動 */
  }
}
@media screen and (max-width: 668px) {/*スマホ設定*/
.loop-slider {
  margin: 0px 0
}
.loop-slider.ss2,
.loop-slider.ss5{
  margin: 0px 0
}
.loop-slider.ss3,
.loop-slider.ss4
{
  margin: 30px 0
}
.loop-list li {
  width: 180px;
}
.ss2 .loop-list li {
  width: 1200px; /* 画像の幅 */
  margin-right: 30px; /* 画像同士の間隔 */
}
.ss3 .loop-list li {
  width: 980px; /* 画像の幅 */
  margin-right: 30px; /* 画像同士の間隔 */
}
.ss4 .loop-list li {
  width: 1400px; /* 画像の幅 */
  margin-right: 30px; /* 画像同士の間隔 */
}
.ss5 .loop-list li {
  width: 1200px; /* 画像の幅 */
  margin-right: 30px; /* 画像同士の間隔 */
}
}
