@charset "utf-8";

.Mcontents{
width: 100%;
height: auto;
margin:60px auto;
/*background-color: #ccc;*/
}

.McontentsW01{

}

.McontentsW01 .pop_box01{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 30px 0;
margin-bottom: 45px;
padding:10px 15px;
width: 100%;
overflow-y: scroll;
height: 250px;
-webkit-overflow-scrolling: touch;
border: 1px solid #ccc;
position: relative;
}

.downmove{
  position: absolute;
  display: inline-block;
  bottom: 5px;
  right: 0;
  font-size: 2rem;
  opacity: .8;
  color: red;
  font-weight: 700;
  animation: link_ef2 1.5s ease-in-out 0s infinite reverse both running;
}

.pop_box01 h3{
display: inline-block;
width: 100%;
margin-top: 0;
margin-bottom: 20px;
line-height: 1.5;
}

.pop_box01 h3 a{
color: #000;
}

.pop_box01 p{
  flex-basis: auto;
  font-size: .9rem;
  margin: 10px 10px;
  margin-top: 0;
  margin-left:0px;
  font-weight: normal;
  padding: 5px 8px;
  border: 1px solid #000;
}


.pop_box01 p,.pop_box01 p a{
  color: #000;
  font-weight: normal;
  border-radius: 5px;
display: inline-block;
}

.pop_box01 p a{
 display: block; 
 font-weight: 700;
}


/*css animation*/
@keyframes link_ef2 {
  0%   { 
    transform: translateY(5px);
  }
   100%   { 
    transform: translateY(-5px);
  }
}

.McontentsPhoto{
width: 100%;  
}

.McontentsTxt{
width: 92%;
margin:auto 4%; 
}

.McontentsTxt p{
font-size:1rem;
line-height: 1.5; 
}

h2.title_d,h1.title_d{
color:#000;
margin: auto;
margin-bottom: 15px;
line-height: 1.5;
position: relative;/**/
}

h2.title_d div:nth-child(1),h1.title_d div:nth-child(1){
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
}

h2.title_d div:nth-child(2),h1.title_d div:nth-child(2){
font-size: 1.5rem;
font-weight: 700;
color: #000;
margin-top: 15px;
}

.contents01_wrap{
  width: 100%;
 /* background: #F2F2F2;*/
  margin-top: 15px;
  padding-bottom: 20px;
}

.itemnav{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 30px;
}

.itemnav a{
  color: #000;
  width: 100%;
  height: 100%;
  display: block;
  padding: 10px;  
}

.itemnav h3 a{
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.itemnav > div{
  flex-basis: 48%;
  background:#000;
  border-radius: 5px; 
  margin: 10px 1%;
  text-align: center;
}



.McontentsW01 h4{
  font-size: 1.5rem;
  color: #F20505;
  line-height: 1.8;
  margin-top: 30px;
}

.contents01{
 display:flex;
 flex-wrap: wrap;
 justify-content: flex-start; 
}

.contents01 div{

}

.contents01 div:nth-of-type(1){
  flex-basis: 30%;
}

.contents01 div:nth-of-type(1) img{
  width: 90%;
  padding:10px;
  /*border-top: 20px solid #F2E205;*/
}

#imgpoket{
 background-color: #fff;
 position: relative;
 display: inline-block;
}

.contents01 div:nth-of-type(2){
  flex-basis: 70%;
  padding:20px 10px;
  background: #fff;
  /*border-top: 20px solid #000; */
}

.contents01 ul{
  margin-left: 1.5rem;
  color: #000;
  font-size: 1.0rem;
  line-height: 2;
  font-weight: 700;
}
.contents01 ul li{

}

.flex_r_photo,.flex_l_photo{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 92%;
  margin: 30px 4%;
}

.flex_r_photo > div{

}

/*------------------------*/
.flex_r_photo > div:nth-of-type(1){
  flex-basis: 70%;
  padding: 15px 15px;
  padding-left: 0;
}


.flex_l_photo > div:nth-of-type(1){
   flex-basis: 30%;
   padding-left: 0;
}
/*-------------------------*/

