@charset "utf-8";

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

  トップ

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

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

  Main Visual
  
----------------------------------------------------------------------------------------------------*/

.mainVisual-wrap {
  background-position:center center;
  background-repeat:no-repeat;
}

.mainVisual img {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
  pointer-events:none; 
}

@media print,screen and (min-width:641px) {
  .mainVisual-wrap {
    background-image:url(../image/top/mainVisual_bg.jpg);
    background-position: center;
    height:500px;
  }
  
  .mainVisual {
    width:1080px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    position:relative;
  }
  
  .mainVisual__slogan {
    width:634px;
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
  }
}

@media screen and (max-width:640px) {
  .mainVisual-wrap {
    background-image:url(../image/top/mainVisual_bg--sp.jpg);
    background-size:cover;
  }
  
  .mainVisual {
    padding:5% 2rem 400px 2rem;
  }
  
  .mainVisual__slogan {
    max-width:460px;
    width:100%;
    margin-bottom:4.5rem;
  }
}

@media screen and (max-width:540px) {
  .mainVisual {
    padding-bottom:70%;
  }
  
  .mainVisual__slogan {
    margin-bottom:16%;
  }
}


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

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

@media print,screen and (min-width:641px) {
  #main {
    width:860px;
    float:left;
    padding-top:20px;
  }
}

@media screen and (max-width:640px) {
  #main {
    padding-bottom:2rem;
  }
}

@media screen and (max-width:400px) {
  #main {
    padding-bottom:1.5rem;
  }
}


/*--------------------------------------------------------------------------------
  お知らせ
--------------------------------------------------------------------------------*/

#info {
  text-align:center;
}

#info .l-hdline {
  text-align:left;
}

#info .l-hdline:before,
#info .l-hdline:after {
  display:none;
}

.info__err {
  border-top:1px solid #dcdcdc;
  padding-top:1.25em;
  text-align:left;
}

.info__list {
  list-style:none;
  text-align:left;
}

.info__list li a,
.info__list li a:visited,
.info__list li a:hover,
.ua-pc .info__list li a:hover { text-decoration:none; color:inherit; }

.info__list li {
  border-bottom:1px solid #dcdcdc;
  font-size:0.95em;
}

.info__list li a,
.info__list li .inner {
  display:block;
  height:100%;
}

.info__list li a:after,
.info__list li .inner:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.info__list li .photo {
  display:inline-block;
  float:left;
  position:relative;
  overflow:hidden;
}

.info__list li .photo img {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.info__list li p {
  line-height:1.5;
}

.info__list li .date {
  color:#8c8c8c;
  display:inline-block;
  margin-bottom:0.25em;
}

.info__list li .ttl {
  color:#197ece;
  text-decoration:underline;
}
.ua-pc .info__list li a:hover .ttl {
  color:#00a5df;
  text-decoration:none;
}

@media print,screen and (min-width:641px) {
  #info {
    margin-bottom:50px;
    position:relative;
  }
  
  .info__list {
    margin-top:1.5rem;
  }
  
  .info__list li {
    width:415px;
    float:left;
  }

  .info__list li:nth-child(-n+2) {
    border-top:1px solid #dcdcdc;
  }
  
  .info__list li:nth-child(2n) {
    margin-left:30px;
  }

  .info__list li a,
  .info__list li .inner {
    padding-top:1.25rem;
    padding-bottom:1.25rem;
  }

  .info__list li .photo { width:150px; height:100px; }
  
  .info__list li p {
    padding-left:150px;
    margin-left:1.25rem;
  }
  
  #info .p-btn {
    position:absolute;
    right:0;
    top:0;
    padding:0.5em 0.8em;
  }
}

@media screen and (max-width:640px) {
  #info {
    margin-top:1.5em;
    margin-bottom:2em;
    padding-left:0.75rem;
    padding-right:0.75rem;
  }
  
  .info__list {
    margin-top:1em;
    margin-bottom:1.5em;
  }

  .info__list li:first-child {
    border-top:1px solid #dcdcdc;
  }
  
  .info__list li a,
  .info__list li .inner {
    padding:1em 0;
  }
  
  .info__list li p {
    margin-left:1em;
  }
}

@media screen and (min-width:501px) and (max-width:640px) {
  .info__list li .photo {
    width:150px;
    height:100px;
  }
  
  .info__list li p {
    padding-left:150px;
  }
}

@media screen and (max-width:500px) {
  .info__list li .photo {
    width:33%;
    height:0;
    padding-top:22%;
  }
  
  .info__list li p {
    padding-left:33%;
  }
}

@media screen and (max-width:400px) {
  .info__list li p {
    margin-left:0.75rem;
  }
}


/*--------------------------------------------------------------------------------
  ネットワーク
--------------------------------------------------------------------------------*/

.network {
	width:100%;
}

.network-inner {
  border:2px solid #8eccef;
  background-color:#fff;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
  position:relative;
  box-sizing: border-box;
  margin-bottom: 50px;
}

.network p {
	width:100%;
  padding: 30px;
  box-sizing: border-box;
	margin:0 auto;
}
.network p img {
	float:right;
	margin-left:30px;
	position:relative;
	display:inline;
}
.network p strong {
  display: block;
  font-size: 1.3em;
  color: #197ece;
  margin-bottom: 0.5em;
}
@media screen and (max-width:640px) {
  .network {
	  width:calc(100% - 1.5rem);
    margin: 1.5em auto 2em;
  }
  .network p {
    padding: 15px;
  }
  .network p img {
    float:none;
    display: block;
    margin:0 auto 1em;
  }
}


/* ---------------------------------------------
   選んでいただきたい理由
----------------------------------------------*/

.point {
  border:2px solid #8eccef;
  background-color:#d0f0ff;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
  padding:0 30px 30px;
  box-sizing: border-box;
  text-align:center;
}

.point h4 {
	padding-top:25px;
	padding-bottom:22px;
}

.point ul {
  list-style: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.point li {
  width: calc(33.33% - 20px);
}
.point li a {
  display: block;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #bbb;
  border-radius: 4px;
  transition: 0.3s;
  color: #04aded;
  text-decoration: none;
}
.point li a:hover {
  border: 1px solid #04aded;
}
.point li p {
  margin-top: .5em;
  text-align: left;
  font-weight: bold;
}
.point li p span {
  display: inline-block;
  vertical-align: top;
  line-height: 1.4;
}
.point li p .no {
  width: 1.5em;
  height: 1.5em;
  color: #fff;
  background-color: #04aded;
  text-align: center;
  border-radius: 50%;
  margin-right: 0.5em;
}
.point li p .desc {
  width: calc(100% - 2em);
}
@media screen and (max-width:640px) {
  .point {
	  width:calc(100% - 1.5rem);
    padding:0 15px 15px;
    margin: 1.5em auto 2em;
  }
  .point ul {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 0 auto -15px;
  }
  .point li {
    width: 100%;
    margin: 0 auto 15px;
  }
  .point li p {
    margin-top: 1em;
  }
}