@charset "UTF-8";
/*=============================================================
 04_modules
=============================================================*/
/* animation
================================================ */
@media all and (min-width: 600px) { .mod_fade_inUp01 { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all 0.6s cubic-bezier(0.545, 0.08, 0.52, 0.975); transition: all 0.6s cubic-bezier(0.545, 0.08, 0.52, 0.975); -webkit-transition-delay: .5s; transition-delay: .5s; }
  .mod_fade_inUp01.is_show { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } }

@media all and (min-width: 600px) { .mod_fade_inLeft01 { opacity: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 0.6s cubic-bezier(0.545, 0.08, 0.52, 0.975); transition: all 0.6s cubic-bezier(0.545, 0.08, 0.52, 0.975); -webkit-transition-delay: .5s; transition-delay: .5s; }
  .mod_fade_inLeft01.is_show { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } }

@media all and (min-width: 600px) { .mod_fade_inRight01 { opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.6s cubic-bezier(0.545, 0.08, 0.52, 0.975); transition: all 0.6s cubic-bezier(0.545, 0.08, 0.52, 0.975); -webkit-transition-delay: .5s; transition-delay: .5s; }
  .mod_fade_inRight01.is_show { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } }

.mod_delay01 { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }

.mod_delay02 { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; }

.mod_delay03 { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }

.mod_delay04 { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; }

.mod_delay05 { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; }

.mod_delay06 { -webkit-transition-delay: 2.1s; transition-delay: 2.1s; }

.mod_delay07 { -webkit-transition-delay: 2.4s; transition-delay: 2.4s; }

.mod_delay08 { -webkit-transition-delay: 2.7s; transition-delay: 2.7s; }

.mod_delay09 { -webkit-transition-delay: 3s; transition-delay: 3s; }

@-webkit-keyframes modal-video { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes modal-video { from { opacity: 0; }
  to { opacity: 1; } }

@-webkit-keyframes modal-video-inner { from { -webkit-transform: translate(0, 100px); transform: translate(0, 100px); }
  to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } }

@keyframes modal-video-inner { from { -webkit-transform: translate(0, 100px); transform: translate(0, 100px); }
  to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } }

/* archive
================================================ */
/*
#styleguide
mod_archive01

ブログ記事一覧
```
<ul class="archive mod_archive01">
	<li class="post js-inview mod_fade_inUp01 mod_delay0<?php echo $i; ?>">
		<div class="pic"><a href="" class="alpha"><img src="https://placehold.jp/200x200.png" alt=""></a></div>
		<div class="meta">
			<p class="sub"><a href="">〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</a></p>
			<div class="lead">
				<p>〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</p>
			</div>
		</div>
	</li>
</ul>
```
*/
.mod_archive01 .post { display: -webkit-box; display: -ms-flexbox; display: flex; }

.mod_archive01 .post + .post { margin-top: 25px; }

.mod_archive01 .post .pic { float: left; width: 100px; margin-right: 15px; }

.mod_archive01 .post .meta { width: calc(100% - 115px); }

