@charset "utf-8";
/* CSS Document */

/*PC*/
@media print, screen and (min-width: 768px) {

#hedImg {
margin-top: 50px;
}

.hedImgIn {
width: 100%;
height: 100%;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}

.hed_tit {
width: calc(100% - 20%);
max-width: 1200px;
margin: auto;
}

.hed_tit h2 {
font-size: 10rem;
line-height: 1em;
letter-spacing: 0.08em;
color: #0ECC8A; 
background: -webkit-gradient(linear, right top, left top, from(#0FD8B1), to(#46C4DB));
background: linear-gradient(-90deg, #0FD8B1, #46C4DB);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}

.hed_tit h3 {
font-size: 2rem;
font-weight: bold;
position: relative;
color: #222;
display: inline-block;
padding-left: 110px;
margin-bottom: 20px; 
}

.hed_tit h3::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100px;
  height: 1px;
  background: #0ECC8A;
  background: -webkit-gradient(linear, right top, left top, from(#0FD8B1), to(#46C4DB));
background: linear-gradient(-90deg, #0FD8B1, #46C4DB);
  top: 48%;
}


/*------------*/
#bg { width: 100%; margin: 0 auto; position: relative; }
#bg::after { position: absolute; left: 0; right: 0; display: block; background-image: linear-gradient(60deg, rgba(2, 140, 228, 0.95) 0%, rgba(228, 2, 46, 0.95) 100%); bottom: -100px; height: 80vw; width: 100%; content: ""; opacity: 0.09; z-index: -1;   content: '';
  position: absolute;
  top: 200px;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background-image: linear-gradient(60deg, rgba(2, 140, 228, 0.95) 0%, rgba(228, 2, 46, 0.95) 100%);  opacity: 0.09;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  z-index: -1; }
.voice_box { margin-bottom: 80px; }

.voice_list { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; }
.voice_list li { width: 32%; margin-right: 2%; }
.voice_list li:nth-child(3n+3) { margin-right: 0px; }
.voice_list li:nth-child(n+4) { margin-top: 50px; }
.voice_list_type { position: absolute; top: 0; right: 0; }
.voice_list_type span { background: #028ce4; padding: 2px 10px; color: #fff; font-weight: 400; font-size: 14px; display: block; }
.voice_list_imgbox { position: relative; }
.voice_list_txtbox { padding: 30px; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,.15);}
.voice_list_year { font-size: 14px; color: #9e9e9e; font-weight: bold; margin-bottom: 5px; }
.voice_list_name { font-size: 18px; font-weight: bold; margin-bottom: 10px; }
.voice_list_name span { color: #028ce4; padding-left: 10px; font-size: 14px; letter-spacing: 0.1em; }
.voice_list_position { font-size: 14px; line-height: 1.5; }


.photo_hover_wrap img { width: 100%; height: auto; }
.photo_hover_wrap {
display: block;
height: 285px;
overflow: hidden;
position: relative;
text-decoration: none;
z-index: 0;
}
.photo_hover_wrap .photo {
display: block;
height: auto;
left: 0;
position: absolute;
top: 0;
transition: all 0.2s linear 0s;
width: 100%;
}
.voice_list li a:hover .photo_hover_wrap {
text-decoration: none;
cursor: pointer;
}
.voice_list li a:hover .photo_hover_wrap .photo {
transform: scale(1.1);
transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

/**/
.voice_list2 {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.voice_list2 li {
-ms-flex-preferred-size: 32%;
flex-basis: 32%;
max-width: 32%;
margin-right: 2%;
}

.voice_list2 li:nth-child(3n) {
margin-right: 0;
}
.voice_list2 li:nth-child(n+4) {
margin-top: 4%;
}

.voice_list2 li a {
position: relative;
box-sizing: border-box;
padding: 20px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
background-color: #fff;
box-shadow: 0 0 15px rgba(0,0,0,.1);
width: 100%;
height: 100%;
border: #fff 2px solid;
}
.voice_list2 li a:hover {
box-shadow: 0 0 30px rgba(0,0,0,.2);
border: #028ce4 2px solid;
}
.voice_list2_img {
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
max-width: 40%;
}
.voice_list2_txt {
-ms-flex-preferred-size: 55%;
flex-basis: 55%;
max-width: 55%;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.yaku {
position: absolute;
top: -10px;
right: -10px;
background:#028ce4;
padding: 2px 10px;
color:#fff;
font-weight: 400;
font-size: 14px;
display: block;
}

/*----------詳細----------*/

.voice_detail_box {
width: 100%;
margin: 0 auto;
display: flex !important;
flex-wrap: wrap;
align-items: center;
margin-bottom: 80px;
}
.voice_detail_txtbox {
flex-basis: 27%;
max-width: 27%;
margin-left: -10%;
margin-top: 20%;
position: relative;
z-index: 1;
padding: 5%;
background: -webkit-gradient(linear, left top, right top, from(#2084B9), to(#00C9ED));
background: linear-gradient(90deg,
#2084B9, #00C9ED);
}
.voice_detail_box2 {
width: 100%;
margin: 0 auto;
display: flex !important;
flex-wrap: wrap;
align-items: center;
margin-bottom: 80px;
position: relative;
}
.voice_detail_box2::before {
content: "";
position: absolute;
top: -50px;
width: 120%;
left: -500px;
background-image: linear-gradient(60deg, rgba(2, 140, 228, 0.95) 0%, rgba(228, 2, 46, 0.95) 100%);
height: 100%;
display: block;
opacity: 0.1;
z-index: -1;
}
.voice_detail_txtbox2 {
flex-basis: 37%;
position: relative;
z-index: 1;
padding: 5%;
background: #909090;
margin-left: auto;
margin-right: 0;
}

.voice_detail_imgbox { flex-basis: 73%; position: relative; }
.voice_detail_imgbox::before {
  content: "";
  position: absolute;
  top: -50px;
  width: 120%;
  left: -500px;
background: -webkit-gradient(linear, right top, left top, from(#C6F1FF), to(#F4FFE8));
background: linear-gradient(-90deg, #C6F1FF, #F4FFE8);
  height: 75%;
  display: block;
  opacity: 0.8;
  z-index: -1;
}
.voice_detail_img { width: 100%; margin: 0 auto; }
.voice_detail_img img { width: 100%; height: auto; }
.voice_detail_name { color: #fff; font-size: 2.4rem; font-weight: bold; margin-bottom: 10px; }
.voice_detail_name span.en { color: #028ce4; font-weight: 400; padding-left: 15px; letter-spacing: 0.2em; font-size: 14px; }
.voice_detail_type { color: #fff; font-weight: 400; font-size: 14px; }
.voice_detail_type span:nth-of-type(1) { padding-right: 10px; }
.voice_detail_type span:nth-of-type(2) { padding-left: 10px; }
.voice_detail_profile_box { width: 100%; position: relative; padding-top: 15px; margin-top: 15px; }
.voice_detail_profile_box::before { content: ""; width: 50px; height: 1px; background:#028ce4; position: absolute; left: 0; top: 0; }
.voice_detail_profile_box p { font-size: 14px; color: #fff; }
.voice_b_box { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; margin-bottom: 80px; }
.voice_b_box00 { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; }
.voice_b_imgboxL { flex-basis: 60%; margin-left: -10%; margin-right: 5%;  }
.voice_b_txtboxR { flex-basis: 45%; }
.voice_b_imgboxR { flex-basis: 60%; margin-right: -10%;  }
.voice_b_txtboxL { flex-basis: 45%; margin-right: 5%; }
.voice_b_img { width: 100%; margin: 0 auto; }
.voice_b_img img { width: 100%; height: auto ;}

.voice_b_tit { font-size: 20px; font-weight: bold; color: #028ce4; margin-bottom: 20px; }
.voice_b_txt { line-height: 1.8em; }

.comBtn02 { margin: 0 auto; margin-top: 50px; }

.voice_b_txtbox { margin-bottom: 50px; }


/*-----------------*/
.message_s {
position: relative;
overflow: hidden;
height: 25vw;
}

.message_s a {
position: relative;
width: 100%;
height: 100%;
display: block;
}

a:hover .message_s::before {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
transform: scale(1.1);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1) 0s
}

.message_01::before {
background: url("../images/voice/v_idx01.jpg") center center no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
-webkit-transition: -webkit-transform 125ms;
transition: -webkit-transform 125ms;
transition: transform 125ms;
transition: transform 125ms, -webkit-transform 125ms
}
.message_02::before {
background: url("../images/voice/v_idx02.jpg") center center no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
-webkit-transition: -webkit-transform 125ms;
transition: -webkit-transform 125ms;
transition: transform 125ms;
transition: transform 125ms, -webkit-transform 125ms
}
.message_03::before {
background: url("../images/voice/v_idx03.jpg") center center no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
-webkit-transition: -webkit-transform 125ms;
transition: -webkit-transform 125ms;
transition: transform 125ms;
transition: transform 125ms, -webkit-transform 125ms
}
.message_04::before {
background: url("../images/voice/v_idx04.jpg") center center no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
-webkit-transition: -webkit-transform 125ms;
transition: -webkit-transform 125ms;
transition: transform 125ms;
transition: transform 125ms, -webkit-transform 125ms
}

.message_list { width: 100%; margin: 0 auto; }
.message_list li { width: 48%; float: left; margin-right: 4%; }
.message_list li:nth-child(2n+2) { margin-right: 0px; }
.message_list li:nth-child(even) { margin-top: 100px; }

.message_list_txtbox {
position: relative;
width: 90%;
margin-top: -30px;
  padding: 50px;
  box-sizing: border-box;
background: -webkit-gradient(linear, left top, right top, from(#2084B9), to(#00C9ED));
background: linear-gradient(90deg, #2084B9, #00C9ED);
}
.message_list_txtbox::before {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
color: #fff;
font-family: "Font Awesome 5 Free";
content: "\f054";
text-align: center;
display: block;
font-weight: bold;
box-sizing: border-box;
font-size: 18px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
display: inline-block;
}
a:hover .message_list_txtbox::before {
right: 20px;
}

.message_list_tit { font-size: 25px; font-weight: 400; margin-bottom: 15px; color: #fff; }
.message_list_type { font-size: 14px; color: #fff; }


.msBox {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.msBox_img {
-ms-flex-preferred-size: 30%;
flex-basis: 30%;
}
.msBox_img img {
border-radius: 50%;
}
.msBox_txt {
-ms-flex-preferred-size: 65%;
flex-basis: 65%;
max-width: 65%;
}
.msBox_txtIn {
background-color: #E98B03;
box-sizing: border-box;
padding: 30px;
border-radius: 15px;
position: relative;
}
.msBox_txtIn::before {
content: "";
position: absolute;
top: 50%;
left: -40px;
margin-top: -20px;
border: 20px solid transparent;
border-right: 20px solid #E98B03;
}
.msBox_txtIn p{
color: #fff;
}


}




/*----------------------------------------------------*/



/*sp*/
@media only screen and (max-width: 767px) {

/*------------*/
#hedImg {
margin-top: 30px;
}

.hedImgIn {
width: 100%;
height: 100%;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}

.hed_tit {
width: calc(100% - 20%);
max-width: 1200px;
margin: auto;
}

.hed_tit h2 {
font-size: 5rem;
line-height: 1em;
letter-spacing: 0.08em;
color: #0ECC8A; 
background: -webkit-gradient(linear, right top, left top, from(#0FD8B1), to(#46C4DB));
background: linear-gradient(-90deg, #0FD8B1, #46C4DB);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}

.hed_tit h3 {
font-size: 1.6rem;
position: relative;
color: #222;
display: inline-block;
padding-left: 110px;
margin-bottom: 20px; 
}

.hed_tit h3::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100px;
  height: 1px;
  background: #0ECC8A;
  background: -webkit-gradient(linear, right top, left top, from(#0FD8B1), to(#46C4DB));
background: linear-gradient(-90deg, #0FD8B1, #46C4DB);
  top: 48%;
}


/*------------*/
#bg { width: 100%; margin: 0 auto; position: relative; }
#bg::after { position: absolute; left: 0; right: 0; display: block; background-image: linear-gradient(60deg, rgba(2, 140, 228, 0.95) 0%, rgba(228, 2, 46, 0.95) 100%); bottom: -100px; height: 80vw; width: 100%; content: ""; opacity: 0.09; z-index: -1;   content: '';
position: absolute;
top: 200px;
left: 0;
width: 120%;
height: 80%;
margin: 3% -10% 0;
background-image: linear-gradient(60deg, rgba(2, 140, 228, 0.95) 0%, rgba(228, 2, 46, 0.95) 100%);  opacity: 0.09;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
z-index: -1; }
.voice_box { margin-bottom: 80px; }

.voice_list { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; }
.voice_list li { width: 100%; }
.voice_list li:nth-child(n+2) { margin-top: 30px; }
.voice_list_type { position: absolute; top: 0; right: 0; }
.voice_list_type span { background: #028ce4; padding: 2px 10px; color: #fff; font-weight: 400; font-size: 14px; display: block; }
.voice_list_imgbox { position: relative; }
.voice_list_txtbox { padding: 15px; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,.15); }
.voice_list_year { font-size: 14px; color: #9e9e9e; font-weight: bold; margin-bottom: 5px; }
.voice_list_name { font-size: 16px; font-weight: bold; margin-bottom: 10px; }
.voice_list_name span { color: #028ce4; padding-left: 10px; font-size: 14px; letter-spacing: 0.1em; }
.voice_list_position { font-size: 14px; }

/*----------詳細----------*/

.voice_detail_box {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 50px;
}
.voice_detail_txtbox {
  width: 80%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 5%;
background: -webkit-gradient(linear, left top, right top, from(#2084B9), to(#00C9ED));
background: linear-gradient(90deg,
#2084B9, #00C9ED);
  margin-top: -50px;
}


.voice_detail_imgbox { width: 100%; position: relative; }
.voice_detail_imgbox::before {
  content: "";
  position: absolute;
  top: -50px;
  width: 100%;
  left: -100px;
background: -webkit-gradient(linear, right top, left top, from(#C6F1FF), to(#F4FFE8));
background: linear-gradient(-90deg, #C6F1FF, #F4FFE8);
  height: 80%;
  display: block;
  opacity: 0.8;
  z-index: -1;
}
.voice_detail_img { width: 100%; margin: 0 auto; }
.voice_detail_img img { width: 100%; height: auto; }
.voice_detail_name { color: #fff; font-size: 20px; font-weight: bold; margin-bottom: 10px; }
.voice_detail_name span.en { color: #028ce4; font-weight: 400; padding-left: 15px; letter-spacing: 0.2em; font-size: 14px; }
.voice_detail_type { color: #fff; font-weight: 400; font-size: 14px; }
.voice_detail_type span:nth-of-type(1) { padding-right: 5px; }
.voice_detail_type span:nth-of-type(2) { padding-left: 5px; }
.voice_detail_profile_box { width: 100%; position: relative; padding-top: 15px; margin-top: 15px; }
.voice_detail_profile_box::before { content: ""; width: 50px; height: 1px; background:#028ce4; position: absolute; left: 0; top: 0; }
.voice_detail_profile_box p { font-size: 14px; color: #fff; }

.voice_b_box { width: 100%; margin: 0 auto 50px; }
.voice_b_box00 { width: 100%; margin: 0 auto;}
.voice_b_imgboxL { width: 100%; margin: 0 auto; }
.voice_b_txtboxR { width: 100%; margin: 0 auto 30px; }
.voice_b_imgboxR { width: 100%; margin: 0 auto; }
.voice_b_txtboxL { width: 100%; margin: 0 auto 30px; }
.voice_b_img { width: 100%; margin: 0 auto; }
.voice_b_img img { width: 100%; height: auto ;}

.voice_b_tit { font-size: 16px; font-weight: bold; color: #028ce4; margin-bottom: 15px; }
.voice_b_txt { line-height: 1.8em; font-size: 14px; }


.comBtn02 { margin: 0 auto; margin-top: 50px; }


.voice_b_txtbox { margin-bottom: 30px; }


/**/
.voice_list2 {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.voice_list2 li {
-ms-flex-preferred-size: 48%;
flex-basis: 48%;
max-width: 48%;
margin-right: 4%;
}

.voice_list2 li:nth-child(2n) {
margin-right: 0;
}
.voice_list2 li:nth-child(n+3) {
margin-top: 4%;
}

.voice_list2 li a {
position: relative;
box-sizing: border-box;
padding: 20px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background-color: #fff;
box-shadow: 0 0 15px rgba(0,0,0,.1);
width: 100%;
height: 100%;
border: #fff 2px solid;
}
.voice_list2 li a:hover {
box-shadow: 0 0 30px rgba(0,0,0,.2);
border: #028ce4 2px solid;
}
.voice_list2_img {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
text-align: center;
margin-bottom: 10px;
}
.voice_list2_txt {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
/*display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;*/
}
.yaku {
position: absolute;
top: -10px;
right: -10px;
background:#028ce4;
padding: 2px 10px;
color:#fff;
font-weight: 400;
font-size: 14px;
display: block;
}


/*-----------------*/
.message_s {
position: relative;
overflow: hidden;
height: 55vw;
}

.message_s a {
position: relative;
width: 100%;
height: 100%;
display: block;
}

a:hover .message_s::before {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
transform: scale(1.1);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1) 0s
}

.message_01::before {
background: url("https://placehold.jp/757575/ffffff/640x480.png") center center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
-webkit-transition: -webkit-transform 125ms;
transition: -webkit-transform 125ms;
transition: transform 125ms;
transition: transform 125ms, -webkit-transform 125ms
} 

.message_list { width: 100%; margin: 0 auto; }
.message_list li { width: 100%; margin: 0 auto; }
.message_list li:nth-child(n+2) { margin-top: 30px; }

.message_list_txtbox {
position: relative;
width: 90%;
margin-top: -30px;
  padding: 20px;
  box-sizing: border-box;
background: -webkit-gradient(linear, left top, right top, from(#2084B9), to(#00C9ED));
background: linear-gradient(90deg, #2084B9, #00C9ED);
}
.message_list_txtbox::before {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
color: #fff;
font-family: "Font Awesome 5 Free";
content: "\f054";
text-align: center;
display: block;
font-weight: bold;
box-sizing: border-box;
font-size: 18px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
display: inline-block;
}
a:hover .message_list_txtbox::before {
right: 20px;
}

.message_list_tit { font-size: 18px; font-weight: 400; margin-bottom: 15px; color: #fff; }
.message_list_type { font-size: 14px; color: #fff; }


.msBox {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
  	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
  	flex-direction: column;
}
.msBox_img {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
text-align: center;
max-width: 400px;
margin: auto;
}
.msBox_img img {
border-radius: 50%;
}
.msBox_txt {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.msBox_txtIn {
margin-top: 30px;
background-color: #E98B03;
box-sizing: border-box;
padding: 20px;
border-radius: 15px;
position: relative;
}
.msBox_txtIn::before {
content: "";
position: absolute;
top: -40px;
left: 50%;
margin-left: -20px;
border: 20px solid transparent;
border-bottom: 20px solid #E98B03;
}
.msBox_txtIn p{
color: #fff;
}



}