.flex_r_photo > div:nth-of-type(2){
   flex-basis: 30%;
   padding-right: 0;
}


.flex_l_photo > div:nth-of-type(2){
  flex-basis: 70%;
  padding: 15px 20px;
  padding-right: 0;
}

/*----------------*/
.flex_r_photo > div:nth-of-type(2) img,.flex_l_photo > div:nth-of-type(1) img{
width: 100%;
}



.flex_r_photo p,.flex_l_photo p{
  line-height: 1.8;
  margin-bottom: 5px;
}


.moreLink{
}

.moreLink_R{
float: right;
margin-right: 4%; 
}

.moreLink div{
display: inline-block;
background-color: #000;
width: 150px;
border-radius: 3px;
text-align: center;
position: relative;
margin: 30px auto;
z-index: 1;
}

.moreLink div:before{
display: inline-block;
width: 100%;
border:1px solid rgba(0,0,0,0.8);
content: " ";
padding: 10px;
position: absolute;
top:0%;
left: 0%;
height:100%;
border-radius: 3px;
z-index: -1;
animation: link_ef1 3s ease-in 1s infinite reverse both running;
}

.moreLink div a:link,.moreLink div a:visited{
display: block; 
color: #fff;
padding:10px;
}








/*JQ・addJQmovetxt*/

.JQmovetxt{
  transform: translateY(10px);
  opacity: 0.0;
}

.addJQmovetxt{
animation: JQ_admove .5s ease-in 0s forwards;
}

.addJQmovetxt2{
animation: JQ_admove2 .5s ease-in 0s forwards;
}


/*css animation*/
@keyframes link_ef1 {
  0% { 
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); 
    opacity: 0;
  }
  70%   { 
    box-shadow: 0px 0px 11px 10px rgba(242,226,5,0.5);
    opacity:1; 
  }
   100%   { 
    
    opacity:0; 
  }
}


@keyframes JQ_admove {
  0% { 
    transform: translateY(10px);
   }
   100%   { 
    
  opacity: 1;

     transform: translateY(0);
  }
}

@keyframes JQ_admove2 {
  0% { 
    color: #fff;
   }
   100%   {     
     color: #F2E205;
  }
}



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




}

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

h2.title_d div:nth-child(2),h1.title_d div:nth-child(2) {
    font-size: 1.2rem;
}

.McontentsW01 h4 {
  margin-top: 30px;
  margin-bottom: 20px;
  text-align: center;
}

.contents01 div:nth-of-type(1){
  flex-basis: 100%;
  text-align: center;
}

.contents01 div:nth-of-type(2){
  flex-basis: 100%;
  padding:0;
  margin: auto;
  margin-top: 15px;
  background: #fff;
  /*border-top: 20px solid #000; */
}


.flex_r_photo,.flex_l_photo{

  width: 100%;
  margin: 30px 0%;
}

.flex_r_photo > div{

}

/*------------------------*/
.flex_r_photo > div:nth-of-type(1){
  flex-basis:100%;
  padding:0;
  margin: auto 4%;
  margin-top: 15px;
  order: 2;
}


.flex_l_photo > div:nth-of-type(1){
   flex-basis: 100%;
   padding-left: 0;
   margin: 0;
}
/*-------------------------*/

.flex_r_photo > div:nth-of-type(2){
   flex-basis: 100%; 
   margin:0;
    order: 1;
}


.flex_l_photo > div:nth-of-type(2){
  flex-basis: 100%;
  padding: 0;
  margin:auto 4%;
  margin-top: 15px;
}

/*----------------*/
.flex_r_photo > div:nth-of-type(2) img,.flex_l_photo > div:nth-of-type(1) img{
width: 100%;
}



.flex_r_photo p,.flex_l_photo p{
  line-height: 1.8;
}



}


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

.pop_box01 p{
  font-size: .9rem;
}

}

@media screen and (max-width: 480px){
/*add_font_title_h*/
h2.title_d div:nth-child(1){
font-size: 1.8rem;
}

}

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