@charset "utf-8";

#column .columntitle { max-width: 1100px; margin: 0 auto; padding: 30px 0 0;  }
#column .columntitle p { color: #353526; padding: 24px 0 40px; text-align: center; font-family:M PLUS 1p; text-shadow: 0 0 15px rgba(255,255,255,.45); font-weight:bold; font-size: 2.1rem; line-height: 1.3; letter-spacing: .2em; text-align: center; background: #fff url(../images/common/cplumn_tit_bg.jpg) center center no-repeat; background-size: cover; }
#column .columntitle p span { font-size: 1rem; letter-spacing: .5rem; }
#column .columntitle p small { font-size: .95rem; font-weight: 600; text-shadow: none; letter-spacing: .05em; font-family: Quicksand, sans-serif; color: rgba(0,0,0,0.4); border-bottom: 1px dashed rgba(0,0,0,0.6); }
#column .columntitle.sizeS p { padding: 20px 0; line-height: 1.3; font-size: 1.4rem; }
#column .columntitle.sizeS p em { line-height: 1.3; font-size: 1.4rem; border-bottom: 1px dashed rgba(0,0,0,0.4); color: #353526; font-weight: bold; }
#column .topicpath { max-width: 1100px; background: #E4E4DC; padding: 10px; line-height: 1; font-size: .7rem; margin: 0 auto 30px; }
#column .topicpath ul { white-space: nowrap; overflow: auto; width: 100%; }
#column .topicpath ul::after { content: ""; display: block; clear: both; }
#column .topicpath ul li { float: none; display: inline-block; line-height: 1; font-size: .7rem; color:#222; }
#column .topicpath ul li a { line-height: 1; font-size: .7rem; color:#222; }
#column .topicpath ul li a:hover { text-decoration: underline; }
#column .clmPickup { background: #D5DBDB; margin: 150px 0 -150px; }
#column .clmPickup .wrap { max-width: 1100px; margin: 0 auto; position: relative; top:-150px; }
#column .clmPickup .wrap h2 { font-size: 1.4rem; font-weight: normal; padding: 30px 0 30px 50px; background: url(../images/common/ico02.png) left center no-repeat; }
#column .clmPickup .wrap .inr { display: flex; justify-content: space-between; flex-wrap: wrap; }
#column .clmPickup .wrap .inr > a { display: block; width: calc((100% - 90px) / 4); margin: 0 0 30px; }
#column .clmPickup .wrap .inr > a dt { width: 100%; height: 17vh; overflow: hidden; position: relative; }
#column .clmPickup .wrap .inr > a dt img { width: 100%; height: 17vh; object-fit: cover; font-family: 'object-fit: cover;'; transition: all .8s; }
#column .clmPickup .wrap .inr > a ul { padding: 10px 0; font-size: .8rem; line-height: 1.1; }
#column .clmPickup .wrap .inr > a ul object a { color: #006CD8; padding: 0 0 0 15px; position: relative; letter-spacing: 0; }
#column .clmPickup .wrap .inr > a ul object a::before { content: ""; display: block; width: 6px; height: 6px; border:1px solid rgba(0,0,0,0.5); box-sizing: border-box; font-size: 1px; line-height: 1px; overflow: hidden; position: absolute; top:calc(50% - 3px); left: 5px; border-radius: 100px; }
#column .clmPickup .wrap .inr > a ul object a:hover { text-decoration: underline; }
#column .clmPickup .wrap .inr > a h3 { font-size: 1.1rem; font-weight: 500; }
#column .clmPickup .wrap .inr > a:hover dt img { transform: scale(1.15); }
#column .clmPickup .wrap .inr > a:hover h3 { color:#3091A9; }
#column article { background: #F2F4F4; padding:40px 0 70px;}
#column article > .inr { max-width: 1100px; margin: 0 auto; position: relative; }
#column article > .inr::after { content: ""; display: block; clear: both; }
#column article .main { width: 780px; float: left; }
#column article .sub { width: 240px; float: right; position: -webkit-sticky; position: sticky; top:80px; margin: 0; }
#column article .sub .clmCategory { margin: 0 0 30px; }
#column article .sub .clmCategory > h3 { font-size: 1.2rem; font-weight: 500; padding:10px 0 10px 40px; margin: 0 0 20px; line-height: 1; background: url(../images/common/ico03.png) left center no-repeat; }
#column article .sub .clmCategory li a { display: block; border-top:1px solid #CECEBF; padding: 15px 10px 15px 20px; line-height: 1; color:#444; position: relative; }
#column article .sub .clmCategory li a::before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 4px;  border-color: transparent transparent transparent #acac9d; position: absolute; top:calc(50% - 4px); left: 5px; }
#column article .sub .bnr { padding: 0 0 20px; }
#column article .sub .bnr li { padding: 0 0 10px; text-align: center; }
#column article .sub .clmMenuNew { margin: 0 0 30px; }
#column article .sub .clmMenuNew > h3 { font-size: 1.2rem; font-weight: 500; padding:10px 0 10px 40px; margin: 0 0 20px; line-height: 1; background: url(../images/common/ico04.png) left center no-repeat; }
#column article .sub .clmMenuNew .inr > a { display: block; width: auto; margin: 0 0 30px; }
#column article .sub .clmMenuNew .inr > a dt { width: 100%; height: 17vh; overflow: hidden; position: relative; }
#column article .sub .clmMenuNew .inr > a dt img { width: 100%; height: 17vh; object-fit: cover; font-family: 'object-fit: cover;'; transition: all .8s; }
#column article .sub .clmMenuNew .inr > a ul { padding: 10px 0; font-size: .8rem; line-height: 1.1; }
#column article .sub .clmMenuNew .inr > a ul object a { color: #006CD8; padding: 0 0 0 15px; position: relative; letter-spacing: 0; }
#column article .sub .clmMenuNew .inr > a ul object a::before { content: ""; display: block; width: 6px; height: 6px; border:1px solid rgba(0,0,0,0.5); box-sizing: border-box; font-size: 1px; line-height: 1px; overflow: hidden; position: absolute; top:calc(50% - 3px); left: 5px; border-radius: 100px; }
#column article .sub .clmMenuNew .inr > a ul object a:hover { text-decoration: underline; }
#column article .sub .clmMenuNew .inr > a h3 { font-size: 1.1rem; line-height: 1.3; font-weight: 500; }
#column article .sub .clmMenuNew .inr > a:hover dt img { transform: scale(1.15); }
#column article .sub .clmMenuNew .inr > a:hover h3 { color:#3091A9; }
#column article .main .clmlist { display: flex; justify-content: space-between; flex-wrap: wrap; }
#column article .main .clmlist > a { width: 100%; background: #fff; display: block; position: relative; margin: 0 0 10px; box-shadow: inset -1px -1px 0 rgba(0,0,0,0.1); }
#column article .main .clmlist > a.new::after { content: "NEW"; display: block; width: 40px; height: 40px; line-height: 40px; text-align: center;  color:#fff; font-size: 10px; background: #5CAF94; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1), 1px 1px 0 rgba(0,0,0,0.1); position: absolute; top: -5px; left: -5px; }
#column article .main .clmlist > a dl { display: flex; justify-content: space-between; }
#column article .main .clmlist > a dt { width: 240px; overflow: hidden; position: relative; float: left; }
#column article .main .clmlist > a dt img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; transition: all .8s; }
#column article .main .clmlist > a dd { width: calc(100% - 240px); padding: 15px; box-sizing: border-box; }
#column article .main .clmlist > a dd ul { padding: 10px 0 0; font-size: .8rem; line-height: 1.1; display: flex; flex-wrap: wrap; }
#column article .main .clmlist > a dd ul li { margin: 0 1em 0 0; }
#column article .main .clmlist > a dd ul { padding: 10px 0 0; font-size: .8rem; line-height: 1.1; }
#column article .main .clmlist > a dd ul object a { color: #006CD8; padding: 0 0 0 15px; position: relative; letter-spacing: 0; }
#column article .main .clmlist > a dd ul object a::before { content: ""; display: block; width: 6px; height: 6px; border:1px solid rgba(0,0,0,0.5); box-sizing: border-box; font-size: 1px; line-height: 1px; overflow: hidden; position: absolute; top:calc(50% - 3px); left: 5px; border-radius: 100px; }
#column article .main .clmlist > a dd ul object a:hover { text-decoration: underline; }
#column article .main .clmlist > a dd h3 { font-size: 1.2rem; line-height: 1.5; font-weight: 500; margin: 0; }
#column article .main .clmlist > a dd p { font-size: 1rem; line-height: 1.4; color: rgba(0,0,0,0.6); color: }
#column article .main .clmlist > a:hover dt img { transform: scale(1.15); color:#777; }
#column article .main .clmlist > a:hover h3 { color:#3091A9; }
#column article .main .recentEntry h2 { border-top:3px solid #5CAF94; font-size: 1.3rem; line-height: 1.25; padding: 30px 0 30px 40px; background: url(../images/common/ico01.png) left center no-repeat; }
#column article .main .recentEntry .clmlist > a:nth-child(-n+4) { width: calc((100% - 20px) / 2); margin: 0 0 20px; }
#column article .main .recentEntry .clmlist > a:nth-child(-n+4) dl { display: block; }
#column article .main .recentEntry .clmlist > a:nth-child(-n+4) dt { width: 100%; height: 20vh; float: none; }
#column article .main .recentEntry .clmlist > a:nth-child(-n+4) dd { width: 100%; padding: 20px; }
#column article .main .recentEntry .clmlist > a:nth-child(-n+4) dd h3 { font-size: 1.4rem; margin: 0 0 17px; }
#column article .main .recentEntry .clmlist { margin: 0; }
#column article .main .recentEntry > ul li a { margin: 0 auto 40px; display: block; padding: 12px 0; line-height: 1.25; text-align: center; color:#fff; font-weight: bold; background: #CFD0C8; transition: .3s; }
#column article .main .recentEntry > ul li a:hover { background: #aFb0a8; }
#column article .main .entrylist > ul { text-align: center; padding: 20px 0; margin: 0 0 30px; }
#column article .main .entrylist > ul li { display: inline-block; text-align: center; padding: 0 10px; }
#column article .main .entrylist > ul li a { margin: 0 auto 10px; display: inline-block; padding: 12px 0; width: 260px; line-height: 1.25; text-align: center; color:#fff; font-weight: bold; background: #CFD0C8; transition: .3s; }
#column article .main .entrylist > ul li a:hover { background: #aFb0a8; }
#column article .main .pagetitle { background: #E4E4DC; padding: 10px 10px 10px 15px; margin: 0 0 40px; line-height: 1.25; font-size: 1.25rem; }
#column article .main .pagetitle h1 { background: url(../images/common/ico02.png) left center no-repeat; padding: 10px 0 10px 40px; line-height: 1.25; font-size: 1.25rem; }
#column .categoryRecentEntry h2 { border-top:3px solid #5CAF94; font-size: 1.3rem; line-height: 1.25; padding: 30px 0 30px 40px; background: url(../images/common/ico01.png) left center no-repeat; }
#column .categoryRecentEntry { padding: 0 0 60px; }
#column .categoryRecentEntry .inr::after { content: ""; display: block; clear: both; }
#column .categoryRecentEntry .inr > a:nth-of-type(1) { display: block; width: 370px; float: left; }
#column .categoryRecentEntry .inr > a:nth-of-type(1) dt { overflow: hidden; position: relative;  }
#column .categoryRecentEntry .inr > a:nth-of-type(1) dt img { width: 100%; height: 20vh; object-fit: cover; font-family: 'object-fit: cover;'; transition: all .8s; }
#column .categoryRecentEntry .inr > a:nth-of-type(1) dd { padding: 20px 0; }
#column .categoryRecentEntry .inr > a:nth-of-type(1) dd h3 { font-size: 1.2rem; line-height: 1.5; font-weight: 500; margin: 0 0 10px; }
#column .categoryRecentEntry .inr > a:nth-of-type(1) dd p { font-size: 1rem; line-height: 1.4; color: rgba(0,0,0,0.6); margin: 0 0 10px; }
#column .categoryRecentEntry .inr > a:nth-of-type(1) dd li { font-size: .9rem; line-height: 1.4; color: rgba(0,0,0,0.4); }
#column .categoryRecentEntry .inr > a:nth-of-type(1):hover dt img { transform: scale(1.15); color:#777; }
#column .categoryRecentEntry .inr > a:nth-of-type(1):hover h3 { color:#3091A9; }
#column .categoryRecentEntry .inr > a:nth-child(n+2) { display: block; padding: 10px 0; width: calc(100% - 390px); float: right; border-top:1px solid rgba(0,0,0,0.1); }
#column .categoryRecentEntry .inr > a:nth-child(n+2)::after { content: ""; display: block; clear: both; }
#column .categoryRecentEntry .inr > a:nth-child(n+2) dt { width: 100px; height: 60px; overflow: hidden; position: relative; float: left;  }
#column .categoryRecentEntry .inr > a:nth-child(n+2) dt img { width: 100px; height: 60px; object-fit: cover; font-family: 'object-fit: cover;'; transition: all .8s; }
#column .categoryRecentEntry .inr > a:nth-child(n+2) dd { padding: 0 0 0 15px; overflow: hidden; }
#column .categoryRecentEntry .inr > a:nth-child(n+2) dd h3 { font-size: 1rem; letter-spacing: 0; line-height: 1.4; font-weight: 500; margin: 0 0 5px; }
#column .categoryRecentEntry .inr > a:nth-child(n+2) dd p { display: none; }
#column .categoryRecentEntry .inr > a:nth-child(n+2) dd li { font-size: .8rem; line-height: 1.4; color: rgba(0,0,0,0.4); }
#column .categoryRecentEntry .inr > a:nth-child(n+2):hover dt img { transform: scale(1.15); color:#777; }
#column .categoryRecentEntry .inr > a:nth-child(n+2):hover h3 { color:#3091A9; }
#column .detail h1 { font-size: 2rem; line-height: 1.1; font-weight: 600; padding: 0 0 40px; }
#column .detail h1 small { font-size: 1rem; line-height: 1.1; color:#777; letter-spacing: 0; }
#column .detail h1 small a { padding: 0 0 0 10px; font-size: 1rem; line-height: 1.1; color:#444; font-weight: normal; letter-spacing: 0; }
#column .detail h1 small a:hover { text-decoration: underline; }
#column .detail .cover { text-align: center; background: #fff; margin: 0 0 30px; }
#column .detail .cover img { max-width: 100%; height: auto !important; width: auto !important; }
#column .detail .content p { margin: 0 0 30px; font-size: 1.2rem; }
#column .detail .content h2 { background: #E4E4DC; padding: 20px; margin: 0 0 30px; line-height: 1.25; font-size: 1.4rem; }
#column .detail .content h3 { border-bottom: 1px solid #ACAC9D; padding: 15px 0; margin: 0 0 30px; font-size: 1.3rem; }
#column .detail .content ul { margin: 0 0 20px; font-size: 1.2rem; }
#column .detail .content ul li { margin: 0 0 10px; font-size: 1.2rem; padding: 0 0 0 20px; position: relative; }
#column .detail .content ul li::after { content: ""; width: 6px; height: 6px; background: #aaa; border-radius: 100px; display: block; position: absolute; top:calc(50% - 3px); left: 5px; }

