/* PC、スマホ共通スタイル */
body {
  font-family: "Source Sans Pro", "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif;
}
 
p {
  font-size: 15px;
}

body {
    margin: 0;
    padding: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');


header {
    background-image: url('../img/1084450.png');  /* 画像のパスを指定してください */
    background-size: cover;
    background-position: center;
    color: #0919fd;
    /* color: #7605f8;  テキストの色を設定 */
    text-align: center;
    padding: 100px;  /* 適切な余白を設定 */
}

.textcolor {
  color: red;
}

.text {
  display: inline-block;
  font-size: 4rem;
  font-weight: bold;
  font-family: "Ryumin ExtraBold KL";
  letter-spacing: -0.15rem;
  animation: text-animation 0.8s forwards;
  transform: rotateY(90deg);
}

@keyframes text-animation {
  0% {
      transform: rotateY(90deg);
  }

  100% {
      transform: rotateY(0deg);
  }
}

#top {
    max-width: 1080px;
    min-width: 360px;
    background-color: rgba(5, 94, 196, 0.61);
    margin: 0px auto;
    text-align: center;
}

.top-child {
    width: 25%;
    background-color: #87e2f8;
    display: inline-block;
}

body {
  max-width: 1080px;
  min-width: 360px;
  margin: 0 auto;
}

main {
  padding: 10px;
}

p {
  font-size: 20px;
  margin: 0;
}

a {
  font-size: 20px;
}

#parent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.contents {
  border: solid 3px rgb(238, 204, 204);
  /* background-color: rgb(239, 248, 248); */
  background: #fff8e8;
  width: 25%;
  flex-grow: 1;
  padding: 10px 15px;
  margin: 20px 0px;
  text-align: center;
}

h2 {
  font-size: 25px;
  border-bottom: dashed 3px rgb(236, 122, 122);
}

h2::before {
  content: "●";
  color: rgb(239, 111, 139);
}

#parent p:nth-of-type(2)::first-letter {
  font-weight: bold;    
  color: rgb(97, 206, 249);
}

footer {
  background-color: rgba(145, 189, 42, 0.993);
  text-align: center;
  padding: 80px 80px 30px 80px;
}
#footer-link {
  margin-bottom: 50px;
}
#footer-link > a {
  text-decoration: none;
  margin: 10px;
}
#footer-link > a:link {
  color: #ffffff;
}
#footer-link > a:visited {
  color: #ffffff;
}
#footer-link > a:hover {
  color: #ffffff;
  text-decoration: underline;
}
#footer-link > a:active {
  color: #ffffff;
}

footer > span > a {
  text-decoration: none;
  margin: 10px;
}
footer > span > a {
  color: #ffffff;
}
footer > span > a {
  color: #ffffff;
}
footer > span > a {
  color: #ffffff;
  text-decoration: underline;
}
footer > span > a {
  color: #ffffff;
}
#copyright {
  color: #ffffff;
}

#top > p {
  color: rgb(31, 18, 221);
}

/* ナビゲーションのリンクの装飾設定 */
.top-child > a {
  text-decoration: none;
  margin-left: 20px;
}

.top-child > a:link {
  color: rgb(31, 18, 221);
}
.top-child > a:visited {
  color: #ffffff;
}
.top-child > a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.top-child > a:active {
  color: rgb(31, 18, 221);
}

/*見出し*/
h2 {
  margin: 40px 0 0 0;
}

#mission > h2::after {
  content: url("../img/line.png");
  margin-left: 10px;
}

#aboutus > h2::after {
  content: url("../img/line.png");
  margin-left: 10px;
}

h3 {
  font-size: 27px;
}

/* ミッション */
#mission {
  margin: 80px auto;
  width: 100%;
}

#mission-flex {
  width: 100%;
  display: flex;
}

#mission-flex > div {
  width: 50%;
  margin: 20px;
}
  
#mission-photo {
  width: 100%;
}
  
#s2dgs {
  margin-top: 50px;
  width: 100%;
}
.img-wicon {
  /* height: 50px; */
  width: 90px;
  margin: 10px auto;
  /* width: 70px; */
  /* margin-left:110px; */
}

.word-break {
  word-break: break-all;
}

.temphigh {
  color: rgb(255, 5, 5);
}

.templow {
  color: rgb(5, 100, 209);
}

.rainpops {
  color: rgb(23, 19, 245);
}

hr {
  border-top: 2px dashed #9dd1ff;
  background-color: rgb(23, 19, 245);
}

.weatherword {
  padding: 0.5em 1em;
  margin: 2em 0;
  /* color: #232323; */
  /* background: rgba(215, 253, 205, 0.61); */
  /* border-left: solid 10px #66bb6a; */
  /* color: rgba(1, 34, 15, 0.87); */
  background:rgba(145, 189, 42, 0.993);
  border-left:solid 10px #068517;
  /* border: solid 2px #FFC107; */
  color:#ffffff;
  font-size: x-large;
  text-align: center;
  font-weight: bold;
}

.box21 {
  /* float: left; */
  position: relative;
  font-size: 1.2rem;
  margin: 2em 0;
  padding: 25px 10px 7px;
  border: solid 2px #87e2f8;
  background: rgba(5, 94, 196, 0.61);
  color: #ffffff;
  border-radius: 10px;
  }

  .box21 .box-title {
  position: absolute;
  display: inline-block;
  top: -2px;
  left: -2px;
  padding: 0 9px;
  height: 25px;
  line-height: 25px;
  font-size: 17px;
  background: #87e2f8;
  /* color: #06109e; */
  color: #ffffff;
  font-weight: bold;
  }

