@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600&text=会津の不動産（土地・一戸建て・マンション）、賃貸、売買は、城北産業におまかせください。物件探しす不動産なんでも相談0123&display=swap');
/* CSS Document */
article, aside, footer, header, main, nav, article, section {display:block;}
img, picture, audio, canvas, video, svg {display:block; max-width:100%;height: auto;}
br,hr {display:block;}
ol,ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:none;}
input,select {vertical-align:middle;}
*,
*::before,
*::after { box-sizing:border-box;}
* {
	border:0;
	margin:0;
	outline:0;
	padding:0;
	font:inherit;
	font-family:inherit;
	font-size:100%;
	font-style:inherit;
	font-weight:inherit;
	text-decoration:none;
	vertical-align:baseline;
}

/*** effect ***/
/* フェードイン(初期値) */
.js-fadeUp {
  opacity: 0; /* 最初は非表示 */
  transform: translateY(5px); /* 下に20pxの位置から */
  transition: opacity .3s, transform .3s; /* 透過率と縦方向の移動を0.8秒 */
}
/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
}


body {
  background: #fbf9f6/*fcf9f8*/;
  color: #364e65/*435f75*/;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size:1.5rem;
  letter-spacing: .05em;
	line-break:strict;
	overflow-wrap:break-word;
	word-break:normal;
	-webkit-text-size-adjust:100%;
	-webkit-font-smoothing:antialiased;

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


@media (min-width:960px) {body{font-size:1.6rem;}}

  
a {
  color: #364e65;
  -webkit-tap-highlight-color:transparent;
  transition:.3s;
  display: block;}
:hover {transition:.3s;}
a img { display: inline-block; text-align: center;}

:root {
  --sans_serif: 'Noto Sans JP', sans-serif;
  --serif: 'Noto Serif JP', serif;
  --j-color:#33aa94;
  --j-color-light:#cae7dd;
  --bg-color: #f9f4ee;
  --leading-trim: calc((1em - 1lh) / 2);
}
html { font-size: 62.5%; scroll-behavior: smooth;}
h1,h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.5;
  margin-block: var(--leading-trim);
}


/*@media (min-width: 960px){ .bg-color {padding-top: 120px; padding-bottom: 120px;}}*/
/* header -----------------------*/
.header__logo p,
.header__info-address,
.header__menu-pc{ display: none;}
.header { max-width: 1120px; height: 64px; padding:16px;}

.header__logo-img {
  width: 100%;
  width: /*205*/215px;
  max-width: 352px;
  padding: 4px 0;
}
.header__group {
 position: absolute;
 top:16px;
 right:56px;
}
.header__info{
 display: flex;
 justify-content: flex-end;
 align-items: center;
 gap:8px;
  }
.header__info-phone {
  width : 32px;
  height: 32px;
  border: 1px solid #364e65;
  border-radius: 50%;
  overflow: hidden;
  text-indent:100%;
  line-height: 1;
	white-space:nowrap;
  margin: 0;
}
  .header__info-phone a:before {
    content:url("../img/nav/icon-phone.svg");
    display: inline-block;
    width: 10px;
    position: absolute;
    top: 9px;
    right: 53px;
    margin-right: 8px;
  }  
