/* フレーム設定-------------------------------------------------------------------------------- */

#adspecial_claris_202110{
padding: 0;
}


#adspecial_claris_202110.adspecial_type1{
max-width:none !important;
width:100% !important;
position:relative;
font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Meiryo UI",メイリオ, Meiryo, sans-serif;
}

footer{
margin-top:0;
}


.block_sponsored {
background-color:#fff;
/*padding: 25px 0;*/
text-align: center;
color:#fff;
}

.block_sponsored a{
color:#3aadc6;
}




/* headline-------------------------------------------------------------------------------- */


/*anime setting*/


@keyframes fade{
  0% {
    opacity: 0;}

  100% {
    opacity: 1;}

}



@keyframes line{
0%{
width:0;
}
100%{
width:100%;
}
}



@keyframes rotation{
  0%{ 

    transform:rotate(0);
}
  100%{ 

    transform:rotate(360deg);
}
}





.hero-area{
margin:0 auto;
height:500px;
background-color:#3aadc6;
position:relative;
z-index:-1;
}

.hero-area:before{
content:"";
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:url(/extra/claris_202110/media/head_parts.png) left top no-repeat;
opacity:0;
animation: slide 0.5s linear 0.2s forwards;
z-index:1;
}


.hero-area:after{
content:"";
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:url(/extra/claris_202110/media/head_img.png) right top no-repeat;
z-index:1;
}


.hero-area .title-area{
max-width:1000px;
position:relative;
z-index:1000;
}


.hero-area .title-area:before{
content:"";
position:absolute;
bottom:50px;
left:-30px;
width:0;
height:75px;
border-radius:25px;
background:rgba(55,186,214,0.7);
z-index:1;
animation: parts-line 0.8s linear 0.5s forwards;
}


@keyframes slide{
0%{
opacity:0;
transform:translateX(-60px);
}
100%{
opacity:1;
transform:translateX(0);
}
}



@keyframes parts-line{
0%{
width:0;
}
100%{
width:70%;
}
}


.hero-area h1{
padding:10% 7%;
font-size:240%;
color:#555;
text-align:left;
line-height:1.4;
position:relative;
z-index:1000;
animation: fade 0.5s linear 0.3s forwards;
opacity:0;
}

.hero-area h1 span{
font-size:120%;
/*color:#252525;*/
color:#fff;
}


/*old
.lead_block{
margin:20px 0 0 0;
color:#444;
font-size:16px;
font-weight:bold;
position:relative;
animation: fade 0.5s linear 0.6s forwards;
opacity:0;
}


.lead_block .frame{
background:rgba(255,255,255,.5);
margin:15px 35px;
padding:35px;
position:relative;
}

.lead_block .frame:after{
content:"";
position:absolute;
top:15px;
left:-35px;
width:15%;
height:5px;
background-color:#0b6bc4;
}

.lead_block .frame span{
color:#666;
}
*/



/*202210 add lead*/


.lead-area{
margin:0;
padding:20px;
background-color:#808080;
color:#fff;
font-size:16px;
font-weight:bold;
position:relative;
}

.lead-area p{
max-width:1000px;
margin:0 auto 10px;
text-align:left;
}



.lead-text {
    display: none;
}

.readmore {
    position: relative;
    width: 300px;
    margin: -12px auto;
padding:2px 0;
    display: block;
text-align:center;
background-color:#fff;
color:#fff;
    border: none;
    outline: 0;
    transition: .5s;
font-size:14px;
cursor: pointer;
border-radius:15px;
box-shadow:0 0 10px #cccccc;
}


.readmore:after{
    content: " ";
    position: absolute;
    top: 40%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -6px 0 0 -6px;
    border-top: 2px solid #858585;
    border-right: 2px solid #858585;
    transform: rotate(135deg);
    box-sizing: border-box;
    transition: .2s;
}



.readmore:hover{
background-color:#f0f0f0;
color:#f0f0f0;
}
 
.readmore:hover:after {
    border-top: solid 2px #858585;
    border-right: solid 2px #858585;
}
 
.on-click {
    margin: -12px auto 0 !important;
    color: transparent!important;

}

.on-click:after{
    content: " ";
    position: absolute;
    top: 60%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -6px 0 0 -6px;
    border-top: none;
    border-right: none;
    border-bottom: solid 2px #858585;
    border-left: solid 2px #858585;
    transform: rotate(135deg);
    box-sizing: border-box;
    transition: .3s;
}


