@charset "UTF-8";

/*------------------------------------------------------------
	Default
------------------------------------------------------------*/
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, dialog, figure, footer, header, button,
hgroup, menu, nav, section,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 1em;
}

html {
  font-size: 62.5%;
}

body, table,
input, textarea, select, option, button,
h1, h2, h3, h4, h5, h6 {
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-family: 'Lato', 游ゴシック, 'Yu Gothic', YuGothic, 'Hiragino Gothic ProN', 'Hiragino Gothic Pro', sans-serif;
  text-align: left;
}

table,
input, textarea, select, option {
  line-height: 1.1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

:focus {
  outline: 0;
}

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

img {
  vertical-align: middle;
}

a {
  text-decoration: none;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*------------------------------------------------------------
	Common
------------------------------------------------------------*/
/*------------------------------------------------------------
	Layout
------------------------------------------------------------*/
body {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 768px) {
  body {
    min-width: 320px;
  }
}

.wrapper {
  margin-top: 80px;
}

@media screen and (max-width: 860px) {
  .wrapper {
    max-width: 100%;
    padding: 0 20px;
    margin-top: 0px;
  }
}

.l-header {
}

@media screen and (max-width: 560px) {
  .l-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
}

.l-header_containar {
  position: relative;
  display: flex;
  align-items: center;
  color: #10577C;
  margin-bottom: 50px;
}

.l-header_containar_txt {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 560px) {
  .l-header_containar_txt {
    display: block;
    padding-left: 0;
  }
}

.l-header p {
  font-size: 1.2em;
}

.l-header__ttl {
  font-size: 4em;
  font-weight: 700;
  padding-left: 18px;
}

@media screen and (max-width: 560px) {
  .l-header__ttl {
    font-size: 3.5em;
    font-weight: 700;
    padding-left: 0;
  }
}

.suou {
  color: #7E2639;
}

.l-header_containar_logo {
  position: relative;
}

.l-header_containar_logo img {
  width: 60px;
}

/* @media screen and (max-width: 650px) {
  .l-header_containar_logo {
    position: absolute;
    top: -20%;
    right: -70%;
  }

  .l-header_containar_logo img {
    width: 62px;
  }
} */
@media screen and (max-width: 560px) {
  .l-header_containar_logo {
    position: static;
    top: 0;
    right: 0;
    width: auto;
    padding-left: 10px;
    padding-bottom: 10px;
  }
}

.side_sns {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
  margin: auto;
}

.side_sns li {
  padding: 5px 0;
}

@media screen and (max-width: 560px) {
  .side_sns {
    position: static;
  }

  .side_sns ul {
    display: flex;
    align-items: center;
    margin: 60px 0;
  }

  .side_sns li {
    padding: 0 0 0 20px;
  }

  .side_sns li:first-child {
    padding: 0;
  }
}

a :hover {
  opacity: 0.6;
}

.m_c {
  position: relative;
  color: #10577C;
  display: flex;
  max-width: 900px;
  width: 100%;
}

@media screen and (max-width: 560px) {
  .m_c {
    display: block;
  }
}

.profile_01 {
  max-width: 450px;
  width: 100%;
  font-size: 1.4em;
  margin-bottom: 50px;
}

@media screen and (max-width: 560px) {
  .profile_01 {
    margin-bottom: 40px;
  }
}

.profile_02 {
  position: absolute;
  top: 160px;
  max-width: 450px;
  width: 100%;
}

@media screen and (max-width: 560px) {
  .profile_02 {
    position: static;
  }
}

.profile_02 h2 {
  font-size: 1.4em;
  font-weight: 400;
}

.qualifications_list {
  margin: 12px 0 16px 0;
  display: flex;
  flex-wrap: wrap;
  max-width: 315px;
}

.qualifications_list li, .history_list li {
  font-size: 1.3em;
  line-height: 1.5;
  color: #7EB1C1;
}

.pdl-04 {
  padding-left: 0.4em;
}

@media screen and (max-width: 560px) {
  .qualifications_list li{
    width: 100%;
  }

  .pdl-04 {
    padding-left: 0;
  }
}

/* width: 100%;で残りスペースを埋める */
.spacer {
  width: 100%;
}

.sp_only {
  display: none;
}

.pc_only {
  display: inline-block;
}

@media screen and (max-width: 560px) {
  .sp_only {
    display: block;
  }
  .pc_only {
    display: none;
  }
}

.mapimg {
  max-width: 450px;
  width: 100%;
}

.mapimg img {
  width: 100%;
}

@media screen and (max-width: 560px) {
  .mapimg {
    margin-bottom: 40px;
  }
}

.maplink {
  font-size: 1.4rem;
  text-align: right;
}

.maplink a {
  color: #10577C;
  text-decoration: underline;
}

.maplink a:hover {
  opacity: 60%;
}

.j_c {
  position: absolute;
  bottom: 30px;
  right: 20px;
}

@media screen and (max-width: 560px) {
  .j_c {
    position: static;
    margin-bottom: 32px;
  }
}

.j_c button {
  color: #333333;
  position: relative;
}

.j_c button::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 4px;
  background: url(../img/arrow.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 10px;
}

.button-6 {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: .25rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing: border-box;
  cursor: pointer;
  margin: 0;
  padding-left: 10px;
  position: relative;
  text-decoration: none;
  transition: all 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: 200px;
  height: 42px;
  font-size: 1.3rem;
}

.button-6:hover,
.button-6:focus {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  color: rgba(0, 0, 0, 0.65);
}

.button-6:hover {
  transform: translateY(-1px);
}

.button-6:active {
  background-color: #F0F0F1;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
  color: rgba(0, 0, 0, 0.65);
  transform: translateY(0);
}