.header__info-contact {
  width: 32px;
  height: 32px;
  background:#364e65;
  border-radius: 50%; 
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  overflow: hidden;
  text-indent:100%;
	white-space:nowrap;
}
.header__info-contact a {
  font-size:13px;
  font-weight: 500;
  color: #fff;
  width: 100%;
  height: 100%;
  margin: auto;
  line-height: 32px;
  text-align: center;
}.header__info-contact a:hover {background:#566f83}

.header__info-contact a:before{
  content:url("../img/nav/icon-mail.svg");
  display: inline-block;
  width: 14px;
  margin-right: 8px;
  position: absolute;
  right: 15px;
}
@media (min-width:680px) {
.header__wrap {
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(8, [col-start] 1fr);
  gap: 16px;
  }
.header__logo{ grid-column: col-start / span 3;}
.header__group{grid-column: col-start 4 / span 5;}

.header__info-address { 
  display:block;
  width: 26em;
  font-size:11px;
  line-height: 1.5;
  text-align: right;
  margin-block: var(--leading-trim);
} 
.header__info-phone{top: 16px; right:112px;}
.header__info-contact {top: 16px; right:72px;}
}
@media (min-width: 768px){
  .header{ height: auto; padding: 24px;}
  .header__wrap { gap: 24px;}
  .header__group {top:24px; right:64px; }
div#sp-icon {top:24px; right:24px;}
  
}
@media (min-width: 980px){
.header__logo-img { width: 352px; padding: 0;}
.header__info-address,
.header__info-phone { position: unset;}
a[href^="tel:"] { pointer-events: none;display: inline;}

.header {
  height:auto;
  /*margin-bottom: 40px;*/
}
.header__wrap {
  position: relative;
  justify-content: space-between;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 32px;
  }

.header__logo{ grid-column: col-start / span 4;}
.header__group{
  grid-column: col-start 5 / span 8;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: unset;
  }

.header__menu-pc { display: block; margin-bottom: 2px;}
.header__menu-pc ul{
  display: flex;
  justify-content: flex-end;
  font-size: 1.4rem;
  font-weight: 500;
  margin-right: 56px;
  gap:24px;
}
.header__logo p {
  display: block;
  font-size:13px;
  line-height: 1;
  margin-bottom: 28px;
}
 
.header__info{ gap:16px;}
.header__info-address {
  border-right: 1px solid #ddd;
  padding-right: 24px;
}
.header__info-phone {
  width: 8em;
  height:auto;
  font-size:1.8rem;
  font-weight: 500;
  position: unset;
  border: 0;
  overflow: visible;
  text-indent:inherit;
  white-space: nowrap;
}
  .header__info-phone a:before { display: none;}
  .header__info-phone::before {
    content: url("../img/nav/icon-phone.svg");
    display: inline-block;
    width: 10px;
    margin-right: 8px;
    }
  .header__info-contact a::before { position: unset;}

  
.btn-contact {
  width: 160px;
  border-radius: 32px; 
  position: unset;
  text-indent:inherit;
}
}
@media (min-width: 1120px){
  .header { padding: 0;margin: 32px auto 40px;}
  .header__logo p { letter-spacing: 1px;}
  .header__menu-pc { font-size: 1.5rem;}
  .header__info{ gap:32px;}
}
/* sp menu area ---------- */
/* -- #sp-icon -- */
div#sp-icon {
	width : 24px;
	height: 24px;
	position: absolute;
	right: 16px;
  top: 20px;
	z-index: 9999;
  transition: all 0.3s ease 0s;
}
div#sp-icon.fixed {
	position: fixed;
	top: 20px;
  right: 16px;
}

div#sp-icon:hover { cursor: pointer; opacity: .7;}

div#sp-icon span,
div#sp-icon span:before,
div#sp-icon span:after {
	display: inline-block;
	width: 24px;
	height: 2px;
	background: #364e65;
	position: absolute;
	transition-property: transform;
	transition-duration: .3s;
}
div#sp-icon span {
	left: 50%;
	top : 50%;
	transform: translate( -50%, -50% );
}
div#sp-icon span:before {
	content: "";
	transform: translateY( -10px ) rotate( 0deg );
}
div#sp-icon span:after {
	content: "";
	transform: translateY( 10px ) rotate( 0deg );
}
div.sp-open span { background: transparent !important;}
div.sp-open span:before{ transform: rotate( 45deg ) !important;}
div.sp-open span:after { transform: rotate( -45deg ) !important;}

#menu .g-menu a[target="_blank"]:after,
.footer__body-link a[target="_blank"]:after{
  content: url("../img/nav/icon-blank.svg");
  display: inline-block;
  width: 1em;
  margin-top: 2px;
  margin-left: 1em;
}

#menu {
	position: fixed;
  left: 0;
  top : 0;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
	background: var(--j-color-light);
	opacity: .95;
  padding: 64px 0;
	z-index: 999;
	display: none; 
  -webkit-overflow-scrolling: touch;
}
#menu > a img {
  display: block;
  width: 3.2rem;
  margin:0 auto 32px;
}
/*#menu > a:before {
  content:url("../img/nav/icon-J.svg");
  display: block;
  width: 3.2rem;
  margin:0 auto 32px;
}*/