.on-click:hover:after {
    top: 60%;
    border-top: none;
    border-right: none;
    border-bottom: solid 2px #858585;
    border-left: solid 2px #858585;
}


/*202210 add lead*/


/*202210 add news-area*/

.news-area{
background-color:#f5f5f5;
margin:80px auto 40px;
padding:35px 25px 10px;
border-radius:15px;
max-width:1300px;
position:relative;
}

.news-area .label{
position:absolute;
top:-20px;
left:25px;
background-color:#6bc24b;
color:#fff;
width:100px;
height:40px;
line-height:40px;
font-size:13px;
text-align:center;
border-radius:30px;
}


.news-area ul li{
position:relative;
margin:0 0 15px 0;
padding:0 0 0 25px;
}
.news-area ul li:before{
content:"";
position:absolute;
top:8px;
left: 0;
width: 10px;
height: 10px;
border-top: 3px solid #444;
border-right: 3px solid #444;
transform: rotate(45deg);
}


.news-area ul li:hover a{
color:#e0e0e0 !important;
}

.news-area ul li:hover:before{
transform: translateX(5px) rotate(45deg);
transition:.3s;
}


/*202210 add news-area*/



/* navigation-------------------------------------------------------------------------------- */

.navigation-area{
border-radius:25px;
background-color:#3aadc6;
max-width:1300px;
margin:0 auto;
}

.navigation-area ul{
display:flex;
}

.navigation-area ul li{
width:33.3%;
padding:25px 0;
text-align:center;
line-height:1.0;
font-size:140%;
font-weight:bold;
}

.navigation-area ul li span{
font-size:14px;
}

.navigation-area ul li.comingsoon{
color:rgba(255,255,255,0.4);
}


.navigation-area ul li a{
color:#fff;
display:block;
}

.navigation-area ul li a:hover{
color:#0a6377 !important;
}




/* contents-------------------------------------------------------------------------------- */



.category-area{
margin:0 auto;
padding:0 0 40px;
max-width:1050px;
position:relative;
}


.category-area h2{
margin:0 auto;
padding:0;
text-align:center;
color:#333;
}


.item_block{
margin:45px auto 50px;
}


.item_block ul.main_tile,
.item_block ul.contents_tile{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
position:relative;
}
.item_block ul.main_tile{
justify-content:space-between;
}

.item_block ul li{
padding:0 0 25px 0;
position:relative;
background-color:#f0f0f0;
border-radius:20px;
position:relative;
}


.item_block ul li.main{
margin:30px 0;
padding:15px;
width:47%;
}


.item_block ul.contents_tile:before{
content:"";
display: block;
width:22%;
height:0;
order:1;
}
.item_block ul.contents_tile:after{
content:"";
display: block;
width:22%;
}


.item_block ul li.contents,
.item_block ul li.contents_random{
margin:20px 0;
padding:15px;
width:22%;
}


.item_block ul li a{
display:block;
}

.item_block ul li:hover,
.item_block ul li a:hover{
background:#fff;
transition:0.3s;
}
.item_block ul li:hover{
box-shadow:0 0 15px #ccc;
}


.item_block ul li span{
font-size:14px;
}


.item_block ul li span.note{
display:block;
font-size:12px;
color:#a0a0a0;
}

.item_block ul li span.label{
text-align:center;
margin:0 2px;
padding:1px 10px;
color:#fff;
font-size:10px;
font-weight:bold;
border-radius:5px;
display:inline-block;
}

.item_block ul li span.theme{
background-color:#3aadc6;
}

.item_block ul li span.kinds{
background-color:#e1c250;
}


.item_block ul li span.industry{
background-color:#a0a0a0;
}


.item_block ul li img{
width:100%;
height:140px;
object-fit: cover;
margin:0 auto;
padding:0;
border-radius:15px;
display:block;
}


.item_block ul li.main img{
width:100%;
margin:0 auto;
padding:0;
display:block;
height:320px;
object-fit:cover;
object-position:center center;
}


.item_block ul li a:hover img{
filter: grayscale(100%);
transition:0.3s;
}


.item_block ul li img.vertical{
width:100%;
height:150px;
object-fit:cover;
object-position:center bottom;
}
.item_block ul li.main img.vertical{
height:300px;
}


.item_block ul li span.title{
font-size:90%;
font-weight:bold;
color:#444;
margin:20px 0 15px 0;
line-height:1.4;
display:block;
}
.item_block ul li.main span.title{
font-size:120%;
}


.item_block ul li span.caption{
font-size:100%;
font-weight:bold;
color:#666666;
margin:5px 0 0 0;
}