/* h1 {
  margin: 0 0 20 0;
  color: rgb(255, 255, 255);
  background-color: rgb(244, 79, 79);
  text-align: center;
} */

/* PC用カルーセル設定 */
 .carousel {
   margin: 0 80px 0 80px;
 }
 
.carouselImg {
  width: 100%;
  height: 50%;
}

/* PC用のスタイル */
@media screen and (min-width: 768px) {
#menu-sp,
#nav-sp {
  display: none;
}

/* ABOUT US */
#aboutus {
  margin: 80px auto;
}

/* 3つの組織文化と画像を入れる枠 */
#aboutus > div {
  display: flex;
  align-items: flex-start; /* 上端に揃える */
}
/* 画像 */
.image-container {
  display: flex;
  flex-direction: column; /* 縦並びにする */
  width: 100%; /* 幅を100%に設定 */
}

.sp-view {
  display: none;
} 

.culture-img, .pc-view {
  width: 100%;
  margin-bottom: 20px; /* 画像間の余白を設定 */
}

.culture-img2 {
  margin-top: 50px;
  width: 100%;
}

/* 3つの組織文化の表 */
.culture-table {
  margin-right: 50px;
}

/* 番号 */
.culture-num {
  font-size: 80px;
  color: #2710d5;
  margin: 0 20px 0 0;
}

/* 組織文化英語 */
.culture-en {
  color: #2710d5;
  font-weight: bold;
  font-size: 24px;
  display: block;
}

/* 組織文化日本語 */
.culture-jp {
  font-size: 28px;
  font-weight: bold;
}

/* 説明文 */
.culture-description {
  margin: 0;
}
}

/* 画面幅が767px以下のときにスタイルが適用されます */
@media screen and (max-width: 767px) {
  body {
    min-width: 375px;
    margin: 0;
  }

  /* PC用ナビゲーション非表示 */
  #top {
    display: none;
  }

  /* ハンバーガーメニュー */
  #menu-sp {
    width: 20%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    z-index: 99;
  }
  #menu-sp > img {
    width: 100%;
    cursor: pointer;
  }
  /* スマホ用ナビゲーションの表示切替 */
   /* 初期状態、レイアウトと非表示設定 */
   #nav-sp {
    background-color: #2710d5;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: none;
    z-index: 100;
  }
  
   /* ×ボタン */
   #close {
    position: absolute;
    top: 20px;
    right: 20px;
  }

  /* ナビゲーションメニュー用ロゴ */
  #home-sp > img {
    width: 20%;
    margin: 80px 0 30px 20px;
  }

 /* ナビゲーションのリンクの装飾設定 */
 #nav-sp > a {
  display: block;
}

#nav-sp > a:link {
  color: #ffffff;
}
#nav-sp > a:visited {
  color: #ffffff;
}
#nav-sp > a:hover {
  color: #ffffff;
  text-decoration: underline;
}
#nav-sp > a:active {
  color: #ffffff;
}
#nav-sp > .menu {
  text-decoration: none;
  display: block;
  margin: 0 20px 0 20px;
  height: 44px;
  font-size: 16px;
  background-image: url("../img/arrow.png");
  background-repeat: no-repeat;
  background-position: right top;
}

  .carouselImg {
    position: relative;
    margin-top: 80px;
  }

  header {
    padding: 80px 5px;
  }

  .text {
    font-size: 2rem;
  }

  h2 {
      font-size: 30px;
  }
  p {
      font-size: 16px;
  }

  #mission-flex {
    display: flex;
    flex-direction: column;
  }
  #mission-flex > div {
    width: 95%;
  }

  #parent {
    display: flex;
    flex-direction: column;
  }
  .contents {
    width: 90%;
  }

/* ABOUT US */
#aboutus {
  margin: 80px 20px 80px 20px;
}

/* 3つの組織文化と画像を入れる枠 */
#aboutus > div, .image-container {
  display: flex;
  flex-direction: column;
}

.culture-table {
  width: 100%;
  padding-right: 20px;
}

.culture-img, .sp-view {
  width: 100%;
}

.pc-view {
  display: none;
} 

.culture-img2 {
  width: 100%;
}

 .culture-num {
   font-size: 80px;
   color: #2710d5;
 }

 .culture-en {
   color: #2710d5;
   font-weight: bold;
   font-size: 24px;
   display: block;
 }

 .culture-jp {
   display: block;
 }

 .culture-description {
   margin: 0;
   font-size: 16px;
 }
 /* フッター */
 footer {
  background-color: rgba(145, 189, 42, 0.993);
  padding: 30px 20px 50px 20px;
  text-align: left;
}

 #footer-link {
   margin-bottom: 50px;
 }
 #footer-link > a {
   text-decoration: none;
   margin: 0 20px 30px 0;
   display: block;
   background-image: url("../img/arrow.png");
   background-repeat: no-repeat;
   background-position: right top;
 }
 #footer-link > a:link {
   color: #ffffff;
 }
 #footer-link > a:visited {
   color: #ffffff;
 }
 #footer-link > a:hover {
   color: #ffffff;
   text-decoration: underline;
 }
 #footer-link > a:active {
   color: #ffffff;
}
#copyright {
  font-size: 12px;
  display: block;
  margin-top: 30px;
  color: #ffffff;
}
}