@charset "utf-8";

/* ==================================================

		top PC

================================================== */
@media screen and (min-width:741px) {

/* --------------------------------------------------
		.vi
-------------------------------------------------- */
.vi {
 background: url(../images/vi_img01_pc.jpg) no-repeat center / cover;
}
.vi .vi-inner {
 width: 1140px;
 height: 430px;
 margin: 0 auto;
 position: relative;
}
.vi .vi-inner h1 {
 position: absolute;
 left: 10px;
 top: 50%;
 transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
}

/* --------------------------------------------------
		h
-------------------------------------------------- */
h2 {
 font-size: 36px;
 font-weight: 800;
 color: #2b7ea6;
 letter-spacing: 3px;
}

/* --------------------------------------------------
		.intro
-------------------------------------------------- */
.intro .movie {
 margin: 10px 0 35px 42px;
}

/* --------------------------------------------------
		.pfas
-------------------------------------------------- */
.pfas {
 background: #f5fafd;
}
.pfas .pfas-inner {
 padding: 0 49px;
}
.pfas .pfas-inner li {
 width: 333px;
 border: 2px solid #e3eaf0;
 background: #ffffff;
 position: relative;
 padding-bottom: 35px;
}
.pfas .pfas-inner li a {
 display: block;
}
.pfas .pfas-inner li a .txt {
 font-size: 15px;
 line-height: 1.5;
 padding: 0 20px 0 20px;
}
.pfas .pfas-inner li a .img {
  position: relative;
 }

/* --------------------------------------------------
		.webi
-------------------------------------------------- */
.webi .webi-inner {
 padding: 0 49px;
}
.webi .webi-inner .archive {
 letter-spacing: 1px;
 position: relative;
 top: 40px;
}
.webi .webi-inner .archive a::after {
 content: url(../assets/images/arrow_blue.png);
 position: relative;
 top: 9px;
 margin-left: 10px;
}
.webi .webi-inner .archive a:hover::after {
 transition: opacity 0.5s;
 opacity: 0.7;
}
.webi .webi-inner dl {
 border-bottom: 1px solid #e5e5e5;
}
.webi .webi-inner dl:last-of-type {
 border-bottom: none;
}
.webi .webi-inner dl .icon {
 width: 117px;
}
.webi .webi-inner dl span {
 color: #ffffff;
 padding: 8px 12px 10px;
 display: inline-block;
}
.webi .webi-inner dl .end {
 background: #000000;
}
.webi .webi-inner dl .sche {
 background: #3e8db3;
}
.webi .webi-inner dl dd {
 width: calc(100% - 117px);
 padding-top: 8px;
}

/* --------------------------------------------------
		.relat
-------------------------------------------------- */
.relat .relat-inner li {
 width: 225px;
 margin: 0 30px;
}
.relat .relat-inner li.pc_col3 {
 width: 735px;
}
.relat .relat-inner li .name {
 font-weight: 500;
 letter-spacing: 1.3px;
 line-height: 1.5;
 width: fit-content;
 margin-inline: auto;
 transform: translateX(-10px);
}
.relat .relat-inner li.pc_col3 .name {
  width: fit-content;
  margin: 0 auto;
}
.relat .relat-inner li .name a {
 display: inline-block;
 position: relative;
}
.relat .relat-inner li .name a::after {
 content: url(../assets/images/arrow_red.png);
 position: absolute;
 top: 2px;
 right: -30px;
}
.relat .relat-inner li .name a:hover::after {
 transition: opacity 0.5s;
 opacity: 0.7;
}

/* 追記　‐ 20240416 */
.info .img img {
  width: 400px;
  margin-left: 45px;
}

h3 {
  font-size: 19px;
  color: #2b7ea6;
  font-weight: 700;
  text-shadow: 2px 2px 10px #ffffff, -2px 2px 10px #ffffff, 2px -2px 10px #ffffff, -2px -2px 10px #ffffff;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
 }
 
.info .title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
}

a.link {
  font-size: 14px;
}

a.opacity {
  transition: .2s;
}

a.opacity:hover {
  opacity: 0.8;
  transition: .2s;
}

a.link:after {
  content: '';
  display: inline-block;
  background-image: url(../images/open_in_new_black.svg);
  width: 18px;
  height: 18px;
  transform: translateY(5px);
  margin-left: 5px;
}

