@charset "utf-8";

/*------------------------------
  共通
------------------------------*/
.column_wrap { padding: 0; }
.column_title { padding-top: 80px; color: #FFF; background-color: #00b097; }

/*------------------------------
  column
------------------------------*/
.column_title.list { padding: 80px 1em .5em 1em; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.column_title.list h2 { margin-right: 1em; font-size: 2em; letter-spacing: .05em; display: block; }
.column_title.list .read { flex-grow: 1; }
.column_title.list .frequency { padding: .25em .5em; margin: .5em; font-size: .875em; border: #FFF double 2px; border-radius: .25em; }

.column_wrap.list .tit { padding: .3em 0 0 2.2em; font-size: 1.5em; font-weight: 600; letter-spacing: .1em; line-height: 3em; color: #00b097; background: url(../img/ico/ico_kaeru_green.svg) 0 50% no-repeat; background-size: 1.8em; }

/*-- パンくずリスト調整 --*/
.column_wrap.list .kaeru_bread { padding-top: 0; background-color: #d9efe4; }

/*-- TOP STORY --*/
.column_top_story { padding: 3em 0 4em 0; background: #d9efe4 url(../img/bg_column_top_story.jpg) left -1em bottom -7em no-repeat; background-size: 18em; }
.column_top_list { width: 100%; height: auto !important; display: block !important; position: relative; }
.column_top_list .slick-track { height: auto !important; padding: 0; margin: 0; display: flex !important; float: none !important; }
.column_top_list .slick-dots { width: 90%; max-width: 400px; padding: 0; margin: 0 auto; list-style: none; display: flex !important; justify-content: space-between; position: absolute; bottom: -3em; left: 0; right: 0; }
.column_top_list .slick-dots li { height: 2px; margin: 0 .5em; background-color: rgba(77, 122, 95, 0.3); flex: 1; transition: background-color 0.5s ease; }
.column_top_list .slick-dots li.slick-active { background-color: #00b097; }
.column_top_list .slick-dots li button { display: none; }
.column_top_body { max-width: 1200px; min-width: 320px; width: 100%; margin: 0 auto; }
.column_top_body a { display: flex; justify-content: center; position: relative; }
.column_top_body a .update { font-family: Verdana, sans-serif; font-weight: 600; color: #6CA; background-color: #FFF; position: absolute; top: .5em; left: .5em; z-index: 10; }
.column_top_body a .update span { padding: 0 .5em; text-align: center; display: block; }
.column_top_body a .update .month { font-size: 1.25em; color: #FFF; background-color: #6CA; transition: .15s ease-out; }
.column_top_body a .update .day { font-size: 2em; transition: .15s ease-out; }
.column_top_body a .image { max-width: 640px; width: 53.333%; object-fit: cover; object-position: top; transition: .15s ease-out; }
.column_top_body a .data { width: 46.667%; padding: 1em; font-weight: 400; color: #444; position: relative; }
.column_top_body a .data .category { padding: .1em .5em; font-size: .8em; color: #d9efe4; background-color: #6CA; border-radius: .3em; display: inline-block; transition: .15s ease-out; }
.column_top_body a .data h3 { font-size: 2em; color: #00b097; transition: .15s ease-out; }
.column_top_body a .data .summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.column_top_body a .data .date { font-size: .9em; color: #666; }
.column_top_body a .data .more { margin-top: .5em; line-height: 2em; text-align: center; color: #00b097; border-top: #00b097 solid 1px; transition: .15s ease-out; }
.column_top_body a:hover .update .month { background-color: #FD6; }
.column_top_body a:hover .update .day { color: #FD6; }
.column_top_body a:hover .image { filter: saturate(120%) brightness(80%); opacity: 0.8; animation: shake .125s linear 2; }
.column_top_body a:hover .data .category { color: #FFF; background-color: #FD6; }
.column_top_body a:hover .data h3 { color: #DA2; }
.column_top_body a:hover .data .more { color: #DA2; border-top-color: #DA2; }

/*-- COLUMN MENU --*/
.column_menu { max-width: 1680px; min-width: 300px; width: 96%; margin: 0 auto; }
.column_menu ul { width: 86%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; }
.column_menu li { width: 23%; margin: 0 1%; }
.column_menu li a { position: relative; }
.column_menu li a img { width: 100%; height: 6em; background: #ccc; }
.column_menu li a h4 { width: 96%; height: 2em; margin: auto; font-size: 1.25em; letter-spacing: .1em; line-height: 2em; text-align: center; color: #FFF; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.column_menu li p { padding-left: 1.5em; background: url(../img/ico/ico_headline1_black.svg) left .6em top 50% no-repeat; background-size: .5em; color: #444; }

/*-- Recently Item --*/
.column_list { padding: 3em 2%; }
.column_list .tit { max-width: 1680px; min-width: 300px; width: 100%; margin: 0 auto; }
.column_list ul { max-width: 1680px; min-width: 300px; width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; }
.column_list ul li { width: 23%; margin: 1em 1%; }
.column_list a dt { position: relative; } 
.column_list a dt img { width: 100%; object-fit: cover; transition: .15s ease-out; }
.column_list a dt .label { padding: .25em .75em; font-size: .8em; line-height: 1.5em; color: #FFF; background-color: rgba(0,176,151,0.8); border-radius: 0 .35em 0 0; position: absolute; left: 0; bottom: 0; transition: .15s ease-out; }
.column_list a dd { color: #444; }
.column_list a dd h3 { font-weight: 400; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; transition: .15s ease-out; }
.column_list a dd .update { font-size: .8em; color: #666; transition: .15s ease-out; }
.column_list a:hover dt { animation: shake .125s linear 2; }
.column_list a:hover dt img { filter: saturate(120%) brightness(80%); }
.column_list a:hover dt .label { background-color: rgba(221,170,34,0.8); }
.column_list a:hover dd h3, .column_list a:hover dd .update { color: #DA2; }

/*-- NEW badge --*/
.column_wrap .new_badge { width: 4em; height: 4em; font-family: Verdana, sans-serif; font-size: .75em; font-weight: 600; line-height: 4em; text-align: center; color: #FFF; background-color: rgba(0,176,151,0.9); clip-path: polygon( 50% 0%, 55% 10%, 65% 5%, 69% 16%, 79% 13%, 82% 23%, 92% 25%, 88% 35%, 98% 43%, 91% 50%, 98% 57%, 88% 65%, 92% 75%, 82% 77%, 79% 87%, 69% 84%, 65% 95%, 55% 90%, 50% 100%, 45% 90%, 35% 95%, 31% 84%, 21% 87%, 18% 77%, 8% 75%, 12% 65%, 2% 57%, 9% 50%, 2% 43%, 12% 35%, 8% 25%, 18% 23%, 21% 13%, 31% 16%, 35% 5%, 45% 10% ); z-index: 1; transition: .15s ease; }
.column_wrap .column_top_story .new_badge { background: linear-gradient(45deg, #A72, #FD6); display: inline-block; }
.column_wrap .column_list .new_badge { position: absolute; right: -0.75em; top: -1.5em; }
.column_wrap a:hover .new_badge { background: rgba(221,170,34,0.9); }

/*-- explanation --*/
.explanation { width: 90%; max-width: 980px; padding: 2em 8em 2em 5em; margin: 4em auto; background: #ececec url(../img/bg_column_explanation.jpg) 100% 50% no-repeat; background-size: contain; border-radius: .5em; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; }
.explanation p { width: calc(100% - 10em); padding: 0 0 0 3.5em; color: #444; background: url(../img/ico/ico_q_green.svg) 0 50% no-repeat; background-size: 3em; }
.explanation span { width: 8em; height: 2em; padding: .25em .5em; color: #FFF; background-color: #00b097; border-radius: .25em; display: block; }




/*------------------------------
  column_detail
------------------------------*/
/*-- タイトル --*/
.column_title.detail { display: flex; justify-content: space-between; position: relative; }
.column_title.detail h2 { max-width: 92em; width: 70%; height: 100%; padding: 2em 0 4em 0; }
.column_title.detail h2 .tit { padding: 0 .2em 0 10%; font-size: 3.5em; letter-spacing: .1em; line-height: 1.2em; }
.column_title.detail h2 .label { width: 70%; padding: .2em 0 .2em calc(7% + .5em); font-size: 1.5em; font-weight: 400; color: #AED; border-top: #AED 1px solid; display: block; position: absolute; bottom: 0; z-index: 1; }
.column_title.detail h2 .label span { padding-left: 1.75em; background: url(../img/ico/ico_bookmark2_lightgreen.svg) left 0 top 50% no-repeat; background-size: 1.5em; }
.column_title.detail .thumb { max-width: 640px; width: 30%; max-height: 360px; object-fit: cover; filter: contrast(70%) brightness(120%); mix-blend-mode: multiply; } 
.column_title.detail .back_btn { padding: .75em .65em .75em 1.2em; color: #00b097; background-color: #AED; background-image: url(../img/ico/ico_arl_green.svg); background-position: left .3em top 50%; background-repeat: no-repeat; background-size: .6em; border-radius: 0 .5em .5em 0; display: block; position: absolute; bottom: 1.5em; left: 0; z-index: 2; }
.column_title.detail .back_btn:hover { padding: .75em .5em .75em 1.75em; background-color: #FFF; background-position: left .8em top 50%; }
/*-- パンくずリスト調整 --*/
.column_wrap.detail .kaeru_bread { width: 70%; padding-top: 0; }
/*-- 記事構造 --*/
.column_body { width: 100%; display: flex; }
.column_main { min-width: 720px; width: 70%; margin: 0 auto 2em 0; }
.column_main .update { width: 96%; padding: .5em; margin: 2em auto 0 auto; text-align: right; color: #6CA; border-bottom:  #AED solid 1px; }
.column_main .update a .category { padding: .25em .75em; margin-left: 1em; font-size: .875em; line-height: 1em; color: #FFF; background-color: #6CA; border-radius: .25em; display: inline-block; }
.column_main .update a:hover .category { background-color: #DA2; animation: shake .1s linear 2; }
.column_main .body_inner { font-size: 1.125em; color: #444; }
/*-- 記事本文 --*/
.column_main .body_inner h3 { max-width: 860px; width: 98%; margin: 4em auto 1em auto; padding: 0 .5em .25em 1.5em; font-size: 1.75em; font-weight: 600; line-height: 1.2em; text-align: center; color: #46C; position: relative; }
.column_main .body_inner h3::before { content: ""; width: 1.37em; height: 1.06em; background: url(../img/ico/ico_book_blue.svg) 50% 50% no-repeat; background-size: 100%; position: absolute; left: .2em; bottom: .2em; }
.column_main .body_inner h3::after { content: ""; width: calc(100% - 1.125em); border-bottom: #46C 2px solid; position: absolute; right: 0; bottom: 0; }
.column_main .body_inner h4 { max-width: 840px; width: 94%; padding: .5em 1em .5em 2em; margin: 3em auto 0 auto; font-size: 1.2em; font-weight: 600; color: #FFF; background-image: url(../img/ico/ico_headline2_white.svg), linear-gradient(to Right, #00b097, #AED); background-position: left 1em top 50%, 50% 50%; background-repeat: no-repeat, no-repeat; background-size: .6em, 100%; border-radius: .25em; }
.column_main .body_inner h5 { max-width: 840px; width: 94%; margin: 2em auto 0 auto; padding-left: 2em; font-size: 1.2em; font-weight: 600; color: #6CA; background: url(../img/ico/ico_headline1_lightgreen.svg) left 1em top 50% no-repeat; background-size: .6em; }
.column_main .body_inner p { max-width: 860px; width: 98%; padding: 0 1em 0 2em; margin: 1em auto 1.5em auto; line-height: 2em; }
.column_main .body_inner a, .column_main .body_inner span { margin: 0 .25em; display: inline-block; }
.column_main .body_inner a { padding-right: 1em; font-weight: 600; color: #48E; background-image: url(../img/ico/ico_out_blue.svg); background-position: 100% 36%; background-repeat: no-repeat; background-size: .8em; }
.column_main .body_inner a:hover { color: #DA2; background-image: url(../img/ico/ico_out_yellow.svg); animation: pyon .15s ease-out 1; }
.column_main .body_inner sup, .column_main .body_inner sub { color: #00b097; }
.column_main .body_inner .red { color: #D68; }
.column_main .body_inner .green { color: #6CA; }
.column_main .body_inner figure { max-width: 840px; min-width: 280px; width: 76.2146%; margin: 1em auto 1em auto; }
.column_main .body_inner figure img { width: 100%; border-radius: .25em; }
.column_main .body_inner figure figcaption, .column_main .body_inner .caption { margin: .5em 0 2em 1em; color: #00b097; }
.column_main .body_inner ol, .column_main .body_inner ul { max-width: 860px; width: 98%; padding-left: 2em; margin: .5em auto .5em auto; text-indent: -1em; }
.column_main .body_inner li { margin: 1em auto 1em 2em; font-size: .888em; line-height: 1.75em; }
.column_main .body_inner li b, .column_main .body_inner li strong { font-size: 1.125em; color: #6CA; }
.column_main .body_inner dl { max-width: 860px; width: 98%; padding: 2em 7.4%; margin: .5em auto .5em auto; background-color: #d9efe4; border-radius: .5em; }
.column_main .body_inner dl h3, .column_main .body_inner dl h4, .column_main .body_inner dl h5 { margin-top: 0; }
/*-- 目次 --*/
#cl { max-width: 774px; width: 90%; padding: 0; margin: 3em auto; background: #DDD; border-radius: .5em; position: relative; }
#cl input[ type="checkbox" ] { display: none; }
#cl label.ac_tit { width: 4em;  height: 2.4em; font-size: .8em; font-weight: 600; color: #999; border-color: #999; border-width: 2px;  border-style: solid;  border-radius: .5em; display: block; position: absolute; right: .75em; top: 1em; z-index: 10;  cursor: pointer; filter: drop-shadow(0 1px 0 #FFF); }
#cl label.ac_tit span { padding: .2em 0; line-height: 2em; text-align: center; display: none; }
#cl label.ac_tit:hover { color: #46C; border-color: #46C;; }
#cl input[ type="checkbox" ] ~ label.ac_tit span.close { display: block; }
#cl input[ type="checkbox" ]:checked ~ label.ac_tit span.close { display: none; }
#cl input[ type="checkbox" ]:checked ~ label.ac_tit span.open { display: block; }
#cl h3 { width: 100%; padding: 1.5em 0 .5em 0; margin: 0; font-size: 1em; border-width: 1px; }
#cl h3::before, #cl h3::after { display: none; }
#cl ul { width: 100%; max-height: 2000px; padding: 2em 3em; margin: 0; text-indent: 0; background: #efefef; border-radius: 0 0 .5em .5em; display: block; overflow: hidden; transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; }
#cl li { width: 100%; padding: 0; margin: 1em 0; text-indent: 0;  position: relative; }
#cl li.h3 { margin-top: 3em; }
#cl li.h3::before { content: ''; width: 100%; height: 1px; padding: 0; margin: 0; background-color: #48E; position: absolute; left: 0; top: -1.5em; }
#cl li.h3:first-child { margin-top: 1em; }
#cl li.h3:first-child::before { display: none; }
#cl li.h4 { padding-left: 3em; }
#cl li.h5 { padding-left: 5em; }
#cl li a { position: relative; }
#cl li.h4 a::before, #cl li.h5 a::before { content: ""; width: 1em; height: 1px; background-color: #48E; position: absolute; left: -2em; top: .75em; }
#cl li.h4 a::after, #cl li.h5 a::after { content: ""; width: 1px; height: .75em; background-color: #48E; position: absolute; left: -2em; top: 0; }
#cl input[ type="checkbox" ]:checked ~ ul { max-height: 0; padding-top: .5em; padding-bottom: .5em; background: linear-gradient(to Top, #efefef 80%, #CCC); }
#cl input[ type="checkbox" ]:checked ~ ul li { margin: 0; }
#cl input[ type="checkbox" ]:checked ~ ul li a { display: none; }
#cl input[ type="checkbox" ]:checked ~ ul li.h3::before { display: none; }

/*-- サイドカラム --*/
.column_side { width: 30%; padding: 3em; background-color: #ececec; border-top: #FFF solid 1px; display: block; }
.column_side .side_list { min-width: 240px; width: 80%; margin: 0 auto; }
.column_side a.side_link { min-width: 240px; width: 70%; padding: .75em; margin: 1.5em auto; text-align: center; color: #FFF; background-color: #6CA; border-radius: .5em; display: block; }
.column_side a.side_link:hover { background-color: #DA2; }
.column_side .tit { width: 100%; margin: 2em 0 .5em 0; color: #00b097; border-bottom: #00b097 solid 2px; }
.column_side .tit span { margin-left: 1em; font-size: .8em; font-weight: 400; color: #AAA; }
.side_list li { max-width: 492px; width: 96%; margin: .5em auto 1em auto; }
.side_list li dt img { width: 100%; object-fit: cover; }
.side_list li dd { padding-top: .25em; position: relative; }
.side_list li dd .genre { padding: .25em .5em; font-size: .8em; color: #FFF; background-color: rgba(0,176,151,0.8); border-radius: 0 .5em 0 0; position: absolute; top: -2em; }
.side_list li a { color: #666; display: block; }
.side_list li a:hover { color: #DA2; animation: shake .1s linear 2; }
.side_list li a:hover dt img { filter: brightness(0.6); }
.side_list li a:hover dd .genre { background-color: rgba(221,170,34,0.8); }


/*------------------------------
  MediaQuery
------------------------------*/
/*-- iPad pro --*/
@media screen and (min-width:1024px) and (max-width:1280px){
  /*-- column --*/
  .column_top_story { background-position: right 0 bottom -4em; background-size: 12em; }
  .column_list ul { width: 94%; }
  .column_list ul li { width: 31.333%; }

  /*-- column_detail --*/
  .column_side { padding-left: 1.5em; }
  .column_title.detail h2 .tit { font-size: 3em; }
}

/*-- iPad：portrait --*/
@media screen and (min-width:600px) and (max-width:1023px){
  /*-- column --*/
  .column_top_story { background-position: right 0 bottom -3.5em; background-size: 10em; }
  .column_list ul { width: 90%; }
  .column_list ul li { width: 45%; margin: 1em 2.5%; }
  .explanation { padding: 2em 6em 2em 1.5em; }

  /*-- column_detail --*/
  .column_title.detail h2 .tit { padding: 0 0 0 5%; font-size: 2.8em; }
  .column_title.detail h2 .label { padding-left: 3%; font-size: 1.25em; }
  .column_title.detail .back_btn { top: 60px; bottom: auto; background-color: #FFF; }
  .column_body { display: block; }
  .column_main { min-width: 600px; width: 100%; }
  .column_main .update { width: 90%; }
  .column_main .body_inner dl { padding: 2em; }
  .column_side { max-width: 1024px; width: 100%; padding: 0 0 3em 0; }
  .column_side .slide_list { min-width: none; width: 100%; }
  .column_side a.side_link { margin: 1em auto; }
  .column_side .side_list ul { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; }
  .column_side .side_list ul li { width: 32%; margin: .75em .666% 1em .666%; }
}

/*-- iPhone --*/
@media screen and (max-width:599px){
  /*-- column --*/
  .column_title.list { padding: 68px 0 .15em .5em; }
  .column_title.list h2 { font-size: 1.5em; }
  .column_top_story { padding: 1em 0 3em 0; background-position: right 0 bottom -3.5em; background-size: 10em; }
  .column_top_list .slick-dots { width: 60%; bottom: -1.5em; }
  .column_top_list .slick-dots li { margin: 0 .25em; }
  .column_top_body a { display: block; }
  .column_top_body a .image { width: 100%; }
  .column_top_body a .data { width: 100%; padding: 1em; }
  .column_menu { margin: 2em auto 0 auto; }
  .column_menu ul { width: 96%; }
  .column_menu li { width: 48%; margin: 0 auto 1.5em auto;}
  .column_menu li:nth-child(odd) { margin-right: 4%; }
  .column_menu li p { padding-left: 1em; font-size: .8em; background-position: left 0 top 50%; }
  .column_list { padding: 2em 2%; }
  .column_list ul { width: 90%; }
  .column_list ul li { width: 100%; }
  .explanation { padding: 2em 3em 2em 1em; background-position: 100% 100%; background-size: 36%; display: block; }
  .explanation p { width: 100%; }
  .explanation span { margin: 0 1em 0 auto; }

  /*-- column_detail --*/
  .column_title.detail h2 .tit { padding: 0 0 0 5%; font-size: 2em; }
  .column_title.detail h2 .label { padding: .25em 0 .25em 3%; font-size: 1.125em; }
  .column_title.detail .back_btn { top: 60px; bottom: auto; background-color: #FFF; }
  .column_body { display: block; }
  .column_main { min-width: 300px; width: 100%; }
  .column_main .update { width: 98%; }
  .column_main .body_inner h3 { font-size: 1.35em; padding-left: 1.5em; margin-left: 1%; margin-right: 1%; }
  .column_main .body_inner p, .column_main .body_inner a, .column_main .body_inner ul, .column_main .body_inner ol { padding-right: 1.5em; }
  .column_main .body_inner ul, .column_main .body_inner ol { padding-left: 0; }
  .column_main .body_inner dl { padding: 2em; margin: .5em auto; }
  #cl { margin: 2em auto; }
  #cl ul { padding: 1em; }
  #cl li.h4 { padding-left: 2em; }
  #cl li.h5 { padding-left: 4em; }
  #cl li.h4 a::before, #cl li.h5 a::before { left: -1.5em; }
  #cl li.h4 a::after, #cl li.h5 a::after { left: -1.5em; }
  .column_side { max-width: 600px; width: 100%; padding: 0 0 3em 0; }
  .column_side .slide_list { min-width: none; width: 100%; }
  .column_side a.side_link { margin: 1em auto; }
  .column_side .side_list ul { width: 100%; display: block; }
  .column_side .side_list ul li { width: 100%; margin: .75em auto 1em auto; }


}