@charset "utf-8";


.contents-topics {
    position: relative;
    z-index: 1;
    height:800px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    width:auto;
     background  : linear-gradient(#ffffff, #fffaf0, #ffffff);
    }

@media (max-width: 768px){
.contents-topics {
    position: relative;
    z-index: 1;
    height:900px;
    font-size:60px;
    padding: 20px 20px;
    text-align :center;
    border:0px solid #f08080;
    border-radius: 0px;
    width:auto;
 background  : linear-gradient(#ffffff, #fffaf0, #ffffff);
    }
}

/* トピックス */

.orange-topics01 { grid-area: 1 / 1 / 2 / 7;
    z-index: 1;
}

.orange-topics01 img{
    width: 200px;
}

.orange-topics00 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr 0.5fr repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: 100%;
height: 800px;
 font-family:'Roboto','Noto Serif JP', serif, cursive;
 background  : linear-gradient(#ffffff, #fffaf0, #ffffff);
border: solid 1px orange;
border-radius: 20px;
}

.orange-topics02 { grid-area: 2 / 1 / 3 / 3;
 background:transparent;
z-index: 1;
opacity: 1;
text-align: center;
padding: 20px;
color: #333333;
font-size: 16px;
letter-spacing: 2px;
 font-family:'Roboto','Noto Serif JP', serif, cursive;
}

.orange-topics03 { grid-area: 3 / 2 / 5 / 4; 
padding-right: 20px;}

.orange-topics03 img{
    width: 400px;
}

.orange-topics04{ grid-area: 3 / 4 / 5 / 6;
padding-left: 20px;
}

.orange-topics04 img{
    width: 400px;
}

.orange-topics05 { grid-area: 5 / 2 / 6 / 6; 
font-size: 16px;
}

@media (max-width: 768px){
.orange-topics01 { grid-area: 1 / 1 / 2 / 6;
    z-index: 1;
}

.orange-topics01 img{
    width: 200px;
}

.orange-topics00 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: 100%;
height: 800px;
 font-family:'Roboto','Noto Serif JP', serif, cursive;
 background  : linear-gradient(#ffffff, #fffaf0, #ffffff);
border: solid 1px orange;
border-radius: 20px;
}

.orange-topics02 { grid-area: 2 / 1 / 3 / 5; 
 background:transparent;
z-index: 1;
opacity: 1;
text-align: left;
padding: 20px;
color: #333333;
font-size: 16px;
letter-spacing: 2px;
 font-family:'Roboto','Noto Serif JP', serif, cursive;
}

.orange-topics03 { grid-area: 3 / 2 / 5 / 5;
padding-right: 0px;
}

.orange-topics03 img{
    width: 200px;
}

.orange-topics04{ grid-area:5 / 2 / 7 / 5; 
padding-left: 0px;
}

.orange-topics04 img{
    width: 200px;
}

.orange-topics05 { grid-area: 7 / 1 / 8 / 6;
font-size: 14px;
text-align: center;
padding: 10px;
}

    
}