.info .grid {
  display: grid;
  grid-template-columns: calc(100% - 445px) 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.area01 { grid-area: 1 / 1 / 2 / 2; }
.area02 { grid-area: 1 / 2 / 4 / 3; }
.area03 { grid-area: 2 / 1 / 4 / 2; }

}


/* ==================================================

		top SP

================================================== */
@media screen and (max-width:740px) {

/* --------------------------------------------------
		.vi
-------------------------------------------------- */
.vi {
 background: url(../images/vi_img01_sp.jpg) no-repeat center / cover;
}
.vi .vi-inner {
 width: 100%;
 height: 280px;
 margin: 0 auto;
 position: relative;
}
.vi .vi-inner h1 {
 position: absolute;
 left: 2%;
 top: 50%;
 transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
}
.vi .vi-inner h1 img {
 width: 85%;
}

/* --------------------------------------------------
		h
-------------------------------------------------- */
h2 {
 font-size: 24px;
 font-weight: 800;
 color: #2b7ea6;
 letter-spacing: 1.5px;
}

/* --------------------------------------------------
		.intro
-------------------------------------------------- */
.intro .movie {
 width: 55%;
 margin: 5px 0 5px 15px;
}

/* --------------------------------------------------
		.pfas
-------------------------------------------------- */
.pfas {
 background: #f5fafd;
}
.pfas .pfas-inner li {
 width: 49%;
 border: 1px solid #e3eaf0;
 background: #ffffff;
 position: relative;
 padding-bottom: 30px;
}
.pfas .pfas-inner li a {
 display: block;
}
.pfas .pfas-inner li a .txt {
 font-size: 12px;
 line-height: 1.4;
 padding: 0 10px 0 10px;
}

.pfas .pfas-inner li a .img {
  position: relative;
 }

/* --------------------------------------------------
		.webi
-------------------------------------------------- */
.webi .webi-inner .archive {
 font-size: 12px;
 }
.webi .webi-inner .archive a::after {
 content: url(../assets/images/arrow_blue.png);
 position: relative;
 top: 9px;
 margin-left: 5px;
}
.webi .webi-inner .archive a:hover::after {
 opacity: 0.7;
}
.webi .webi-inner dl {
 border-bottom: 1px solid #e5e5e5;
}
.webi .webi-inner dl:last-of-type {
 border-bottom: none;
}
.webi .webi-inner dl .icon {
 width: 26%;
}
.webi .webi-inner dl span {
 color: #ffffff;
 padding: 6px 6px 6px 8px;
 display: inline-block;
}
.webi .webi-inner dl .end {
 background: #000000;
}
.webi .webi-inner dl .sche {
 background: #3e8db3;
}
.webi .webi-inner dl dd {
 width: 74%;
}

/* --------------------------------------------------
		.relat
-------------------------------------------------- */
.relat .relat-inner {
 justify-content: space-between;
 flex-wrap: wrap;
}
.relat .relat-inner li {
 width: 48%;
}
.relat .relat-inner li.col2 {
 width: 100%;
}
.relat .relat-inner li .name {
 font-weight: 500;
 line-height: 1.5;
 margin-right: 30px;
 word-break: break-all;
 width: fit-content;
 margin-inline: auto;
 transform: translateX(-23px);
 padding-left: 30px;
 font-size: 13px;
}
.relat .relat-inner li .name a {
 display: inline-block;
 position: relative;
}
.relat .relat-inner li .name a::after {
 content: url(../assets/images/arrow_red.png);
 position: absolute;
 top: 2px;
 right: -33px;
}
.relat .relat-inner li .name a:hover::after {
 transition: opacity 0.5s;
 opacity: 0.7;
}

/* 追記　‐ 20240416 */

h3 {
  font-size: 14px;
  color: #2b7ea6;
  font-weight: 700;
  text-shadow: 2px 2px 8px #ffffff, -2px 2px 8px #ffffff, 2px -2px 8px #ffffff, -2px -2px 8px #ffffff;
  width: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
 }
 
.info .title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
}

a.link {
  font-size: 14px;
}

a.opacity {
  transition: .2s;
}

a.opacity:hover {
  opacity: 0.8;
  transition: .2s;
}

a.link:after {
  content: '';
  display: inline-block;
  background-image: url(../images/open_in_new_black.svg);
  width: 18px;
  height: 18px;
  transform: translateY(5px);
  margin-left: 5px;
}


}