@charset "utf-8";
/* CSS Document */
.mainImg {
  position: relative;
}
.mainImg .imageBox {
  position: absolute;
}
.mainImg .mainLead {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.mainImg .mainLead span {
  display: block;
  padding: 0.5em 1em;
  background-color: #FFF;
  color: #000;
  letter-spacing: 2px;
}
.mainImg .topTopics {
  position: absolute;
  background-image: url("../images/topTopi_ttl.png");
  background-repeat: no-repeat;
}
@media (max-width: 750px) {
  .mainImg {
    height: 400px;
    background-image: url("../images/mainBg.jpg");
    background-repeat: repeat-x;
    background-position: right bottom;
    background-size: auto 80%;
  }
  .mainImg .imageBox {
    top: 0px;
    left: 0px;
    margin-right: 10vw;
    height: 250px;
  }
  .mainImg .imageBox img {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }
  .mainImg .mainLead {
    top: 40px;
    right: 0;
    gap: 15px;
  }
  .mainImg .mainLead h2 span {
    font-size: 16px;
  }
  .mainImg .mainLead p span {
    font-size: 12px;
  }
  .mainImg .topTopics {
    top: 235px;
		left: 0;
    width: 100%;
    padding: 50px 8px 8px 8px;
    background-size: auto 45px;
    background-position: 0 0;
		border-bottom-right-radius: 8px;
  }
}
@media (min-width: 751px) {
  .mainImg {
    height: 850px;
    background-image: url("../images/mainBg.jpg");
    background-position: right 30vw bottom;
    background-repeat: repeat-x;
  }
  .mainImg .imageBox {
    position: absolute;
    top: 100px;
    left: 0px;
    margin-right: 30vw;
    height: 650px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
  }
  .mainImg .imageBox img {
    width: 100%;
    height: 650px;
    object-fit: cover;
  }
  .mainImg .mainLead {
    position: absolute;
    right: 15vw;
    top: 180px;
    width: 500px;
    gap: 10px;
    color: #000;
  }
	.mainImg .mainLead h2{
		margin-bottom: 1em;
	}
  .mainImg .mainLead p span {
    font-family: var(--zenkaku);
    font-weight: 700;
    display: block;
    padding: 0.5em 1em;
    background-color: #FFF;
    letter-spacing: 2px;
    font-size: 20px;
  }
  .mainImg .mainLead h2 span {
    font-family: var(--zenkaku);
    font-weight: 700;
    display: block;
    padding: 0.5em 1em;
    background-color: #FFF;
    letter-spacing: 2px;
    font-size: 30px;
  }
  .mainImg .topTopics {
    width: calc(100vw - 32.5vw);
    top: 800px;
    left: 2.5vw;
    background-position: left center;
    padding-left: 120px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.topFeatures {
  background-color: #F4F3EF;
}
.topFeatures .feature01 {
  margin-bottom: 50px;
}
.topFeatures .feature01 .midashi h2 {
  writing-mode: vertical-rl;
  font-style: normal;
  letter-spacing: 2px;
  color: #614a3f;
}
.topFeatures .feature02 {}
.topFeatures .feature03 {}
.topFeatures section .textBox {
  overflow: hidden;
  background-color: #FFF;
}
.topFeatures section .imgBox {
  overflow: hidden;
}
.topFeatures section .textBox h3 {
  font-family: var(--zenkaku);
  color: var(--main-color);
  font-weight: 700;
  margin-bottom: 1em;
}
.topFeatures section .textBox p {
  color: #614a3f;
  margin-bottom: 1em;
}
.topFeatures .feature_btn {
  background-image: url("../images/feature_moreBg.jpg");
  background-repeat: repeat-x;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 200px;
}
@media (max-width: 750px) {
  .topFeatures .feature01 {
    padding-bottom: 30px;
  }
  .topFeatures .feature01 .midashi {
    background-image: url("../images/topi_img.png"), url("../images/topi03.png"), url("../images/topi02.png");
    background-position: right 30px bottom, left -25px top, right -30px center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 35% auto, 40% auto, 30% auto;
    padding: 50px 30px 100px 30px;
  }
	.topFeatures .feature01 .midashi h2 {
	writing-mode:inherit;
	margin-bottom: 1em;
	font-size: 1.5em
  }
  .topFeatures .feature01 .flexBox .textBox {
    width: 93%;
    padding: 30px 30px 80px;
    margin-right: auto;
  }
  .topFeatures .feature01 .flexBox .imgBox {
    width: 70%;
    margin-top: -50px;
    margin-left: auto;
  }
  .topFeatures .feature02 {
    padding-bottom: 80px;
  }
  .topFeatures .feature02 .flexBox .textBox {
    width: 90%;
    padding: 30px;
    margin-left: auto;
  }
  .topFeatures .feature02 .flexBox .textBox .illust {
    width: 40%;
    margin-left: auto;
  }
  .topFeatures .feature02 .flexBox .imgBox {
    width: 50%;
    margin-top: -150px;
    margin-right: auto;
  }
  .topFeatures .feature03 {
    padding-bottom: 80px;
  }
  .topFeatures .feature03 .flexBox .textBox {
    width: 90%;
    padding: 30px;
    margin-right: auto;
  }
  .topFeatures .feature_btn {
    min-height: 200px;
    background-position: left -150px bottom;
    background-size: auto 100%;
  }
  .topFeatures .feature_btn a {
    width: 50%;
  }
}
@media (min-width: 751px) {
  .topFeatures {
    padding-top: 100px;
  }
  .topFeatures section .textBox h3 {
    font-size: 1.5em;
  }
  .topFeatures section .textBox p {
    font-size: 1.2em;
  }
  .topFeatures .feature01 {
    display: flex;
    justify-content: center;
    gap: 30px;
    height: 680px;
  }
  .topFeatures .feature01 .midashi {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .topFeatures .feature01 .midashi h2 {
    font-size: 2.5em;
  }
  .topFeatures .feature01 .flexBox {
    position: relative;
    flex-basis: 980px;
    margin-top: 60px;
  }
  .topFeatures .feature01 .flexBox .textBox {
    position: absolute;
    width: 80%;
    top: 0px;
    left: 0px;
    padding: 50px 15% 50px 50px;
  }
  .topFeatures .feature01 .flexBox .imgBox {
    top: 120px;
    width: 30%;
    position: absolute;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
  }
  .topFeatures .feature02 .flexBox {
    position: relative;
    width: 1200px;
    margin: 30px auto;
    height: 450px;
  }
  .topFeatures .feature02 .flexBox .textBox {
    position: absolute;
    width: 80%;
    top: 0px;
    right: 0px;
    padding: 50px 50px 50px 15%;
    display: flex;
  }
  .topFeatures .feature02 .flexBox .textBox .illust {
    flex-basis: 200px;
    flex-shrink: 0;
    align-self: center;
  }
  .topFeatures .feature02 .flexBox .imgBox {
    top: 120px;
    width: 30%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
  }
  .topFeatures .feature03 {}
  .topFeatures .feature03 .flexBox {
    width: 900px;
    margin: 30px auto;
    height: 700px;
  }
  .topFeatures .feature03 .flexBox .textBox {
    padding: 50px;
  }
  .topFeatures .feature03 .flexBox .textBox h3 br.sp_br {
    display: none;
  }
  .topFeatures .feature03 .flexBox .textBox .illust {
    text-align: center;
  }
  .topFeatures .feature_btn {
    background-position: center bottom;
    min-height: 320px;
  }
}
.topTuite .innr {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.topTuite .innr > div {
  display: flex;
  flex-direction: column;
}
.topTuite .innr > div a {
  flex-grow: 2;
  display: flex;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: auto 95%;
}
.topTuite .innr > div a h3 {
  writing-mode: vertical-rl;
  margin-left: 15px;
}
.topTuite .innr > div a h3 span {
  display: inline-block;
  padding: 1em 8px;
  margin: 0 4px 0;
  background-color: var(--main-color);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 3px;
  color: #fff;
  font-family: var(--zenkaku);
}
.topTuite .innr > div a .btn {
  margin: auto 0 15px auto;
  background-color: #FFF;
  padding: 1.2em 0 1.2em 3em;
  background-image: url("../images/ico_more2.png");
  background-repeat: no-repeat;
  background-position: left 15px center;
  border-top-left-radius: 99px;
  border-bottom-left-radius: 99px;
  color: #29599a;
  letter-spacing: 1px;
  font-weight: 700;
  font-family: var(--zenkaku);
}
.topTuite .innr .tuite01 a {
  background-image: url("../images/tuite01_bg.jpg");
}
.topTuite .innr .tuite02 a {
  background-image: url("../images/tuite02_bg.jpg");
}
@media (max-width: 750px) {
  .topTuite {
    padding: 15px 30px 80px;
    background-image: url("../images/tuiteBg_sp.jpg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 100% auto;
  }
  .topTuite .innr > div {
    flex-basis: 300px;
  }
  .topTuite .innr > div a h3 span {
    font-size: 12px;
  }
}
@media (min-width: 751px) {
  .topTuite {
    padding-bottom: 150px;
    background-image: url("../images/tuiteBg.png");
    background-repeat: no-repeat;
    background-position: left 75vw bottom;
  }
  .topTuite .innr {
    flex-direction: row;
    height: 600px;
    gap: 100px;
  }
  .topTuite .innr > div {
    flex-basis: calc(50% - 50px);
    height: 460px;
  }
  .topTuite .innr > div a:hover {
    opacity: 0.8;
  }
  .topTuite .innr > div a h3 span {}
  .topTuite .innr > div a .btn {
    padding: 1.2em 1em 1.2em 3em;
    background-position: left 30px center;
    font-size: 1.4rem;
  }
  .topTuite .innr .tuite01 {
    margin-top: auto;
  }
}
.topSien {
  background-color: #F8E3E0;
  background-image: url("../images/sienBg.jpg");
  background-repeat: no-repeat;
}
.topSien h2.secTtl {
  font-family: var(--zenkaku);
  text-align: center;
  color: #614a3f;
  font-weight: 700;
}
.topSien .innr {
  display: flex;
  flex-direction: column;
}
.topSien .innr > div {
  display: flex;
  flex-direction: column;
}
.topSien .innr > div a {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #614a3f;
}
.topSien .innr > div a .text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.topSien .innr > div a .text h3 {
  font-size: 80%;
  font-weight: 400;
  display: block;
  padding: 0 1em;
  background-color: var(--main-color);
  color: #FFF;
  margin-bottom: 0.8em;
}
@media (max-width: 750px) {
  .topSien {
    padding: 30px 15px 100px;
    background-position: left 25% bottom;
    background-size: auto 80px;
  }
  .topSien h2.secTtl {
    margin-bottom: 1em;
  }
  .topSien .innr {
    max-width: 70%;
    margin: 0 auto;
    gap: 30px;
  }
}
@media (min-width: 751px) {
  .topSien {
    padding: 80px 0 160px;
    background-position: center bottom;
  }
  .topSien h2.secTtl {
    font-size: 40px;
    line-height: 1;
    margin-bottom: -0.5em;
  }
  .topSien .innr {
    max-width: calc((60px * 2) + (400px * 3));
    height: 600px;
    margin: 0 auto;
    flex-direction: row;
    gap: 60px;
  }
  .topSien .innr > div {
    flex-basis: 400px;
  }
  .topSien .innr .sien02 {
    margin-top: auto;
  }
  .topSien .innr > div a:hover {
    opacity: 0.8;
  }
}
.topInfo {
  background-color: #fff;
}
.topInfo .secTtl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.topInfo .secTtl h2 {
  letter-spacing: 3px;
  font-weight: 700;
}
.topInfo .secTtl p {
  color: var(--main-color);
  font-weight: 500;
}
.topInfo .more {
  width: 50%;
}
.topInfo .more a {
  display: block;
  padding: 0.8em 0;
  border: 1px solid var(--main-color);
  background-color: #FFF;
  color: var(--main-color);
  text-align: center;
}
.topInfo .topInfo_wrap ul.tab_cate {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
  background-color: #F4F3EF;
  color: var(--main-color);
  height: 40px;
}
.topInfo .topInfo_wrap ul.tab_cate li {
  flex-basis: 20%;
  display: flex;
  flex-direction: column;
}
.topInfo .topInfo_wrap ul.tab_cate li a {
  flex-grow: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}
.topInfo .topInfo_wrap ul.tab_cate li.active a, .topInfo .topInfo_wrap ul.tab_cate li.is-active a {
  background-color: var(--main-color);
  color: #FFF;
}
.topInfo .topInfo_wrap .area {
  display: none;
  opacity: 0;
}
.topInfo .topInfo_wrap .area.is-active {
  display: block;
  animation-name: displayAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  min-height: 250px;
}
.topInfo .topInfo_wrap .area ul li {
  border-bottom: 1px dotted #ccc;
}
.topInfo .topInfo_wrap .area ul li a {
  display: block;
  padding: 1em 0;
}
.topInfo .topInfo_wrap .area ul li a span {
  margin-right: 1em;
}
.topInfo .topInfo_wrap .area ul li a span.date {
  color: var(--main-color);
}
@media screen and (max-width: 750px) {
  .topInfo {
    padding: 20px 15px 30px;
  }
  .topInfo .secTtl {
    height: 100px;
  }
  .topInfo .secTtl .more {
    display: none;
  }
  .topInfo .topInfo_wrap ul.tab_cate li {
    font-size: 12px;
  }
  .topInfo .topInfo_wrap .area ul li a span.date::after {
    content: "\a";
    white-space: pre;
  }
  .topInfo .topInfo_wrap .more {
    margin: 8px auto;
    font-size: 12px;
  }
}
@media screen and (min-width: 751px) {
  .topInfo {
    background-color: #fff;
    padding: 50px 0 100px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
  }
  .topInfo .secTtl {
    flex-basis: 25%;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .topInfo .secTtl h2 {
    font-size: 30px;
  }
  .topInfo .secTtl .more {
    margin: auto 0;
  }
  .topInfo .topInfo_wrap {
    flex-basis: 75%;
  }
  .topInfo .topInfo_wrap ul.tab_cate {
    height: 60px;
  }
  .topInfo .topInfo_wrap ul.tab_cate li {
    font-size: 18px;
  }
  .topInfo .topInfo_wrap .more {
    display: none;
  }
}
@keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}