@charset 'utf-8';
/* ケアの倫理カフェ */

.container { container-type:inline-size; container-name:carerinri; }

/* 見出し */
div.care_rinri h1 {  text-align:center; margin:0 auto; max-width:95vw; }
div.care_rinri h1 img { margin:auto; }

/* 共通項 */
div.flex { margin:auto; max-width:90vw; }

/* 看板 */
div.kanban { margin:auto auto 30px auto; padding:0 10px; max-width:960px; }
div.care_rinri div.kanban h1 { font-size:18px; font-weight:600; padding:0; }
div.kanban p { line-height:1.8; }

/* ニュース欄 */
div.care_news { background-color:#fff3b8; border-radius:10px; padding:20px 25px; margin:0 0 40px 0; }
div.care_news h2 { font-size:18px; font-weight:500; line-height:2; }
div.care_news h2::before { background-image:url("../img/care/icon_sakura.svg"); background-repeat:no-repeat; background-position:center center; background-size:20px; content:''; display:inline-block; margin:0 5px 0 0; height:20px; width:20px;  }
div.care_news ul { margin:0 10px; }
div.care_news ul li { font-size:14px; line-height:1.6; }
div.care_news ul li:last-child { margin:0 0 20px 0; }
ul.content_item { display:flex; flex-wrap:wrap; justify-content:space-around; align-items:flex-start; margin:0 auto 40px auto; }
ul.content_item li { font-weight:500; text-align:center; padding:10px; width:50%; }



ul.content_item li p { font-weight:600; letter-spacing:2.5px; }
/* ul.content_item li p::first-letter { font-size:1.5em; }
ul.content_item li:first-child p::first-letter { color:#37a34a; }
ul.content_item li:nth-child(2) p::first-letter { color:#eb6ea0; }
ul.content_item li:nth-child(3) p::first-letter { color:#00afcc; }
ul.content_item li:nth-child(4) p::first-letter { color:#f39800; } */
ul.content_item li div.ph { display:inline-block; margin:0 auto 10px auto; }
ul.content_item li a { transition:.3s; }
ul.content_item li a:hover { transition:.3s; opacity:0.7; }
ul.content_item li a img { max-height:250px; width:auto; }
div.haichi img { display:none; }

ul.content_item li a div.ph img { transition:.3s; }
ul.content_item li a:hover div.ph img { transition:.3s; transform:scale(1.2); }


ul.content_item li p { padding:20px 15px; background-color:#ffb7bf; color:#fff; margin:0 0 20px 0; position:relative; z-index:1; }
ul.content_item li:nth-child(2) p { background-color:#a3b9e0; }
ul.content_item li:nth-child(3) p { background-color:#f6ae54; }
ul.content_item li:nth-child(4) p { background-color:#d1de4c; }
ul.content_item li p::before, ul.content_item li p::after { content:''; position:absolute; top:50%; z-index:1; }
ul.content_item li p::before {   border-color: transparent transparent transparent #f2f1e9;
  border-style: solid;
  border-width: 30px 0px 30px 15px;
  left: 0;
  top: 0; }
ul.content_item li p::after { border-color: transparent #f2f1e9 transparent transparent;
  border-style: solid;
  border-width: 30px 15px 30px 0px;
  right: 0;
  top: 0; }

/* サブ */
div.news_ph { box-sizing:border-box; border:2px solid #ddd; overflow:hidden; margin:auto auto 10px auto; width:90vw; }
ul.sub_menu { margin:0 0 50px 0; }
ul.sub_menu li { padding:0; margin:20px 0; text-align:center; }
ul.sub_menu li p.click { font-size:12px; text-align:center; margin:5px auto auto auto; }

ul.sub_menu li a div.news_ph { position:relative; transition:.5s; z-index:1; }
ul.sub_menu li a div.news_ph::before { background-color:rgba(235,100,160,0.5); content:''; display:inline-block; top:0; left:0; position:absolute; opacity:0; transition:.5s; height:100%; width:100%; }
ul.sub_menu li a:hover div.news_ph { border:2px solid #eb6ea0; }
ul.sub_menu li a:hover div.news_ph::before { opacity:0.7; transition:.5s; }

div.cafe_link { margin:30px auto 0 auto; padding:0 10px; }
div.cafe_link p { line-height:2; text-align:right; }

@container carerinri ( min-width:960px ) { /* PC幅 */

/* 見出し */
div.care_rinri h1 { max-width:1200px; }
div.care_rinri h1 img { margin:auto; max-width:750px; }

/* 共通項 */
div.care_news { width:30%; }
ul.content_item { justify-content:center; padding:0; margin:0 auto 50px auto; width:50%; }

div.flex { display:flex; justify-content:center; align-items:center; flex-direction:row-reverse; max-width:1200px; }
div.sub_block { max-width:50%; }

div.haichi { display:flex; justify-content:space-between; align-items:flex-start; }
div.haichi p { font-size:14px; }
div.haichi img { display:inline-block; margin:0 0 0 20px; max-width:120px; }

/* ニュース欄 */
div.care_news {  }
ul.content_item li { padding:10px 10px; max-width:50%; width:auto; }

ul.content_item li a img { max-height:350px; width:auto; }
ul.content_item li p { margin:0 auto 30px auto; max-width:350px; }

/* サブ */
div.news_ph { margin:15px auto; width:auto; }
ul.sub_menu { display:flex; justify-content:center; flex-wrap:wrap; margin:auto auto 50px auto; max-width:1200px; }
ul.sub_menu li { padding:0 20px; max-width:650px; width:100%; }
ul.sub_menu li img { height:auto; max-width:100%; }

div.cafe_link { margin:50px auto 0 auto; max-width:1200px; }

}