@charset "utf-8";

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: bottom;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

/* box-sizing */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

html {
  scroll-behavior: smooth;
}

img {
	width: 100%;
	height: auto;
	display: block;
	border : none;
	margin:0;
	padding:0;
}


/* hover img alpha */
a img.alpha {
  transition: all 0.2s ease 0s;
}
a:hover img.alpha {
  opacity: 0.8;
  filter: alpha(opacity=0.8);
  -ms-filter: "alpha( opacity=0.8 )";
}

/* for sp link */
#sp_btn {
  display: none;
  text-align: center;
  padding-top: 40px;
}



body {
  margin: 0;
  padding: 0;
  width: 100% !important;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN", Hiragino Kaku Gothic ProN, Roboto, "Segoe UI", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

  font-size: 1.8rem;
  font-weight: normal;
  color: #000;
  letter-spacing: 0.02em;
  z-index: 1;

   -webkit-text-size-adjust: 100%; /*スマホ自動調整対策*/
  -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "pwid";
  background: #fff;
  animation: show 1.6s ease 0s 1 normal;
}

@keyframes show {
	0% {
		opacity:0;
                                                                filter: blur(10px);
	}
	100% {
		opacity:1;
                                                                filter: blur(0);
	}
}


sup{
  vertical-align: baseline;
  position: relative;
  top: -0.6ex;
  font-size:75%;
}


.ovr_txt {
                                overflow: auto;
}