.g-menu {
  max-width: 280px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  line-height: 1;
  margin: auto;
}
.g-menu .g-menu__primary { width: 7em;}
.g-menu .g-menu__secondary { width: 9em;}
.g-menu li {
  position: relative;
  width: 100%;
}
.g-menu li + li { margin-top: 24px;}
.g-menu li:after {
  content: url("../img/nav/icon-link.svg");
  display: inline-block;
  width: 16px;
  position: absolute;
  top: -1px;
  right: 0;
}
.g-menu__link {
  position: relative;
  font-size: 13px;
  border-top: 1px solid #fff;
  border-bottom:1px solid #fff; 
  width: 100%;
  text-align: center;
  padding: 16px 0 20px;
  margin-top:40px;
}
.g-menu__contact {
  display: flex;
  flex-direction: column;
  gap:18px;
  width: 100%;
  text-align: center;
  margin-top: 32px;
  }
.g-menu__contact div { margin-block: var(--leading-trim);}
.g-menu__contact .icon-phone{
  font-size: 1.8rem;
  text-align: center;
  
}
.g-menu__contact .icon-phone:before {
  width: 10px;
  height: 1em;
}
.g-menu__contact .icon-phone a { display: inline-block;}

.g-menu__contact-address {
  font-size: 1.3rem;
  line-height: 1.75;
  font-weight: 400;
}

