/* section */
.o-section { margin-top: 45px; }
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section {
 margin-top: 20px;
 }
}

.o-section__inner {
 padding: 5px 0 25px 0;
 position: relative;
 margin-top: 40px;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner {
 margin-top: 20px;
 }
}

.o-section__inner__bg {
 background-color: #ededed;
 padding: 5px 0 25px 0;
 position: relative;
 margin-top: 40px;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner__bg {
 background-color: #ededed;
 padding-bottom: 10px;
 margin-top: 20px;
 }
}

/* タイトル枠 */
.o-section__headline { position: relative; }

.o-btn__goback { 
 position: absolute;
 top: 15px;
 left: 2%;
 }


/* 記事BOX 2列 PC2 SP1 */
.o-section__inner__col--02 {
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 align-content：flex-start;
 margin: 0 auto;
 width: 98%;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner__col--02 {
 display: block;
 width: 93%;
 }
}

.o-section__inner__col--02 > li {
 width: 48.6%;
 margin: 20px 0.7% 0 0.7% ;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner__col--02 li {
 width: 100%;
 margin: 20px 0 0 0;
 }
}


/* 記事BOX 4列 PC4 SP1 */
.o-section__inner__col--04 {
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 flex-wrap: wrap;
 align-content：flex-start;
 margin: 0 auto;
 width: 98%;
}

/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner__col--04 {
 display: block;
 width: 94%;
 }
}

.o-section__inner__col--04 li {
 padding-top: 20px;
 width: 23.6%;
 margin: 0 0.7%;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner__col--04 li {
 width: 100%;
 margin: 0;
 }
}


/* 記事BOX 4列 PC4 SP2 */
.o-section__inner__col--04-02 {
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 flex-wrap: wrap;
 align-content：flex-start;
 margin: 0 auto;
 width: 98%;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner__col--04-02 {
 -webkit-justify-content: space-between;
 justify-content: space-between;
 width: 93%;
 }
}

.o-section__inner__col--04-02 > li {
 margin: 20px 0.7% 0 0.7%;
 width: 23.6%;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner__col--04-02 > li {
 margin: 10px 0 0 0%;
 width: 49%;
 }
}


/* カルーセルBOX 4列 */
.o-section__inner__carousel--04 {
 margin: 0 auto;
 width: 100%;
}

.o-section__inner__carousel--04 li {
 padding-top: 20px;
 margin: 0 8px;
}


/* 詳細ページ 2列 */
.o-section__inner__col--02-detail {
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 align-content：flex-start;
 margin: 0 auto;
 width: 100%;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner__col--02-detail {
 display: block;
 }
}

.o-section__inner__col--02-detail__left {
 padding-left: 2%;
 width: 70.5%;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner__col--02-detail__left {
 margin: 0 auto 0 auto;
 padding-left: 0;
 width: 94%;
 }
}

.o-section__inner__col--02-detail__right {
 width: 26%;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner__col--02-detail__right {
 margin: 60px auto 0 auto;
 width: 94%;
 }
}

.o-section__inner__col--02-detail__left__ttl {
 display: table;
 width: 100%;
}

.o-section__inner__col--02-detail__left__ttl .u-item__date {
 position: relative;
 display: table-cell;
 vertical-align: top;
}

.o-section__inner__col--02-detail__left__ttl__right {
 padding: 1.5em 0 2.5em 2.5%;
 display: table-cell;
 vertical-align: middle;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner__col--02-detail__left__ttl__right {
 padding: 1em 0 2em 2.8%;
 }
}

.o-section__inner__col--02-detail__left__tag {
 margin: 0 0 0 6em;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner__col--02-detail__left__tag {
 margin: 0;
 }
}

.o-section__inner__col--02-detail__left__tag p {
 background: url(../images/commons/btn_tag.png);
 background-repeat: no-repeat;
 background-position: left 0.5em;
 background-size: 1.5em;
 padding: 0.1em 0 0.1em 2em;
}

.o-section__inner__col--02-detail__left__tag p a {
 display: inline-block;
 padding: 0.2em 0.4em 0.1em 0.4em;
 background-color: #ededed;
 margin: 0.3em;
}

.o-section__inner__col--02-detail__left__tag p a:hover {
 background-color: #cfff00;
 color: #221f1f;
}

.o-section__inner__col--02-detail__left__content {
 padding-top: 40px;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner__col--02-detail__left__content {
 padding-top: 20px;
 }
}

.o-section__inner__col--02-detail__left__content p {
 line-height: 2;
}


