@charset "utf-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}button{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0;appearance:none}img{image-rendering:-webkit-optimize-contrast}a{color:inherit;text-decoration: none;}

body{
  font-family: Lato, 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  color: #313131;
  box-sizing: border-box;
  line-height: 1.35;
}

 
/*------------------------------------
調整
------------------------------------*/
/* 右1ren空 */
.mr1rem{margin-right: 1rem;}
/* 字間調整 */
.palt{font-feature-settings: "palt";}

.header-logo {
    position: absolute;
    top: 0;
    width: 240px!important;
    margin-bottom: 10px;
    margin-top: 8px!important;
}

@media (max-width: 768px) {
    .header-logo {width: 50vw!important;;}
}

/*------------------------------------
title
------------------------------------*/

p{line-height: 1.75;}

.cmn-page-h2-ttl-wrap{
  /*background-color: #1497BC;*/
  color: #FFF;padding: 8rem 0;text-align: center;
  background-image: linear-gradient(90deg, rgba(0, 175, 187, 1) 10%, rgba(0, 190, 128, 1) 90%);
}
.cmn-page-h2-ttl{font-size: 3rem; font-weight: 500;}
@media only screen and  (max-width: 834px) {
.cmn-page-h2-ttl-wrap{padding: 3rem 0;}
.cmn-page-h2-ttl{font-size: 1.8rem;}
}


h2.cmn-h2-ttl{position: relative; display: block;margin: 0 auto;text-align: center;}

h2.cmn-h2-ttl:before {
  content: '';
  position: absolute;
  bottom: -1.3rem;
  display: inline-block;
  width: 8rem;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #00b1b3;
  border-radius: 5rem;
}

h3.cmn-h3-ttl{font-size: 1.8rem; margin-bottom: 3rem;text-align: center;}
@media only screen and  (max-width: 834px) {
  h3.cmn-h3-ttl{font-size: 6vw; margin-bottom: 6vw;}
}
/*------------------------------------
link
------------------------------------*/

.page-link{
  color: #00B1B7;
  padding: 0.8em 2.5em 0.8em 2em;
  border: 1px solid #00B1B7;
  position: relative;
  transition: .2s;
  border-radius: 0.3rem;
  margin-top: 1rem;
  display: inline-block;
  font-weight: 600;
  box-sizing: border-box;
}

