@charset "UTF-8";

a {
  color: #59504F;
}

img {
  vertical-align: bottom;
}


.wrapper {
  max-width: 1440px;
  border: solid 20px #FCE3E1;
  margin: 0 auto;
}

/* header h1 {
  margin: 80,0;
} */

.top-logo img {
  max-width: 250px;
  height: auto;
}

.top-logo {
  padding: 0 0 0 30px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.header-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  max-width: 800px;
}

.sub-menu {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
  gap: 5px;
}

.sub-menu-login a {
  font-size: clamp(0.8rem, 1.2vw, 1.2rem);
  color: #fff;
  background-color: #AC9C9A;
  border-radius: 40px;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
}

.sub-menu-login:hover {
  transform: scale(1.1);
}

.sub-menu-tel img {
  width: clamp(1rem, 0.143rem + 2.286vw, 2.2rem);
  margin-bottom:5px;
}

.sub-menu-tel img:hover {
  transform: scale(1.1);
}



.sub-menu-tel a {
  font-size: clamp(1rem, 0.143rem + 2.286vw, 2.2rem);
  font-weight: bold;
  text-decoration: none;
  color: #59504F;
  text-align: center;
}

.sub-menu-search {
  border: 1.2px solid #59504F;
  padding: 5px 10px;
  border-radius: 30px;
}



/* PC版ハンバーガーメニュー非表示 */
.hamburger {
  display: none;
}
.res-main-menu {
  display: none;
}


.PC-main-menu-ul {
  /* max-width: 100wh; */
  list-style-type: none;
  display: flex;
  justify-content: flex-end;
}

.PC-main-menu01 a,
.PC-main-menu02 a {
  text-decoration: none;
  color: #59504F;
  font-size: clamp(0.8rem, 1.2vw, 1.2rem);
}

.PC-main-menu01 {
  background-color: #FFD0CC;
  border-radius: 30px 10px 0 0;
  padding: 0.9rem 1.2rem;
}

.PC-main-menu02 {
  background-color: #FFD0CC;
  border-radius: 30px 10px 0 0;
  margin: 0 0 0 4px;
  padding: 0.9rem;
} 

.PC-main-menu01:hover {
  transform: scale(1.1);
  background-color: #FCE3E1;
}

.PC-main-menu02:hover {
  transform: scale(1.1);
  background-color: #FCE3E1;
}

.toppage {
  border-top: solid 1.5rem #FCE3E1;
  margin: 0 auto;
  position:relative;
}

.toppage img {
  width: 100%;
}

.SP-mv-left {
  display: none;
}



.mv-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position:absolute;
  top:30%;
  left: 20%;
  transform: translate(-30%, -20%);
}


.mv-text {
  background-color: rgba(255, 208, 204, 0.8);
  padding: 1.2rem;
}

.mv-text-big {
  font-size: clamp(1.1rem, 1.8vw, 2.2rem);
  font-weight: bold;
}

.mv-text-small {
  font-size: clamp(0.6rem, 1.2vw, 1.1rem);
}

.mv-button {
  display: flex;
  justify-content: space-between;
}

.mv-button01 {
  padding: 20px;
  background-color: #80B99F;
  border-radius: 40px;
}
.mv-button01 a {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

.mv-button02 {
  padding: 20px 40px;
  background-color: #F3EDAC;
  border-radius: 40px;
}

.mv-button02 a {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  text-decoration: none;
  color: #AC9C9A;
  font-weight: bold;
}

.mv-button01 a:hover {
  opacity: .7;
}
.mv-button02 a:hover {
  opacity: .7;
}


h2 {
  font-size: 32px;
}

/* ------------------------ここからニュース------------------------ */

.news {
  max-width: 920px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px #59504F;
  margin: 0 auto;

  box-shadow: 14px -14px 00px 0px rgba(255, 208, 204, 1), -14px 14px 0px 0px rgba(255, 208, 204, 1);
}


.newsleft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding-right: 5%;
  border-right: 1px solid  #827978
}


.newsright ul{
  list-style-type: none;
  padding-left: 5%;
}

.newsright li {
  border-bottom: 0.8px dashed #827978;
}

.newsright a {
  text-decoration: none;
  line-height: 1.5rem;
  color: #59504F;
}

.newsright a:hover {
  opacity: .7;
}


.left-list-button a {
  color: #59504F;
  border: solid 1px #59504F;
  border-radius: 30px;
  padding: 10px 25px;
  text-decoration: none;
}

.left-list-button a:hover {
  opacity: .7;
}

/* ------------------------ここまでニュース------------------------ */

