@charset "utf-8";
/* -------------------------------------
     sp CSS
 (c) Copyright 2020 Sketches of Design
     version 2020-12-26
------------------------------------- */

/* 1280
--------------------------------------*/
@media screen and (max-width: 1280px) {
  #hdmenu .entry a{
    font-size: 1.4rem;
  }
  #hdmenu .menu-list li{
    margin: 0 0 0 10px;
    font-size: 1.2rem;
  }
  #hdmenu .entry{
    margin: 0 0 0 20px;
  }
  #hdmenu .entry a{
    padding: 5px 11px 4px 13px;
  }
  #home #main-pic .image{
    width: 660px;
  }

}
/*  1024
--------------------------------------*/
@media screen and (max-width: 1024px) {
  .hamburger{
    display: block;
  }
  #hdmenu .menu-list{
    display: none;
  }
  #hdmenu .entry{
    margin: 0 60px 0 30px;
  }
  #contents h1 span{
    font-size: 10.0rem;
  }
  .sp-nav{
    padding: 10px 20px 0 20px;
  }
  #hdmenu .nav-wrapper ul li{
    width: calc(33.33% - 10px);
  }
  #main-pic .inner,
  section .inner{
    padding: 100px 20px;
  }
  #contents h2{
    margin: 0 0 20px 0;
  }
  #contents h2 span{
    font-size: 12.0rem;
  }
  #content .more{
    width: 160px;
  }
  #content .more a{
    font-size: 1.4rem;
    padding: 6px 0 7px 0;
  }
  #content .more{
    margin: 20px 0 0 auto;
  }

  /**/
  #contents h1{
    margin: 40px 0 60px 0;
  }
  #home #main-pic {
    padding: 100px 0 0 0;
  }
  #guide-message #main-pic .inner,
  #min3-idx #main-pic .inner,
  #enquete-idx #main-pic .inner,
  .people #main-pic .inner,
  .crosstalk #main-pic .inner{
    padding: 100px 20px 60px 20px;
  }
  #newstext #main-pic .inner{
    padding: 100px 20px 0 20px;
  }
  #newstext .inner,
  #home #main-pic .inner{
    padding: 60px 20px;
  }
  .crosstalk #main-pic .image{
    margin: 0 !important;
    width: 40%;
  }
