@charset "utf-8";

:root {
  --color-white: #fff;
  --color-blue: #0058FD;
  --color-sky-blue: #E6EFFF;
  --color-green: #20BF7A;
  --color-gray: #F5F5F5;
  --color-black: #333333;
  --color-damy-img: #DBDBDB;
  --box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
  /* 基準スクリーンサイズ */
  --pc-screen-base-size: 1920;
  --sp-screen-base-size: 375;  
  
  /* アニメーション数値 */
  --shake-distance: 20px;
}


/*
 *{
  outline: 1px solid red;
} 
  */
  
html {
  color: #333333;
  font-family: "Noto Sans JP", serif;
  font-size: 16px;
  scroll-behavior: smooth;
}

a{
	opacity: 1.0;
	transition: opacity .3s;
}

a:hover{
	opacity: 0.7;
}

.l-section {
  width: 100%;
  padding: 0 50px;
}


.l-container {
  max-width: 1500px;
  padding: 0 50px;
  margin: 0 auto;
  width: 100%;
}

.l-inner {
  max-width: 1100px;
  padding: 0 50px;
  margin: 0 auto;
  width: 100%;
}

.u-color-sky-blue {
  color: var(--color-sky-blue) !important;
}

.u-color-light-blue {
  color: #00A7EA !important;
}

.u-color-white {
  color: var(--color-white) !important;
}

.u-color-yellow {
  color: #F7AE26 !important;
}

.u-color-orange {
  color: #F8671A;
}

.u-color-green {
  color: #8FC328;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .l-section {
    padding: 0;
  }

  .l-container {
    padding: 0;
  }

  .l-inner {
    padding: 0;
  }

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }  
}


/* * * ヘッダー * * */ 
.p-header{
  width: 100%;
  background-color: var(--color-white);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}

.p-header__blue-line {
  background-color: var(--color-blue);
  height: calc(20 / var(--pc-screen-base-size) * 100vw);
}

.p-header-menu {
  height: 80px;
  /* height: calc(80 / var(--pc-screen-base-size) * 100vw); */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.p-header-menu__logo {
  margin-left: calc(30 / var(--pc-screen-base-size) * 100vw);
}

.p-header-menu__logo-text {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-blue);
}

.p-header-menu-list {
  display: inline-flex;
  align-items: center;
}

.p-header-menu-list a {
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--color-black);

  margin-left: calc(64 / var(--pc-screen-base-size) * 100vw);
  text-decoration: underline dotted;
  text-underline-offset: 5px;
}

.p-header-menu-tel {
  padding-top: calc(10 / var(--pc-screen-base-size) * 100vw);
  padding-bottom: calc(10 / var(--pc-screen-base-size) * 100vw);
  padding-left: calc(13 / var(--pc-screen-base-size) * 100vw);
  padding-right: calc(22 / var(--pc-screen-base-size) * 100vw);
  margin-left: calc(97 / var(--pc-screen-base-size) * 100vw);
  background-color: var(--color-blue);
  border-radius: 100px 0 0 100px;
  display: flex;
  align-items: center;
  text-decoration: none !important;
}

.p-header-menu-tel img {
  width: calc(30 / var(--pc-screen-base-size) * 100vw);
  height: calc(30 / var(--pc-screen-base-size) * 100vw);
  object-fit: contain;
  background-color: var(--color-white);
  border-radius: 50%;
}

.p-header-menu-tel span {
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  text-underline-offset: 0;
  color: var(--color-white);
  margin-left: calc(11 / var(--pc-screen-base-size) * 100vw);
}


@media screen and (max-width: 767px) {
  .p-header__blue-line {
    /* height: calc(8 / var(--sp-screen-base-size) * 100vw); */
    height: 8px;
  }

  .p-header-menu {
    /* height: calc(56 / var(--sp-screen-base-size) * 100vw); */
    height: 56px;
  }

  .p-header-menu__logo-text {
    font-size: 16px;
    margin-left: calc(17 / var(--sp-screen-base-size) * 100vw);
  }

  .p-header-menu-tel {
    padding-top: calc(7 / var(--sp-screen-base-size) * 100vw);
    padding-bottom: calc(7 / var(--sp-screen-base-size) * 100vw);
    padding-left: calc(8 / var(--sp-screen-base-size) * 100vw);
    padding-right: calc(10 / var(--sp-screen-base-size) * 100vw);
    margin-left: 0;
  }

  .p-header-menu-tel img {
    width: calc(20 / var(--sp-screen-base-size) * 100vw);
    height: calc(20 / var(--sp-screen-base-size) * 100vw);
  }

  .p-header-menu-tel a {
    font-size: 11px;
    margin-left: calc(8 / var(--sp-screen-base-size) * 100vw);
  }
}
/* * * ヘッダー /E * * */ 


/* * * フッター * * */ 
.l-footer {
  background-color: var(--color-blue);
  color: var(--color-white);

  padding-top: calc(145 / var(--pc-screen-base-size) * 100vw);
  padding-bottom: calc(157 / var(--pc-screen-base-size) * 100vw);
}

.l-footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.l-footer-left__name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: calc(12 / var(--pc-screen-base-size) * 100vw);
}

.l-footer-left__info {
  letter-spacing: 0.06em;
  line-height: 2;
  margin-bottom: calc(41 / var(--pc-screen-base-size) * 100vw);
}

.l-footer-left__info a {
  color: var(--color-white);
}

.l-footer-left__catch {
  font-size: 32px;
  letter-spacing: 0.1em;
  font-weight: bold;
}

.l-footer-center{
  width: 20%;
  margin-right: 14vw;
  margin-top: -1vw;
}

.l-footer-image{
  display: flex;
  width: 100%;
}

.l-footer-image__illust--1{
  display: block;
  width: 100%;
  margin-right: 1vw;
}

.l-footer-image__illust--2{
  display: block;
  width: 100%;
}

.l-footer-menu {
  /* text-align: right; */
}

.l-footer-menu p:not(:last-of-type) {
  margin-bottom: calc(24 / var(--pc-screen-base-size) * 100vw);
}

.l-footer-menu p:last-of-type {
  margin-bottom: calc(148.5 / var(--pc-screen-base-size) * 100vw);
}

.l-footer-menu p a {
  color: var(--color-white);
  text-decoration: none;
}

@media (min-width: 768px) and (max-width: 1200px) {
  .l-footer-left__catch{
    font-size: 24px;
  }

  .l-footer-image{
    width: 80%;
  }
}

@media screen and (max-width: 767px){
  .l-footer{
    padding: 15vw 6vw 17vw;
  }

  .l-footer-container{
    display: block;
  }

  .l-footer-left__info{
    margin-bottom: 11vw;
  }

  .l-footer-left__catch{
    line-height: 1.55em;
  }

  .l-footer-center{
    width: 100%;
  }

  .l-footer-image{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 82%;
    margin: 6vw auto 3vw;
  }

  .l-footer-image__illust--1{
    position: relative;
    left: -9%;
  }

  .l-footer-menu{
    text-align: left;
    line-height: 2.6em;
  }

  .l-footer-menu p:last-of-type{
    margin-bottom: 13vw;
  }

  .l-footer__copyright{
    font-size: 12px;
    letter-spacing: 0.1em;
  }

}
/* * * フッター /E * * */