@charset "Shift_JIS";





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

  more

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

.more a {

  padding-left: 20px;

  font-size: 0.9em;

  display: inline-block;

  position: relative;

}



.more a::before {

  position: absolute;

  content: "";

  background-color: var(--blue);

  clip-path: polygon(0 0, 100% 50%, 0 100%);

  width: 7px;

  height: 9px;

  left: 0;

  top: 0;

  bottom: 0;

  margin: auto;

}



.more a:hover {

  text-decoration: underline;

}





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

  contaiter-layout1

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



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

          contaiter-layout1 > SP

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

      @media (min-width:0px) {



        .container-layout1 {

          display: flex;

          flex-direction: column;

        }



      }

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

          contaiter-layout1 > TABLET

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

      @media (min-width:768px) {



      }

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

          contaiter-layout1 > PC

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

      @media (min-width:1100px) {

  

      }

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

          contaiter-layout1 > PC

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

      @media (min-width:1280px) {



        .container-layout1 {

          display: flex;

          flex-direction: row;

          align-items: center;

        }

  

      }

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

          contaiter-layout1 > wide PC

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

      @media (min-width:1680px) {

  

      }





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

  slider

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



.slider-note {

  font-size: 0.9em;

  letter-spacing: normal;

  filter: drop-shadow(0px 0px 4px #00000033);

}



.slider-note-date.bold {

  padding: 7px 10px;

  background-color: var(--blue);

  color: var(--white);

}



.slider-note-txt {

  padding: 15px 20px;

  background-color: #fffffff2;

}



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

          slider > SP

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

      @media (min-width:0px) {



        .slider {

          margin-bottom: 40px;

        }



        .slider-img img {

          margin: auto;

        }



        .slider-note {

          margin-top: 20px;

          margin-bottom: 10px;

          margin-right: auto;

          margin-left: auto;

          width: calc(100% - 2rem);

        }



        .slider .slick-prev,

        .slider .slick-next {

          top: 30%;

          filter: drop-shadow(0px 0px 4px #00000033);

        }



      }



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

          slider > TABLET

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

      @media (min-width:768px) {



        .slider-img {

          clip-path: polygon(0 3%, 100% 3%, 100% 97%, 0 97%);

          position: relative;

        }

        

        .slider-note {

          margin-top: 0;

          margin-bottom: 0;

          width: calc(100% - 4rem);

          position: absolute;

          bottom: calc(3% + 20px);

          left: 20px;

        }



        .slider-note-txt {

          width: calc(40% + 20px);

        }



        .slider .slick-prev,

        .slider .slick-next {

          top: 50%;

        }



      }

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

          slider > PC

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

      @media (min-width:1280px) {



        .slider {

          margin-bottom: 0;

        }



  

      }

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

          slider > wide PC

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

      @media (min-width:1680px) {

  

      }





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

  aside1

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



.massage {

  margin-bottom: 30px;

  width: 350px;

}



.massage-h2 {

  margin-bottom: 30px;

}



.massage-box {

  padding: 25px 15px 25px 20px;

  background-color: var(--white);

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: flex-start;

}



.massage-txt-kaicho {

  margin-bottom: 10px;

  padding-left: 15px;

  font-size: 0.9em;

  line-height: 1.3;

  position: relative;

  z-index: 0;

}



.massage-txt-kaicho::before {

  position: absolute;

  content: "";

  background-color: var(--lightblue);

  width: 30px;

  height: 30px;

  border-radius: 15px;

  top: -6px;

  left: 0;

  z-index: -1;

}



.massage-txt-name {

  margin-left: 15px;

  margin-right: 15px;

  padding-bottom: 5px;

  font-size: 1.25em;

  border-bottom: 1px solid var(--blue);

}



.massage-txt-position {

  margin-left: 15px;

  margin-bottom: 10px;

  font-size: 0.9em;

}



.massage-box .more {

  margin-left: 15px;

}



.massage-txt {

  width: calc(100% - 125px);

}



.massage-img {

  margin-left: 10px;

  width: 115px;

}



.massage-img img {

  width: 100%;

  height: auto;

  object-fit: cover;

  box-shadow: 0 0 6px #00000026;

}



.aside1-banner-item {

  margin-bottom: 10px;

  box-shadow: 0 0 6px #00000026;

  width: 350px;

}



.aside1-banner-item a {

  padding: 20px 60px 20px 30px;

  background-color: var(--blue);

  background-position: right 15px center;

  background-repeat: no-repeat;

  color: var(--white);

  font-size: 1.25em;

}



.aside1-banner-item:first-of-type a {

  background-image: url(../image/icon-leaf.png);

}



.aside1-banner-item:nth-of-type(2) a {

  background-image: url(../image/icon-pen.png);

}



.aside1-banner-item:nth-of-type(3) a {

  background-image: url(../image/icon-opinions.png);

}



.aside1-banner-item a:hover {

  transform: translate(1px, 1px);

  -webkit-transform: translate(1px, 1px);

  box-shadow: 0 0 0 #00000026;

}



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

          aside1 > SP

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

      @media (min-width:0px) {



        .aside1 {

          margin-right: auto;

          margin-left: auto;

          margin-bottom: 30px;

          max-width: 350px;

          width: calc(100% - 2rem);

        }



      }

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

          aside1 > TABLET

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

      @media (min-width:768px) {



        .aside1 {

          width: calc(100% - 4rem);

        }







      }

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

          aside1 > PC

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

      @media (min-width:1028px) {



        .aside1 {

          display: flex;

          flex-direction: row;

          align-items: center;

          justify-content: center;

          max-width: none;

          width: 90%;

        }



        .massage {

          margin-right: 40px;

        }







  

      }

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

          aside1 > PC

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

      @media (min-width:1100px) {







  

      }



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

          aside1 > PC

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

      @media (min-width:1280px) {



        .aside1 {

          margin-left: 40px;

          width: calc(100% - 67% - 40px);

          min-width: 350px;

          display: flex;

          flex-direction: column;

          align-items: normal;

          justify-content: normal;

          max-width: 350px;

        }



        .aside1 {

          margin-right: calc((100% - 1200px)/2);

        }



        .massage {

          margin-right: 0;

        }



      }

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

          aside1 > PC

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

      @media (min-width:1333px) {





      }

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

          aside1 > wide PC

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

      @media (min-width:1680px) {



        .container-layout1 {

          max-width: 1680px;

          margin: auto;

      }

      

  

      }







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

  contaiter-layout2

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



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

          contaiter-layout2 > SP

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

      @media (min-width:0px) {



        .contaiter-layout2 {

          padding: 30px 0 20px;

          display: flex;

          flex-direction: column;

          align-items: center;

      }



      }

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

          contaiter-layout2 > TABLET

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

      @media (min-width:768px) {



      }

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

          contaiter-layout2 > PC

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

      @media (min-width:1100px) {



        .contaiter-layout2 {

          padding: 30px 0 50px;

          display: flex;

          flex-direction: row;

          justify-content: space-between;

        }

  

      }

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

          contaiter-layout2 > wide PC

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

      @media (min-width:1680px) {

  

      }





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

  topics

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



.topics-h2 img {

  max-width: 153px;

}



.topics-item {

  padding: 30px 20px;

  border-bottom: 1px dotted #9aa5af;

}



.topics-item-date {

  color: var(--darkgray);

  font-size: 0.8em;

  letter-spacing: normal;

}



.topics-item-ttl a:hover {

  text-decoration: underline;

}



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

          topics > SP

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

      @media (min-width:0px) {



        .topics {

          display: flex;

          flex-direction: column;

          margin-bottom: 40px;

        }



        .topics-layout {

          display: flex;

          flex-direction: row;

          align-items: flex-end;

          justify-content: space-between;

        }



      }

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

          topics > TABLET

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

      @media (min-width:768px) {



        .topics {

          display: flex;

          flex-direction: row;

          margin-bottom: 60px;

        }



        .topics-layout {

          display: block;

        }



        .topics-h2 {

          margin-top: 40px;

          margin-bottom: 40px;

        }



        .topics-list {

          margin-left: 40px;

          width: 100%;

        }



      }

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

          topics > PC

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

      @media (min-width:1100px) {



        .topics {

          width: 67%;

          margin-bottom: 0; 

        }

  

      }





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

  aside2

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



.note {

  margin-bottom: 30px;

}



.note-h2 {

  margin-bottom: 20px;

}



.note-box {

  padding: 20px 30px 15px;

  background-color: var(--white);

}



.note-ttl {

  margin-bottom: 15px;

  padding: 12px 17px;

  font-size: 1.2em;

  position: relative;

}



.note-ttl::before {

  position: absolute;

  content: "";

  background-image: url(../image/note-ttl-left.png);

  background-repeat: no-repeat;

  width: 24px;

  height: 23px;

  top: 0;

  left: 0;

}



.note-ttl::after {

  position: absolute;

  content: "";

  background-image: url(../image/note-ttl-right.png);

  background-repeat: no-repeat;

  width: 24px;

  height: 23px;

  bottom: 0;

  right: 0;

}



.note-profile {

  margin-bottom: 10px;

  background-color: var(--lightblue);

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.note-box .more {

  text-align: right;

}



.note-profile-txt {

  padding: 5px 20px;

  width: calc(100% - 80px);

}



.note-name {

  padding-bottom: 5px;

  font-size: 1.25em;

  border-bottom: 1px solid var(--blue);

}



.note-position {

  font-size: 0.9em;

}



.aside2-banner-item {

  margin-bottom: 10px;

}



.aside2-banner-item a {

  box-shadow: 0 0 6px #00000026;

}



.aside2-banner-item a:hover {

  transform: translate(1px, 1px);

  -webkit-transform: translate(1px, 1px);

  box-shadow: 0 0 0 #00000026;

}



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

          aside2 > SP

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

      @media (min-width:0px) {



        .aside2 {

          max-width: 350px;

        }



      }

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

          aside2 > TABLET

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

      @media (min-width:768px) {



      }

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

          aside2 > PC

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

      @media (min-width:1100px) {



        .aside2 {

          margin-left: 40px;

          width: 350px;

          max-width: none;

        }

  

      }





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

  othermenu

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



.othermenu {

  padding: 15px 0;

}



.othermenu-list {

  margin-right: -10px;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

}



.othermenu-item {

  margin: 5px 10px 5px 0;

}



.othermenu-item a {

  padding: 20px 45px 20px 25px;

  background-color: var(--white);

  box-shadow: 0 0 6px #00000026;

  position: relative;

}



.othermenu-item a::before {

  position: absolute;

  content: "";

  background-color: var(--blue);

  clip-path: polygon(0 0, 100% 50%, 0 100%);

  width: 10px;

  height: 12px;

  right: 25px;

  top: 0;

  bottom: 0;

  margin: auto;

}



.othermenu-item a:hover {

  transform: translate(1px, 1px);

  -webkit-transform: translate(1px, 1px);

  box-shadow: 0 0 0 #00000026;

}



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

          othermenu > SP

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

      @media (min-width:0px) {



        .othermenu-item {

          width: calc(100%/1 - 10px);

        }



      }

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

          othermenu > TABLET

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

      @media (min-width:768px) {



        .othermenu-item {

          width: calc(100%/2 - 10px);

        }



      }

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

          othermenu > PC

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

      @media (min-width:1100px) {



        .othermenu-item {

          width: calc(100%/3 - 10px);

        }

  

      }