@charset "UTF-8";
/*==================================================
　リニューアル用コンテンツ
/* *********************************************** */
/* common css                                     */
/* ********************************************* */

/* color */
:root {
  --color-main: #545454; /* メインカラー */
  --color-sub: #cbee88; /* サブカラー */
  --color-white: #fff;
  --color-text: #292629; /*テキストカラー*/
  --color-bg: #dfdfdf;
  --color-accent-01: #a5b3c2;
  --color-accent-02: #0097b2;


}

/* font */
:root {
  --font-goth: "Noto Sans JP", sans-serif, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --font-min: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

img {
 width: 100%;
 max-width: 100%;
 height: auto;
}

/* *********************************************** */
/*　conceptページ                                  */
/* ********************************************* */
#concept h2,
#concept h3,
#concept h4,
#concept p {
 font-family: var(--font-min);
}


#conceptIntro {
 background-color: var(--color-bg);
 padding: 0 0 3rem;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

#conceptIntro figure {
 margin: 0;
 aspect-ratio: 3 / 2;
 overflow: hidden;
}

#conceptIntro figure img {
 height: 100%;
 object-fit: cover;
 object-position: bottom;
}

#concept  #conceptIntro .concept_intro_text {
  padding: 1rem;
  background: var(--color-white);
  text-align: center;
  width: 80%;
  margin-top: -5%;
}

#concept  #conceptIntro .concept_intro_text h3 {
  font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem); /*16-24 / 320-1200*/
}

#concept  #conceptIntro .concept_intro_text p {
 font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem); /*12-14 / 320-1200*/
 letter-spacing: 0.02em;
}

@media screen and (min-width: 992px) {
#concept {
 padding-top: 1.5rem;
}

#conceptIntro {
 padding: 0 0 2rem;
 align-items: center;
}

 #conceptIntro figure {
  width: 60%;
  max-width: 700px;
  margin-top: -1.5rem;
 }

 #concept  #conceptIntro .concept_intro_text {
   padding: 2rem 1rem;
   width: 40%;
   max-width: 450px;
   height: fit-content;
   margin: 0 0 0 -5%;
 }

}

/* 3つの安心 セクション */
#Security {
 padding: 2rem 0;
}

#Security .content_hedding {
 padding: 3rem 0 5rem;
}

.security_point {
 background-color: var(--color-bg);
 position: relative;
 padding: 3rem 0rem;
}

.point_circle {
  position: absolute;
  top: -50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--color-accent-02);
}

.point_circle p {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  text-align:center;
  color: var(--color-white);
  font-size: 3rem;
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin-bottom: 0;
}

.point_circle p  span {
 font-size: 40%;
}

.security_point h3 {
 letter-spacing: 0.3em;
 text-align: center;
 padding: .5rem 0 .5rem;
}

.security_point h4 {
 color: var(--color-accent-02);
}

.point_content_wrap {
 background-color: var(--color-white);
 padding: 3rem clamp(1.5rem, 0.955rem + 2.73vw, 3rem); /*24-48*/
}

@media screen and (min-width: 992px) {
 .pt {
  margin-top: -3rem;
 }
}


/* リンクセクション */
#linkWrap .row {
 justify-content: center;
}

.linkItem {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: .5rem;
 background-color: var(--color-bg);
 height: 200px;
}

.link_item_img {
 width: 40%;
 height: 100%;
 display: flex;
}

.link_item_img img {
 object-fit: cover;
}

.link_item_text {
 background-color: var(--color-white);
 width: 60%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
}


.link_item_text p {
 text-align: center;
 margin: 0;
 font-size: 1.5rem;
 font-family: var(--font-min);
 line-height: 1;
 font-weight: bold;
 letter-spacing: 0.075em;
}

.link_item_text p span {
 font-size: 60%;
 letter-spacing: 0.5em;
}