main{
    grid-area:center;
    }
/* パンくずリスト */

.breadcrumb {
    margin:0 10px 0;
    padding: 1em;
    list-style: none;
    background: #fef2d6;
    overflow: hidden;
  }
  
  .breadcrumb li {
    display: inline;/*横に並ぶように*/
    list-style: none;
    font-weight: bold;/*太字*/
  }
  
  .breadcrumb li:after {
    /* >を表示*/
    content: '>';
    padding: 0 0.2em;
    color: #8e8270;
  }
  
  .breadcrumb li:last-child:after {
    content: '';
  }
  
  .breadcrumb li a {
    text-decoration: none;
    color: #feaa23;
  }
  
  .breadcrumb li:first-child a:before {
    /*家アイコンに*/
    font-family: FontAwesome;
    content: '\f015';
    font-weight: normal;
    font-size: 1.1em;
  }
  
  .breadcrumb li a:hover {
    text-decoration: underline;
  }






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

        .main_block_title{
            position: relative;
            padding: 0.5em 0.7em;
            margin: 2em 10% 80px;
            background: rgb(0, 31, 124);
            box-shadow: 0px 0px 0px 5px rgb(0, 31, 124);
            border: dashed 2px white;
            padding: 0.2em 0.5em;
            font-weight: bold;
            color: white;
        }
        .main_block_title:after{
            position: absolute;
            content: '';
            right: -7px;
            top: -7px;
            border-width: 0 15px 15px 0;
            border-style: solid;
            border-color: white #dff1f5 blueviolet;
            box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
        }
                            .main_block_title h2{
                                margin: 0; 
                                padding: 20px;
                                text-align: center;
                                font-size: 30px;
                                color: white;
                            }

        .termsofuse-link{
            background-color: white;
            min-height: 80px;
            position: relative;
            margin: 2em 15% 60px;
            padding: 0.5em 1em;
            border: solid 3px #db3d3d;
        }

                .termsofuse-link-title{
                    position: absolute;
                    display: inline-block;
                    top: -27px;
                    left: -3px;
                    padding: 0 9px;
                    height: 25px;
                    line-height: 25px;
                    font-size: 20px;
                    background: #db3d3d;
                    color: #ffffff;
                    font-weight: bold;
                    border-radius: 5px 5px 0 0;
                }

                            .termsofuse-link p{
                                margin: 10px 2px 0; 
                                padding: 0;
                            }

/* ----スライダー------------ */
  

.swiper-container {
    max-width: 700px;
    height: auto;
    margin: 10px auto 0;
  } 

  .swiper-container.character{
    max-width: 700px;
    height: auto;
    margin: 10px auto 0;
  } 



     

.swiper-container img{
    width: 100%;
  height: auto;
}

.swiper-container.character img{
    width: 50%;
  height: auto;
margin: 0 20% 0;
}



/* その他の3枚 */
.gallery-thumbs .swiper-slide {
    opacity: 0.4;
}

/* スポットライトが当たっている１枚 */
.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}  







/* -----説明文------------------------------- */

.details_text{
    margin: 30px 15% 10px;
    min-height: 150px;
    position: relative;
    background: rgb(36, 67, 161);
    box-shadow: 0px 0px 0px 5px rgb(36, 67, 161);
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: white;
}
.details_text:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: white #dff1f5 blueviolet;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

                .details_text h4{
                    margin: 15px 0 0; 
                    padding: 0;
                    text-align: center;
                    font-size: 23px;
                }

                .details_text p{
                            margin: 15px 30px 15px;
                        }

.contents_text{
    position: relative;
    padding: 0.5em 0.7em;
    margin: 2em 20% 0;
    background: rgb(36, 67, 161);
    box-shadow: 0px 0px 0px 5px rgb(36, 67, 161);
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    font-weight: bold;
    color: white;
}

.contents_text:after{
    position: absolute;
    content: '';
    top: 104%;
    left: 50%;
    border-width: 0 15px 15px 0;
    border: 15px solid transparent;
    border-top: 15px solid rgb(36, 67, 161);
    width: 0;
    height: 0;
}

                .contents_text h4{
                    margin: 15px auto 10px;
                   text-align: center;
                    font-size: 23px;
                }

                        .contents_text p{
                            margin: 15px 30px 15px;
                        }




.itemdl{
    background-color: rgb(36, 67, 161);
    width: 40%;
    min-height: 70px;
    padding: 0.5em 0.7em;
    margin: 30px auto 0;
    border: double 4px white;
    text-align: center;
    border-radius: 10px;
}

.itemdl p{
    font-size: 23px;
    color: white;
}

.itemdl:hover{
    opacity: .7;
    transform: scale(1.05);
}



.itemdl p:hover{
    transition: .5s ;
  transform: rotateX(360deg);
}





            

                    .main_img1{
                        text-align: center;
                    margin:100px 0px 50px 0px;
                    }

                    main img{
                        width:60%;
                    }

 



/*             

@media screen and (max-width: 1600px){
    body {
       
        grid-template:
        "... ...... ...... ...... ...... ...... ..." 
        "... header header header header header ..." 510px
        "... ...... ...... ...... ...... ...... ..." 30px
        "... left   ...... center ...... right  ..." 1fr
        "... ...... ...... ...... ...... ...... ..." 
        "... footer footer footer footer footer ..." 150px
        "... ...... ...... ...... ...... ...... ..."
        / auto 250px auto minmax(600px,1fr) auto 150px auto;
    }
}

   
   


@media screen and (max-width: 980px){
    body {
        
        width: auto;
        grid-template:
            "header header header"
            "center center center" 1fr
            "left   right  ....." 
            "footer footer footer" 150px;
        }

       

        .nav_header2 li{
            margin: 10px 0px 0px 40px;
            
        }

        .logo_header{
            font-size: 5px;
        }

        img{
            width: 60%;
        }

        aside {
            margin-left: 40px;
            margin-top: 15px;
            width: 200px;
            
            }
}
        
     */