.feature-list,
.search-field,
.search-purpose,
.access-box {
  display: flex;
  justify-content: center;
}

.news,
.feature,
.search,
.access,
.FAQs {
  margin-top: 3rem;
  padding: 3rem;
}

/* ------------------------ここから特徴------------------------ */

.feature h2 {
  margin-bottom: 2rem;
}


.feature-list img {
  max-width: 100%;
  height: auto;
}

.feature-list img:hover {
  transform: scale(1.1);
}

.feature-list-min6,
.feature-list-fukidasi,
.feature-list-train {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  position: relative;
  max-width: 30%;
}

.feature-list-min6 p,
.feature-list-fukidasi p,
.feature-list-train p {
  font-size: clamp(0.8rem, 0.659rem + 0.601vw, 1.2rem);
  color: #80B99F;
  position: absolute;
  top:80%;
  left:50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  text-align: justify;
}

/* ------------------------ここまで特徴------------------------ */



/* ------------------------ここからコース------------------------ */

.search h2{
  margin-bottom: 2rem;
}

.search-field-top {
  display: flex;
  flex-direction: column;
  padding-bottom: 30px;
}


.search-field {
  justify-content: space-evenly;
}

.search-field h3 {
  background-color: #fff9d4;
  border: solid 1px#FDEB72;
  padding: 1.2rem;
}

.search-field h3 a {
  text-decoration: none;
  color: #59504F;
  font-size: 1.2rem;
  text-align:  center;
}


.search-field-officesoft ul,
.search-field-Webdesign ul,
.search-field-programming ul,
.search-field-productivity ul,
.search-field-exam ul {
  list-style-position: inside;
  border: #59504F;
  padding:  0.2rem 1.5rem;
}

.search-field-officesoft li a,
.search-field-Webdesign li a,
.search-field-programming li a,
.search-field-productivity li a,
.search-field-exam li a {
  text-decoration: none;
  line-height: 1.5rem;
  color: #59504F;
  
}


.search-purpose-job span,
.search-purpose-skill span,
.search-purpose-pc span {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  text-align: justify;

  /* ここから文字の縁取り */

  display        : inline-block;
  color          : #59504f;            /* 文字の色 */
  font-size      : 1.2rem;               
  /* 文字のサイズ */
  /* letter-spacing : 8px;                文字間 */
  text-shadow    : 
  2px  2px 1px #ffffff,
  -2px  2px 1px #ffffff,
  2px -2px 1px #ffffff,
  -2px -2px 1px #ffffff,
  2px  0px 1px #ffffff,
  0px  2px 1px #ffffff,
  -2px  0px 1px #ffffff,
  0px -2px 1px #ffffff;        /* 文字の影 */
}

.search-purpose {
  justify-content: space-evenly;
  padding: 0 30px;
}

.search-purpose-job img,
.search-purpose-skill img,
.search-purpose-pc img {
  max-width: 100%;
  height: auto;
}

.search-purpose-job img:hover {
  transform: scale(1.1);
}

.search-purpose-skill img:hover {
  transform: scale(1.1);
}


.search-purpose-pc img:hover {
  transform: scale(1.1);
}


.search-purpose-job,
.search-purpose-skill,
.search-purpose-pc {
  position: relative;
}

/* ------------------------ここまでコース------------------------ */


/* ------------------------ここからアクセス------------------------ */

.access h2 {
  margin-bottom: 2rem;
}

.access h3 {
  font-size: 1.5rem;
  padding: 30px;
}


.google-map {
  max-width: 420px;
  height: auto;
}

.google-map {
  text-align: center;
}

.access-box {
  justify-content: space-evenly;
  align-items: center;
  gap: 2%;
  padding: 0 8%;
}

.access-access,
.access-tel,
.access-train {
  margin-bottom: 30px;
}



.access-box img {
  max-width: 21px;
  height: auto;
  margin-right: 3px;
}

.access-access {
  display: flex;
  /* padding: 30px 0 30px 30px; */
}


.access-access-add {
  display: flex;
  flex-direction: column;
}

.access-tel-icon {
  padding: 0  0 15px 0 ;
}


.access-tel {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  /* padding: 0 0 30px 30px; */
}


.access-train {
  display: flex;
  /* padding: 0 0 0 30px; */
}


.access-train ul li {
  list-style-type: none;
}

/* ------------------------ここまでアクセス------------------------ */


/* ------------------------ここからFAQs------------------------ */

.FAQs h2{
  margin-bottom: 2rem;
}


.FAQ-list {
  display: flex;
  justify-content: center;
  gap: 5%;
}