/*  .crosstalk #main-pic .image{
    right: -100px;
    width: 50%;
  }*/
  #home #main-pic .image{
    width: 65%;
  }
  #home #main-pic .image img{
    max-width: 100%;
    height: auto;
  }
  #people-menu{
    padding: 130px 20px 100px 20px;
  }
  #content #people-menu .inner{
    padding: 0 40px 20px 40px;
  }
  #entry-menu .text h2,
  #content #people-menu .inner h2{
    padding: 20px 0 0 0 !important;
  }
  #people-menu .slick-list{
    padding: 20px 0;
  }
  .people #people-list .people .name,
  #people-menu .slider .people .name{
    font-size: 2.6rem;
  }
  #message-menu .pic img, 
  #crosstalk-menu .pic img{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 90%;
    height: auto;
  }
  #message-menu .pic::before,
  #crosstalk-menu .pic::before{
    height: 100%;
  }
  #message-menu .inner div,
  #crosstalk-menu .inner div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #crosstalk-menu .crosstalk-01{
    margin: 60px 0 100px 0;
  }
  #crosstalk-menu .inner{
    padding: 100px 20px 0 20px;
  }
  #message-menu .pic,
  #crosstalk-menu .pic{
    height: 260px;
  }
  #enquete-menu .inner {
    padding: 130px 20px 80px 20px;
  }
  #message-menu .inner{
    padding: 160px 0 0 20px;
  }
  #message-menu .pic {
    margin: 160px 0 0 0;
  }
  #entry-menu .inner {
    margin-top: 100px;
  }
  #entry-menu .pic {
    right: -120px;
    width: 30%;
  }
  .people #main-pic .image img,
  #entry-menu .pic img{
    max-width: 100%;
    height: auto;
  }
  #news-area,
  .crosstalk #content #message-area .inner{
    margin: 0 20px;
  }
  .people #main-pic .image{
    width: 30%;
  }
  .people #lv02-04 .image,
  .people #lv02-02 .image {
    margin-left: -20px;
    width: 500px;
  }
  .people #lv02-04 .text,
  .people #lv02-02 .text{
    width: calc(100% - 520px);
  }
  .people #main-pic .text h2,
  .people #main-pic .text h2 span{
    font-size: 3.7vw;
  }
  .people #lv02-04 .image img,
  .people #lv02-02 .image img{
    border-radius: 0 30px 30px 0;
  }
  .crosstalk #content .pagemanuarea,
  .people #people-list,
  .people #message-area{
    margin: 0 20px;
  }
  .people #people-list .inner::after,
  .people #people-list .people{
    margin: 0 0 20px 0;
    width: calc(33.33% - 10px);
  }
  #enquete-idx #main-pic{
    background-position: center 0;
    background-size: 2000px auto;
    padding-bottom: 0;
  }
  #guide-message .image,
  #content .pagemenu{
    margin: 0 20px !important;
  }

  #guide-message #lv02-04 .inner,
  #guide-message section.block .inner{
    padding: 20px;
  }
  #crosstalk-idx #crosstalk-menu .crosstalk-01{
    margin-top: 100px;
  }

}
/*  960
--------------------------------------*/
@media screen and (max-width: 960px) {

  /* font */
  #newstext h1 span,
  #guide-message h1 span,
  .crosstalk h1 span {
    font-size: 16vw;
    letter-spacing: 0;
  }
  #main-pic h2 span,
  #main-pic h2{
    font-size: 3.0rem !important;
  }
  .people #people-list .people .name,
  #content .member-list .inner .name,
  #contents h1,
  #main-pic h2 span,
  #contents h2{
    font-size: 2.0rem;
  }
  #contents h3{
    font-size: 1.6rem;
  }
  #newstext .flex-column2 figcaption,
  #news-list .scroll-area dl,
  #content p,
  #content dl,
  #content table,
  #content ul,
  #hdmenu nav ul li{
    font-size: 1.3rem;
  }
  .crosstalk #content .block p{
    font-size: 1.5rem;
  }
  #entry-menu .pic {
    right: -20px;
    width: 20%;
  }
  #entry-menu ul li{
    margin-bottom: 20px;
    width: 100%;
  }
  #entry-menu ul li a{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #entry-menu ul li .ban{
    margin: 0 20px 0 0;
  }
  #entry-menu ul li img{
    width: 280px;
  }

  /**/
  .people #people-list .people ul,
  #hdmenu .nav-wrapper ul li{
    padding: 15px;
  }
  footer .inner{
    padding: 20px;
  }
  footer .inner ul li a{
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
    font-size: 1.3rem;
  }
  footer .inner ul ul li a{
    font-size: 1.2rem;
  }
  #people-menu{
    background-size: cover;
  }
  #content .member-list .pic img{
    width: 150px;
    height: auto;
  }
  #min3-idx #main-pic .text {
    width: 60%;
  }
  #min3-idx #main-pic .pic {
    width: calc(40% - 40px);
  }
  #min3-idx .pagemenu li{
    width: calc(25% - 10px);
  }
  #min3-idx .pagemenu li img{
    width: 50%;
  }
  #min3-idx .pagemenu::after,
  #min3-idx .pagemenu::before{
    content:"";
    display: block;
    width: calc(25% - 10px);
  }
  #min3-idx .pagemenu::before{
    order:1;
  }
  #guide-message #lv02-04 p{
    font-size: 1.6rem;
    line-height: 1.8;
  }

  #enquete-idx #main-pic .text{
    width: 100%;
  }
  #enquete-idx #main-pic{
    background: url("../img/bg-home-mainpic.png") center 120px no-repeat;
    background-size: contain;
  }
  #enquete-idx #main-pic .inner{
    padding: 100px 20px 0 20px;
  }
  #enquete-idx #main-pic .pic{
    display: block;
    margin: 20px auto;
    width: 70%;
  }
  


}
/*  768
--------------------------------------*/
@media screen and (max-width: 768px) {
  #content img{
    max-width: 100%;
    height: auto;
  }
  br.sp{
    display: block;
  }
  br.pc{
    display: none;
  }
  /* diagram */
  .diagram .sp{
    display: block !important;
  }
  .diagram .image{
    display: none;
  }
  .diagram{
    position: relative;
  }
  .diagram span{
    display: block;
    position: absolute;
    width: 30px !important;
    height: 30px !important;
    right: 10px;
    margin: -40px 0 0 0;
  }
  .diagram img{
    max-width: 100%;
    height: auto;
    width /***/:100%;
  }