.page-link:hover{background-color: #00B1B7;color: #FFF;}

.page-link:after {
  content: "";
  border: solid 2px #00B1B7;
  border-width: 2px 2px 0 0;
  position: absolute;
  top: calc(50% - 4px);
  right: 16px;
  transform: rotate(45deg);
  width: 8px;
  height: 8px;
}

.page-link:hover :after{border: solid 2px #FFF;}


/*------------------------------------
パンくずリスト
.topic-list
------------------------------------*/

.topic-list{
  margin: 0 auto;
  padding: 1.5rem 0 0;
  font-size: 0.8em;
  line-height: 1.5;
  color: #333;
  width: 90vw;
}

.topic-list ul{display: flex;}
.topic-list li{position: relative;padding-right: 1.5rem;z-index: 0;}

.topic-list li:after {
    content: "";
    border: solid 2px #6dd1cd;
    border-width: 2px 2px 0 0;
    position: absolute;
    top: calc(50% - 3.5px);
    right:0.6rem;
    transform: rotate(45deg);
    width: 3px;
    height: 3px;
}

.topic-list li:last-child:after {content : none ;}
.topic-list a{  color: #084e8f; text-decoration: underline;}

@media only screen and  (max-width: 834px) {
.topic-list{overflow-x: auto;white-space: nowrap;-webkit-overflow-scrolling: touch;
  width: 96vw; font-size: 75%; padding: 2vw 0 0;}
}


/*------------------------------------
 Main-colum

------------------------------------*/
.main-Container{}
.section-wrap{margin: 0 auto;max-width: 1040px;}

.bg-c-gray{background-color: #DFFFF7;}
.bg-c-green{background-color: #f7f9f9;}

.section-wrap-wide {width: 80vw; margin: 0 auto; min-width: 1300px;}
@media screen and (max-width: 1280px) {.section-wrap-wide{width: 90vw; margin: 0 auto;min-width: 800px;}}
@media screen and (max-width: 768px) {.section-wrap-wide{width: 90vw; margin: 0 auto;min-width: initial;}
@media screen and (max-width: 414px) {.section-wrap-wide {width: 90vw; margin: 0 auto;min-width: initial;}}

.section-wrap{ max-width: 100%;padding: 0 1.5rem;box-sizing: border-box;}}
@media screen and (max-width: 414px) {.section-wrap-wide{width: 90vw; margin: 0 auto;min-width: initial;}}
.section-wrap-wide h2{font-size: 2em;font-weight: 600;margin-bottom: 2rem;}
.h2-sub-ttl{color: #00b1b3;display: block; font-size: 60%;margin-bottom: 0.3rem;}
.h2-sub-center{text-align: center;}
@media screen and (max-width: 414px) {
.section-wrap-wide h2{font-size: 6vw;font-weight: 600;margin-bottom: 12vw;}  
}

/*------------------------------------
共通レイアウト
.topic-list
------------------------------------*/


.bg-greenA {background-color: #ebf7f4;}
.bg-greenB {background-color: #e6f2f2;}
.bg-gray {background-color: #FBFBFB;}
.bg-ggray {background-color: #F1F4F5;}

.__pd8080{padding: 5rem 0;}
.__pd5080{padding: 3rem 0 5rem;}
@media screen and (max-width: 768px) {
.__pd8080{padding: 10vw 0;}
.__pd5080{padding: 10vw 0 4vw;}}


.cmn-layout-imgsetA{margin: 4rem 0 0;}
.cmn-layout-imgsetA ul{display: flex;justify-content: space-between;}
.cmn-layout-imgsetA li{}
.cmn-layout-imgsetA-img{overflow: hidden; position: relative;}
.cmn-layout-imgsetA-img img{width: 100%;position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.cmn-layout-imgsetA h3{font-size: 1.7rem;margin: 1.2rem 0 0.8rem;}

@media screen and (max-width: 768px) {
.cmn-layout-imgsetA{margin: 4vw 0 0;}
.cmn-layout-imgsetA ul{flex-direction: column;}
.cmn-layout-imgsetA h3{font-size: 4vw;margin: 4vw 0 2vw;}
.cmn-layout-imgsetA li{margin-bottom: 5vw;}}

@media screen and (max-width: 414px) {
.cmn-layout-imgsetA h3{font-size: 5vw;margin: 4vw 0 2vw;}}


.li-width-48{width: 48%;}
.li-width-32{width: 32%;}
@media screen and (max-width: 768px) {
.li-width-48{width: 100%;}.li-width-32{width: 100%;}}
.height-25rem{height: 25rem;}
.height-20rem{height: 20rem;}
.height-16rem{height: 16rem;}
@media screen and (max-width: 1280px) {
.height-25rem{height: 16rem;}
.height-20rem{height: 10rem;}
.height-16rem{height: 16rem;}
}
@media screen and (max-width: 768px) {
.height-25rem{height: 50vw;}
.height-20rem{height: 50vw;}
.height-16rem{height: 50vw;}
}


/*------------------------------------
SP/PC切り替え

------------------------------------*/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.PC-CSS { display: inline-block !important; }
.SP-CSS { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width:599px) {
.PC-CSS { display: none !important; }
.SP-CSS { display: inline-block !important;}
.SP-none{ display: none !important; }
}

/*------------------------------------------
# header
------------------------------------------*/
.header-wrap{
  width: 90vw;
  min-width: 1000px;position: relative;
  margin-left: auto; margin-right: auto; 
  display: flex;justify-content: space-between;align-items: center;}

/* .header-logo-wrap,.site-header{padding: 10px;} */
.header-logo {
  position: absolute;top:0;
  width: 180px;margin-bottom: 10px;}
.header-logo img{width: 100%;} 

.site-header  {display: flex; justify-content: space-between;align-items: center;}
.nav-wrapper { display: flex; align-items: center;}

.nav__item ,.nav__item__btn{box-sizing: border-box; position: relative;width: 140px;
transition : all 0.5s ease 0s;}
.nav__item > a {
  color: #262626; padding: 25px 10px;
  display: block; font-weight: 700;text-align: center;transition : all 0.3s ease 0s;}
.nav__item__btn{width: auto;margin-left: 10px;}
.nav__item__btn > a{
  padding:0.5rem 2rem;border-radius: 3px;
  background-color: #262626;color: #FFF;transition : all 0.3s ease 0s;
  display: block;font-weight: 800;text-align: center;}
.nav__toggle {display: none;}
.nav__item:hover{background-color:  #d8edee;}
.nav__item > a:hover{color: #00B1B7;}
.nav_btn_recruit > a{background-color: #fda32e;}
.nav_btn_contact > a{background-color: #27a5a4;}
.nav_btn_recruit > a:hover{background-color: #e68507;}
.nav_btn_contact > a:hover{background-color: #1497BC;}
.nav__item__btn > a:hover{transform: translate(0 , 2px);}

@media (max-width: 1000px) {
  .header-logo {top:10px; width: 140px; left: 3vw; margin-bottom: 0;}
  .header-wrap {min-width: 768px;}
  .nav__item, .nav__item__btn {width: initial;}
  .nav__item > a {font-size: 15px;padding: 25px 1vw;}
  .nav__item__btn > a { padding: 0.5rem 1vw;font-size: 15px;}
}

@media (max-width: 768px) {
.header-wrap{width: 100%;height: 17vw;min-width: auto;}
.header-logo-wrap,.site-header{padding: 4vw;}
.header-logo {width:40vw; top: 1vw;  left: 48%; transform: translateX(-50%);
  -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
.nav__item{width: 100%;box-sizing: border-box;padding:5vw 0;}
.nav__item__btn > a {padding: 2vw 0;width: 100%;}
.nav__toggle {display: block; position: absolute; right: 1rem;top: 0rem; }
.nav-wrapper {top: 16vw; right: 0; left: 0; z-index: 1;
background-color: rgba( 255, 255, 255, 1 );padding:1vw 6vw 5vw;
position: absolute; flex-direction: column; 
visibility: hidden;opacity: 0;transform: translateY(-114%);
transition: transform 0.5s ease-out, opacity 0.5s ease-out;}
.nav-wrapper.active {visibility: visible;opacity: 1;transform: translateY(0)}

.nav__item > a {padding:0; text-align: left;}
.nav__item {border-bottom: 1px #d3d3d3 solid;}
.nav__item:nth-child(3) {border-bottom: 0;}

.nav__item__btn {margin-left: 0;width: 100%; margin-bottom: 2.5vw;}
.nav__item__btn > a {display: block;padding: 3vw 0; width: 100%;}
}

/*-----------------------------
#ハンバーガーボタン
-----------------------------*/

.openbtn1{width: 11vw;height:11vw;border-radius: 5px;top: 3vw;
  background:#27a5a4;;
  position: relative;cursor: pointer;}
.openbtn1 span{
  left: 3vw; height: 0.8vw;width: 45%; border-radius: 2px;
  position: absolute;display: inline-block;background: #fff;
  transition: all .4s;}
.openbtn1 span:nth-of-type(1) {top:2.9vw;}
.openbtn1 span:nth-of-type(2) {top:5.3vw;}
.openbtn1 span:nth-of-type(3) {top:7.7vw;}

/*active*/
.openbtn1.active span:nth-of-type(1) {
top: 3.5vw; left: 3vw;transform: translateY(6px) rotate(-45deg); width: 45%}
.openbtn1.active span:nth-of-type(2) {opacity: 0;}
.openbtn1.active span:nth-of-type(3){
top: 6.5vw; left: 3vw; transform: translateY(-6px) rotate(45deg); width: 45%}

/*-----------------------------
#ドロップダウンメニュー
-----------------------------*/

.dropdown__lists {
  visibility: hidden;/*デフォルトでは非表示の状態にしておく*/
  opacity: 0;/*不透明度0*/
  transition: all .3s;/*表示の変化を0.3秒に指定*/
  width: 300px; position: absolute;top: 72px;left: 0;}
.nav__item:hover .dropdown__lists {
  visibility: visible; opacity: 1;}
.nav__item:hover .dropdown__lists {display: block;}
.dropdown__list {
  background-color: #00b1b3;
  height: 3em;transition: all .3s;position: relative;
  display: flex;align-items: center;}
.dropdown__list:not(:first-child)::before{
  content: ""; width: 100%;
  height: 1px; background-color: #00b1b3;
  position: absolute; top: 0; left: 0;}
.dropdown__list:hover {background-color: #1497BC;}
.dropdown__list a {
  display: flex; justify-content: center;
  align-items: center;color: #fff;
  text-decoration: none; position: relative; width: 100%;height: 100%;}
.dropdown__list a::before {content: ''; display: block;
  width: 6px; height: 6px; border-top: 2px solid #fff; border-left: 2px solid #fff;
  transform: rotate(135deg); position: absolute; right: 15px;top: calc(50% - 5px);}
@media (max-width: 1000px) {.dropdown__lists {top: 70px;}}
@media (max-width: 768px) {
.dropdown__lists { visibility: visible; opacity: 1; position: relative;top: 0;left: 0;width: 100%;
margin-left: 1vw;margin-top: 2vw;}
.dropdown__list {background-color: initial;height: auto;}
.dropdown__list a {color: #262626; justify-content: flex-start; align-items: center;
font-weight: 500; padding:1.5vw 0 1.5vw 6vw; }
.dropdown__list:not(:first-child)::before {background-color: initial;}
.dropdown__list a::before {width: 0; height: 0;}
.dropdown__list a::after {content: '―'; display: block;color: #333;
  position: absolute; font-weight: 900;left:0;
  }
}

/*------------------------------------
service下層ページ

------------------------------------*/

.ttl-bg {
  background-size: cover;
  height: 65vh;
  position: relative;
  background-position: top center;
  background-repeat: no-repeat;
  position: relative;
}
.ttl-line{
  background-image: linear-gradient(90deg, rgba(0, 175, 187, 0.9) 10%, rgba(0, 190, 128, 0.9) 90%);
  position: absolute;
  bottom: 0; padding: 2rem 0; width: 100%; color: #FFF;}

.ttl-line h2{font-size: 2em;font-weight: 500;margin-bottom: 0!important;}
.ttl-line p{font-size: 1.5em; font-weight: 400;}

@media screen and (max-width: 768px) {
.ttl-bg{height: 60vh;}
.ttl-line{padding: 1.5rem 0;}
.ttl-line h2{font-size: 7vw;}
.ttl-line p{font-size: 5vw; line-height: 1.35;margin-top:0;}
}


/*------------------------------------
グローバルナビ

------------------------------------*/
/* 

* {box-sizing: border-box;}


.navi-container {
  margin: 0 auto;
  position: relative;
  max-width: 80vw;
  padding: 1.8rem 0;
  box-sizing: border-box;
  min-width: 1280px;
}

@media screen and (max-width: 968px) {
  .navi-container {margin: 0 auto;width: 90%;padding: 1.5rem 0;  min-width: initial;min-width: auto;}
}

.global-nav {  margin: 0; position: relative;}

.global-nav .nav-list {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-item{padding-right: 3rem}
.nav-item:last-child{padding-right: 0}

.global-nav .nav-list .nav-item a {
  display: block;
  text-align: center;
  text-decoration: none;
}

.navi-link{
  display: inline-block;
  transition: .3s;
  -webkit-transform: scale(1);
  transform: scale(1);
  font-weight: 500;
}

.navi-link:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  color: #1497BC;
}

@media screen and (max-width: 968px) {
  .navi-link:hover {
  -webkit-transform: scale(1);
  transform: scale(1);
  color: #1497BC;
}
}

.header-logo{
  display: inline-block;
  width: 15rem;
  margin-right: 8rem;
  position: absolute;
  top: .5rem;
  left: 0;
  z-index: 20;
}

.header-logo img{width: 100%;}
@media screen and (max-width: 968px) {
  .header-logo{
    width: 8rem;
    top: 0.5rem;
    z-index: 20;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
  }


.header-btn-contact{
  background-color: #12A581;
  padding: 0.8rem 2.5rem 0.8rem 2rem;
  border-radius: 0.3rem;
  color: #FFF;
  display: inline-block;
  font-weight: 500;
  position: relative;
  transition: .3s;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.header-btn-contact:after {
    content: "";
    border: solid 3px #fff;
    border-width: 3px 3px 0 0;
    position: absolute;
    top: calc(50% - 4px);
    right: 16px;
    transform: rotate(45deg);
    width: 7px;
    height: 7px;
}

.header-btn-contact:hover{
  background-color: #20ADAC;
  border-radius: 0;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
    
}

.list_triangle {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.list_triangle > dt {
    position: relative;
    padding: 0px 0px 0px 1em;
}
.list_triangle > dt::before {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border: 0.3em solid transparent;
    border-left: 0.4em solid #ECE1B1;
    content: "";
}

@media screen and (max-width: 968px) {

.header-btn-contact{margin-top: 0.5rem;}

  .list_triangle > dt {
    margin: 1.5rem 0 0.5rem;
    font-weight: 500;
  }

.list_triangle > dt::before {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border: 0.3em solid transparent;
    border-left: 0.4em solid #ECE1B1;
    content: "";
}

.nav-item_sub-list{
  margin-top: -1rem;
  padding: 0 0 1rem 1rem;
}
} */



/* サブナビゲーション */
@media screen and (min-width: 968px) {
  .navi-list-sm{display: flex; justify-content: space-around;width: 100%;}
  .navi-list-sm li{padding: 2rem 1.5rem; font-weight: 500;}
  .navi-list-sm a:hover{color: #1497BC;}


  .nav-list {position: relative;}

  .nav-item_sub {
    background-color:rgba(255,255,255,0.8);
    left: 0;
    margin: 0 calc(50% - 50vw);
    opacity: 0;
    position: absolute;
    top: 5rem;
    transition: all 0.2s ease;
    visibility: hidden;
    width: 99.48vw;
    z-index: 1;

  }

  .nav-item_sub .inner {
    display: flex;
    margin: 0 auto;
    width: 1300px;
  }

  .global-nav .nav-list .nav-item_sub a {
    text-align: left;
  }

  .nav-item:hover .nav-item_sub {
    opacity: 1;
    visibility: visible;
  }

.nav-item_sub-list{
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 2rem 0;
}

.nav-item_sub-list dt{
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.nav-item-service-list{padding: 0.3em 0 0;}
.nav-item-service-list li{ font-size: 1.1rem;}

.nav-item-service-list a{
  display: block;
  padding: 0.5rem;
  margin-bottom: 0.2rem;
  transition: .3s;
}

.nav-item-service-list a:hover{background-color: #ECE1B1;}

}

@media screen and (max-width: 768px) {

.nav-item-service-list{padding: 0.3em 0 0;}
.nav-item-service-list li{
  font-size: 1rem;
  border-bottom: 1px dotted #c0c0c0;
}

.nav-item-service-list li:last-child{ border-bottom: 0;}

.nav-item-service-list a{
  display: block;
  padding: 0.5rem;
  margin-bottom: 0.2rem;
  transition: .3s;
}
}


/* SP時：ハンバーガーメニューボタン */
.global-nav-icon {display: none;}

@media screen and (max-width: 968px) {
  .global-nav-header {height: 1rem;}

  .global-nav .nav-list {
    background: rgba(255, 255, 255, 0.95);
    display: none;
    left: 50%;
    padding: 3.2rem 1.4rem 1.4rem;
    position: absolute;
    transform: translate(-50%, 0%);
    width: 101vw;
  }

.global-nav .nav-list .nav-item a {text-align: left;}

.nav-item > a {
    border-right: none;
    padding: 1.5rem 1rem;
    text-align: left;
  }

.global-nav .nav-list .nav-item:first-child a {border-bottom: none;}
.nav-list > li{ border-top: 1px #d3d3d3 solid;}
.nav-list > li:first-child{ border-top: 0;}
.nav-list > li:last-child{ border-top: 0;}
  .nav-item {padding-right: 0;}

  .global-nav-icon {
    color: #999;
    cursor: pointer;
    display: inline-block;
    font-size: 28px;
    position: absolute;
    right: 5px;
    top: 15px;
    z-index: 20;
  }
}

@media screen and (max-width: 968px) {
  .nav-item_sub {
    display: initial;
  }

  .global-nav {
    height: 0;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index:10;
  }

  .nav-list {
    height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .navi-list-sm{display: inline-block;}
  .navi-list-sm li{font-size: 18px;margin: 0 0 2rem 2.5rem;}


}




/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
common 電話ボタン（SPのみ有効）
.cmn--tel-btn
 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.cmn-tel-btn-wrap{padding: 6rem 0;text-align: center;}

.cmn-tel-btn{
  color: #FFF;
  font-weight: 500;
  background-color: #12A581;
  text-align: center;
  display: inline-block;
  padding: 1.5rem 10rem;
  border-radius: 1rem;
  font-size: 1.5rem;
}

.cmn-tel-btn span{display: flex;  font-size: 2.5rem;  align-items: center;}
.cmn-tel-btn p{ font-size: 1.2rem; margin: 0;}

.cmn-tel-btn {pointer-events: none; cursor: default;}

.cmn-tel-btn img{width: 2.5rem;margin-right: 0.5rem;}
.cmn-tel-btn-wrap p{font-size: 1.1rem;margin-top: 1rem;}


@media screen and (max-width: 768px) {
.cmn-tel-btn-wrap{padding: 3rem 0;}
.cmn-tel-btn{width: 100%;padding: 1rem 0;font-size: 1.3rem;display: block;border-radius: 0.5rem;}
.cmn-tel-btn span{font-size: 2rem;justify-content: center;}
.cmn-tel-btn img{width: 1.5rem;margin-right: 0.5rem;}
.cmn-tel-btn-wrap p{font-size: 1rem;}
.cmn-tel-btn {pointer-events:inherit; cursor: default;}
.cmn-tel-btn p{margin: 0;}
}




/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ニュース
.cmn-news
 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.cmn-news-wrap{padding: 3rem 0 10rem;}
.cmn-news-list li{border-bottom: 1px solid #D3D3D3; padding: 1.5rem 0;position: relative;}
.cmn-news-list dl{display: flex;padding-right: 2.5rem}
.cmn-news-list dt{margin-right: 2rem;}
.cmn-news-list a{transition: .3s;}
.cmn-news-list a:hover{color: #1497BC;}
.cmn-news-list li:after {
    content: "";
    border: solid 3px #12A581;
    border-width: 3px 3px 0 0;
    position: absolute;
    top: calc(50% - 4px);
    right: 16px;
    transform: rotate(45deg);
    width: 7px;
    height: 7px;
}


.cmn-news-txt{margin-bottom: 2rem;}
.cmn-news-all-wrap{text-align: center;margin-top: 3rem;}
.cmn-news-all{
    background-color: #12A581; margin: 0 auto;
  padding: 0.5rem 2.5rem; border-radius: 50px;
  color: #FFF; display:inline-block; font-weight: 500;
  transition: .3s;  -webkit-transform: scale(1);
  transform: scale(1);}
.cmn-news-all:hover{
    background-color: #1497BC;border-radius: 0;
  -webkit-transform: scale(1.1); transform: scale(1.1);}

@media screen and (max-width: 768px) {
.cmn-news-wrap{padding: 3rem 0 5rem;}
.cmn-news-list dl{flex-direction: column;padding-right: 2rem}
}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
banner領域
.top-banner

.cmn-banner-bg{background-color: #f7f9f9;}
.cmn-banner-wrap{display: flex;justify-content: space-around;}
.cmn-banner{padding: 5rem 0 7rem;}
.cmn-banner-wrap li{width: 48%;}
.cmn-banner-wrap img{width: 100%;}

@media screen and (max-width: 768px) {
.cmn-banner-wrap{flex-direction: column;}
.cmn-banner-wrap li{width: 100%;margin-bottom:1rem ;}
.cmn-banner{padding: 5rem 0 4rem;margin-bottom: 0;}
}
 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
サービス案内
.cmn-service-info


.cmn-service-info-bg{background-color: #DFFFF7;}
.cmn-service-info{padding: 8rem 0 10rem;}
.mg-4-auto-10{margin: -4rem auto 0;}
.cmn-service-info-text{text-align: center;}

.cmn-service-info-list{}
.cmn-service-info-list li{display: flex; justify-content: space-between;align-items: center;margin-top: 3rem;}

.cmn-service-info-image{width: 49%; height: 21rem; overflow: hidden;}
.cmn-service-info-image img{width: 100%;}

.cmn-service-info-list dl{width: 49%;}
.cmn-service-info-list dt{text-align: center;font-size: 1.9rem; font-weight: 600;}
.cmn-service-info-list dd{}
.cmn-service-info-list p{line-height: 1.75; margin: 1.5rem 0;}

.cmn-service-info-link{text-align: center;}
.cmn-service-info-link a{
  background-color: #12A581; margin: 0 auto;
  padding: 0.5rem 2.5rem; border-radius: 50px;
  color: #FFF; display:inline-block; font-weight: 500;
  transition: .3s;  -webkit-transform: scale(1);
  transform: scale(1);}
.cmn-service-info-link a:hover{
  background-color: #1497BC;border-radius: 0;
  -webkit-transform: scale(1.1); transform: scale(1.1);}

@media screen and (max-width: 768px) {
.cmn-service-info{padding: 4rem 0 5rem;}
.mg-4-auto-10{margin: 0 auto;}
.cmn-service-info-text{text-align: left;}

.cmn-service-info-list li{flex-direction: column;margin-top: 3.5rem;}
.cmn-service-info-image{width: 100%; height: 13rem;}
.cmn-service-info-list dl{width: 100%;}

.cmn-service-info-list dt{font-size: 1.5rem;margin-top: 1.5rem}
.cmn-service-info-list p{line-height: 1.75; margin: 1.2rem 0 1.3rem;}
}

 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
.common-service

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.cmn-service-wrap{margin: 0;    padding: 5rem 0 8rem;}
.cmn-service-list{display: flex;flex-wrap: wrap;justify-content: space-between;}

/*-- サービス数=2 --*/
.cmn-service-list li{width: 48%;overflow: hidden;position: relative;margin-bottom: 1.8rem;}
.cmn-service-img {
  cursor: pointer; overflow: hidden;border-radius: 0.8rem;
  position: relative; width: 100%;height: 20rem;max-height: 24vw;}
.cmn-service-img img {width: 100%;  top: 50%;  left: 50%;
  transform: translate(-50%, -50%);position: inherit;
  filter: brightness(0.7);  transition: transform .8s ease; }
/*----*/

/*-- サービス数=4 --
.cmn-service-list li{width: 49%;overflow: hidden;position: relative;border-radius: 0.8rem;margin-bottom: 1.8rem;}
.cmn-service-img {
  cursor: pointer; overflow: hidden;
  position: relative; width: 100%;height: 25rem;max-height: 24vw;}
.cmn-service-img img {width: 100%;
  filter: brightness(0.7);  transition: transform .8s ease; }
--*/

/*-- サービス数=3 
.cmn-service-list li{width: 32%;overflow: hidden;position: relative;margin-bottom: 1.8rem;}
.cmn-service-img {
  cursor: pointer; overflow: hidden;border-radius: 0.8rem;
  position: relative; width: 100%;height: 20rem;max-height: 24vw;}
.cmn-service-img img {height: 100%;  top: 50%;  left: 50%;
  transform: translate(-50%, -50%);position: inherit;
  filter: brightness(0.7);  transition: transform .8s ease; }
--*/

.cmn-service-img:hover img {transform: translate(-50%, -50%) scale(1.1);filter: brightness(1); }
.cmn-service-text{
  color: #fff;left: 0;  margin: auto;position: absolute;
  right: 0;  bottom: 0;  width: 100%; padding: 1.5rem;  font-size: 1rem;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
}

.cmn-service-list li > p{line-height: 1.5;padding:1rem 0;}

.cmn-service-ttl{font-weight: 500;display: inline-block;font-size: 1.5rem;position: relative;}
.cmn-service-ttl:after {
    content: "";
    border: solid 3px #fff;
    border-width: 3px 3px 0 0;
    position: absolute;
    top: calc(50% - 4px);
    right: -1vw;
    transform: rotate(45deg);
    width: 7px;
    height: 7px;}

@media screen and (max-width: 1600px) {
.cmn-service-list {width: 90vw; margin: 0 auto;}
.cmn-service-wrap {padding: 8vw 0;}
.cmn-service-text{padding: 2vw;}
.cmn-service-ttl{font-size: 1.8vw;}


/*-- サービス数=3 --*/
.cmn-service-img {height: 20vw;max-height: initial;}}

@media screen and (max-width: 960px) { 
.cmn-service-wrap{padding: 11vw 0 8rem;}
.cmn-service-list li{width: 100%;}
.cmn-service-img {height: 48vw;}
.cmn-service-ttl{font-size: 3.8vw;}
.cmn-service-text{padding: 5vw;font-size: 2vw;}

/*-- サービス数=3 --*/
.cmn-service-img img {height: initial;width: 100%;}
}

@media screen and (max-width: 520px) {
.cmn-service-wrap {padding: 15vw 0 10vw;}
.cmn-service-ttl{font-size: 6vw; line-height: 1.2;margin-bottom: 0;}
.cmn-service-img {height: 35vh;border-radius: 0.5rem;}
.cmn-service-img img {width: initial;height: 100%;position:absolute; 
  top: 0; left: 50%; transform: translateX(-50%);-webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
.cmn-service-text{padding: 6vw;font-size: 4.2vw;line-height: 1.3;}
.cmn-service-ttl:after {right: -5vw;}}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
.common-cvarea

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.common-cvarea-bg{background-color: #e6f2f2;}
.common-cvarea-wrap{padding: 5rem 0 5rem;}
.common-cvarea-list{display: flex; justify-content: center;}
.common-cvarea-list li{width: 40%;margin-right: 2rem;}
.common-cvarea-list li:last-child{margin-right:0;}

.cmn-cvarea-btn{
  width: 100%;color: #FFF;display: inline-block;text-align: center;
  box-shadow: -1px 3px 6px 4px rgba(171, 198, 198, 0.5);border-radius: 100vh;transition: all 0.2s;}

.cmn-tel-cv{padding: 2rem 0;background: linear-gradient(135deg, #ef9f00 0%,#efc500 100%);}
.cmn-form-cv{padding: 2.6rem 0;background: linear-gradient(135deg, #14b0a7 0%,#12a581 100%);}
.cmn-tel-cv-att{display: block;font-size: 1rem;}
.cmn-cvarea-btn-wrap{display: flex; align-items: center;justify-content: center;font-size: 2rem;font-weight: 600;}

.cmn-cvarea-btn:hover{transform: translate(0,.3rem);box-shadow: none;}
.cmn-cvarea-icon {font-size: 38px!important; margin-right: 8px;font-weight: 600!important;}
.cmn-cvarea-att{margin-top: 3rem;font-size: 1.1rem;text-align: center;}



@media screen and (max-width: 1600px) {
.common-cvarea-list li {width: 45%;}
.cmn-cvarea-btn-wrap {font-size: 2vw;}
.cmn-cvarea-icon {font-size: 3vw!important;}
.cmn-tel-cv-att {font-size: 1.2vw;}
}

@media screen and (max-width: 960px) {
.common-cvarea-wrap{padding: 5rem 0 8rem;}
.common-cvarea-list{flex-direction: column-reverse;}
.common-cvarea-list li{width: 100%;margin-right: 0;margin-bottom: 2rem;}
.cmn-cvarea-btn-wrap {font-size: 4.5vw;}
.cmn-cvarea-icon {font-size: 5vw!important;}
.cmn-tel-cv-att {font-size: 2vw;}
.cmn-cvarea-att{margin-top: -0.5rem;}
}

@media screen and (max-width: 520px) {
.common-cvarea-wrap{padding: 15vw 0 17vw;}
.common-cvarea-list li{margin-bottom: 1.5rem;}
.cmn-cvarea-btn-wrap{font-size: 5.3vw;}

.cmn-form-cv {padding: 6.7vw 0;}
.cmn-tel-cv {padding: 4vw 0;}
.cmn-tel-cv-att{font-size: 3.5vw;}
.cmn-cvarea-att{margin-top: 1rem;font-size: 4vw;}
.cmn-cvarea-icon {margin-right: 1vw;}
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
.common-banner

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.cmn-banner-wrap{padding: 8rem 0;}
.cmn-banner-list{display: flex;justify-content: space-around;}

.cmn-banner-list li{width: 49%;}
.cmn-banner-list a{width: 100%;}
.cmn-banner-list img{width: 100%;}

.cmn-banner-list a:hover{opacity: 0.8;}


@media screen and (max-width: 1600px) {
.cmn-banner-wrap{padding: 8vw 0;}
.cmn-banner-list li{width: 48%;}
}

@media screen and (max-width: 960px) {
.cmn-banner-list{flex-direction: column; }
.cmn-banner-list li{width: 100%;margin-bottom: 2.5rem;}
}

@media screen and (max-width: 520px) {
.cmn-banner-wrap{padding: 6vw 0;}
.cmn-banner-list li{width: 100%;margin-bottom: 4vw;}
}



/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
 FOOTER

 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

footer{background-color: #1497BC;color: #FFF;}

.footer-wrap{ max-width: 90vw; margin: 0 auto; padding: 3rem 0;}

.footer-list {
  display: flex;
  justify-items: center;
  justify-content: space-between;
}

.footer-list li{}
.footer-list dt{font-weight: 500;}
.footer-list dd{margin-left: 1rem;}


.footer-logo-wrap{width:20%;margin-right: 5%;}
.footer-logo{width: 250px; margin: 0 auto 0.5rem;}
.footer-logo img{width: 100%;}
.footer-logo a{display: block;}

.footer-link{width: 20%;border-left: 1px dashed #108aad;padding: 0 2% 0 2%;}
.footer-link a{padding: 0.5rem 0.8rem;
  width: 100%;  display: block;transition: .3s;}
.footer-link a:hover{ border-radius: 0.5rem;  background-color: #0a7fa0;}

.footer-tel{text-align: center;}
.footer-tel a{display: flex; font-size: 1.5em; font-weight: 500;align-items: center;justify-content: center;}
.footer-tel a {pointer-events: none; cursor: default;}/*電話リンク無効化*/
.footer-tel-icon {height: 1em; margin-right: 0.2em;}
.footer-tel img{height: 100%;}
.footer-tel span{font-size: 1em;}

.fotter-brandlink{text-align: center;}
.fotter-brandlink a{background: #FFF;width: 80%;display: block;
padding: 0.3rem 0;border-radius: 0.2rem;margin: 1rem auto 1.5rem;
color: #1497BC;font-weight: 500;font-size: 1rem;}


.fotter-relation-link{background-color: #007090;}
.fotter-relation-link-wrap{  max-width: 80vw;margin: 0 auto; padding: 2rem 0 2rem 0;}

.fotter-relation-link ul{display: flex;justify-content: space-evenly;margin-bottom: 1.5rem;flex-wrap: wrap;}
.fotter-relation-link span{color: #1083a3;margin-right: 0.3rem;font-size: 18px;}

.fotter-relation-link a{display: inline-block;}
.fotter-relation-link a:hover{animation: link-zoom .3s;}
@keyframes link-zoom { 50% {transform: scale(1.05);}}

.footer-Copyright{ text-align: center;}


@media screen and (max-width: 968px) {
footer{margin-top:0;}
.footer-wrap{  max-width: 100%;  padding: 0;}
.footer-list{  flex-direction: column;  padding: 1.5rem;}

.footer-list li{width: 100%;border-bottom: 0; padding:0;}
.footer-tel{margin-bottom: 5vw; padding: 0.5em; border-radius: 0.3rem; border: 1px solid #FFF;}

.footer-logo {width: 63vw;margin: 0 auto 5vw 10vw;}
.footer-link{border-left: 0;border-bottom: 1px dashed #108aad;padding: 1rem 0;}
.footer-link:last-child{border-left: 0;border-bottom: 0;padding:0;}
.footer-link a{padding: 0.5rem 0 0.8rem;}
.footer-tel a {pointer-events:inherit; cursor: default;}/*電話リンク有効化*/

.fotter-relation-link-wrap{ max-width: 100%; padding: 0 0 2rem 0;}
.fotter-relation-link ul{padding: 2rem 1.5rem 0 1.5rem;margin-bottom: 0;
font-size: 3.4vw;}
.fotter-relation-link li{margin-bottom: 0.8rem;width: 49%;}
.fotter-relation-link span {color: #1083a3;margin-right: 1vw;font-size: 3.5vw;}



}


/*================================================
==================================================
==================================================
==================================================


===================================
===================================
===================================*/


/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
  opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
  opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
  opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
  opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*==================================================
くるっ
===================================*/


/* X 軸（縦へ） */
.rotateX{
  animation-name:rotateXAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
  from{
    transform: rotateX(0);
    opacity: 0;
    }
  to{
    transform: rotateX(-360deg);
    opacity: 1;
    }
}

/*　Y軸（横へ） */
.rotateY{
  animation-name:rotateYAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
  from{
    transform: rotateY(0);
    opacity: 0;
    }
  to{
    transform: rotateY(-360deg);
    opacity: 1;
    }
}

/* Z 軸（左へ） */
.rotateLeftZ{
  animation-name:rotateLeftZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(-360deg);
    opacity: 1;
    }
}

/*　Z 軸（右へ） */
.rotateRightZ{
  animation-name:rotateRightZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(360deg);
    opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
    opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}

/* 縮小 */
.zoomOut{
  animation-name:zoomOutAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
  transform: scale(1.2);
  opacity: 0;
  }

  to {
    transform:scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.zoomInTrigger,
.zoomOutTrigger{
    opacity: 0;
}

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blurTrigger{
    opacity: 0;
}

/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.smooth{
  animation-name:smoothAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  　transform-origin: left;
  opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.smoothTrigger{
    opacity: 0;
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/

/*枠線が伸びて出現*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
  animation-name:lineAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top:0;
  left:0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
  top:0;
  right:0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
  bottom:0;
  right:0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
  bottom:0;
  left:0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
  0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
  animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;/*初期値を透過0にする*/ 
}

@keyframes lineInnerAnime{
  0% {opacity:0;}
    100% {opacity:1;}
}


/*==================================================
シャッ（背景色が伸びて出現）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*左から*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/*右から*/
.bgRLextend::before{
  animation-name:bgRLextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
  0% {
    transform-origin:right;
    transform:scaleX(0);
  }
  50% {
    transform-origin:right;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:left;
  }
  100% {
    transform-origin:left;
    transform:scaleX(0);
  }
}

/*下から*/
.bgDUextend::before{
  animation-name:bgDUextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
  0% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
  50% {
    transform-origin:bottom;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:top;
  }
  100% {
    transform-origin:top;
    transform:scaleY(0);
  }
}

/*上から*/
.bgUDextend::before{
  animation-name:bgUDextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
  0% {
    transform-origin:top;
    transform:scaleY(0);
  }
  50% {
    transform-origin:top;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:bottom;
  }
  100% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}

.flex{
  display:flex;
  flex-wrap: wrap;
}

.box{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  background: #666;
  color: #fff;
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  box-sizing:border-box;
}



/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
  animation-delay: 0.5s;
}

.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}