.FAQ-question,
.FAQ-answer {
  width: 33%;
}

.FAQ-question {
  margin-bottom: 5%;
}

.FAQ-answer {
  margin-top: 5%;
}

.FAQ-question p,
.FAQ-answer p {
  text-align: justify;
}


/* ここから吹き出しの装飾 */

.FAQ-question {
  position: relative;
  display: inline-block;
  margin-left: 20px;
  padding: 16px;
  border: 2px solid #ffd0cc;
  border-radius: 8px;
  background-color: #ffd0cc;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

.FAQ-question
::before {
  content: "";
  position: absolute;
  top: 32%;
  left: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #ffd0cc transparent transparent;
  translate: -100% -50%;
  transform: skew(0, 6deg);
  transform-origin: right;
}

.FAQ-question
::after {
  content: "";
  position: absolute;
  top: 32%;
  left: 0;
  border-style: solid;
  border-width: 0 15.2px 15.2px 0;
  border-color: transparent #ffd0cc transparent transparent;
  translate: -100% calc(-50% - 0.4px);
  transform: skew(0, 6deg);
  transform-origin: right;
}


.FAQ-answer {
  position: relative;
  display: inline-block;
  margin-right: 20px;
  padding: 16px;
  border: 2px solid #ffd0cc;
  border-radius: 8px;
  background-color: #ffffff;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

.FAQ-answer
::before {
  content: "";
  position: absolute;
  top: 61%;
  right: 0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent transparent #ffd0cc;
  translate: 100% -50%;
  transform: skew(0, 6deg);
  transform-origin: left;
}

.FAQ-answer
::after {
  content: "";
  position: absolute;
  top: 61%;
  right: 0;
  border-style: solid;
  border-width: 0 0 15.2px 15.2px;
  border-color: transparent transparent transparent #ffffff;
  translate: 100% calc(-50% - 0.4px);
  transform: skew(0, 6deg);
  transform-origin: left;
}

/* ここまで吹き出し */


/* ここからFAQsナビ */


.FAQs-nav ul {
  display: flex;
  justify-content: space-evenly;
  text-decoration: none;
  list-style: none;
  margin-top: 7%;
  padding: 0 40px;
}  
 
.FAQs-nav-more {
  border-radius: 50px;
  border: solid 3px #80B99F;
  background-color: #fff;
  padding: 15px 20px;
}


.FAQs-nav-more a {
  color: #80B99F;
  text-decoration: none;
  font-size: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);
  font-weight: bold;
}  

.FAQs-nav-more a:hover {
  opacity: .7;
}

.FAQs-nav-free {
  border-radius: 50px;
  border: solid 3px #80B99F;
  background-color: #80B99F;
  padding: 15px 20px;
}

.FAQs-nav-free a {
  color: #fff;
  text-decoration: none;
  font-size: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);
  font-weight: bold;
  text-align: center;
}  

.FAQs-nav-free a:hover {
  opacity: .7;
}

.FAQs-nav-mail {
  border-radius: 50px;
  border: solid 3px #AC9C9A;
  background-color: #F9F4AD;
  padding: 15px 33px;
}


.FAQs-nav-mail a {
  color: #AC9C9A;
  text-decoration: none;
  font-size: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);
  font-weight: bold;
}  

.FAQs-nav-mail a:hover {
  opacity: .7;
}

/* ここまでFAQsナビ */
/* ------------------------ここまでFAQs------------------------ */


/* ------------------------ここからフッター------------------------ */
.footer-left {
    display: flex;
    align-items: center;
    gap: 5px;
}

.footer-left img {
  max-width: 250px;
  height: auto;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.5rem;
}


.footer-add ul li {
  list-style-type: none;
}


.footer-right {
  display: flex;
  flex-direction: column;
}

.top-img {
  text-align: right;
}


.footer-right img:hover {
  transform: scale(1.1);
}

/* ------------------------ここまでフッター------------------------ */




/* - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - -
  タブレット対応
  1025pxで切り替え
- - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - */
@media screen and (max-width: 1025px) {

html {
  font-size: 13px
}

/* .header {
  display: block;
} */

.top-logo img {
  max-width: 100px;
  height: auto;
}

.header-nav {
    margin-right: 60px;
  } 


.PC-main-menu {
  display: none;
}

/* ここからハンバーガーメニュー */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: white;
}


.res-main-menu {
  display: none;       /* 最初は完全に消す（これで黄色い漏れがなくなります） */
  position: fixed;
  top: 0;
  right: -100%;        /* 右側に隠しておく */
  width: 250px;
  height: 100vh;
  background-color: #fafad2;
  z-index: 10;
  transition: right 0.3s ease;
}