/* menu */
  #hdmenu .nav-wrapper ul li{
    width: calc(50% - 10px);
  }
  #hdmenu .nav-wrapper ul ul li{
    margin: 0 0 10px 0;
  }
/**/
  #min3-idx #main-pic h1 span,
  #enquete-idx h1 span{
    font-size: 18vw;
  }
  #home #main-pic p{
    font-size: 1.6rem;
  }
  #home #main-pic .text{
    width: 60%;
  }
  
  #news-area dl dt,
  #news-area dl dd,
  #enquete-idx #lv02-16 .inner > *,
  #newstext .flex-column2 > *,
  .people #lv02-04 .image,
  .people #lv02-03 .image,
  .people #lv02-02 .image,
  .people #lv02-01 .image,
  .people #lv02-04 .text,
  .people #lv02-03 .text,
  .people #lv02-02 .text,
  .people #lv02-01 .text,
  #home #main-pic .text h1{
    width: 100%;
  }
  #think-menu .inner{
    padding: 50px 20px 100px 20px;
  }
  .crosstalk #main-pic .image{
    right: -70px;
  }
  #content .member-list {
    padding: 60px 0;
  }
  .crosstalk #content #message-area .inner{
    padding: 30px 40px 20px 40px;
  }
  .crosstalk #content #message-area .profile,
  .crosstalk #content #message-area .pic img,
  .crosstalk #content #message-area .inner,
  .crosstalk #content .block .pic img {
    border-radius: 20px;
  }
  #guide-message #content .block .people .baloon,
  .crosstalk #content .block .people .baloon{
    border-radius: 10px;
  }
  .crosstalk #content #message-area h2 {
    margin: 0 0 20px 0;
  }
  .crosstalk #content #message-area .people{
    width: 120px;
  }
  .crosstalk #content #message-area .profile div {
    margin: 0;
    width: calc(100% - 140px);
  }
  #content .member-list .inner{
    justify-content: space-between;
  }
  #content .member-list .inner div{
    margin: 0;
    width: calc(33.33% - 20px);
  }
  .crosstalk #content .member-list .pic{
    margin: 0 auto 20px auto;
    width: 150px;
    height: 150px;
  }
  .crosstalk #content .block .lsize figure{
    width: 100px;
  }
  .crosstalk #content .block .lsize .baloon{
    width: calc(100% - 130px);
  }
  .people #lv02-01 .inner,
  .people #lv02-02 .inner,
  .people #lv02-03 .inner,
  .people #lv02-04 .inner{
    display: block;
  }
  #min3-idx section .inner,
  .people #lv02-01 .inner,
  .people #lv02-02 .inner,
  .people #lv02-03 .inner,
  .people #lv02-04 .inner{
    padding: 60px 20px;
  }
  .people #message-area .inner {
    padding: 20px 0 0 0;
  }
  .people #message-area {
    padding: 100px 0 0 0;
  }
  #people-list .people .pic,
  #people-list .people .pic img{
    height: 160px;
  }
  #news-area dl{
    display: block;
    padding: 10px;
  }

  #newstext .flex-column2 > *{
    margin-bottom: 20px;
  }
  #crosstalk-idx #crosstalk-menu .crosstalk-01{
    margin-top: 60px;
  }



}
/*  667
--------------------------------------*/
@media screen and (max-width: 667px) {
  .people #main-pic .text h2,
  .people #main-pic .text h2 span{
    font-size: 5.0vw !important;
  }
  .people h1 span{
    font-size: 20vw;
  }
  #contents h2 span,
  h2 span {
    font-size: 9.0rem;
  }
  .people #main-pic .name em{
    font-size: 2.4rem;
  }
