@charset "utf-8";

.con_item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 46%;
}
.concept_intro{
    background: var(--green3);
    padding: 88px 0;
}
.concept_intro dt{
    font-size: 3.2rem;
    line-height: 1.6;
    text-align: center;
}
.concept_intro dd{
    font-size: 2.0rem;
    line-height: 1.6;
    text-align: center;
    padding-top: 32px;
}

.concept_img_wrap{
    position: relative;
    min-height: 817px;
    margin: 48px auto;
}
.concept_img_wrap .center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 56%;
    z-index: 2;
}
.concept_img_wrap .center span,
.concept_img_wrap .concept_img span{
    display: block;
}
.concept_img_wrap .concept_img {
    position: absolute;
    width: 50%;
}
.concept_img_wrap .concept_img.left_top {top: 0; left: 0;}
.concept_img_wrap .concept_img.right_top {top: 0; right: 0;}
.concept_img_wrap .concept_img.left_bottom {bottom: 0; left: 0;}
.concept_img_wrap .concept_img.right_bottom {bottom: 0; right: 0;}

.concept_box{
    background: var(--yellow);
    padding: 16px 0;
}
.concept_list {
    margin-top: -140px;
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 2%; /* 影の厚み分、縦の余白を確保 */
}

.concept_list li {
  position: relative;
  width: 32%;
  box-sizing: border-box;
  background-color: #FFFEEE;
  padding: 8px;
  text-align: center;
  font-weight: bold;
  z-index: 1;
  font-size: 1.3rem;
  line-height: 1.3;
}
.concept_list li small{font-size: 70%;}