.res-main-menu.open {
  display: block;      /* 画面に登場させる */
  right: 0;            /* 右端にぴったり合わせる */
}



.res-main-menu-ul {
  list-style-type: none;
}

.res-main-menu-ul a{ 
  text-decoration: none;
}

.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 100;
}

.hamburger span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #333;
  transition: all 0.5s ease;
}

.hamburger span:nth-child(1) {
  top: 5px;
}

.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger span:nth-child(3) {
  bottom: 5px;
}

/* 回転アニメーション */
.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* 円のスタイル */
.circle {
  position: absolute;
  border: 3px solid #333;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  opacity: 0; /* 初期状態では透明 */
  transition: opacity 0.3s ease;
  z-index: -1; /* 円が線の後ろに表示される */
}

/* アクティブ時の円の不透明度を変更 */
.hamburger.active .circle {
  opacity: 1; /* アクティブ時に不透明度を100に */
}





/* ここまでハンバーガーメニュー */






/* 
.PC-main-menu-ul {
  flex-wrap: wrap;
} */

.header-nav {
  max-width: 100%;
}
/* 

.PC-main-menu01,
.PC-main-menu02 {
  background-color: rgba(255, 208, 204, 1);
  border-radius: 0;
  padding: 0 10px;
  margin: 0;
} */

/* .PC-main-menu {
  background-color: rgba(255, 208, 204, 1);
  padding:1.2rem;
} */

/* .PC-main-menu-ul {
  max-width: 100%;
  list-style-type: none;
  justify-content: space-around;
  /* flex-wrap: wrap; */



/* .toppage {
  border-top: none;
  position: static;
} */

.mv-left {
  display: none;
}

.SP-mv-left {
  display: block;
}


.SP-mv-text {
  background-color: rgba(255, 208, 204, 1);
  padding: 1.2rem;
  max-width: 100%;
}

.SP-mv-text-big {
  font-size: 1.8rem;
  font-weight: bold;
}

.SP-mv-text-small {
  font-size: 0.8rem;
}

.SP-mv-button {
  display: none;
  /* justify-content: space-between; */
}

.news {
  display: block;
  max-width: 70%;
  box-shadow: 8px -8px 0px 0px rgba(255, 208, 204, 1), -8px 8px 0px 0px rgba(255, 208, 204, 1);
}

.newsleft {
  display: block;
  border-right: none;
  margin-bottom: 10px;
}

.left-list-button {
  text-align: center;
  margin: 20px;
  font-size: clamp(0.6rem, 0.283rem + 1.352vw, 1.5rem);
}

h2 {
  font-size: 2rem;
  text-align: center;
}

/* .feature-list, */
.access-box {
  flex-direction: column;
  gap: 1.2rem;
}

.search-field,
.search-purpose {
  display: none;
}

.search-field-text h3,
.search-purpose-text h3 {
  padding: 30px;
  text-align: center;
  border: solid 1px #AC9C9A;
  margin: 0 50px;
  font-size: 1.5rem;
}

.search-field-text h3 {
  background-color: #F9F4AD;
}

.search-field-text h3 a:hover {
  opacity: .5;
}

.search-purpose-text h3 {
  background-color: #FCE3E1;
}

.search-purpose-text h3 a:hover {
  opacity: .5;
}

.access h3 {
  text-align: center;
  padding: 1.5rem;
}

.FAQ-list {
  gap: 3%;
}

.FAQ-question,
.FAQ-answer {
  width: 40%;
}


.footer-left {
  display: block;
}

}



/* - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - -
  スマホ対応
  600pxで切り替え
- - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - */

@media screen and (max-width: 600px) {
  
  /* header.header {
    display: block;
  } */


  .sub-menu-tel,
  .sub-menu-search {
    display: none;
  }

  .feature-list {
    flex-direction: column;
    gap: 1.2rem;
  }

  .feature-list-min6,
  .feature-list-fukidasi,
  .feature-list-train {
  max-width: 90%;
  }
  


  .FAQ-list {
  flex-direction: column;
  }

  .FAQ-question,
  .FAQ-answer {
  width: 90%;
  margin: 0 auto;
}
  
  .FAQ-question {
    margin-bottom: 7px;
  }
  .FAQ-answer {
    margin-bottom: 25px;
  }

  .FAQs-nav ul {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 5px;
  }

  /* .FAQs-nav-more a,
  .FAQs-nav-free a,
  .FAQs-nav-mail a {
    font-size: 13px;
  }
   */
}