#column article .main .clmMovies h2 { border-top:3px solid #5CAF94; font-size: 1.3rem; line-height: 1.25; padding: 30px 0 30px 40px; background: url(../images/common/ico01.png) left center no-repeat; }
#column article .main .clmMovies { margin: 0 0 60px; }
#column article .main .clmMovies h2 { border-top:3px solid #5CAF94; font-size: 1.3rem; line-height: 1.25; padding: 30px 0 30px 40px; background: url(../images/common/ico01.png) left center no-repeat; }
#column article .main .clmMovies .inr { display: flex; justify-content: space-between; flex-wrap: wrap; }
#column article .main .clmMovies .inr dl { width: calc((100% - 20px) / 2); background: #fff; margin: 0 0 10px; }
#column article .main .clmMovies .inr dd a { display: block; line-height: 1.25; padding: 15px; }
#column .yt { position: relative; padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/ height: 0; overflow: hidden; }
#column .yt iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#column article .main .clmItem { margin: 0 0 60px; }
#column article .main .clmItem h2 { border-top:3px solid #5CAF94; font-size: 1.3rem; line-height: 1.25; padding: 30px 0 30px 40px; background: url(../images/common/ico01.png) left center no-repeat; }
#column article .main .clmItem .inr { display: flex; flex-wrap:wrap; }
#column article .main .clmItem .inr a { display:block; width: calc((100% - 30px) / 4); background: #fff; padding: 10px 10px 50px 10px; margin: 0 5px 10px; position: relative; }
#column article .main .clmItem .inr a:nth-of-type(1),
#column article .main .clmItem .inr a:nth-of-type(5) { margin: 0 5px 10px 0; }
#column article .main .clmItem .inr a:nth-of-type(4),
#column article .main .clmItem .inr a:nth-of-type(8) { margin: 0 0 10px 5px; }
#column article .main .clmItem .inr a::after { content: "詳細はこちら"; font-size: 10px; color:#fff; background: #5E9E4D; text-align: center; width: 76px ; height: 20px; line-height: 20px; position: absolute; left: calc(50% - 38px); bottom: 15px; }
#column article .main .clmItem .inr a dt { text-align: center; }
#column article .main .clmItem .inr a dt img {width: 160px; height: 160px; object-fit: cover; font-family: 'object-fit: cover;'; }
#column article .main .clmItem .inr a dd h3 { padding: 10px 0; font-size: 1.1rem; font-weight: 500; line-height: 1.25; border-bottom: 1px solid #ddd; margin: 0 0 15px; }
#column article .main .clmItem .inr a dd p { line-height: 1.4; font-size: .9rem; color:#777; }
#column article .main .clmlink { background: #E4E4DC; padding: 30px; margin: 0 0 60px; }
#column article .main .clmlink h2 { font-size: 1.2rem; line-height: 1.25; padding: 0 0 20px; }
#column article .main .clmlink li a { display: block; padding: 13px 10px 13px 30px; background: #fff; margin: 0 0 5px; position: relative; line-height: 1.25; }
#column article .main .clmlink li a::before { content: ""; display: block; width: 0; height: 20px; border-left:3px solid #42994F; position: absolute; left: 10px; top:calc(50% - 10px); }
#column .clmPagenation { border-top:1px solid #CFD0C8; border-bottom:1px solid #CFD0C8; padding: 20px; margin: 0 0 20px; }
#column .clmPagenation ul { text-align: center; }
#column .clmPagenation ul li { display: inline-block; padding: 0 10px; }
#column .clmPagenation ul li a { display: inline-block; width: 280px; padding: 15px; line-height: 1.1; text-align: center; box-shadow: inset 0 0 1px rgba(0,0,0,1); transition: .3s; }
#column .clmPagenation ul li a:hover { background: rgba(0,0,0,0.4); color:#fff; border:none; box-shadow: none; }