/* 記事 */
.o-section__inner__item-white {
 background-color: #fff;
 border-radius: 5px;
 padding: 30px 0 10px 0;
}

.o-section__inner__item__pic { position: relative; }

.o-section__inner__item__ic { 
 text-align: center;
 padding: 0 0 15px 0;
 line-height: 1;
}
.o-section__inner__item__ic img { width: 50px; }

.o-section__inner__item__ic span {  border-top: solid 1px #000; }


/* タイアップ */
.o-section__inner__tie-up {
 background-color: #fff;
 border-radius: 5px;
}

.o-section__inner__tie-up a {
 padding-bottom: 10px;
 border-radius: 5px;
}


.o-section__inner__tie-up__pic {
 position: relative;
 width: 86%;
}

/* テキストページ */
.o-section__inner__txtpage {
 padding: 5px 10px 25px 10px;
 position: relative;
 margin: 40px auto 0;
 max-width: 1000px;
 min-height: 400px;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-section__inner__txtpage {
 margin: 20px auto 0;
 max-width: 100%;
 min-height: initial;
 }
}

/* ランキング */
.o-section__inner__ranking__pic {
 position: relative;
}

/* カテゴリアイコン */
.o-category__ic { 
 text-align: center;
 line-height: 1;
 padding-bottom: 15px;
}
.o-category__ic img { width: 6.5em; }

.o-category__ic--s img { width: 5em; }

.o-category__ic--ss img { width: 4em; }

.o-category__ic span {
 border-top: solid 1px #fff;
 display: inline;
 padding-top: 2px;
 position: relative;
 top: 0.6em;
}

a:hover .o-category__ic span {
 border-top: solid 1px #cfff00;
}

/* ページトップボタン */
.o-btn__pagetop {
 width: 60px;
 position: fixed;
 bottom: 20px;
 right: 20px;
 cursor: pointer;
 z-index: 50;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-btn__pagetop {
 width: 50px;
 }
}


/* 汎用 2列ボックス pc02 sp01 */
.o-col-box--02 {
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 align-content：flex-start;
 width: 100%;
}


.o-col-box--02__inner { width: 50%; }
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-col-box--02__inner {
 width: 100%;
 }
}

.o-col-box--02__inner--pic { width: 48.7%; }
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-col-box--02__inner--pic {
 width: 100%;
 padding-top: 2em;
 }
.o-col-box--02__inner--pic:first-child {
 padding-top: 0;
 }
}

.o-col-box--02__inner--profile--pic { width: 23%; }
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-col-box--02__inner--profile--pic {
 width: 44%;
 }
}

.o-col-box--02__inner--profipe--txt { width: 74%; }
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-col-box--02__inner--profipe--txt {
 width: 51%;
 }
}

/* ページ送りボタン */
.o-pagenation {
 text-align: center;
}

.o-pagenation__inner {
 display: inline-block;
}

.o-pagenation__inner__nav {
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 align-content：flex-start;
 margin: 0 auto;
 padding: 1em;
}

.o-pagenation__inner__nav li {
 display: table;
 margin: 0 5px;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-pagenation__inner__nav li {
 margin: 0 3px;
 }
}

.o-pagenation__inner__nav li a {
 display: table-cell;
 width: 40px;
 height: 40px;
 background-color: #d0ff00;
 text-align: center;
 vertical-align: middle;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-pagenation__inner__nav li a {
 width: 30px;
 height: 30px;
 }
}

.o-pagenation__inner__nav li.o-pagenation__inner__nav__dot { padding-top: 1em; }
.o-pagenation__inner__nav li.o-pagenation__inner__nav__active { padding-top: 0.7em; }
.o-pagenation__inner__nav li.o-pagenation__inner__nav__back a {
 padding-top: 2px;
 background-color: #fff;
 text-align: left;
 width: auto;
 padding-right: 2em;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-pagenation__inner__nav li.o-pagenation__inner__nav__back a {
 padding-right: 0;
 }
.o-pagenation__inner__nav li.o-pagenation__inner__nav__active { padding-top: 0.4em; }
}

.o-pagenation__inner__nav li.o-pagenation__inner__nav__next a {
 padding-top: 2px;
 background-color: #fff;
 text-align: right;
 width: auto;
 padding-left: 2em;
}
/********* sp *********/
@media only screen and (max-width: 600px) {
.o-pagenation__inner__nav li.o-pagenation__inner__nav__next a {
 padding-left: 0;
 }
}

/* youtube */
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 0 auto;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}