.g-menu__contact .btn-contact {
  margin-right: auto;
  margin-left: auto;
}
.g-menu__contact .btn-contact a{
  width: 160px;
  height: 32px;
  background:#364e65;
  border-radius: 32px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: unset;
  overflow:visible;
  text-indent:inherit;
  white-space:inherit;
  margin: auto;
}
.g-menu__contact .btn-contact a:hover {background:#566f83}
.g-menu__contact .btn-contact a:before{
  content:url("../img/nav/icon-mail.svg");
  display: inline-block;
  width: 14px;
  margin-right: 8px;
  z-index: 999;  
}

.g-menu__g-page a{ display: inline-block; font-size: 1.3rem;}
.g-menu__g-page a:before {content:'｜'; display: inline-block; width: 3em;}
.g-menu__g-page a:last-of-type:after{content:'｜'; display: inline-block; width: 3em;}

@media (max-height:750px){ #menu { height: 100%; overflow-y: scroll;}}

@media (min-width:768px) {
div#sp-icon {
  width: 32px;
  height: 32px;
  bottom: 2px;
  top: 24px;
  right: 16px;
}
  div#sp-icon span,
  div#sp-icon span:before,
  div#sp-icon span:after {width: 32px; }
  div#sp-icon span:before{transform: translateY(-12px) rotate(0deg);}
  div#sp-icon span:after {transform: translateY(12px) rotate(0deg);}
}
@media (min-width:980px) {div#sp-icon {top:auto;right:0;}}

/*** Content ***/
.page-ttl__container {
  width: 100%;
  padding: 80px 16px;
  background: url("../img/nav/icon-J.svg") center right 16px/88px no-repeat;
}
.page-ttl__img img {
  width: 100vw;
  height: auto;
  margin: 0 auto;
  animation: loading 1s;
}

.page-ttl-service__container {
  padding: 80px 16px;
}

.page-ttl-service__img {
  max-width: 256px;
  width: calc(60% - 8px);
  margin-left: auto;
} 
.page-ttl__ttl,
.page-ttl-service__ttl {
  font-size: clamp(2.4rem,3.125vw, 3.2rem/*+2*/);
  line-height: 1;
}
.page-ttl-service__ttl span { font-size: 1.2em; color: var(--j-color);}
.page-ttl-service__ttl.icon-uritai,
.page-ttl-service__ttl.icon-kaitai,
.page-ttl-service__ttl.icon-karitai,
.page-ttl-service__ttl.icon-kashitai {
  position: relative;
  left: 1.5em;
  width: calc(100% - 1.5em);
  display: flex;
  align-items: center;
}
.page-ttl-service__ttl.icon-uritai:before,
.page-ttl-service__ttl.icon-kaitai:before,
.page-ttl-service__ttl.icon-karitai:before,
.page-ttl-service__ttl.icon-kashitai:before {
  position: absolute;
  left: -1.5em;
  top: 1px;
  bottom: 0;
  margin: auto 0;
}
.page-ttl__ttl span,
.page-ttl__ttl-service span{
  display: block;
  font-size: 1.6rem;
  margin-top: 16px;
}
.page-ttl__txt ,
.page-ttl-service__txt {
  font-size: 1.6rem;
  line-height: 2; 
  margin-top: 16px;
}
.page-ttl-service__txt { font-weight: 500; color: #666;}

/* section area */
/*.single　{ max-width: 1120px;margin:0 auto;}*/

section {
  padding-left: 16px;
  padding-right: 16px;
  margin: 100px 0;
}
section.bg-color {
  background: var(--bg-color);
  padding-top: 100px;
  padding-bottom: 100px;
  margin: 0;
}
[class$="__container"]{
  display: grid;
  gap: 24px;
  max-width: 1120px;
  margin:0 auto;
}
[class$="detail"] {
  font-size: .9375em;
  line-height: 1.8;
  margin-block: var(--leading-trim);
}
[class$="ttl-sub"]{
  font-size: clamp(1.8rem, 1.875vw/*960*/, 2.2rem);
}
.sec__head h2{
  font-size: clamp(2.2rem, 2.2916666vw/*960*/, 2.6rem);
  line-height: 1;
}
.sec__head div h2{ margin-top: 24px;}/*Service page*/

.sec__body { display: grid; gap:48px;}
.sec__body img{ border-radius: 3px;}

.head-r-border {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
.head-r-border:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
  background: #364e65;
  margin: auto;
}
.head-r-border h3 {
  font-size: clamp(1.6rem, 1.66666vw/*960*/, 1.8rem);
  background: #fbf9f6;
  text-align: left;
  white-space: nowrap;
}
.head-r-border h3:before {
  content:'【';
  display:inline-block;
  font-feature-settings: "palt";
  padding-right: 16px;
}
.head-r-border h3:after {
  content:'】';
  display:inline-block;
  font-feature-settings: "palt";
  padding-left: 16px;
}

/*** page-menu  ***/
.page-menu { padding:0 16px; margin:0; }
.page-menu__container { gap:16px;}
.page-menu__btn {
  position: relative;
  background: #fff;
  border-radius: 3px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  line-height: 56px;
  height: 56px;
  padding-left: 32px;
}
.page-menu__btn:hover { background: var(--j-color-light); color:#fff;} 
.page-menu__btn:after {
  position: absolute;
  top: -3px;
  right: 20px;
  content: url('../img/nav/icon-link-gray.svg');
  display: inline-block;
  width: 20px;
  margin-right: auto;
  z-index: 990;
}
/* card */
.card {
  display: flex;
  flex-direction: column;
  gap:24px;
  background: #fff;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-radius: 3px; 
  padding: 24px 24px 32px;
}
.card-hl{
  font-size: clamp(1.8rem, 1.875vw/*960*/, 2.2rem);
}
.card-no > img {
  width: 56px!important;
  height: 56px!important;
  margin: -24px auto auto;
}
.card-txt {
  text-align: justify;
  margin-block: var(--leading-trim);
}
.card__link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: transparent;
}
.card .head-r-border h3 {background: #fff;}
.bg-color .head-r-border h3 {background: var(--bg-color);}

@media (min-width: 600px){
.page-menu__container{ 
  grid-template-columns: 1fr 1fr;
  
}
.page-ttl__ttl{
  grid-column: col-start / -1;
  grid-row: 1;
  padding-left: 16px;
}
.page-menu__btn:hover { background: var(--j-color-light);color:#fff;} 

}
@media (min-width: 680px){

.sec__container/*,
.sec-single__container*/{ 
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 16px;
}

.fixed {
  position: sticky;
  top: 24px;
  }
/*.sec-single__content { grid-column: col-start 2 / span 8;}*/
.sec__head {
  grid-column: col-start / span 3;
}
.sec__head .fixed > span { display: block; margin-block: var(--leading-trim);}
.page-lead__body,
.sec__body {
  grid-column: col-start 4 / -1;
  margin-top: 40px;
}
}

@media (min-width:768px) {
[class$="__container"] {
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 24px;}

.page-ttl__container {
  padding: 112px 24px;
  background: url("../img/nav/icon-J.svg") center right 48px/144px no-repeat;
}
.page-ttl-service__container {
  padding: 60px 24px 140px;
  align-items: center;
  }
.page-ttl-service__area { grid-column: col-start / -1;grid-row: 1;}
.page-ttl-service__img {
  grid-column: col-start 9 / -1;
  grid-row: 1;
  max-width: 375px;
  width: 100%;
  margin: auto;
  }
  .page-ttl-service__img img { margin: auto;}
.page-menu { padding: 0 24px;}
.page-menu__btn:first-of-type,
.page-menu__btn:nth-of-type(3){ grid-column: col-start / span 6;}
.page-menu__btn:nth-of-type(2),
.page-menu__btn:last-of-type{ grid-column: col-start 7 / -1;}
  
.sec__head.u-center { margin-top: 60px;}
.page-ttl + .page-menu,
.page-ttl + section { margin-top: 80px;}

section {
  padding-left: 24px;
  padding-right: 24px;
  margin: 128px 0;
  }
  section.bg-color {padding-top: 128px; padding-bottom: 128px;}
  
.footer__body { gap : 56px;}
}
@media (min-width:980px) {
.page-ttl,.page-ttl-service {margin-top: 40px;}
.fixed { top: 32px;}
[class$="__container"] { gap: 32px;}
  
.page-menu__btn:first-of-type { grid-column: col-start 5/ span 4;}
.page-menu__btn:nth-of-type(2) { grid-column: col-start 9 / -1;}
.page-menu__btn:nth-of-type(3) { grid-column: col-start 5/ span 4;}
.page-menu__btn:last-of-type { grid-column: col-start 9 / -1;}   

.sec__head { grid-column: col-start / span 4;}
.sec__head.u-center { margin-top: 80px;}

.page-lead__body,
.sec__body {
  grid-column: col-start 5 / -1;
  grid-row: 1;
}
}
@media (min-width:1120px){
.page-ttl__container,
.page-ttl-service__container{ padding-left:0; padding-right: 0; }
}
@media (min-width:1180px){
.page-menu{ padding:0;}
section {
  padding-left: 0;
  padding-right: 0;}
}

/*** footer ***/
.footer {
  position: relative;
  background: url("../img/nav/footer-bg_s.jpg") center / cover no-repeat; 
  padding: 64px 48px;
  margin-block:var(--leading-trim);
  z-index: 0;
}
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: -1;
}
.footer__wrap {
  max-width: 1120px;
  display: grid;
  justify-content: center;
  margin: auto;
}
.footer__head { order: 2; margin: auto;}
.footer__head-logo { max-width: 240px; margin-bottom: 24px;}
.footer__body-pc{ display:contents;} 
.footer__body { order: 1; margin-bottom: 32px;}
.footer__body,
.footer__head-txt,.footer__body-list-g-page {
  font-size: 1.3rem;
  line-height: 1.5684641538;
}
.footer__head-txt a { display: inline-block;}

.footer__body-list-g-page {
  order: 3;
  display:flex;
  flex-wrap:wrap;
  gap: 16px;
  justify-content: center;
  padding-top: 24px;
  margin-block:var(--leading-trim);
}
.footer__body-list-g-page li{
  display: inline-block;
  line-height: 1;
  margin-block:var(--leading-trim);
  border-right:1px solid #ccc;
  padding-right: 16px;

}

.footer__body-list-g-page li:last-child {border:0; padding-right:0;margin-right:0;}
.footer__body-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 20px;
  font-weight: 500;
}

.footer__body-list > li{
  height: 1em;
  font-size: 1.4rem;
  line-height: 1;
  white-space: nowrap;
}
.footer__body-list-sub {display: none;}
.footer__body-list li{ position: relative; display: block; }
.footer__body-list >li:after {
  content:'';
  position: absolute;
  right:16px;
  top:0;
  background: url("../img/nav/icon-link-gray.svg") right/ contain no-repeat;
  display: inline-block;
  width: 16px;
  height: 14px;
}

.footer__body-list li:first-child{ grid-area: 1 / 1 / 2 / 2; }
.footer__body-list li:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.footer__body-list li:nth-child(3) { grid-area: 3 / 1 / 4 / 2; }
.footer__body-list li:nth-child(4) { grid-area: 4 / 1 / 6 / 2;}
.footer__body-list li:nth-child(5) { grid-area: 1 / 2 / 2 / 3; }
.footer__body-list li:nth-child(6) { grid-area: 2 / 2 / 3 / 3; }
.footer__body-list li:nth-child(7) { grid-area: 3 / 2 / 4 / 3; }
.footer__body-list li:nth-child(8) { grid-area: 4 / 2 / 5 / 3; }
.footer__body-list li:last-child { grid-area: 5 / 2 / 6 / 3; }

.footer__body-link {
  font-weight: 500;
  text-align: center;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 16px;
  margin: 32px auto 24px;}

.mail-link { border-bottom: 2px solid;padding-bottom: 2px; }
 a.mail-link { display: inline-block;}
.footer__sns { width: 2.4rem; margin-top: 2.4rem;}
.footer__sns a:after { display: none;}
.copy-right { font-size: 11px; text-align: right; line-height: 40px; margin-right:16px; }

@media (min-width: 600px){
  .footer {padding: 56px 24px;}
.footer__body-list-sub {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 1.2rem;
  font-weight: 400;
  border-left: 1px solid #ccc; 
  margin:16px 0 0 8px;
  padding-left: 1.4rem;
  }

.footer__body-list-sub li { line-height: 1.5; margin-block: var(--leading-trim);}
.footer__body-list{
  font-size: 1.4rem;
  gap:24px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  }
.footer__body-list li:first-child { grid-area: 1 / 1 / 6 / 2; }
.footer__body-list li:nth-child(2) { grid-area: 1 / 2 / 6 / 3; }
.footer__body-list li:nth-child(3) { grid-area: 1 / 3 / 3 / 4;}
.footer__body-list > li:nth-child(4) { grid-area: 3 / 3 / 6 / 4;
  margin-top: 18px;}

.footer__body-list li:nth-child(5) {
  grid-area: 1 / 4 / 2 / 5;
  
  }
.footer__body-list li:nth-child(6) { grid-area: 2 / 4 / 3 / 5; }
.footer__body-list li:nth-child(7) { grid-area: 3 / 4 / 4 / 5; }
.footer__body-list li:nth-child(8) { grid-area: 4 / 4 / 5 / 5; }
.footer__body-list li:last-child { grid-area: 5 / 4 / 6 / 5; } 

 
}
@media (min-width: 768px){
.footer {
  background: url("../img/nav/footer-bg.jpg") center top / cover no-repeat;
  padding: 80px 24px;
}
.footer__wrap{ 
  grid-template-columns: repeat(8, [col-start] 1fr);
  gap: 24px;
}
.footer__head {
  order:2;
  grid-column: col-start 3 / span 4;
  grid-row: 2;
  margin: 24px auto 0;
}
.footer__body {
  order:1;
  grid-column: col-start 2 / span 6;
}

.footer__body-list-g-page{
  order:3;
  grid-column: col-start 2 / span 6;
border-top:1px solid #ccc;

}
.footer__head-logo {
  max-width: 256px;
  margin: 0 0 32px;
}
.footer__body-list-sub { font-size: 1.3rem; gap:16px;}
}
@media (min-width: 960px){
.footer__wrap{ 
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 32px;
}
.footer__head {
  order:1;
  grid-column: col-start / span 4;
  grid-row: 1;
  margin: auto 0 0;
}
.footer__body,.footer__body-pc {
  order:2;
  grid-column: col-start 6 / -1;
  grid-row: 1;
  display: grid;
  gap: 24px;
  margin-bottom: 0;

}

.footer__body-list-g-page {
  grid-column: col-start 6 / -1;
  justify-content:flex-start;
  margin: 0;}
.footer__body-list{
  gap: 24px;

  }
  .footer__body-link{
  text-align:left;
  border: none;
  padding: 0;
  margin: 0 ;
  }
.footer__body-list-sub {padding-left: 20px;}  
.copy-right { text-align: right; line-height: 48px;  margin-right:32px;}
}

/*** contact-info ***/
.contact-info { background: #e4f3ee; padding: 32px 16px;}
.contact-info__inner {
  display: grid; gap:16px;
  max-width: 1120px;
  background: #fff;
  border-radius: 5px;
  padding: 32px;
  margin: auto;
}
.contact-info__head {
  border-bottom: 1px solid #ddd;
  padding-bottom: 24px;
  margin-bottom: 24px;
}
.contact-info__head-ttl {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 3.5vw, 3.2rem);
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.contact-info__head-ttl:after {
  content:url("../img/nav/icon-contact-info.svg");
  display: inline-block;

  width: 1.2em;
  height: 1.2em;
  margin-left: 24px;
}
.contact-info__head p { margin-top: 16px;}
.contact-info__border { display: contents;}
.contact-info__link-phone {
  text-align: center;
  margin-block: var(--leading-trim);
}
.contact-info__link-phone a span.icon-phone {
  text-align: center;
  font-size: clamp(2.6rem, 3.3854166vw, 3.2rem);
  line-height: 1; 
  white-space: nowrap;margin-block: var(--leading-trim);
}
.icon-phone {font-weight: 500;}
.icon-phone:before{
  content: '';
  background: url("../img/nav/icon-phone.svg") bottom left /contain no-repeat;
  display: inline-block;
  width: .5em;  
  height: 1em;
  margin:0 8px 0 0;
}
.contact-info__link-phone > span {
  display: block;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  margin-bottom: 8px;
}
.contact-info__link li + li { margin-top: 1.6rem;}

.contact-info__link .btn-contact a{
  max-width: 250px;
  height: 40px;
  line-height: 40px;
  background: #364e65;
  color: #fff;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  margin:24px auto 0;  
}

.contact-info__link .btn-contact a::before {
  content: url("../img/nav/icon-mail.svg");
  display: inline-block;
  width: 14px;
  margin-right: 8px;
}
@media (min-width: 680px){
.contact-info{ padding: 32px 24px;}
.contact-info__inner {
  align-items: center;
  padding: 32px;
  grid-template-columns: repeat(8, [col-start] 1fr);
}
.contact-info__head { grid-column: col-start / span 5;  border: 0; padding: 0; margin: 0;}
.contact-info__link { grid-column: col-start 6 / span 3; }
}
@media (min-width: 768px){
  .contact-info{ padding: 48px 24px;}
  .contact-info__inner {padding: 48px 32px}
  .contact-info__head p { margin-top: 24px;}
}
@media (min-width: 960px){
.contact-info {
  padding: 64px 24px;
}
.contact-info__inner {
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 32px;
  padding: 48px 0;
  }
.contact-info__head {
  grid-column: col-start 2 / span 6;
  grid-row:1;
  border-bottom: 0;
  
  padding: 0; margin: 0;
  }
  .contact-info__border {
    display:block;
    content: '';
    border-left: 1px solid #d3d3d3;
    grid-column: col-start 8 / span 1;
    height: auto;
    width: 1px;

    align-self: stretch;
  }
.contact-info__link { grid-column: col-start 9 / span 3; grid-row:1;}
.contact-info__link .btn-contact { width: 250px;}
}

/*** icon ***/
.icon-j:before {
  content: '';
  background: url("../img/nav/icon-J.svg") top center / contain no-repeat;
  display: block;
  width: 36px;
  height: 50px;
  margin: 0 auto 24px;
}
.icon-link:after {
  content: '';
  position: absolute;
  top:50%;
  background: url(../img/nav/icon-link-gray.svg) right / 20px no-repeat;
  display: inline-block;
  margin-left: 24px;
  width: 20px;
  height: 20px;
  margin: -.5em 0 auto 24px
}

.icon-kaitai:before {
  content: '';
  display: inline-block;
  background: url("../img/nav/icon-kaitai.svg") left bottom/contain no-repeat;
  width: 1em;
  height: 1em;
  margin-right: 16px;
} 
.icon-uritai:before {
  content: '';
  display: inline-block;
  background: url("../img/nav/icon-uritai.svg") left bottom/contain no-repeat;
  width: 1em;
  height: 1em;
  margin-right: 16px;
} 
.icon-karitai:before {
  content: '';
  display: inline-block;
  background: url("../img/nav/icon-karitai.svg") left bottom/contain no-repeat;
  width: 1em;
  height: 1em;
  margin-right: 16px;
} 
.icon-kashitai:before {
  content: '';
  display: inline-block;
  background: url("../img/nav/icon-kashitai.svg") left bottom/contain no-repeat;
  width: 1em;
  height: 1em;
  margin-right: 16px;
}
.icon-list:before {
  content: '●';
  position: relative;
  display: inline-block;
  color: var(--j-color);
  font-size: 80%;
  margin: 0 8px 0 2px;
}
/*** btn ***/
.btn{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 256px;
  height: 40px;
  background:#364e65;
  border-radius: 48px;
  font-weight: 600;
  text-align: center;
  line-height: 40px; 
  margin:40px auto 0;
}
.btn-contact a{
  text-align: center;
  width: 100%;
  height: 100%;
  font-weight: 600;
  margin: auto;
}
.btn-contact a:hover {background:#566f83;}
.btn-privacy{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 256px;
  height: 32px;
  border: 1px solid;
  border-radius: 32px;
  font-size: .875em;
  font-weight: 600;
  text-align: center;
  line-height: 32px; 
  margin:40px 0 0;
}

.btn-privacy:hover, 
.btn-privacy a:hover{ color: #fff;}
.btn-privacye a{ display: block; width: 100%; height: 100%;}
.btn a { display: block; width: 100%; height: 100%; color: #fff;border-radius: 48px;}
.btn a:hover{background:#566f83; color: #fff;}

.btn-privacy:hover,
.btn:hover {border-radius: 48px;background:#566f83; color: #fff;}
.btn:after{
  position: absolute;
  top: 2px;
  right: 20px;
  content:url("../img/nav/icon-link.svg");
  display: inline-block;
  width: 20px;
  margin-right:auto;
  z-index: 990;  
}


@media (min-width: 768px){
  .btn{height: 48px;line-height: 48px;}
  .icon-j:before {margin: 0 auto 24px;} 
}
@media (min-width: 960px){
  .btn{width: 280px; margin-top: 48px;}
}

/*** utility ***/
.u-sp {display: block;}
.u-pc { display: none;}
.u-mt24 { margin-top: 24px;}
.u-mt32 { margin-top: 32px;}
.u-small { font-size: .93333em;}
.u-large { font-size: 1.125em;}
.u-bold { font-weight: 500;}
.u-center { text-align: center;}
.u-j-color {color: var(--j-color);}
.u-attention-word {
  font-feature-settings: "palt";
  letter-spacing: .05em;
}

.u-hl {font-size: clamp(1.6rem, 1.66666vw, 1.8rem);}
.u-hl-border:after{
  content:'';display: block;
  width: 60px;
  height: 1px;
  background: #566f83;
  margin:24px auto 32px;
}
.sec__head .u-hl-border:after {margin:32px 0 8px;}
@media (min-width: 768px){
.u-sp{ display: none;}
.u-pc { display: block;}
.u-hl-border:after,.sec__head .u-center.u-hl-border:after {margin:32px auto 0;}
  .sec__head .u-hl-border:after {margin:32px 0;}
}
@media (min-width: 960px){
.u-hl-border:after,
.sec__head .u-center.u-hl-border:after { margin:40px auto;}
}

.page-lead {/* only contact */
  font-weight: 400;
  line-height: 2;
  margin-block: var(--leading-trim);
}
p {
  line-height: 2;
  margin-block: var(--leading-trim);
}