#column .social { padding: 0 0 15px; }
#column .social * { vertical-align: top; margin: 0; padding: 0; line-height: 1px; }
#column .social ul::after { content: ""; display: block; clear: both; }
#column .social ul li { float: left; margin: 0 10px 0 0; }

.clmKeyword { margin: 0 0 40px; }
.clmKeyword * { box-sizing: border-box; }
.clmKeyword h3 { font-size: 12px; font-weight: bold; color: #aaa; margin: 0; padding: 0 0 6px; line-height: 1; }
.clmKeyword dl { display: flex; border:1px solid #ccc; background: #fff; box-shadow: inset 3px 3px 3px rgba(0,0,0,.05); }
.clmKeyword dl dt { width: calc(100% - 50px); }
.clmKeyword dl dt input { width: 100%; border: none; font-size: 16px; line-height: 30px; padding: 0; margin: 0; background: transparent; }
.clmKeyword dl dt input:focus { width: 100%; border: none; font-size: 16px; line-height: 30px; padding: 0; margin: 0; background: #ffe; }
.clmKeyword dl dd { width: 50px; }
.clmKeyword dl dd button { display: flex; align-items: center; justify-content: center; cursor: pointer; width: 100%; border: none; font-size: 12px; line-height: 30px; height: 30px; padding: 0; margin: 0; background: #5CAF94; color: #fff; font-weight: bold; }
.clmKeyword dl dd button:hover { background: #F18C10; }

/* ───────────────────────────────────────────────────────────────────────────
 1200px以下の動作
─────────────────────────────────────────────────────────────────────────── */

@media print, screen and (max-width:1200px){

#column .columntitle { padding: 20px 20px 0; }
#column .topicpath { margin: 0 20px; }
#column .clmPickup .wrap { margin: 0 20px }
#column article { padding: 40px 20px 70px; }
#column article .main { width: auto; float: none; }
#column article .sub { width: auto; float: none; }
#column article .sub .clmMenuNew .inr { display: flex; justify-content: space-between; flex-wrap: wrap; }
#column article .sub .clmMenuNew .inr > a { width: calc((100% - 20px) / 2); }
#column article .sub .clmCategory ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
#column article .sub .clmCategory ul li { width: 50%; }
#column .detail .content p img { max-width: 100%; height: auto; }
}

/* ───────────────────────────────────────────────────────────────────────────
 640px以下の動作
─────────────────────────────────────────────────────────────────────────── */

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

#column .columntitle p { font-size:1.5rem; }
#column .columntitle.sizeS p { font-size: 1.1rem; }
#column .columntitle.sizeS p em { font-size: 1.1rem; }
#column .clmPickup .wrap .inr > a { width: calc((100% - 10px) / 2); }

#column article .main .recentEntry .clmlist > a:nth-child(-n+4) { width: calc((100% - 10px) / 2); margin: 0 0 10px; }
#column .categoryRecentEntry .inr > a:nth-of-type(1) { width: auto; float: none; }
#column .categoryRecentEntry .inr > a:nth-child(n+2) { width: auto; float: none; }
#column article .sub .clmMenuNew .inr > a { width: calc((100% - 10px) / 2); }
#column article { padding: 20px 20px 70px; }
#column article .main .clmlist > a dd h3 { font-size: 1.1rem; line-height: 1.25; margin: 0 0 10px; }
#column article .main .pagetitle { margin: 0 0 20px; }
#column .detail h1 { padding: 10px 0 30px; }
#column article .main .clmlist > a dt { width: 100px; height: 100px; margin: 10px 0 0 10px; }
#column article .main .recentEntry .clmlist > a:nth-child(-n+4) dt { margin: 0; }
#column article .main .clmlist > a dd { width: calc(100% - 110px); padding: 10px; }
#column article .main .clmMovies .inr dl { width: calc((100% - 10px) / 2); }
#column article .main .clmItem .inr a { width: calc((100% - 10px) / 2); }
#column article .main .clmlink { padding: 15px 15px 10px; }
#column article .main .clmlink h2 { padding: 0 0 10px; }
#column .clmPagenation ul li a { width: 200px; margin: 5px auto; }
#column article .main .recentEntry .clmlist > a:nth-child(-n+4) dd { padding: 10px; }
#column article .main .recentEntry .clmlist > a:nth-child(-n+4) dd h3 { font-size: 1.1rem; }
}

/* ───────────────────────────────────────────────────────────────────────────
 400px以下の動作
─────────────────────────────────────────────────────────────────────────── */

@media print, screen and (max-width:400px){

#column article .main .clmMovies .inr dl { width: 100%; }
#column article .main .clmItem .inr a { width: 100%; }
#column article .sub .clmCategory ul li { width: 100%; }
#column article .main .recentEntry .clmlist > a:nth-child(-n+4) { width: 100%; }

}