.mod_archive01 .post .sub { font-weight: bold; font-style: italic; color: #f00; }

.mod_archive01 .post .sub a { font-size: 1.2rem; color: #f00; letter-spacing: 0; }

.mod_archive01 .post .lead { margin-top: 10px; font-size: 1.2rem; letter-spacing: 0; }

@media all and (min-width: 600px) { .mod_archive01 .post + .post { margin-top: 28px; }
  .mod_archive01 .post .pic { width: 140px; margin-right: 28px; }
  .mod_archive01 .post .meta { width: calc(100% - 168px); margin-top: -5px; }
  .mod_archive01 .post .sub a { font-size: 1.6rem; line-height: 1.625; letter-spacing: .2em; }
  .mod_archive01 .post .lead { color: #57564f; margin-top: 11px; line-height: 1.8; } }

/*
#styleguide
mod_archives_people01
横並びは個別指定

```
<ul class="mod_archives_people01">
	<li class="post">
		<a href="">
			<div class="pic"><img src="https://placehold.jp/200x244.png" alt=""></div>
				<div class="meta">
					<p class="field">事業分野○○○○○○○○</p>
					<h4 class="name">山本 太郎</h4>
					<p class="year">2006年入社</p>
				</div>
		</a>
	</li>
</ul>
```
*/
.mod_archives_people01 .post a { position: relative; display: block; width: 100%; height: 100%; }

.mod_archives_people01 .post .label { position: absolute; top: 0; left: 0; padding: 2px 12px; background: #f00; color: #fff; font-size: 1.2rem; z-index: 1; }

.mod_archives_people01 .post .pic { overflow: hidden; }

.mod_archives_people01 .post .pic img { object-fit: contain; }

.mod_archives_people01 .post .meta { position: absolute; left: 0; bottom: 0; width: 100%; }

.mod_archives_people01 .post .meta .field { margin-bottom: 2px; }

.mod_archives_people01 .post .meta .field .bg { display: inline-block; padding: 0 4px; font-size: 1rem; line-height: 1.6; background: #fff; overflow: hidden; text-overflow: ellipsis; }

.mod_archives_people01 .post .meta .name { margin-bottom: 2px; }

.mod_archives_people01 .post .meta .name .bg { display: inline-block; padding: 0 4px; background: #fff; font-size: 1.7rem; line-height: 1.2; }

.mod_archives_people01 .post .meta .year { margin-bottom: 4px; }

.mod_archives_people01 .post .meta .year .bg { display: inline-block; padding: 0 4px; background: #fff; font-size: 1.2rem; line-height: 1.6; white-space: nowrap; }

@media all and (min-width: 600px) { .mod_archives_people01 .post a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_archives_people01 .post a:hover { opacity: .7; }
  .mod_archives_people01 .post a:hover .pic img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
  .mod_archives_people01 .post .label { font-size: 1.4rem; }
  .mod_archives_people01 .post .pic img { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_archives_people01 .post .meta { bottom: 7px; }
  .mod_archives_people01 .post .meta .field { margin-bottom: 3px; }
  .mod_archives_people01 .post .meta .field .bg { font-size: 1.1rem; }
  .mod_archives_people01 .post .meta .name { display: inline; margin: 0 -7px 3px 0; }
  .mod_archives_people01 .post .meta .name .bg { display: inline; padding: 0px 5px; height: 18px; line-height: 18px; font-size: 1.6rem; }
  .mod_archives_people01 .post .meta .year { display: block; margin: 3px 0; }
  .mod_archives_people01 .post .meta .year .bg { padding: 0px 5px; height: 18px; line-height: 22px; font-size: 1.1rem; } }

/*
#styleguide
mod_archive02
第二階層 幅1100px

```
```
*/
.mod_archive02 .post + .post { margin-top: 60px; }

.mod_archive02 .post .areaImg { position: relative; }

.mod_archive02 .post .img { margin: 0 -20px 10px; }

.mod_archive02 .post .triangle { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: -20px; text-align: right; height: 250px; width: 55%; min-width: 190px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); }

.mod_archive02 .post .triangle .in { width: 100%; height: 100%; padding: 45px 20px 0 0; color: #fff; box-sizing: border-box; }

.mod_archive02 .post .triangle .in .num { font-size: 2.5rem; font-weight: 300; font-style: italic; line-height: 1; letter-spacing: .05em; }

.mod_archive02 .post .triangle .in .sub { padding-top: 10px; width: 8em; word-break: break-all; font-size: 1rem; font-style: italic; height: calc(1em * 1.5 * 2); margin-left: auto; }

.mod_archive02 .post .triangle .in .title { padding-top: 5px; width: 9em; word-break: break-all; font-size: 1.3rem; line-height: 1.46667; height: calc(1em * (44/30) * 3); margin-left: auto; }

.mod_archive02 .post .triangle .in .title h3 { font-style: italic; }

.mod_archive02 .post .txt { font-style: italic; font-weight: 700; font-size: 1.3rem; }

.mod_archive02 .post .keyword { border: 1px solid #f00; padding: 10px; margin-top: 10px; }

.mod_archive02 .post .keyword .tit { background-color: #f00; color: #fff; font-size: 1.1rem; text-transform: uppercase; display: inline-block; font-style: italic; letter-spacing: .03em; padding: 1px 6px 0; }

.mod_archive02 .post .keyword .list { margin-top: 5px; }

.mod_archive02 .post .keyword .list .item { display: inline-block; }

.mod_archive02 .post .keyword .list .item a { color: #f00; font-weight: 700; font-size: 1.2rem; text-decoration: none; }

.mod_archive02 .post .keyword .list .item + .item { margin-left: 5px; }

.mod_archive02 .post .more { text-align: left; margin-top: 25px; }

.mod_archive02 .post:nth-child(2n) .triangle { left: -20px; right: auto; text-align: left; }

.mod_archive02 .post:nth-child(2n) .triangle .in { padding: 45px 0 0 20px; }

.mod_archive02 .post:nth-child(2n) .triangle .sub { margin-left: 0; margin-right: auto; }

.mod_archive02 .post:nth-child(2n) .triangle .title { margin-left: 0; margin-right: auto; }

.mod_archive02 .post:nth-child(2n) .txt { text-align: right; }

.mod_archive02 .post:nth-child(2n) .more { text-align: right; }

.mod_archive02 .post:nth-child(1) .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #b7d100)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #b7d100)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #b7d100 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #b7d100 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive02 .post:nth-child(1) .more a:before { border-color: #b7d100; background-color: #b7d100; }

.mod_archive02 .post:nth-child(2) .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #a560a2)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #a560a2)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #a560a2 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #a560a2 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive02 .post:nth-child(2) .more a:before { border-color: #a560a2; background-color: #a560a2; }

.mod_archive02 .post:nth-child(3) .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #f2972d)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #f2972d)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #f2972d 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #f2972d 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive02 .post:nth-child(3) .more a:before { border-color: #f2972d; background-color: #f2972d; }

.mod_archive02 .post:nth-child(4) .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #356cdb)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #356cdb)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #356cdb 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #356cdb 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive02 .post:nth-child(4) .more a:before { border-color: #356cdb; background-color: #356cdb; }

.mod_archive02 .post:nth-child(5) .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #39abb5)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #39abb5)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #39abb5 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #39abb5 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive02 .post:nth-child(5) .more a:before { border-color: #39abb5; background-color: #39abb5; }

.mod_archive02 .post:nth-child(6) .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #ea6d8d)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #ea6d8d)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #ea6d8d 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #ea6d8d 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive02 .post:nth-child(6) .more a:before { border-color: #ea6d8d; background-color: #ea6d8d; }

.mod_archive02 .post:nth-child(7) .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #b7b0b7)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #b7b0b7)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #b7b0b7 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #b7b0b7 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive02 .post:nth-child(7) .more a:before { border-color: #b7b0b7; background-color: #b7b0b7; }

.mod_archive02 .post:nth-child(8) .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #a95c32)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #a95c32)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #a95c32 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #a95c32 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive02 .post:nth-child(8) .more a:before { border-color: #a95c32; background-color: #a95c32; }

@media all and (max-width: 350px) { .mod_archive02 .post .txt { font-size: 1.1rem; }
  .mod_archive02 .post .triangle { height: 220px; }
  .mod_archive02 .post .triangle .in { padding: 30px 10px 0 0; }
  .mod_archive02 .post:nth-child(2n) .triangle .in { padding: 30px 0 0 10px; } }

@media all and (min-width: 600px) { .mod_archive02 .post { width: 724px; -webkit-transform: translateX(65px); -ms-transform: translateX(65px); transform: translateX(65px); }
  .mod_archive02 .post + .post { margin-top: 110px; }
  .mod_archive02 .post .img { margin: 0 0 10px; }
  .mod_archive02 .post .triangle { width: 390px; height: 450px; z-index: 2; right: -260px; }
  .mod_archive02 .post .triangle .in { padding: 87px 50px 0 0; }
  .mod_archive02 .post .triangle .in .num { font-size: 5rem; }
  .mod_archive02 .post .triangle .in .sub { padding-top: 10px; font-size: 1.2rem; width: 16em; height: calc(1em * 1.5 * 1); }
  .mod_archive02 .post .triangle .in .title { font-size: 2.7rem; line-height: 1.5; height: calc(1em * 1.5 * 3); }
  .mod_archive02 .post .triangle .more { text-align: right; margin-top: 10px; }
  .mod_archive02 .post .triangle .more a { color: #b7d100; }
  .mod_archive02 .post .triangle .more a:before { background-color: #fff; border-color: #fff; -webkit-transform: skewX(0); -ms-transform: skewX(0); transform: skewX(0); }
  .mod_archive02 .post .triangle .more a:hover:before { opacity: .8; }
  .mod_archive02 .post .triangle .more a:hover .btntxt { color: inherit; }
  .mod_archive02 .post .txt { font-size: 2.4rem; }
  .mod_archive02 .post .keyword { padding: 6px 37px; margin-top: 10px; }
  .mod_archive02 .post .keyword .tit { font-size: 1.4rem; padding: 2px 5px 0; margin-right: 23px; line-height: 1.3; }
  .mod_archive02 .post .keyword .list { display: inline-block; margin: 0; }
  .mod_archive02 .post .keyword .list .item a { font-size: 1.3rem; }
  .mod_archive02 .post .keyword .list .item a:hover { text-decoration: underline; }
  .mod_archive02 .post .keyword .list .item + .item { margin-left: 10px; }
  .mod_archive02 .post:nth-child(2n) { -webkit-transform: translateX(210px); -ms-transform: translateX(210px); transform: translateX(210px); }
  .mod_archive02 .post:nth-child(2n) .triangle { left: -260px; right: auto; }
  .mod_archive02 .post:nth-child(2n) .triangle .in { padding: 87px 0 0 50px; }
  .mod_archive02 .post:nth-child(2n) .triangle .in .more { text-align: left; }
  .mod_archive02 .post:nth-child(1) .more a { color: #b7d100; }
  .mod_archive02 .post:nth-child(1) .btntxt:after { background-image: url(../img/common/ico_arw02_lime.svg); }
  .mod_archive02 .post:nth-child(2) .more a { color: #a560a2; }
  .mod_archive02 .post:nth-child(2) .btntxt:after { background-image: url(../img/common/ico_arw02_purple.svg); }
  .mod_archive02 .post:nth-child(3) .more a { color: #f2972d; }
  .mod_archive02 .post:nth-child(3) .btntxt:after { background-image: url(../img/common/ico_arw02_orange.svg); }
  .mod_archive02 .post:nth-child(4) .more a { color: #356cdb; }
  .mod_archive02 .post:nth-child(4) .btntxt:after { background-image: url(../img/common/ico_arw02_blue.svg); }
  .mod_archive02 .post:nth-child(5) .more a { color: #39abb5; }
  .mod_archive02 .post:nth-child(5) .btntxt:after { background-image: url(../img/common/ico_arw02_mint.svg); }
  .mod_archive02 .post:nth-child(6) .more a { color: #ea6d8d; }
  .mod_archive02 .post:nth-child(6) .btntxt:after { background-image: url(../img/common/ico_arw02_rose.svg); }
  .mod_archive02 .post:nth-child(7) .more a { color: #b7b0b7; }
  .mod_archive02 .post:nth-child(7) .btntxt:after { background-image: url(../img/common/ico_arw02_gray.svg); }
  .mod_archive02 .post:nth-child(8) .more a { color: #a95c32; }
  .mod_archive02 .post:nth-child(8) .btntxt:after { background-image: url(../img/common/ico_arw02_brown.svg); } }

/*
#styleguide
mod_archive03
第二階層 幅100%

```
```
*/
.mod_archive03 { /* @media (min-width: 600px) and (max-width: 1400px) { .post{ .detail { top: -70px; } .triangle{ width: 450px; height: 550px; .in{ padding: 110px 30px 0 0; .title{ padding-top: 15px; font-size: 3.5rem; } } } &:nth-child(2n){ .triangle{ .in{ padding: 110px 0 0 30px; } } } } &.is_project{ .post{ .triangle .in{ padding: 80px 0 0 50px; .sub { padding-top: 10px; } .title { font-size: 3.5rem; } } &:nth-child(2n){ .triangle{ .in{ padding: 80px 0 0 5px; } } } } } } */ }

.mod_archive03 .post + .post { margin-top: 40px; }

.mod_archive03 .post .areaImg { position: relative; }

.mod_archive03 .post .img { position: relative; margin: 0 -20px 10px; }

.mod_archive03 .post .img:before, .mod_archive03 .post .img:after { content: ""; position: absolute; width: 100%; height: 10%; left: 0; background: #fff; z-index: 1; }

.mod_archive03 .post .img:before { top: 0; }

.mod_archive03 .post .img:after { bottom: 0; }

.mod_archive03 .post .detail { position: relative; top: -20px; z-index: 2; }

.mod_archive03 .post .triangle { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: -20px; text-align: right; height: 250px; width: 55%; min-width: 190px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 2; }

.mod_archive03 .post .triangle .in { width: 100%; height: 100%; padding: 70px 10px 0 0; color: #fff; box-sizing: border-box; text-justify: inter-cluster; }

.mod_archive03 .post .triangle .in .num { font-size: 2.5rem; font-weight: 300; font-style: italic; line-height: 1; letter-spacing: .05em; }

.mod_archive03 .post .triangle .in .sub { padding-top: 10px; width: 8em; word-break: break-all; font-size: 1rem; font-style: italic; height: calc(1em * 1 * 2); margin-left: auto; }

.mod_archive03 .post .triangle .in .title { padding-top: 10px; width: 8em; word-break: break-all; font-size: 2rem; line-height: 1.46667; height: calc(1em * (44/30) * 3); margin-left: auto; }

.mod_archive03 .post .triangle .in .title h3 { font-style: italic; }

.mod_archive03 .post .txt { font-style: italic; font-weight: 700; font-size: 1.3rem; }

.mod_archive03 .post .keyword { border: 1px solid #f00; padding: 10px; margin-top: 10px; }

.mod_archive03 .post .keyword .tit { background-color: #f00; color: #fff; font-size: 1.1rem; text-transform: uppercase; display: inline-block; font-style: italic; letter-spacing: .03em; padding: 1px 6px 0; }

.mod_archive03 .post .keyword .list { margin-top: 5px; }

.mod_archive03 .post .keyword .list .item { display: inline-block; color: #f00; font-weight: 700; font-size: 1.2rem; margin-right: 5px; }

.mod_archive03 .post .more { text-align: left; margin-top: 25px; }

.mod_archive03 .post .more .arw { fill: #fff; }

.mod_archive03 .post:nth-child(2n) .triangle { left: -20px; right: auto; text-align: left; }

.mod_archive03 .post:nth-child(2n) .triangle .in { padding: 70px 0 0 20px; }

.mod_archive03 .post:nth-child(2n) .triangle .sub { margin-left: 0; margin-right: auto; }

.mod_archive03 .post:nth-child(2n) .triangle .title { margin-left: 0; margin-right: auto; }

.mod_archive03 .post:nth-child(2n) .txt { text-align: right; }

.mod_archive03 .post:nth-child(2n) .more { text-align: right; }

.mod_archive03 .post:nth-child(8n+1) .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #b7d100)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #b7d100)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #b7d100 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #b7d100 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive03 .post:nth-child(8n+1) .more a:before { border-color: #b7d100; background-color: #b7d100; }

.mod_archive03 .post:nth-child(8n+2) .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #a560a2)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #a560a2)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #a560a2 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #a560a2 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive03 .post:nth-child(8n+2) .more a:before { border-color: #a560a2; background-color: #a560a2; }

.mod_archive03 .post:nth-child(8n+3) .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #f2972d)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #f2972d)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #f2972d 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #f2972d 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive03 .post:nth-child(8n+3) .more a:before { border-color: #f2972d; background-color: #f2972d; }

.mod_archive03 .post:nth-child(8n+4) .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #356cdb)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #356cdb)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #356cdb 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #356cdb 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive03 .post:nth-child(8n+4) .more a:before { border-color: #356cdb; background-color: #356cdb; }

.mod_archive03 .post:nth-child(8n+5) .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #39abb5)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #39abb5)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #39abb5 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #39abb5 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive03 .post:nth-child(8n+5) .more a:before { border-color: #39abb5; background-color: #39abb5; }

.mod_archive03 .post:nth-child(8n+6) .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #ea6d8d)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #ea6d8d)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #ea6d8d 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #ea6d8d 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive03 .post:nth-child(8n+6) .more a:before { border-color: #ea6d8d; background-color: #ea6d8d; }

.mod_archive03 .post:nth-child(8n+7) .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #b7b0b7)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #b7b0b7)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #b7b0b7 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #b7b0b7 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive03 .post:nth-child(8n+7) .more a:before { border-color: #b7b0b7; background-color: #b7b0b7; }

.mod_archive03 .post:nth-child(8n) .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #a95c32)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #a95c32)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #a95c32 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #a95c32 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive03 .post:nth-child(8n) .more a:before { border-color: #a95c32; background-color: #a95c32; }

.mod_archive03 .post.is_lime .more a:before { border-color: #b7d100; background-color: #b7d100; }

.mod_archive03 .post.is_purple .more a:before { border-color: #a560a2; background-color: #a560a2; }

.mod_archive03 .post.is_orange .more a:before { border-color: #f2972d; background-color: #f2972d; }

.mod_archive03 .post.is_blue .more a:before { border-color: #356cdb; background-color: #356cdb; }

.mod_archive03 .post.is_mint .more a:before { border-color: #39abb5; background-color: #39abb5; }

.mod_archive03 .post.is_rose .more a:before { border-color: #ea6d8d; background-color: #ea6d8d; }

.mod_archive03 .post.is_gray .more a:before { border-color: #b7b0b7; background-color: #b7b0b7; }

.mod_archive03 .post.is_brown .more a:before { border-color: #a95c32; background-color: #a95c32; }

.mod_archive03 .post:nth-child(even).is_lime .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #b7d100)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #b7d100)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #b7d100 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #b7d100 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive03 .post:nth-child(even).is_purple .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #a560a2)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #a560a2)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #a560a2 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #a560a2 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive03 .post:nth-child(even).is_orange .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #f2972d)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #f2972d)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #f2972d 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #f2972d 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive03 .post:nth-child(even).is_blue .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #356cdb)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #356cdb)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #356cdb 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #356cdb 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive03 .post:nth-child(even).is_mint .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #39abb5)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #39abb5)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #39abb5 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #39abb5 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive03 .post:nth-child(even).is_rose .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #ea6d8d)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #ea6d8d)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #ea6d8d 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #ea6d8d 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive03 .post:nth-child(even).is_gray .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #b7b0b7)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #b7b0b7)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #b7b0b7 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #b7b0b7 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive03 .post:nth-child(even).is_brown .triangle .in { background: -webkit-gradient(linear, right top, left bottom, color-stop(50%, transparent), color-stop(50.5%, #a95c32)) no-repeat top left/100% 50%, -webkit-gradient(linear, right bottom, left top, color-stop(50%, transparent), color-stop(50.5%, #a95c32)) no-repeat bottom right/100% 50.2%; background: linear-gradient(to bottom left, transparent 50%, #a95c32 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, #a95c32 50.5%) no-repeat bottom right/100% 50.2%; }

.mod_archive03 .post:nth-child(odd).is_lime .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #b7d100)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #b7d100)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #b7d100 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #b7d100 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive03 .post:nth-child(odd).is_purple .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #a560a2)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #a560a2)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #a560a2 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #a560a2 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive03 .post:nth-child(odd).is_orange .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #f2972d)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #f2972d)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #f2972d 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #f2972d 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive03 .post:nth-child(odd).is_blue .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #356cdb)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #356cdb)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #356cdb 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #356cdb 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive03 .post:nth-child(odd).is_mint .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #39abb5)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #39abb5)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #39abb5 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #39abb5 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive03 .post:nth-child(odd).is_rose .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #ea6d8d)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #ea6d8d)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #ea6d8d 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #ea6d8d 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive03 .post:nth-child(odd).is_gray .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #b7b0b7)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #b7b0b7)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #b7b0b7 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #b7b0b7 50.5%) no-repeat top right/100% 50.2%; }

.mod_archive03 .post:nth-child(odd).is_brown .triangle .in { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #a95c32)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #a95c32)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #a95c32 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #a95c32 50.5%) no-repeat top right/100% 50.2%; }

@media all and (max-width: 599px) { .mod_archive03 .post { padding: 0 20px; }
  .mod_archive03.is_project .post .triangle .in .title { padding-top: 5px; font-size: 1.3rem; }
  .mod_archive03.is_project .post .triangle .in { padding: 45px 20px 0 0; }
  .mod_archive03.is_project .post:nth-child(2n) .triangle .in { padding: 45px 0 0 20px; } }

@media all and (max-width: 350px) { .mod_archive03 .post .txt { font-size: 1.1rem; }
  .mod_archive03 .post .triangle { height: 220px; }
  .mod_archive03 .post .triangle .in { padding: 50px 10px 0 0; }
  .mod_archive03 .post:nth-child(2n) .triangle .in { padding: 50px 0 0 10px; }
  .mod_archive03.is_project .post .triangle .in { padding: 30px 10px 0 0; }
  .mod_archive03.is_project .post:nth-child(2n) .triangle .in { padding: 30px 0 0 10px; } }

@media all and (min-width: 600px) { .mod_archive03 { max-width: 1920px; margin: auto; }
  .mod_archive03 .post { width: calc(100% - 260px); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); margin-left: auto; margin-right: 230px; max-width: 1545px; }
  .mod_archive03 .post + .post { margin-top: 80px; }
  .mod_archive03 .post .areaImg { min-width: 881px; }
  .mod_archive03 .post .areaImg a:hover img { opacity: .7; }
  .mod_archive03 .post .areaImg a img { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_archive03 .post .img { margin: 0 0 10px; }
  .mod_archive03 .post .img:before, .mod_archive03 .post .img:after { height: 12.5%; }
  .mod_archive03 .post .detail { top: -80px; }
  .mod_archive03 .post .triangle { width: 600px; height: 700px; z-index: 2; right: -230px; }
  .mod_archive03 .post .triangle .in { width: 100%; height: 100%; padding: 178px 50px 0 0; }
  .mod_archive03 .post .triangle .in .num { font-size: 7rem; }
  .mod_archive03 .post .triangle .in .sub { padding-top: 50px; font-size: 2rem; width: 16em; height: calc(1em * 1.5 * 1); }
  .mod_archive03 .post .triangle .in .title { width: 9em; font-size: 4rem; line-height: 1.5; height: calc(1em * 1.5 * 3); }
  .mod_archive03 .post .triangle .in .more { text-align: right; margin-top: 10px; }
  .mod_archive03 .post .triangle .in .more a:before { background-color: #fff; border-color: #fff; -webkit-transform: skewX(0); -ms-transform: skewX(0); transform: skewX(0); }
  .mod_archive03 .post .triangle .in .more a .btntxt { font-size: 3.4rem; }
  .mod_archive03 .post .triangle .in .more a:hover:before { opacity: .8; }
  .mod_archive03 .post .triangle .in .more a:hover .btntxt { color: inherit; }
  .mod_archive03 .post .txt { font-size: 2.4rem; }
  .mod_archive03 .post .keyword { padding: 6px 37px; margin-top: 10px; }
  .mod_archive03 .post .keyword .tit { font-size: 1.4rem; padding: 2px 5px 0; margin-right: 23px; line-height: 1.3; }
  .mod_archive03 .post .keyword .list { display: inline-block; margin: 0; }
  .mod_archive03 .post .keyword .list .item { font-size: 1.3rem; margin-right: 10px; }
  .mod_archive03 .post:nth-child(2n) { margin-right: auto; margin-left: 230px; }
  .mod_archive03 .post:nth-child(2n) .triangle { left: -230px; right: auto; }
  .mod_archive03 .post:nth-child(2n) .triangle .in { padding: 178px 0 0 50px; }
  .mod_archive03 .post:nth-child(2n) .triangle .in .more { text-align: left; }
  .mod_archive03 .post:nth-child(8n+1) .more a { color: #b7d100; }
  .mod_archive03 .post:nth-child(8n+1) .btntxt:after { background-image: url(../img/common/ico_arw02_lime.svg); }
  .mod_archive03 .post:nth-child(8n+2) .more a { color: #a560a2; }
  .mod_archive03 .post:nth-child(8n+2) .btntxt:after { background-image: url(../img/common/ico_arw02_purple.svg); }
  .mod_archive03 .post:nth-child(8n+3) .more a { color: #f2972d; }
  .mod_archive03 .post:nth-child(8n+3) .btntxt:after { background-image: url(../img/common/ico_arw02_orange.svg); }
  .mod_archive03 .post:nth-child(8n+4) .more a { color: #356cdb; }
  .mod_archive03 .post:nth-child(8n+4) .btntxt:after { background-image: url(../img/common/ico_arw02_blue.svg); }
  .mod_archive03 .post:nth-child(8n+5) .more a { color: #39abb5; }
  .mod_archive03 .post:nth-child(8n+5) .btntxt:after { background-image: url(../img/common/ico_arw02_mint.svg); }
  .mod_archive03 .post:nth-child(8n+6) .more a { color: #ea6d8d; }
  .mod_archive03 .post:nth-child(8n+6) .btntxt:after { background-image: url(../img/common/ico_arw02_rose.svg); }
  .mod_archive03 .post:nth-child(8n+7) .more a { color: #b7b0b7; }
  .mod_archive03 .post:nth-child(8n+7) .btntxt:after { background-image: url(../img/common/ico_arw02_gray.svg); }
  .mod_archive03 .post:nth-child(8n) .more a { color: #a95c32; }
  .mod_archive03 .post:nth-child(8n) .btntxt:after { background-image: url(../img/common/ico_arw02_brown.svg); }
  .mod_archive03 .post.is_lime .more a { color: #b7d100; }
  .mod_archive03 .post.is_lime .more a .arw { fill: #b7d100; }
  .mod_archive03 .post.is_purple .more a { color: #a560a2; }
  .mod_archive03 .post.is_purple .more a .arw { fill: #a560a2; }
  .mod_archive03 .post.is_orange .more a { color: #f2972d; }
  .mod_archive03 .post.is_orange .more a .arw { fill: #f2972d; }
  .mod_archive03 .post.is_blue .more a { color: #356cdb; }
  .mod_archive03 .post.is_blue .more a .arw { fill: #356cdb; }
  .mod_archive03 .post.is_mint .more a { color: #39abb5; }
  .mod_archive03 .post.is_mint .more a .arw { fill: #39abb5; }
  .mod_archive03 .post.is_rose .more a { color: #ea6d8d; }
  .mod_archive03 .post.is_rose .more a .arw { fill: #ea6d8d; }
  .mod_archive03 .post.is_gray .more a { color: #b7b0b7; }
  .mod_archive03 .post.is_gray .more a .arw { fill: #b7b0b7; }
  .mod_archive03 .post.is_brown .more a { color: #a95c32; }
  .mod_archive03 .post.is_brown .more a .arw { fill: #a95c32; }
  .mod_archive03.is_project .post .triangle .in { padding: 115px 50px 0 0; }
  .mod_archive03.is_project .post:nth-child(2n) .triangle .in { padding: 115px 0 0 50px; } }

@media (min-width: 600px) and (max-width: 1100px) { .mod_archive03 .post { margin: 0; } }

.mod_archive04 { padding: 15px 20px; }

.mod_archive04 .post { border: 1px solid #333; }

.mod_archive04 .post + .post { margin-top: 10px; }

.mod_archive04 .post a { display: block; text-decoration: none; }

.mod_archive04 .post .head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px 35px; min-height: 65px; background: #eee; box-sizing: border-box; }

.mod_archive04 .post .head .tit { text-align: center; font-weight: bold; letter-spacing: .1em; line-height: 1.6; font-size: 1.3rem; }

.mod_archive04 .post .body { padding: 20px 10px 10px; }

.mod_archive04 .post .body .txt { padding: 0 18px 10px; font-size: 1.2rem; letter-spacing: .18em; }

.mod_archive04 .post .body .keyword { padding: 12px 25px; background: #eee; }

.mod_archive04 .post .body .keyword .tit { font-weight: bold; font-size: 1.2rem; font-weight: bold; }

.mod_archive04 .post .body .keyword .list .item { display: inline-block; margin-right: 1em; vertical-align: middle; font-weight: bold; }

@media all and (min-width: 600px) { .mod_archive04 { padding: 70px 0; width: 1022px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .mod_archive04 .post { width: calc(33.333% - 22px); margin: 0 10px 20px; }
  .mod_archive04 .post + .post { margin-top: 0; }
  .mod_archive04 .post a:hover { opacity: .8; } }

.mod_archive05 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; }

.mod_archive05 li { width: calc(50% - 10px); margin: 0 5px 10px; box-sizing: border-box; border: 1px solid #fff; }

.mod_archive05 li a { position: relative; display: block; text-decoration: none; height: 100%; }

.mod_archive05 li a[target="_blank"]:before { content: ''; position: absolute; right: 7px; bottom: 7px; width: 12px; height: 12px; background: url(../img/common/ico_blank02.png) no-repeat center/contain; }

.mod_archive05 li .thumb { width: 100%; height: 106px; background: no-repeat center top / cover; box-sizing: border-box; }

.mod_archive05 li .detail { padding: 14px 10px; }

.mod_archive05 li .cat { display: inline-block; margin-bottom: 5px; padding: 2px 4px; color: #fff; border: 1px solid; font-size: 1.1rem; }

.mod_archive05 li .sub { font-weight: 500; }

@media all and (min-width: 600px) { .mod_archive05 { margin: 0 -10px; }
  .mod_archive05 li { width: calc(25% - 20px); margin: 0 10px 20px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_archive05 li a[target="_blank"]:before { content: ''; position: absolute; right: 10px; bottom: 10px; width: 12px; height: 12px; }
  .mod_archive05 li a[target="_blank"]:hover { border-width: 2px; opacity: .8; }
  .mod_archive05 li .thumb { height: 172px; }
  .mod_archive05 li .detail { padding: 15px 20px; }
  .mod_archive05 li .cat { margin-bottom: 8px; font-size: 1.1rem; }
  .mod_archive05 li .sub { font-size: 1.3rem; } }

/* button
================================================ */
.mod_btn01 { text-align: center; }

.mod_btn01 a { position: relative; display: inline-block; padding: 3px 6px; text-align: center; text-decoration: none; color: #fff; line-height: 1; font-size: 2.4rem; letter-spacing: .105em; }

.mod_btn01 a:before { content: ""; position: absolute; top: 0; left: -2.5%; width: 105%; height: 100%; background: #f00; -webkit-transform: skewX(-15deg); -ms-transform: skewX(-15deg); transform: skewX(-15deg); border: 1px solid #f00; box-sizing: border-box; }

.mod_btn01 a .btntxt { display: inline-block; font-style: italic; -webkit-transform: skewX(0); -ms-transform: skewX(0); transform: skewX(0); }

.mod_btn01 a .btntxt:after { content: ""; position: relative; top: -3px; display: inline-block; vertical-align: middle; margin-left: 5px; width: 25px; height: 8px; background: url(../img/common/ico_arw02.svg) no-repeat center/contain; }

.mod_btn01.is_movie a { padding: 3px 5px; }

.mod_btn01.is_movie .btntxt:before { content: ""; display: inline-block; margin-right: 5px; width: 18px; height: 18px; background: url(../img/common/ico_play01.svg) no-repeat center/contain; }

.mod_btn01.is_movie .btntxt:after { display: none; }

.mod_btn01.is_arw .btntxt { padding-right: 30px; }

.mod_btn01.is_arw .btntxt:after { display: none; }

.mod_btn01.is_arw .arw { position: absolute; top: 50%; right: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 5px; width: 25px; height: 100%; fill: #f00; }

.mod_btn01.is_arw .arw svg { height: 8px; width: 25px; }

.mod_btn01.is_right { text-align: right; }

.mod_btn01.is_left { text-align: left; }

.mod_btn01.is_lime a:before { background-color: #b7d100; border-color: #b7d100; }

.mod_btn01.is_blue a:before { background-color: #356cdb; border-color: #356cdb; }

.mod_btn01.is_orange a:before { background-color: #f2972d; border-color: #f2972d; }

.mod_btn01.is_mint a:before { background-color: #39abb5; border-color: #39abb5; }

@media all and (min-width: 600px) { .mod_btn01 a { padding: 3px 11px; }
  .mod_btn01 a:before { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_btn01 a .btntxt { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_btn01 a .btntxt:after { width: 28px; height: 6px; }
  .mod_btn01 a:hover:before { background: #fff; }
  .mod_btn01 a:hover .btntxt { color: #f00; }
  .mod_btn01 a:hover .btntxt:after { background-image: url(../img/common/ico_arw02_red.svg); }
  .mod_btn01.is_arw .btntxt { padding-right: 33px; }
  .mod_btn01.is_arw .arw { width: 28px; }
  .mod_btn01.is_arw .arw svg { width: 28px; }
  .mod_btn01.is_movie a { padding: 3px 7px; }
  .mod_btn01.is_movie .btntxt:before { border-radius: 100%; border: 1px solid #f00; box-sizing: border-box; } }

/*
#styleguide
mod_btn02

is_movie・・・アイコン変更
is_left・・・左寄せ
is_right・・・右寄せ
is_lime,is_blue,is_mint,is_orange・・・カラー

```
<div class="btn mod_btn02"><a href="#"><span class="btntxt">PLAY MOVIE</span></a></div>
```
*/
.mod_btn02 a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; padding: 9px; border: 1px solid #f00; text-decoration: none; color: #f00; font-size: 1.2rem; box-sizing: border-box; font-feature-settings: "palt"; }

.mod_btn02 a:before { content: ""; position: relative; display: inline-block; margin-right: 5px; vertical-align: middle; width: 0; height: 0; border: 5px solid transparent; border-left-color: #f00; border-left-width: 6px; }

.mod_btn02.is_white a { background: #fff; }

.mod_btn02.is_red a { background: #f00; color: #fff; }

.mod_btn02.is_red a:before { border-left-color: #fff; }

.mod_btn02.is_mail a { color: #333; font-weight: bold; }

.mod_btn02.is_mail a:before { border: 0; width: 18px; height: 13px; background: url(../img/common/ico_mail01.svg) no-repeat center/contain; }

.mod_btn02.is_center a { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

@media all and (min-width: 600px) { .mod_btn02 a { padding: 16px 10px; font-size: 1.4rem; letter-spacing: .05em; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_btn02 a:before { top: 0; border-width: 7px; border-left-width: 9px; margin-right: 5px; }
  .mod_btn02 a:hover { background: #f00; color: #fff; }
  .mod_btn02 a:hover:before { border-left-color: #fff; }
  .mod_btn02.is_red a:hover { background: #ff4d4d; }
  .mod_btn02.is_mail a:before { margin-right: 10px; }
  .mod_btn02.is_mail a:hover:before { background-image: url(../img/common/ico_mail02.svg); } }

.mod_btn03 a { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; border: 1px solid #f00; text-decoration: none; color: #f00; }

.mod_btn03 .img { display: block; width: 50%; height: 100%; box-sizing: border-box; }

.mod_btn03 .txt { padding-left: 5px; width: 50%; text-align: center; box-sizing: border-box; }

.mod_btn03 .sm { display: block; font-size: 1.1rem; font-weight: bold; font-style: italic; letter-spacing: .2em; }

.mod_btn03 .lg { display: block; font-size: 1.6rem; font-style: italic; font-weight: bold; letter-spacing: .15em; }

.mod_btn03 .note { display: block; font-size: 1rem; }

@media all and (min-width: 600px) { .mod_btn03 a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_btn03 a:hover { background: #f00; color: #fff; }
  .mod_btn03 .txt { text-align: center; }
  .mod_btn03 .sm { display: inline-block; vertical-align: middle; margin-right: 30px; font-size: 1.8rem; }
  .mod_btn03 .lg { display: inline-block; vertical-align: middle; font-size: 3rem; }
  .mod_btn03 .note { font-size: 1.3rem; } }

/*
#styleguide
mod_btn04

```
<div class="resetBtn mod_btn04"><button type="reset" class="f_roboto">RESET</button></div>
```
*/
.mod_btn04 button, .mod_btn04 a { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100px; height: 29px; padding: 0; background-color: #f00; border: 1px solid #f00; cursor: pointer; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #fff; font-size: 1.2rem; font-style: italic; letter-spacing: .075em; }

.mod_btn04 button:before, .mod_btn04 a:before { display: inline-block; margin-right: 5px; content: ""; width: 0; height: 0; border: 5px solid transparent; border-left-color: #fff; border-left-width: 8px; }

@media all and (min-width: 600px) { .mod_btn04 button, .mod_btn04 a { width: 94px; height: 28px; font-size: 2rem; letter-spacing: 0; } }

.mod_backbtn { padding-top: 40px; }

@media all and (min-width: 600px) { .mod_backbtn { padding-top: 80px; } }

.mod_btn05 a { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; border: 1px solid #f00; text-decoration: none; color: #f00; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.mod_btn05 .img { display: block; width: 85px; padding-right: 13px; box-sizing: border-box; }

.mod_btn05 .txt { width: calc(100% - 85px); }

.mod_btn05 .sm { display: block; font-size: 1.2rem; font-weight: bold; font-style: italic; margin-bottom: 3px; }

.mod_btn05 .lg { display: block; font-size: 1.7rem; font-style: italic; font-weight: bold; letter-spacing: .1em; line-height: 1.2; }

@media all and (min-width: 600px) { .mod_btn05 a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_btn05 a:hover { background: #f00; color: #fff; }
  .mod_btn05 .img { width: 256px; height: 180px; padding-right: 0; }
  .mod_btn05 .txt { width: calc(100% - 256px); text-align: center; }
  .mod_btn05 .sm { display: inline-block; vertical-align: middle; margin-right: 30px; font-size: 1.8rem; margin-bottom: 5px; }
  .mod_btn05 .lg { display: inline-block; vertical-align: middle; font-size: 3.1rem; } }

/* bnr_special-interview
================================================ */
.bnr_special-interview { margin: 50px 0; }

.bnr_special-interview .img { border: solid 1px #f00; }

.bnr_special-interview .tit { background: #f00; text-align: center; font-size: 1.4rem; padding: 2px; }

.bnr_special-interview .box { background: #f00; text-align: center; padding: 8px 10px 10px; }

.bnr_special-interview .txt { font-weight: bold; margin-bottom: 10px; }

.bnr_special-interview .btns { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -5px; }

.bnr_special-interview .btns .btn { width: calc(50% - 10px); margin: 0 5px; }

.bnr_special-interview .btns .btn a { border-color: #f00; color: #f00; background: #fff; }

.bnr_special-interview .btns .btn a:before { border-left-color: #f00; }

.bnr_special-interview .btns .btn a:hover { border-color: #fff; background: #f00; color: #fff; }

.bnr_special-interview .btns .btn a:hover:before { border-left-color: #fff; }

@media all and (min-width: 600px) { .bnr_special-interview { margin: 100px 0; }
  .bnr_special-interview .inner { width: 750px; }
  .bnr_special-interview .tit { font-size: 2.1rem; padding: 7px; }
  .bnr_special-interview .img { border: solid 2px #f00; height: 170px; overflow: hidden; }
  .bnr_special-interview .box { padding: 10px 10px 14px; }
  .bnr_special-interview .txt { font-size: 1.8rem; margin-bottom: 12px; }
  .bnr_special-interview .btns { width: 60%; margin: 0 auto; }
  .bnr_special-interview .btn a { padding: 13px; } }

.mod_color-red { color: #f00; }

/* form
================================================ */
/*
#styleguide
mod_form01

form
```


```
*/
.mod_checkboxList { font-size: 0; }

.mod_checkboxList_item { display: inline-block; margin: 0 3px 4px 0; height: 43px; }

.mod_checkboxList_item input[type="checkbox"], .mod_checkboxList_item input[type="radio"] { display: none; }

.mod_checkboxList_item input[type="checkbox"]:checked ~ label, .mod_checkboxList_item input[type="radio"]:checked ~ label { color: #fff; background: #f00; }

.mod_checkboxList_item label { position: relative; display: inline-block; padding: 7px 11px 6px; border: 1px solid #f00; background: transparent; color: #f00; font-size: 1.3rem; line-height: 1; cursor: pointer; letter-spacing: .075em; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

@media all and (min-width: 600px) { .mod_checkboxList_item { height: 34px; margin: 0 6px 8px 0; }
  .mod_checkboxList_item label { padding: 7px 14px 6px; font-size: 1.4rem; } }

.mod_radioList_item { display: inline-block; }

.mod_radioList_item + .mod_radioList_item { margin-top: 7px; }

.mod_radioList_item input[type="radio"] { display: none; }

.mod_radioList_item input[type="radio"]:checked ~ label:after { display: block; }

.mod_radioList_item label { position: relative; display: inline-block; padding: 6px 10px 6px 36px; margin: 0 5px 5px 0; font-size: 1.3rem; line-height: 1; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mod_radioList_item label:before { content: ""; position: absolute; top: 0; left: 0; width: 25px; height: 25px; border: 1px solid #f00; border-radius: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mod_radioList_item label:after { content: ""; display: none; position: absolute; top: 9px; left: 9px; width: 10px; height: 10px; background: #f00; border-radius: 100%; }

@media all and (min-width: 600px) { .mod_radioList_item + .mod_radioList_item { margin: 0 0 0 45px; }
  .mod_radioList_item label { font-size: 1.5rem; } }

/* inner
================================================ */
/*
#styleguide
mod_inner01

SP:両端パディング15px
PC:1100pxでセンタリング＆border-box

```
<section id="hoge">
	<div class="inner mod_inner01">
		<h2 class="tit">タイトル</h3>
		<p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</section>
```
*/
.mod_inner01 { padding-left: 20px; padding-right: 20px; }

@media all and (min-width: 600px) { .mod_inner01 { box-sizing: border-box; width: 1000px; margin: auto; padding-right: 0; padding-left: 0; } }

.mod_list01 { font-size: 1.4rem; line-height: 1.6; }

.mod_list01_item { position: relative; padding-left: 20px; font-weight: 700; letter-spacing: .045em; }

.mod_list01_item + .mod_list01_item { margin-top: 12px; }

.mod_list01_item:before { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; margin-top: 1px; content: ""; display: block; width: 15px; height: 15px; background: url("../img/common/ico_check01_red.png") no-repeat center/contain; }

@media all and (min-width: 600px) { .mod_list01 { font-size: 1.6rem; }
  .mod_list01_item { padding-left: 30px; letter-spacing: .01em; }
  .mod_list01_item + .mod_list01_item { margin-top: 10px; }
  .mod_list01_item:before { width: 20px; height: 20px; } }

.mod_list02 { font-size: 1.4rem; line-height: 1.6; }

.mod_list02_item { box-sizing: border-box; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; min-height: 76px; padding: 15px 15px 15px 45px; letter-spacing: .045em; counter-increment: number; }

.mod_list02_item + .mod_list02_item { border-top: 1px solid #dddddd; }

.mod_list02_item:before { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); content: counter(number); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 36px; height: 36px; background: #ff2500; color: #fff; border-radius: 50%; font-size: 2.1rem; font-weight: 700; font-family: 'Roboto', sans-serif; }

@media all and (min-width: 600px) { .mod_list02 { margin: 22px 0 0; font-size: 1.6rem; line-height: 1.75; }
  .mod_list02_item { min-height: auto; padding: 0 0 0 35px; letter-spacing: .1em; }
  .mod_list02_item + .mod_list02_item { margin-top: 12px; border-top: 0; }
  .mod_list02_item:before { box-sizing: border-box; top: 2px; -webkit-transform: none; -ms-transform: none; transform: none; width: 26px; height: 26px; padding-left: 2px; font-size: 1.6rem; } }

.mod_list03 { font-size: 1.3rem; line-height: 1.75; }

.mod_list03_item { position: relative; padding-left: 20px; letter-spacing: .18em; }

.mod_list03_item:before { position: absolute; top: 6px; left: 0; content: ""; display: block; width: 8px; height: 8px; background: #ff2500; border-radius: 50%; }

.mod_list03_item + .mod_list03_item { margin-top: 12px; }

@media all and (min-width: 600px) { .mod_list03 { margin: 16px 0 0; font-size: 1.4rem; line-height: 2.43; }
  .mod_list03_item { padding-left: 12px; }
  .mod_list03_item:before { top: 14px; left: 2px; width: 5px; height: 5px; }
  .mod_list03_item + .mod_list03_item { margin-top: 0; } }

.mod_imgSet_list_item + .mod_imgSet_list_item { padding-top: 20px; }

.mod_imgSet_list_detail { padding-top: 20px; }

.mod_imgSet_list_head { margin-bottom: 5px; color: #f00; font-size: 1.6rem; font-weight: bold; }

.mod_imgSet_list_txt { line-height: 2.3; }

@media all and (min-width: 600px) { .mod_imgSet_list_item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
  .mod_imgSet_list_item + .mod_imgSet_list_item { padding-top: 30px; }
  .mod_imgSet_list_img { -ms-flex-preferred-size: 244px; flex-basis: 244px; padding-right: 30px; }
  .mod_imgSet_list_detail { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-top: 0; }
  .mod_imgSet_list_head { margin-top: -5px; margin-bottom: 5px; color: #f00; font-size: 1.8rem; font-weight: bold; }
  .mod_imgSet_list_txt { line-height: 2.3; } }

.mod_list04_item { position: relative; padding-left: 1em; }

.mod_list04_item:before { content: ''; position: absolute; top: 50%; left: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); border: 6px solid transparent; border-left: 8px solid #f00; }

.mod_list04_item a { color: #f00; }

/* pager
================================================ */
/*
#styleguide
mod_pagination01

pager

```
<ul class="pager mod_pagination01">
	<li class="previous"><a href="#">&lt;</a></li>
	<li class="current"><span>1</span></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li class="next"><a href="#">&gt;</a></li>
</ul>
```
*/
.mod_pagination01 { padding-top: 40px; text-align: center; letter-spacing: -.5em; }

.mod_pagination01 li { display: inline-block; margin: 0 5px 10px; letter-spacing: 0; }

.mod_pagination01 li a, .mod_pagination01 li span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 37px; height: 37px; box-sizing: border-box; border: 1px solid #f00; text-decoration: none; color: #f00; font-size: 1.2rem; font-weight: bold; }

.mod_pagination01 li.current span { color: #fff; background: #f00; }

.mod_pagination01 li.previous { margin-right: 30px; }

.mod_pagination01 li.previous a { font-size: 1rem; }

.mod_pagination01 li.previous a:before { content: "◀"; }

.mod_pagination01 li.next { margin-left: 30px; }

.mod_pagination01 li.next a { font-size: 1rem; }

.mod_pagination01 li.next a:before { content: "▶"; }

@media all and (min-width: 600px) { .mod_pagination01 li { margin: 0 4px; }
  .mod_pagination01 li a, .mod_pagination01 li span { width: 50px; height: 50px; font-size: 1.3rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_pagination01 li a:hover { text-decoration: none; background-color: #f00; color: #fff; }
  .mod_pagination01 li.previous { margin-right: 40px; }
  .mod_pagination01 li.next { margin-left: 40px; } }

/*
#styleguide
mod_pagination02

pager

```
<ul class="mod_pagination02">
	<li class="mod_pagination02_previous"><a href="">前へ</a></li>
	<li class="mod_pagination02_back"><a href="/blog/">一覧へ</a></li>
	<li class="mod_pagination02_next"><a href="">次へ</a></li>
</ul>
```
*/
.mod_section01 { margin-top: 28px; font-size: 1.3rem; line-height: 1.75; }

.mod_section01 + .mod_section01 { margin-top: 35px; }

.mod_section01.has_toggle { position: relative; padding-bottom: 50px; }

.mod_section01_head { position: relative; margin: 0 -20px 20px; padding: 17px 20px 17px 118px; border-style: solid; border-width: 1px 0; color: #ff2500; }

.mod_section01_head.is_headOnly { padding: 17px 20px; }

.mod_section01_head.is_headOnly:before { display: none; }

.mod_section01_head:before { position: absolute; top: 17px; bottom: 17px; left: 100px; content: ""; display: block; border-left: 1px solid; }

.mod_section01_head.has_no_en { padding: 13px 20px; }

.mod_section01_head.has_no_en:before { display: none; }

.mod_section01_head_num { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 20px; font-size: 1.5rem; font-weight: 700; letter-spacing: .1em; }

.mod_section01_head_en { font-size: 3.5rem; line-height: 1; letter-spacing: .1em; font-weight: 100; font-style: italic; }

.mod_section01_head_ja { font-size: 2rem; line-height: 1.5; font-style: italic; letter-spacing: .2em; }

.mod_section01_head_tit { font-size: 1.5rem; line-height: 1.5; font-weight: 700; letter-spacing: .02em; font-style: italic; }

.mod_section01_img { margin-top: 24px; }

.mod_section01_img.is-img01 { margin-right: -20px; }

.mod_section01_txt a { color: #ff2500; }

.mod_section01_content { padding-bottom: 24px; }

.mod_section01_content + .mod_section01_content { position: relative; margin-top: 30px; padding-top: 20px; }

.mod_section01_content + .mod_section01_content:before { position: absolute; top: 0; left: 0; right: 0; content: ""; display: block; border-top: 1px solid #ff2500; }

.mod_section01.has_no_btn .mod_section01_content { padding-bottom: 0; }

.mod_section01_toggle_content { position: relative; margin: 0 -20px; padding: 25px 20px 25px; background: #f0f0f0; display: none; }

.mod_section01_toggle_content_sec + .mod_section01_toggle_content_sec { margin-top: 30px; padding-top: 25px; border-top: 1px solid #ff2500; }

.mod_section01_toggle_content_txt { margin-top: 15px; }

.mod_section01_toggle_content_iframe { position: relative; }

.mod_section01_toggle_content_iframe:before { content: ""; display: block; width: 100%; padding-top: 56%; }

.mod_section01_toggle_content_iframe iframe { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; }

.mod_section01_toggle_content_btn { position: absolute; left: -20px; bottom: 0; right: -20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 50px; background: #ff2500; color: #fff; text-align: center; font-size: 1.4rem; font-weight: 600; letter-spacing: .01em; cursor: pointer; }

.mod_section01_toggle_content_btn:after { content: ""; display: inline-block; margin-left: 6px; vertical-align: middle; border-style: solid; border-width: 6px 3px 0 3px; border-color: #fff transparent transparent transparent; }

.mod_section01_toggle_content_btn.is_active:after { border-width: 0 3px 6px 3px; border-color: transparent transparent #fff transparent; }

@media all and (min-width: 600px) { .mod_section01 { margin-top: 50px; font-size: 1.4rem; line-height: 2.43; border: 1px solid #ff2500; }
  .mod_section01 + .mod_section01 { margin-top: 40px; }
  .mod_section01.has_toggle { padding-bottom: 40px; }
  .mod_section01_head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; padding: 21px 20px 21px 184px; border-width: 0 0 1px; }
  .mod_section01_head.has_no_en { padding: 5px 34px; }
  .mod_section01_head:before { top: 29px; bottom: 29px; left: 156px; }
  .mod_section01_head_num { left: 40px; font-size: 2rem; }
  .mod_section01_head_en { font-size: 3.6rem; }
  .mod_section01_head_ja { font-size: 3rem; line-height: 2.33; letter-spacing: .1em; }
  .mod_section01_head_tit { margin: 0 0 0 14px; padding: 5px 0 0; font-size: 2rem; }
  .mod_section01_img { margin-top: 20px; }
  .mod_section01_img.is-img01 { margin-right: -40px; }
  .mod_section01_content { padding: 29px 40px 32px; }
  .mod_section01_content + .mod_section01_content { margin-top: 0; padding-top: 34px; }
  .mod_section01_content + .mod_section01_content:before { left: 40px; right: 40px; }
  .mod_section01.has_no_btn .mod_section01_content { padding-bottom: 32px; }
  .mod_section01_toggle_content { margin: 7px 0 0; padding: 30px 40px; }
  .mod_section01_toggle_content_sec + .mod_section01_toggle_content_sec { margin-top: 40px; padding-top: 32px; }
  .mod_section01_toggle_content_txt { margin-top: 17px; }
  .mod_section01_toggle_content_btn { left: 0; right: 0; height: 40px; }
  .mod_section01_toggle_content_btn:after { margin-left: 6px; } }

/*!  single
================================================ */
/*
#styleguide
mod_single01_intro

.mod_single01_intro - base style

```
<section id="intro" class="mod_single01_intro">
	<div class="inner">
		<div class="areaImg">
			<div class="eyecatch"><img src="https://placehold.jp/736x414.png" alt=""></div>
			<div class="triangle">
				<?php $number = 1; ?>
				<div class="in in0<?php echo $number; //数字1~8で色変化 ?>">
					<p class="number num f_roboto">0<?php echo $number; ?></p>
					<div class="businessName sub"><p>事業分野◯◯◯◯◯◯◯◯</p></div>
					<div class="title"><h2>タイトル◯◯◯<br>タイトル◯◯◯<br>タイトル◯◯</h2></div>
				</div>
			</div>
		</div>
		<div class="keyword">
			<p class="tit f_roboto">key word</p>
			<ul class="list">
				<li class="item"><a href="#">#◯◯◯◯</a></li>
				<li class="item"><a href="#">#◯◯◯◯</a></li>
				<li class="item"><a href="#">#◯◯◯◯</a></li>
			</ul>
		</div>
		<p class="name">プロジェクト名◯◯◯プロジェクト名◯◯◯</p>
		<p class="lead">リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○リード文○○○○○○</p>
	</div>
</section>
```
*/
.mod_single01_intro { /* @media (min-width: 600px) and (max-width: 1400px) { .triangle{ width: 450px; height: 550px; .in{ padding: 110px 50px 0 0; .title{ padding-top: 30px; font-size: 3.5rem; } } } &.is_project{ .triangle .in{ padding: 90px 5px 0 50px; .sub { padding-top: 10px; } .title { font-size: 3.5rem; } } } &.is_job{ .triangle{ .in { .title { padding-top: 10px; } .type { padding-top: 10px; font-size: 2.1rem; width: 5em; margin-left: auto; } } } } } */ }

.mod_single01_intro .inner { padding: 0 20px 40px; }

.mod_single01_intro .areaImg { position: relative; }

.mod_single01_intro .eyecatch { margin: 0 -20px 0; }

.mod_single01_intro .triangle { position: absolute; top: 70%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: -20px; text-align: right; height: 250px; width: 55%; min-width: 190px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); text-justify: inter-cluster; pointer-events: none; }

.mod_single01_intro .triangle .in { width: 100%; height: 100%; padding: 45px 13px 0 0; color: #fff; box-sizing: border-box; background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #b7d100)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #b7d100)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #b7d100 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #b7d100 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in .num { font-size: 2.5rem; font-weight: 300; font-style: italic; line-height: 1; letter-spacing: .05em; }

.mod_single01_intro .triangle .in .title { padding-top: 10px; width: 9em; word-break: break-all; font-size: 1.7rem; padding-top: 25px; line-height: 1.46667; height: calc(1em * (44/30) * 3); margin-left: auto; }

.mod_single01_intro .triangle .in .title h3 { font-style: italic; }

.mod_single01_intro .triangle .in01 { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #b7d100)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #b7d100)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #b7d100 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #b7d100 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in02 { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #a560a2)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #a560a2)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #a560a2 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #a560a2 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in03 { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #f2972d)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #f2972d)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #f2972d 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #f2972d 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in04 { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #356cdb)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #356cdb)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #356cdb 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #356cdb 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in05 { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #39abb5)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #39abb5)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #39abb5 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #39abb5 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in06 { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #ea6d8d)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #ea6d8d)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #ea6d8d 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #ea6d8d 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in07 { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #b7b0b7)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #b7b0b7)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #b7b0b7 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #b7b0b7 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in08 { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #a95c32)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #a95c32)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #a95c32 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #a95c32 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in09 { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #f00)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #f00)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #f00 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #f00 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in10 { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #b663d8)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #b663d8)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #b663d8 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #b663d8 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_green { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #008075)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #008075)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #008075 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #008075 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_blue { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #1137d1)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #1137d1)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #1137d1 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #1137d1 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_purple { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #751ad1)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #751ad1)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #751ad1 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #751ad1 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_rose { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #db3959)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #db3959)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #db3959 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #db3959 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_orange { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #ff9100)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #ff9100)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #ff9100 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #ff9100 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_red { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #de3000)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #de3000)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #de3000 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #de3000 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_wine { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #83003d)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #83003d)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #83003d 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #83003d 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_mint { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #39abb5)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #39abb5)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #39abb5 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #39abb5 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_rose { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #ea6d8d)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #ea6d8d)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #ea6d8d 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #ea6d8d 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_gray { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #b7b0b7)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #b7b0b7)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #b7b0b7 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #b7b0b7 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_brown { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #a95c32)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #a95c32)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #a95c32 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #a95c32 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_lime { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #b7d100)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #b7d100)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #b7d100 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #b7d100 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_purple { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #a560a2)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #a560a2)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #a560a2 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #a560a2 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_orange { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #f2972d)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #f2972d)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #f2972d 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #f2972d 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .triangle .in_blue { background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, transparent), color-stop(50.5%, #356cdb)) no-repeat bottom left/100% 50%, -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50.5%, #356cdb)) no-repeat top right/100% 50.2%; background: linear-gradient(to top right, transparent 50%, #356cdb 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, transparent 50%, #356cdb 50.5%) no-repeat top right/100% 50.2%; }

.mod_single01_intro .keyword { border: 1px solid #f00; padding: 15px; margin-top: 24px; }

.mod_single01_intro .keyword .tit { background-color: #f00; color: #fff; font-size: 1.4rem; text-transform: uppercase; display: inline-block; font-style: italic; letter-spacing: .05em; padding: 1px 4px 0; font-weight: 600; }

.mod_single01_intro .keyword .list { margin-top: 5px; }

.mod_single01_intro .keyword .list .item { display: inline-block; color: #f00; font-weight: 700; font-size: 1.3rem; margin-right: 8px; }

.mod_single01_intro .keyword .list .item > a { color: #f00; text-decoration: underline; }

.mod_single01_intro .name { font-size: 2.1rem; margin-top: 45px; font-weight: 600; letter-spacing: 0.02em; }

.mod_single01_intro .lead { margin-top: 15px; font-size: 1.3rem; }

.mod_single01_intro .type { font-size: 1rem; letter-spacing: 0; padding-top: 5px; }

@media all and (max-width: 599px) { .mod_single01_intro .data { margin-top: 15px; }
  .mod_single01_intro .data .peopleName { font-size: 1.4rem; font-weight: 700; display: inline-block; vertical-align: baseline; }
  .mod_single01_intro .data .year { display: inline-block; vertical-align: baseline; margin-left: 5px; font-size: 1rem; }
  .mod_single01_intro .data .division { width: 15em; margin-top: 3px; font-size: 1rem; } }

@media all and (min-width: 600px) { .mod_single01_intro { max-width: 1920px; margin: auto; }
  .mod_single01_intro .inner { width: calc(100% - 260px); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); margin-left: auto; margin-right: 230px; max-width: 1545px; padding: 0; }
  .mod_single01_intro .areaImg { min-width: 881px; }
  .mod_single01_intro .eyecatch { margin: 0 0 10px; }
  .mod_single01_intro .triangle { width: 600px; height: 700px; z-index: 2; right: -230px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
  .mod_single01_intro .triangle .in { width: 100%; height: 100%; padding: 125px 50px 0 0; }
  .mod_single01_intro .triangle .in .num { font-size: 7rem; }
  .mod_single01_intro .triangle .in .title { font-size: 4rem; line-height: 1.5; height: calc(1em * 1.5 * 3); padding-top: 80px; }
  .mod_single01_intro .triangle .in .data .peopleName { font-size: 2rem; margin-top: 10px; font-weight: 700; }
  .mod_single01_intro .triangle .in .data .division { width: 14em; margin-left: auto; margin-top: 5px; }
  .mod_single01_intro .triangle .in .more { text-align: right; margin-top: 10px; }
  .mod_single01_intro .triangle .in .more a:before { background-color: #fff; border-color: #fff; -webkit-transform: skewX(0); -ms-transform: skewX(0); transform: skewX(0); }
  .mod_single01_intro .triangle .in .more a .btntxt { font-size: 3.4rem; }
  .mod_single01_intro .triangle .in .more a:hover:before { opacity: .8; }
  .mod_single01_intro .triangle .in .more a:hover .btntxt { color: inherit; }
  .mod_single01_intro .keyword { margin: 30px 0 0; padding: 13px 37px; box-sizing: border-box; min-width: 881px; }
  .mod_single01_intro .keyword .tit { font-size: 1.4rem; padding: 2px 5px 0; margin-right: 23px; line-height: 1.3; }
  .mod_single01_intro .keyword .list { display: inline-block; margin: 0; }
  .mod_single01_intro .keyword .list .item { font-size: 1.3rem; margin-right: 10px; }
  .mod_single01_intro .keyword .list .item > a:hover { text-decoration: none; }
  .mod_single01_intro .name { font-size: 4.4rem; letter-spacing: .1em; min-width: 881px; box-sizing: border-box; }
  .mod_single01_intro .lead { font-size: 1.8rem; line-height: 1.9; margin: 18px auto 0; min-width: 881px; box-sizing: border-box; }
  .mod_single01_intro .type { font-size: 2.4rem; padding-top: 20px; } }

.mod_single01_intro.is_job .triangle .in .title { padding-top: 10px; font-size: 1.5rem; height: calc(1em * 1.5 * 3); }

.mod_single01_intro.is_job .triangle .in .type { padding-top: 0; }

.mod_single01_intro.is_project .sub { padding-top: 4px; width: 8em; word-break: break-all; font-size: 1rem; font-style: italic; height: calc(1em * 1 * 2); margin-left: auto; }

.mod_single01_intro.is_project .triangle .in { padding: 45px 15px 0 0; }

.mod_single01_intro.is_project .triangle .in .title { padding-top: 5px; font-size: 1.3rem; }

@media all and (min-width: 600px) { .mod_single01_intro .triangle .in { padding: 115px 50px 0 0; }
  .mod_single01_intro .triangle .in .sub { padding-top: 50px; font-size: 2rem; width: 16em; height: calc(1em * 1	 * 1); }
  .mod_single01_intro .triangle .in .title { font-size: 4rem; }
  .mod_single01_intro.is_project .triangle .in { padding: 120px 15px 0 50px; }
  .mod_single01_intro.is_project .triangle .in .sub { padding-top: 10px; }
  .mod_single01_intro.is_project .triangle .in .title { font-size: 3.5rem; }
  .mod_single01_intro.is_job .triangle .in .title { padding-top: 60px; font-size: 3.6rem; }
  .mod_single01_intro.is_job .triangle .in .type { padding-top: 30px; font-size: 2.1rem; width: auto; } }

/*
#styleguide
mod_single01_link_list

.mod_single01_link_list - base style

```
<div id="other" class="mod_single01_link_list">
	<div class="inner mod_inner01">
		<header class="secTit mod_tit02">
			<p class="en f_roboto">other project</p>
			<h2 class="ja">その他のプロジェクト</h2>
		</header>
		<ul class="list">
			<?php for ($i=0; $i < 8; $i++) : ?>
			<li class="item">
				<div class="img"><img src="https://placehold.jp/736x414.png" alt=""></div>
				<p class="tit">〇〇〇〇〇〇〇〇</p>
			</li>
			<?php endfor; ?>
		</ul>
	</div>
</div>
```
*/
.mod_single01_link_list .inner { padding-top: 25px; }

.mod_single01_link_list .list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.mod_single01_link_list .list .item { width: 48%; }

.mod_single01_link_list .list .item:nth-child(n+3) { margin-top: 4%; }

.mod_single01_link_list .list .item a { display: block; text-decoration: none; }

.mod_single01_link_list .list .item .tit { color: #fff; font-size: 1.3rem; line-height: 1.2; letter-spacing: 0.05em; box-sizing: border-box; padding: 8px; display: table; width: 100%; text-align: center; background-color: #f00; }

.mod_single01_link_list .list .item .tit span { display: table-cell; vertical-align: middle; }

@media all and (min-width: 600px) { .mod_single01_link_list .inner { padding-top: 100px; }
  .mod_single01_link_list .list { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  .mod_single01_link_list .list .item { width: 23.5%; }
  .mod_single01_link_list .list .item + .item { margin-left: 20px; }
  .mod_single01_link_list .list .item:nth-child(n+3) { margin-top: 0; }
  .mod_single01_link_list .list .item:nth-child(4n+1) { margin-left: 0; }
  .mod_single01_link_list .list .item:nth-child(n+5) { margin-top: 2%; }
  .mod_single01_link_list .list .item .tit { font-size: 1.4rem; }
  .mod_single01_link_list .list .item .img { overflow: hidden; }
  .mod_single01_link_list .list .item .img img { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_single01_link_list .list .item a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_single01_link_list .list .item a:hover { opacity: .7; }
  .mod_single01_link_list .list .item a:hover .img img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } }

.mod_single02_link_list { padding-bottom: 45px; }

.mod_single02_link_list .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 20px 10px 10px; margin: 0 -2px; background: #eee; }

.mod_single02_link_list .item { width: 50%; padding: 0 2px 5px; box-sizing: border-box; }

.mod_single02_link_list .item a { position: relative; padding: 6px 5px 6px 25px; font-size: 1.1rem; font-weight: 500; line-height: 1.36364; }

.mod_single02_link_list .item a:before { position: absolute; top: 50%; left: 10px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); }

@media all and (min-width: 600px) { .mod_single02_link_list { padding-bottom: 63px; }
  .mod_single02_link_list .list { margin: 0; padding: 20px 12px 6px; }
  .mod_single02_link_list .item { width: calc(100% / 4); padding: 0 8px 16px; }
  .mod_single02_link_list .item a { padding: 0 0 0 38px; height: 55px; font-size: 1.4rem; font-weight: 500; }
  .mod_single02_link_list .item a:before { left: 20px; border-width: 6px; border-left-width: 8px; } }

.mod_tab_ink01 { padding: 20px 15px 10px; margin-bottom: 25px; background: #eee; }

.mod_tab_ink01 .list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.mod_tab_ink01 .list .item { width: 50%; padding: 0 5px 10px; box-sizing: border-box; }

.mod_tab_ink01 .list .item.current a { background: #f00; color: #fff; }

@media all and (min-width: 600px) { .mod_tab_ink01 { padding: 20px 13px 5px; margin-bottom: 30px; }
  .mod_tab_ink01.is_column2 .list .item { width: 50%; }
  .mod_tab_ink01 .list .item { width: 33.333%; padding: 0 7px 15px; } }

/* table
================================================ */
/*
#styleguide
mod_table01

会社概要など
```
<table class="table mod_table01" border="1">
	<tr>
		<th scope="row">社名</th>
		<td>株式会社エムハンド</td>
	</tr>
	<tr>
		<th scope="row">設立</th>
		<td>2003年10月</td>
	</tr>
	<tr>
		<th scope="row">従業員</th>
		<td>35名<span>（ディレクター：11名、デザイナー：13名、エンジニア：8名、エディター：3名）</span></td>
	</tr>
	<tr>
		<th scope="row">資本金</th>
		<td>1,000万円</td>
	</tr>
	<tr>
		<th scope="row">事業内容</th>
		<td><b>ウェブサイト事業</b>（コンサルティング、制作、運営）<br>
			<b>メディア事業</b>（企画、制作、実施）</td>
	</tr>
</table>

```
*/
.mod_table01 { width: 100%; }

.mod_table01 th, .mod_table01 td { vertical-align: middle; border-top: 1px solid #f00; border-bottom: 1px solid #f00; padding: 10px; font-size: 1.3rem; line-height: 1.6; box-sizing: border-box; }

.mod_table01 th { width: 20%; text-align: center; color: #f00; border-right: 1px solid #f00; }

.mod_table01 td a { text-decoration: underline; color: #f00; }

.mod_table01 td .note { display: inline-block; text-indent: -1em; margin-left: 1em; }

.mod_table01 td .note:before { content: "※"; color: #f00; }

@media all and (min-width: 600px) { .mod_table01 th, .mod_table01 td { border: 1px solid #f00; font-size: 1.5rem; line-height: 2; padding: 14px 18px; } }

.mod_table02 { width: 100%; background-color: #fff; }

.mod_table02 th, .mod_table02 td { vertical-align: middle; border-top: 1px solid #b7b7b7; border-bottom: 1px solid #b7b7b7; padding: 10px; font-size: 1.3rem; line-height: 1.6; box-sizing: border-box; }

.mod_table02 th { text-align: center; border-right: 1px solid #b7b7b7; }

.mod_table02 td .note { display: inline-block; text-indent: -1em; margin-left: 1em; }

.mod_table02 td .note:before { content: "※"; color: #a50623; }

@media all and (min-width: 600px) { .mod_table02 th, .mod_table02 td { border: 1px solid #b7b7b7; font-size: 1.5rem; line-height: 2; padding: 14px 18px; }
  .mod_table02 .date { width: 18%; } }

/* text
------------------------------------- */
.mod_text_note01 { text-indent: -1em; margin-left: 1em; font-size: 1.1rem; }

.mod_text_note01:before { content: "※"; color: #f00; }

@media all and (min-width: 600px) { .mod_text_note01 { font-size: 1.2rem; } }

/* title
================================================ */
/*
#styleguide
mod_tit01


```
<p class="tit mod_tit01">見出しテキスト</p>
```
*/
.mod_tit01 { color: #f00; font-size: 3.5rem; font-style: italic; font-weight: 300; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }

@media all and (min-width: 600px) { .mod_tit01 { font-size: 7rem; } }

/*
#styleguide
mod_tit02
s

```
<header class="secTit mod_tit02">
	<p class="en f_roboto">other project</p>
	<h2 class="ja">その他のプロジェクト</h2>
</header>
```
*/
.mod_tit02 { color: #f00; text-align: center; margin-bottom: 25px; }

.mod_tit02 .en { text-transform: uppercase; font-size: 2.4rem; display: inline-block; border-bottom: 1px solid; padding: 0 5px; line-height: 1.2; font-style: italic; }

.mod_tit02 .ja { padding-top: 3px; letter-spacing: .15em; font-style: italic; font-weight: 700; }

@media all and (min-width: 600px) { .mod_tit02 { margin-bottom: 35px; }
  .mod_tit02 .en { font-size: 4.5rem; }
  .mod_tit02 .ja { padding-top: 15px; } }

/*
#styleguide
mod_tit03


```
<h2 class="mod_tit03">ブロックチェーンとは？</h2>
```
*/
.mod_tit03 { background-color: #f00; color: #fff; font-size: 1.5rem; display: inline-block; line-height: 1.3; }

@media all and (min-width: 600px) { .mod_tit03 { padding: 0 3px; font-size: 2.1rem; } }

.mod_tit04 { padding: 10px 0; font-size: 2.1rem; letter-spacing: 0.02em; color: #57564f; }

@media all and (min-width: 600px) { .mod_tit04 { padding: 20px 0; font-size: 4.4rem; letter-spacing: .1em; } }

.mod_tit05 { font-size: 1.4rem; font-weight: bold; color: #f00; }

.mod_tit06 { position: relative; margin-bottom: 10px; padding-left: 18px; font-size: 2rem; letter-spacing: .1em; font-weight: 700; line-height: 1.6; color: #ff2500; }

.mod_tit06.is_top:before, .mod_tit06.is_top:after { top: 0.8em; }

.mod_tit06:before, .mod_tit06:after { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); content: ""; display: block; width: 8px; height: 8px; background: #ff2500; }

.mod_tit06:before { margin-top: -7px; }

.mod_tit06:after { margin-top: 7px; }

@media all and (min-width: 600px) { .mod_tit06 { margin-bottom: 21px; padding-left: 28px; font-size: 3rem; }
  .mod_tit06:before { margin-top: -7px; }
  .mod_tit06:after { margin-top: 7px; } }

.mod_tit07 { margin-bottom: 12px; font-size: 1.7rem; letter-spacing: .01em; font-weight: 700; line-height: 1.6; color: #ff2500; }

@media all and (min-width: 600px) { .mod_tit07 { margin-bottom: 20px; font-size: 2.4rem; letter-spacing: .045em; } }

.mod_tit08 { margin-bottom: 5px; font-size: 1.5rem; font-weight: 700; line-height: 1.6; letter-spacing: .1em; }

@media all and (min-width: 600px) { .mod_tit08 { margin-bottom: 14px; font-size: 1.7rem; } }