#guide-message #main-pic ul em,
  .crosstalk #content .block p,
  .people #main-pic .name{
    font-size: 1.4rem;
  }
  #content .member-list .inner .job{
    font-size: 1.2rem;
  }
  #hdmenu .inner{
    padding: 0 10px;
  }
  #hdmenu .entry {
    margin: 0 60px 0 20px;
  }
  footer .inner ul li{
    margin: 0 0 20px 0;
    width: calc(50% - 15px);
  }
  footer .inner ul .enquete {
    margin-left: 0;
  }
  #min3-idx #main-pic .text,
  #enquete-idx #lv02-02 .inner div,
  .people #main-pic .text div,
  .crosstalk #main-pic .text,
  .menuarea .text,
  footer .inner ul .people li{
    width: 100%;
  }
  #home #main-pic .image img{
    position: absolute;
    bottom: 0;
  }
  #content .more {
    margin: 10px auto 0 auto;
  }
  #think-menu .image{
    margin: 0 auto 20px auto;
    width: 60%;
  }
  #people-menu,
  #think-menu .inner {
    padding-bottom: 20px;
  }
  #crosstalk-menu .inner {
    padding-top: 60px;
  }
  #crosstalk-menu .inner .text{
    margin: 10px 0 30px 0;
  }
  #crosstalk-menu h2{
    margin-bottom: 0;
  }
  #crosstalk-menu .text h2{
    padding-top: 20px;
  }
  #message-menu,
  #enquete-menu {
    margin-top: 60px;
  }
  #crosstalk-menu .crosstalk-01 {
    margin: 0 0 50px 0;
  }
  #message-menu .pic,
  #crosstalk-menu .pic{
    position: relative;
    text-align: center !important;
    width: 100%;
    height: 200px;
  }
  #message-menu .pic {
    margin: 0 20px;
    width: auto;
  }
  #message-menu .pic img,
  #crosstalk-menu .pic img{
    position: static;
    width: auto;
    height: 200px;
  }
  #think-menu .image,
  #entry-menu .text,
  #content #people-menu .inner,
  #message-menu .pic::before,
  #crosstalk-menu .crosstalk-02 .pic::before,
  #crosstalk-menu .pic::before{
    border-radius: 20px;
  }
  #people-menu .slider .people{
    border-radius: 15px;
  }
  #message-menu h2 span,
  #enquete-menu h2 span{
    position: relative;
  }
  #enquete-menu .inner {
    padding: 40px 20px 170px 20px;
  }
  #message-menu .inner {
    padding: 20px 20px 0 20px;
  }
  #entry-menu .text {
    padding: 0 20px;
    width: 100%;
  }
  #entry-menu .inner{
    padding: 60px 20px 0 20px;
  }
  #entry-menu ul{
    margin: 20px 0;
  }
  #entry-menu .pic {
    position: static;
    margin: -20px auto 0 auto !important;
    width: 50%;
  }
  #entry-menu .pic img{
    max-width: 100%;
    height: auto;
  }
  #entry-menu ul li .ban{
    margin: 0 0 10px 0;
    height: auto;
  }
  #entry-menu ul li a{
    display: block;
  }
  #content .member-list .inner{
    display: block;
    padding: 0 20px 20px 20px;
  }
  #content .member-list .inner div{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 20px 0;
    width: 100%;
  }
  #content .member-list .inner ul{
    margin: 0 0 0 20px;
    text-align: left;
  }
  #content .member-list .inner .pic,
  #content .member-list .inner .pic img{
    margin: 0;
  }
  #content .member-list .inner .pic{
    width: 100px;
  }
  .crosstalk #content .block .inner {
    padding: 40px 20px;
  }
  .crosstalk #content #message-area .profile{
    padding: 20px;
  }
  .crosstalk #content #message-area .people {
    right: 10px;
  }
  .crosstalk #content #message-area .profile:nth-child(2n+1) .people {
    left: 10px;
  }
  #guide-message #content .block figure,
  .crosstalk #content .block figure,
  .crosstalk #content .block .lsize figure{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
  }
  #guide-message #content .block:nth-child(2n) .people figure,
  .crosstalk #content .block .people:nth-child(2n) figure,
  .crosstalk #content .block .people:nth-child(2n) .lsize figure{
    justify-content: flex-end;
  }
  #guide-message #content .block figure img,
  .crosstalk #content .block figure img,
  .crosstalk #content .block .lsize figure img{
    margin: 0 10px 0 0;
    width: 80px;
    height: 80px;
  }
  #guide-message #content .block figure img{
    margin: 0 20px 0 2px;
  }
  .crosstalk #content .block .people{
    display: block;
    margin: 0 0 20px 0;
  }
  .crosstalk #content .block .lsize .baloon,
  #guide-message #content .block:nth-child(2n) .people .baloon,
  #guide-message #content .block:nth-child(2n+1) .people .baloon,
  .crosstalk #content .block .people:nth-child(2n) .baloon,
  .crosstalk #content .block .people:nth-child(2n+1) .baloon{
    margin: 0;
    content: '';
    position: relative;
    margin-top: 1.2em;
    width: 100%;
  }
  #guide-message #content .block:nth-child(2n) .people .baloon::before,
  #guide-message #content .block:nth-child(2n) .people .baloon::after,
  #guide-message #content .block:nth-child(2n+1) .people .baloon::before,
  #guide-message #content .block:nth-child(2n+1) .people .baloon::after,
  .crosstalk #content .block .people:nth-child(2n) .baloon::before,
  .crosstalk #content .block .people:nth-child(2n) .baloon::after,
  .crosstalk #content .block .people:nth-child(2n+1) .baloon::before,
  .crosstalk #content .block .people:nth-child(2n+1) .baloon::after{
    right: auto;
    border: none;
    top: -1em;
    left: 40px;
    transform: translateX(-50%);
    border-right: 10px solid transparent;
    border-bottom: solid 1em #6BB5FF;
    border-left: 10px solid transparent;
  }
  #guide-message #content .block:nth-child(2n) .people .baloon::before,
  #guide-message #content .block:nth-child(2n) .people .baloon::after,
  .crosstalk #content .block .people:nth-child(2n) .baloon::before,
  .crosstalk #content .block .people:nth-child(2n) .baloon::after{
    left: auto;
    right: 72px;
  }
  #guide-message #content .block .people:nth-child(2n) .baloon::after,
  #guide-message #content .block .people:nth-child(2n+1) .baloon::after,
  .crosstalk #content .block .people:nth-child(2n) .baloon::after,
  .crosstalk #content .block .people:nth-child(2n+1) .baloon::after{
    top: calc( 2px - 1em );
    border-bottom: solid 1em #fff;
  }
  .crosstalk #content #message-area .inner {
    padding: 20px;
  }
  .crosstalk #content #message-area .pic,
  .crosstalk #content #message-area .profile{
    margin: 0 0 20px 0;
  }
  .crosstalk #content #message-area .profile:last-child{
    margin: 0;
  }
  .crosstalk #content #message-area {
    margin-bottom: 60px;
  }
  .crosstalk #content #message-area .profile{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    padding: 0;
    min-height: 180px;
  }
  .crosstalk #content #message-area .people{
    position: static;
    margin: 0 10px;
  }
  .crosstalk #content #message-area .profile div{
    padding: 20px;
    min-height: 180px;
  }
  .crosstalk #content #message-area .profile:nth-child(2n){
    flex-direction: row-reverse ;
  }
  .crosstalk h1 {
    margin: 20px 0 0 0;
  }
  .crosstalk #main-pic h1{
    margin: 40px 0;
  }
  .crosstalk #main-pic .image{
    margin: 10px 10% 0 auto;
    width: 70%;
  }
  #crosstalk-02 #main-pic .image{
    margin: 10px 0 0 10% !important;
    width: 100%;
  }
  .crosstalk #content .member-list .pic{
    margin: 0;
    width: 100px;
    height: 100px;
  }
  #people-idx #main-pic h1{
    margin: 40px 0 0 0;
  }
  .people #lv02-01 .inner{
    padding: 0 20px;
  }
  .people #people-list .people{
    margin: 0 0 20px 0;
    width: calc(50% - 10px);
  }
  #home #people-list .people .pic,
  #home #people-list .people .pic img{
    height: 260px;
  }
  .people #main-pic .image{
    position: static;
    margin-top: -100px;
    padding: 0 0 0 100px;
    width: 50%;
  }
  .people #main-pic h1 {
    margin: 20px 0 0 0;
  }
  #enquete-idx #main-pic {
    background-position: center bottom;
  }
  #enquete-idx section .inner {
    padding: 60px 20px;
  }
  #min3-idx #main-pic .block{
    margin: 30px 0 0 0;
  }
  #min3-idx #main-pic h1{
    margin: 0 0 20px 0;
  }
  #min3-idx #main-pic h1 span{
    font-size: 21vw;
  }
  #min3-idx #main-pic .pic{
    margin: 20px auto 0 auto;
    width: 70%;
  }
  #min3-idx section .inner{
    padding: 40px 20px;
  }
  #content .pagemenu li{
    font-size: 1.2rem;
  }
  #min3-idx .pagemenu li{
    width: calc(33.33% - 10px);
  }
  #enquete-idx .pagemenu li {
    margin: 0 0 5px 0 !important;
    width: calc(25% - 5px);
    font-size: 1.1rem;
  }
  #guide-message h1{
    margin: 40px 0 20px 0;
  }
  .people #main-pic .text h2{
    margin: -140px 0 0 0;
  }
  .people #main-pic .text h2 br.sp{
    display: block;
  }
  #newstext .fRight{
    float: none;
    display: block;
    margin: 10px 0;
    text-align: center;
  }
  #newstext ul.images li{
    width: calc(50% - 10px);
  }
  #news-20240301-01 #newstext ul.images li img{
    height: 170px;
  }

  #news-list .scroll-area dl{
    padding: 20px 20px 10px 20px;
  }
  #crosstalk-idx #crosstalk-menu .crosstalk-01{
    margin-top: 30px;
  }




}
/*  480
--------------------------------------*/
@media screen and (max-width: 480px) {
  #contents h1{
    font-size: 1.6rem;
  }
  #contents h2 span {
    font-size: 6.0rem;
  }
  #contents h1 span{
    font-size: 7.0rem;
  }
  #contents .crosstalk h1 span{
    font-size: 4.5rem;
  }
  .hamburger{
    right: 10px;
  }
  #hdmenu .inner{
    padding: 0 10px;
    margin: 10px;
    height: 60px;
  }
  #hdmenu .entry {
    margin: 0 50px 0 20px;
  }
  header #siteid a{
    font-size: 1.2rem;
  }
  header #siteid a img{
    width: auto;
    height: 30px;
  }
  .sp-nav{
    padding: 10px 10px 0 10px;
  }
  .open .sp-nav {
    top: 53px;
  }
  #home #main-pic p br{
    display: none;
  }
  #home #main-pic .image img,
  #home #main-pic .image{
    position: static;
  }
  #home #main-pic .image img{
    margin: 0;
  }
  #enquete-idx #main-pic .pic,
  #home #main-pic .image{
    width: 100%;
  }
  #hdmenu .nav-wrapper ul li{
    border: none;
    margin: 0 0 10px 0;
    padding: 0 10px;
    width: 100%;
  }
  #hdmenu .nav-wrapper ul li a{
    margin: 0 0 5px 0;
    padding: 0 0 5px 0;
    font-weight: 700;
  }
  #hdmenu .nav-wrapper ul ul li{
    margin: 0;
    font-size: 1.2rem;
  }
  #hdmenu .nav-wrapper ul ul li a{
    padding: 0 0 0 14px;
    font-weight: 400;
  }
  h2 span{
    font-size: 6.0rem !important;
  }
  #crosstalk-menu h2 span{
    letter-spacing: 0;
  }
  #home #main-pic .inner {
    padding: 0 20px 40px 20px;
  }
  #home #main-pic .text {
    width: auto;
  }
  #home #main-pic .text h1 img{
    margin-bottom: 20px;
  }
  #home #main-pic p{
    width: 100%;
    font-size: 1.4rem;
    text-align: justify;
  }
  #entry-menu ul li{
    margin: 0 0 10px 0;
    width: 100%;
  }
  #entry-menu ul li a{
    padding: 20px;
  }
  #entry-menu ul .ban {
    margin: 0 30px 20px 30px;
    height: auto;
  }
  #content #people-menu .inner h2 span{
    left: -20px;
    width: calc(100% + 40px);
  }
  #content .member-list {
    padding: 0;
  }
  .crosstalk #main-pic .image{
    width: 65%;
  }
  .crosstalk #content .block .pic {
    margin: 0 0 20px 0;
  }
  .crosstalk #content #message-area .pic img, 
  .crosstalk #content #message-area .profile,
  .crosstalk #content .block .pic img {
    border-radius: 10px;
  }
  #guide-message #content .block .people .baloon,
  .crosstalk #content .block .people .baloon{
    padding: 15px;
  }
  .crosstalk #content #message-area .people {
    margin: auto;
    width: 100px;
  }
  .crosstalk #content #message-area .profile{
    flex-direction: column-reverse !important;
  }
  .crosstalk #content #message-area .profile div {
    width: 100%;
  }
  .people #main-pic .inner{
    padding: 80px 20px 60px 20px;
  }
  #people-idx #main-pic .inner {
    padding: 80px 20px 30px 20px;
  }
  .people #main-pic .image {
    margin-top: -60px;
    padding: 0 0 0 100px;
    width: 70%;
  }
  .people .block .image img {
    border-radius: 20px;
  }
  .people #lv02-02 .image img,
  .people #lv02-04 .image img {
    border-radius: 0 20px 20px 0;
  }
  .people #people-list .people{
    border-radius: 10px;
  }
  .people #people-list .people ul{
    padding: 10px;
  }
  .people #lv02-04 .inner, 
  .people #lv02-02 .inner {
    padding: 40px 20px 0 20px;
  }
  #home #people-list .people .pic,
  #home #people-list .people .pic img{
    height: 180px;
  }
  .people #people-list .people .pic,
  .people #people-list .people .pic img{
    height: 120px;
  }
  #enquete-idx h1 {
    margin: 10px 0 40px 0;
  }
  #enquete-idx section .inner {
    padding: 40px 20px;
  }
  #enquete-idx .pagemenu li {
    margin: 0 0 5px 0 !important;
    width: calc(33.33% - 5px);
  }
  #enquete-idx .pagemenu::after{
    width: calc(33.33% - 5px);
  }
  #main-pic h2 span{
    top: 2px;
    left: 2px;
  }
  #news-20240301-01 #newstext ul.images li img{
    height: 130px;
  }
  #news-area .image,
  #news-area .image img{
    width: 100px;
  }
  #news-area dl{
    font-size: 1.3rem;
    width: calc(100% - 100px);
  }
  #news-20240405-01 #comment .image{
    width: 90px;
  }
  #news-20240405-01 #comment .text{
    width: calc(100% - 110px);
  }
  #hdmenu .entry a{
    letter-spacing: 0;
  }

  

}
/*  375
--------------------------------------*/
@media screen and (max-width: 375px) {

  .people #main-pic .text h2{
    margin: -100px 0 0 0;
  }
  #news-20240405-01 #comment .image{
    margin: 0 auto 10px auto;
  }
  #newstext ul.images li,
  #news-20240405-01 #comment .text{
    width: 100%;
  }


}