/* 擬似要素で右下に尖った三角の影を作る */
.concept_list li::after {
  content: "";
  position: absolute;
  /* 白ベタの下端に配置 */
  top: 100%; 
  left: 10px;  /* 左端は少し内側から */
  right: 2px; /* 右側へ突き出す量 */
  height: 6px; /* 影の縦幅 */
  background-color: #898989; /* 画像に近い暗めの色 */
  mix-blend-mode: multiply;
  z-index: -1;

  /* 
     clip-pathで三角形に切り抜く
     左上(0% 0%)、右上(100% 0%)、右下(100% 100%)を繋ぐ三角形
  */
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.community .concept_list li:not(:nth-of-type(3)){
    flex-basis: 49%;
}
.community .concept_list li:nth-of-type(3){
    flex-basis: 100%;
}
.privacy .concept_list li:nth-of-type(1){flex-basis: 33%;}
.privacy .concept_list li:nth-of-type(2){flex-basis: 64%;}
.privacy .concept_list li:nth-of-type(3){flex-basis: 58%;}
.privacy .concept_list li:nth-of-type(4){flex-basis: 39%;}
.privacy .concept_list li:nth-of-type(5){flex-basis: 100%;}

.town .concept_list li:nth-of-type(1),
.town .concept_list li:nth-of-type(2),
.town .concept_list li:nth-of-type(3),
.town .concept_list li:nth-of-type(8),
.town .concept_list li:nth-of-type(9),
.town .concept_list li:nth-of-type(10){flex-basis: 32%;}
.town .concept_list li:nth-of-type(4),
.town .concept_list li:nth-of-type(5),
.town .concept_list li:nth-of-type(6),
.town .concept_list li:nth-of-type(7){flex-basis: 49%;}

.concept_dev{
    position: relative;
    background-color: #fff;
    padding: 16px 16px 24px;
    box-sizing: border-box;
    margin-top: 24px;
}

/* 擬似要素で右下に尖った三角の影を作る */
.concept_dev::after {
  content: "";
  position: absolute;
  /* 白ベタの下端に配置 */
  top: 100%; 
  left: 10px;  /* 左端は少し内側から */
  right: 2px; /* 右側へ突き出す量 */
  height: 6px; /* 影の縦幅 */
  background-color: #898989; /* 画像に近い暗めの色 */
  mix-blend-mode: multiply;

  /* 
     clip-pathで三角形に切り抜く
     左上(0% 0%)、右上(100% 0%)、右下(100% 100%)を繋ぐ三角形
  */
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.concept_dev p,
.concept_dev02 p{
    text-align: center;
    font-size: 2.0rem;   
    display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
  margin-bottom: 16px;
}
.concept_dev p:before, .concept_dev p:after,
.concept_dev02 p:before, .concept_dev02 p:after {
  border-top: 1px solid;
  content: "";
  width: 8em; /* 線の長さ */
}
.concept_dev p:before,
.concept_dev02 p:before {
  margin-right: 1em; /* 文字の右隣 */
}
.concept_dev p:after,
.concept_dev02 p:after {
  margin-left: 1em; /* 文字の左隣 */
}
.concept_dev ol{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 83%;
    margin: 16px auto 0;
    align-items: center;
}
.concept_dev li{
    flex-basis: 63%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.concept_dev li:not(:first-child){
    flex-basis: 30%;
}
.concept_dev02{
    margin-top: 16px;
    background: var(--light);
    border-radius: 24px;
    padding: 24px 16px;
    margin-bottom: 16px;
    position: relative;
}
.concept_dev02 ol{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 20px;
    max-width: 90%;
    margin: auto;
}
.concept_dev02 li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}
.community .concept_dev02 li:nth-of-type(3) img{width: 74%;}
.privacy .concept_dev02 li{flex-basis: 30%;}
.privacy .concept_dev02 li:nth-of-type(2) img{width: 60%;}
.privacy .concept_dev02 li:nth-of-type(3) img{width: 60%;}

.town .concept_dev02 ol{max-width: 100%; gap: 20px 10px;}
.town .concept_dev02 li{flex-basis: 21%;}
.town .concept_dev02 li:nth-of-type(1) {flex-basis: 31%;}
.town .concept_dev02 li:nth-of-type(2) {flex-basis: 13%;}
.town .concept_dev02 li:nth-of-type(3) {flex-basis: 19%;}
.town .concept_dev02 li:nth-of-type(4) {flex-basis: 17%;}
.town .concept_dev02 li:nth-of-type(5) {flex-basis: 22%;}
.town .concept_dev02 li:nth-of-type(6) {flex-basis: 14%;}
.town .concept_dev02 li:nth-of-type(7) {flex-basis: 22%;}
.town .concept_dev02 li:nth-of-type(8) {flex-basis: 13%;}
.town .concept_dev02 li:nth-of-type(9) {flex-basis: 23%;}
.town .concept_dev02 li:nth-of-type(10) {flex-basis: 15%;}
.town .concept_dev02 li:nth-of-type(11) {flex-basis: 22%;}
.town .concept_dev02 li:nth-of-type(12) {flex-basis: 15%;}


.sec_dev01,
.sec_dev02{
    max-width: 480px;
    margin: auto;
}
.com_dev01{
    max-width: 300px;
    margin: auto;
}
.pri_dev01{
    max-width: 520px;
    margin: auto;
}
.town_dev01{
    max-width: 560px;
    margin: auto;
}


.contents_line{
    background: url(../image/concept_bar.png),var(--yellow);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    height: 22px; width: 100%;
    padding: 24px 0;
}
.gatedcommunioty{
    background: var(--green4);
    border-radius: 24px;
    padding: 40px;
    margin-top: 40px;
}
.gatedcommunioty dl{
    margin-top: 32px;
}
.gatedcommunioty dt{
    font-size: 2.2rem;
    border-bottom: 1px solid var(--dark);
    padding-bottom: 16px;
}
.gatedcommunioty dd{
    margin-top: 24px;
    font-size: 1.6rem;
    text-align: justify;
}


@media screen and (max-width: 1250px) {


    .concept_dev p,
.concept_dev02 p{
    text-align: center;
    font-size: 1.3rem;   
    display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
  margin-bottom: 16px;
}
.concept_dev p:before, .concept_dev p:after,
.concept_dev02 p:before, .concept_dev02 p:after {
  border-top: 1px solid;
  content: "";
  width: 4em; /* 線の長さ */
}
.concept_dev p:before,
.concept_dev02 p:before {
  margin-right: .5em; /* 文字の右隣 */
}
.concept_dev p:after,
.concept_dev02 p:after {
  margin-left: .5em; /* 文字の左隣 */
}


.sec_dev01,
.sec_dev02{
    max-width: 480px;
    margin: auto;
}
.com_dev01{
    max-width: 230px;
    margin: auto;
}
.pri_dev01{
    max-width: 520px;
    margin: auto;
}
.town_dev01{
    max-width: 560px;
    margin: auto;
}

    .con_item{
    width: 54%;
}
.concept_intro{
    padding: 56px 0 24px;
}
.concept_intro dt{
    font-size: 1.8rem;
}
.concept_intro dd{
    font-size: 1.6rem;
    padding-top: 24px;
}

.concept_img_wrap{
    min-height: 815px;
    margin: 32px auto;
}

.concept_list {
    margin-top: -70px;
}

.concept_list li {
  font-size: 1.0rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.concept_dev p{
    font-size: 1.4rem;    
}
.concept_dev ol{
    gap: 10px;
    max-width: 100%;
}
.concept_dev02{
    margin-top: 16px;
    border-radius: 16px;
    padding: 16px;
}
.concept_dev02 ol{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 10px;
    max-width: 100%;
    margin: auto;
}
.community .concept_dev02 li:nth-of-type(3) img{width: 74% !important;}
.privacy .concept_dev02 li{flex-basis: 30% !important;}
.privacy .concept_dev02 li:nth-of-type(2) img{width: 60% !important;;}
.privacy .concept_dev02 li:nth-of-type(3) img{width: 60% !important;;}

 
.gatedcommunioty{
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
}
.gatedcommunioty dl{
    margin-top: 16px;
}
.gatedcommunioty dt{
    font-size: 1.3rem;
}
.gatedcommunioty dd{
    margin-top: 16px;
    font-size: 1.1rem;
}

}
@media screen and (max-width: 768px) {
    .concept_img_wrap{
    min-height: 428px;
    margin: 32px auto;
}
}