.social_box {
   text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.social_buttons {
   display: inline-block;
   text-align: left;
}


.article_header {
  width: 100%; /* android view point */
  margin: 0 auto;
   position: relative;
}

.series_ttl_box {
  position: relative;
  margin: 0 auto;
  padding: 50px 0;
  width: 94%;
  max-width: 646px;
  display: flex;
  justify-content: center;
}

.series_ttl {
  width: 78.9473%;
}

.series_vol {
  width: 21.0527%;
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
}

.series_ttl_box img {
  width:100%;
}

.ttl_box {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  z-index:10;
}

.head_img {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 0;
  padding-top: calc(560/1200 * 100%);
  background: url(img_mv1.jpg) top center / cover no-repeat;
}

.main_ttl {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 0;
  padding-top: calc(280/540 * 45%);
  background: url(img_ttl.svg) top center / cover no-repeat;
  border-left: 1px solid #000;
}

h1 {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}

.leadarea {
   width: 100%;
   position: relative;
   margin: 0 auto;
}

.lead {
  width: 94%;
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 0;
 font-size: 17px;
  line-height: 1.8;
  text-align: justify;
  font-weight: bold;
  color: #fff;
  z-index:10;
  letter-spacing: -0.01em;
}




main {
  width: 100%;
  margin: 0 auto;
  position: relative;
  background: url(bg_main.jpg) top center / cover no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

main img {
  width: 100%;
}

main p {
  font-size: 1.05rem;
  line-height: 1.8;
  text-align: justify;
   padding-bottom: 2%;
  text-indent: 1.05rem;
}

.annotation {
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: justify;
  padding-left: 0.5rem;
  text-indent: -0.5rem;
   padding-bottom: 2%;
}

.sec1 {
  position: relative;
  margin: 0 auto;
  width: 96%;
  max-width: 1000px;
  padding: 30px 50px;
  background: #fff;
}

.sec1_inner {
  box-sizing: border-box;
  width: 96%;
  max-width: 880px;
  height: 100%;
  margin: 0 auto;
  padding: 30px;
  color: #000;
  text-align: center;
  position: relative;
}

.pb40 {
   padding-bottom: 40px !important;
}

h2 {
   position: relative;
  width: 100%; /* android view point */
  margin: 20px auto 10px;
  padding: 30px 20px 0 0;
  font-weight: bold;
  font-size: clamp(1.1rem, calc(1vw + 1.1rem), 1.8rem);
  line-height: 1.4;
  text-align: left;
  z-index: 2;
  border-image-source: linear-gradient(#fff,#fff);
  border-image-slice: 0 fill;
  border-image-outset: 0 0 0 100vw;
}

h2:before {
  content:'';
  position: absolute;
  top: -1px;
  left: -50px;
  width: calc(100% + 50px);
  height: 100%;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

.img_add{
   float: right;
   width: 400px;
   margin: 5px -98px 30px 50px;
   position: relative;
}

@media screen and (max-width: 1049px) {

.img_add{
   float: right;
   width: 350px;
   margin: 5px 0 30px 50px;
   position: relative;
}

}

.img_add img {
  width: 100%;
}

.name {
   margin: 10px auto;
   width: 100%;
  font-weight: bold;
  font-size: 0.9rem;
  line-height: 1.3;
   text-align: left;
   color: #000;
  vertical-align: baseline;
}


.name_large {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.8;
  vertical-align: baseline;
}


.img_box1 {
   width: 100%;
  max-width: 720px;
   margin: 30px auto;
   position: relative;
  
}


.img_box1 img {
   width: 100%;
}


footer {
  width: 100%;
  margin: 0 auto 30px;
   padding: 0 0 40px;
   position: relative;
  background: #000;
}

.logo {
  width: 100%;
   margin: 0 auto;   
  text-align: center;
   padding: 25px 0 30px;
  position: relative;
}

.logo:before {
  content:'';
  position: absolute;
  width: 100%;
  height:1px;
  top: 0;
  left: 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+15,ffffff+85,ffffff+100&0+0,1+15,1+85,0+100 */
background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


.logo img {
  margin: 2% auto 0;
  width: 250px;
  text-align: center;
}

.localFooter {
  line-height: 1.5;
}


/* 単語ごとに改行 */
.sub_wb {
   display: inline-block;
  vertical-align: baseline;
}



/* ベースの箱設定 */
.banner-box {
  position: relative;
  width: 94%;
  max-width: 640px;
  color: #fff;
  margin: 60px auto;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  
  /* 左右の縦線（初期状態で表示） */
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

/* --- 四隅の初期カギ括弧（角の短い線） --- */
.banner-inner::before,
.banner-inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  z-index: 1;
}

/* 上側の角（左右25px） */
.banner-inner::before {
  top: 0;
  background: linear-gradient(to right, 
    #fff 0, #fff 25px, 
    transparent 25px, transparent calc(100% - 25px), 
    #fff calc(100% - 25px), #fff 100%
  );
}

/* 下側の角（左右25px） */
.banner-inner::after {
  bottom: 0;
  background: linear-gradient(to right, 
    #fff 0, #fff 25px, 
    transparent 25px, transparent calc(100% - 25px), 
    #fff calc(100% - 25px), #fff 100%
  );
}

/* --- ホバー時に伸びる上下の線 --- */
.banner-box::before,
.banner-box::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transform: scaleX(0); /* 初期状態は幅0 */
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  z-index: 2;
}

/* 上の線：左から右へ伸びる */
.banner-box::before {
  top: 0;
  transform-origin: left center;
}

/* 下の線：右から左へ伸びる */
.banner-box::after {
  bottom: 0;
  transform-origin: right center;
}

/* ホバー時に横幅を100%に展開 */
.banner-box:hover::before,
.banner-box:hover::after {
  transform: scaleX(1);
}

/* --- テキスト周りのスタイル --- */
.title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 20px 0;
  display: inline-block;
  position: relative;
}

.title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 5%;
  width: 90%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
}

.subtitle {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin: 0;
  color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.subtitle::before,
.subtitle::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background-color: #fff;
}


@media screen and (max-width: 999px) {

.lead {
  width: 94%;
  
  max-width: 94%;
  font-size: 1rem;
  line-height: 1.8;
  padding: 5% 0;

}


.sec1 {
  position: relative;
  margin: 0 auto;
  width: 96%;
  max-width: 1000px;
  padding: 3%;
  background: #fff;
}

.sec1_inner {
  box-sizing: border-box;
  width: 96%;
  max-width: 96%;
  height: 100%;
  margin: 0 auto;
  padding: 3% 0;
  color: #000;
  text-align: center;
  position: relative;
}

.pb40 {
   padding-bottom: 4% !important;
}


}



@media screen and (max-width: 767px) {



.lead {
  font-size: 1.05rem;
  line-height: 1.6;
  padding: 5% 0 3%;

}


}

@media screen and (max-width: 639px) {


.main_ttl {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 0;
  padding-top: calc(280/540 * 50%);
  background: url(img_ttl.svg) top center / cover no-repeat;
  border-left: 1px solid #000;
}



.leadarea {
   padding-top: 0;
}


.img_add{
   float: none;
   width: 60%;
   margin: 20px auto 30px;
   position: relative;
}


}


@media screen and (max-width: 479px) {


.main_ttl {
  position: absolute;
  top: 0;
  right: 0;
  width: 57%;
  height: 0;
  padding-top: calc(280/540 * 57%);
  background: url(img_ttl.svg) top center / cover no-repeat;
  border-left: 1px solid #000;
}


.lead {
  max-width: 92%;
}


.img_add{
   float: none;
   width: 80%;
   margin: 20px auto 30px;
   position: relative;
}

}

/* ***** header **************** */
.header_bg {
	background: #EFEFEF;
}
.header_wrap {
	width: 100%;
	max-width: 945px;
	margin: 0 auto;
	position: relative;
}
.header_logo_flex {
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.header_logo.-left {
	width: 190px;
	margin-right: 30px;
	padding-right: 30px;
	border-right: 1px solid #000;
}
.header_logo.-right {
	width: 170px;
}
.header_pr {
	width: 40px;
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translate(0,-50%);
}
@media only screen and (max-width: 767px) {
	.header_logo_flex {
		justify-content: flex-start;
		padding: 0 15px;
	}
	.header_logo.-left {
		width: 130px;
		margin-right: 20px;
		padding-right: 20px;
	}
	.header_logo.-right {
		width: 120px;
	}
	.header_pr {
		width: 30px;
	}
}
@media only screen and (max-width: 375px) {
	.header_logo_flex {
		justify-content: flex-start;
		padding: 0 50px 0 15px;
	}
.img_add{
   float: none;
   width: 100%;
   margin: 20px auto 30px;
   position: relative;
}

main p {
  word-break: break-all;
}

}

@media (min-width: 1920px) {

.ttl_box {
  max-width: 1600px;
}

h2 {
  border-image-outset: 0;
}

}