.item_block ul li a:hover span{
transition:0.3s;
}

.item_block ul li a:hover span.title{
color:#999;
}


/*old
.info-area,
.inquiry-area{
background-color:#f0f0f0;
border-radius:20px;
margin:0 auto 5%;
padding:60px 35px 40px;
max-width:1050px;
position:relative;
}



.info-area:after{
content:"Claris のイベント・セミナー";
position:absolute;
top:-25px;
left:0;
width:30%;
padding:10px;
background-color:#52c166;
color:#fff;
text-align:center;
border-radius:15px;
font-size:20px;
}

.inquiry-area:after{
content:"お問い合わせ";
position:absolute;
top:-25px;
left:0;
width:20%;
padding:10px;
background-color:#a0a0a0;
color:#fff;
text-align:center;
border-radius:15px;
font-size:20px;
}

.info-area span,
.inquiry-area span{
font-weight:bold;
}


.info-area ul{
list-style:none;
}

.info-area ul li{
margin:0;
position:relative;
}



.info-area a,
.inquiry-area a{
color:#3aadc6 !important;
}

.info-area ul li a:hover,
.inquiry-area a:hover{
color:#ccc !important;
}



.info-area .info_btn a{
display:block;
border-radius:50px;
background-color:#3aadc6;
color:#fff !important;
margin:10px auto 0;
padding:10px;
text-align:center;
width:300px;
transition:.3s;
}

.info-area .info_btn a:hover{
background-color:#ccc;
color:#fff;
}*/






/* 202210 add クラリスをもっと知ろう */

.more-area{
width:100% !important;
background-color:#e0e0e0;
}

.more-area .category-area{
max-width:1300px;
padding:0 0 60px;
}

.more-area h2{
position:absolute;
top:-5px;
left:20%;
/*background-color:#6bc24b;*/
background-color:#e1c250;
color:#fff;
margin:-25px auto 25px;
padding:10px;
text-align:center;
border-radius:20px;
width:60%;
}


.more-area p{
color:#444;
font-size:16px;
line-height:1.5;
padding:80px 10px 40px;
text-align:center;
}

.more-area ul{
display:flex;
justify-content:space-around;
max-width:1300px;
}

.more-area ul li{
margin:5px;
}

.more-area ul li.more-panel-side{
width:17.5%;
height:300px;
}

.more-area ul li.more-panel-main01{
width:30%;
height:300px;
}

.more-area ul li.more-panel-main02{
width:35%;
height:300px;
}

.more-area ul li div.more-panel-set{
width:100%;
height:145px;
margin:0;
}

.more-area ul li div.more-panel-set:nth-child(2){
margin:10px 0 0;
}

.more-area ul li a{
display: block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}

.more-area ul li a:before{
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 80%;
background: linear-gradient(to bottom, rgba(15, 15, 15, 0) 0, rgba(15, 15, 15, 0.3) 40%, rgba(15, 15, 15, 1) 100%);
display: block;
}

.more-area ul li img{
object-fit: cover;
object-position: 50% 50%;
border:none;
width:100%;
height:100%;
}

.more-area ul li:hover img{
box-shadow:none;
transform:none;
}

.more-area ul li span{
position:absolute;
bottom:0;
left:0;
padding:5px 10px 10px;
color:#fff;
line-height:1.2;
font-size:100%;
font-weight:bold;
}


.more-area ul li a:hover span{
transition:0.3s;
color:#666;
}


/* 202210 add クラリスをもっと知ろう */



.banner-area{
margin:30px auto 45px;
padding:0 15px;
text-align:center;
}

.banner-area img:hover{
opacity:0.8;
transition:0.3s;
}





/* responsive -------------------------------------------------------------------------------- */



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

/*old
.hero-area{
margin:0 auto;
padding:3% 4% 5% 6%;
}


.hero-area .title-area{
max-width:750px;
}

.hero-area{
background-size:40%;
background-position:95% bottom !important;
}


.navigation-area{
width:90%;
}
*/


.hero-area .title-area{
max-width:800px;
}


}


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



.hero-area:after{
background-position:right top;
background-size:60%;
}


.hero-area h1{
font-size:200%;
line-height:1.4;
}


/*.hero-area .object{
position:absolute;
top:35%;
right:15%;
animation: rotation 3.0s linear 2.0s infinite;
}

.hero-area .object img{
width:100px;
}*/


.hero-area .title-area{
max-width:600px;
}



.item_block ul li{
width:21%;
}


.item_block ul li.main{
width:45%;
}



}



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


/*.hero-area{
padding:3% 5%;
background:url(/extra/claris_202110/media/head_illust_sp.png) 90% top no-repeat;
background-size:30%;
}*/

/*.hero-area .object{
display:none;
}*/


/*.hero-area:before{
width:500px;
background:rgba(82,193,102,0.15);
}*/


/*.hero-area:after{
width:300px;
left:10px;
background:rgba(58,173,191,0.2);
}*/



.hero-area{
height:350px;
}

.hero-area h1{
font-size:160%;
padding:3% 5%;
}

.hero-area:before{
background-size:cover;
}

.hero-area:after{
background-position:right bottom;
backcgound-size:40%;
}

.hero-area .title-area{
max-width:100%;
}

.hero-area .title-area:before{
bottom:20px;
height:50px;
border-radius:15px;
}


@keyframes parts-line{
0%{
width:0;
}
100%{
width:40%;
}
}



.lead_block{
padding-bottom:5%;
text-shadow:0 0 5px #fff;
}

.navigation-area,
.news-area{
width:95%;
}

.navigation-area ul li{
font-size:100%;
}


.item_block{
padding:0 3%;
}

.item_block ul li.main{
width:48%;
padding:15px;
}

/*.item_block ul li.main img{
height:420px;
}*/


.item_block ul li.main img.vertical{
height:200px;
}


.item_block ul li.contents,
.item_block ul li.contents_random{
width:30%;
}

.item_block ul:before{
content:"";
display: block;
width:30%;
height:0;
order:1;
}
.item_block ul:after{
content:"";
display: block;
width:30%;
}


.info-area,
.inquiry-area{
margin:0 3% 10%;
}


.info-area:after,
.inquiry-area:after{
width:50%;
}


.more-area ul{
display:block;
}

.more-area ul li,
.more-area ul li.more-panel-side,
.more-area ul li.more-panel-main01,
.more-area ul li.more-panel-main02{
width:90%;
height:100%;
margin:0 auto 15px;
}

.more-area ul li div.more-panel-set{
width:100%;
height:100%;
}

.more-area ul li span{
font-size:120%;
}



}





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



.hero-area{
height:250px;
/*padding:5% 5% 3% 5%;*/
background-position:left center;
}

.hero-area h1{
font-size:120%;
}

.hero-area .title-area:before{
display:none;
}


.lead_block{
font-size:14px;
padding:0 0 10%;
}


.navigation-area{
border-radius:20px;
}

.navigation-area ul{
display:block;
}

.navigation-area ul li{
width:100%;
}


.category-area{
margin:0 auto 3%;
}


.category-area h2{
font-size:130%;
width:150px;
height:130px;
line-height:130px;
}


.item_block{
padding:4%;
}



.item_block ul li{
width:100%;
}

.item_block ul li.contents,
.item_block ul li.contents_random{
width:100%;
}

.item_block ul li.main{
width:100%;
}

.item_block ul li img,
.item_block ul li img.vertical{
height:200px;
}


.item_block ul li a span{
font-size:90%;
}


.item_block ul li img{
width:100% !important;
}


.item_block ul li span.label{
margin:0 auto;
}

.item_block ul li span.title{
margin:20px 0 0 0;
font-size:90%;
}

.item_block ul li span.caption,
.item_block ul li span.date{
font-size:90%;
padding:15px;
}


.item_sponsor ul li{
margin:45px auto 0;
}

.info-area:after{
width:80%;
}



}




/* ヘッダー＆フッター広告表記 2024～
-------------------------------------------------------------------------------------------------------*/


.header_sponsored_area{
    width:100%;
    background-color:#fff;
    color:#000;
    font-size:14px;
    text-align:right;
    padding:15px 20px;
    position:relative;
    z-index:1000;
}

.header_sponsored_area span{
    margin:0;
    line-height:1.3;
    display:block;
}


.block_sponsored_area{
    clear:both;
    background-color:#fff;
    color:#000;
    font-size:14px;
    border:1px solid #000;
    margin:25px auto;
    padding:15px 15px 10px;
    max-width:760px;
    position:relative;
    z-index:1000;
}

.block_sponsored_area span{
    margin:5px 0;
    text-align:left;
    display:block;
}


.block_sponsored_area:before{
    display: block;
    content: "PR";
    position: absolute;
    top: -12px;
    left: 30px;
    width: 40px;
    height: 30px;
    text-align: center;
    background-color: #fff;
}


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

.block_sponsored_area{
margin:25px;
}


}