/* 事例記事の骨組み。新規は case-article.css を読まない
 *
 * ヒーロー・日付・見出し・本文幅（970px）・正のリンクボタン。
 * 宣言は case-article.css からのコピー。見た目は変えない。
 * 部品は case-blocks.css。1記事限定は case-{html名}.css。
 */

/* セクション：導入 */
.slide-case-study {
	display: block;
	height: 400px;
}
.case_dark_bg {
	position: relative;
}
.case_dark_bg::before {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(33,33,33,.3);
}
.case_dark_bg2::before {
	background-color: rgba(49,50,55,.6);
}
.case_dark_bg3 {
	position: relative;
}
.case_dark_bg3::before {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(33,33,33,.7);
}

.slide-case-study_inr {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 1080px;
	height: 100%;
	padding: 150px 0 50px;
	margin: 0 auto;
	box-sizing: border-box;
}
.slide-case-study_inr-right {
    padding: 50px 0 150px 560px;
    color: #333333;
}

.slide-case-study_logo {
	position: absolute;
	top: 50px;
	left: 0;
}
.slide-case-study_logo > img {
	width: auto;
	height: 64px;
}

.slide-case-study_tag-grp {
	display: flex;
	flex-wrap: wrap;
	max-width: 50%;
	margin-bottom: 10px;
}
.slide-case-study_tag {
	font-size: 1.4rem;
	color: #fff;
	padding: 4px 8px;
	margin: 0 8px 10px 0;
	border: 1px solid #fff;
}
.slide-case-study_tag:last-child {
	margin-right: 0;
}

.slide-case-study_no {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin-right: -5px;
}

.slide-case-study_txt {
	font-size: 1.6rem;
	color: #fff;
	margin-top: 20px;
}
.slide-case-study_txt::before {
	content: '―';
	margin-right: 1em;
}
.slide-case-study_img {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(100% / 4);
    height: 100%;
}

#Case .case_date {
    margin: 30px 0 20px;
    font-size: 1.4rem;
    color: #757575;
}

#Case .cnts h2{
    font-size: 2.8rem;
    line-height: 1.3;
    font-weight:bold;
    color:#0D47A1;
}

#Case .cnts h2.other-ttl{
    font-size: 2.4rem;
    line-height: 1.3;
    font-weight:500;
    color:#0070C0;
}

#Case .cnts h3{
    font-size: 2.2rem;
    line-height: 1.3;
    color:#333333;
    font-weight:bold;
}

#Case .cnts h3.other-sub_ttl{
    font-size: 2.2rem;
    line-height: 1.3;
    color:#333333;
    font-weight:500;
}

#Case .cnts h5{
    font-size:1.5rem;
}

#Case .div-pre{
    /* font-size:1.6rem; */
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
    width: 100%;
}

#Case .cnts{
    width: 90%;
    max-width: 970px;
    padding-bottom: 70px;
}

/* 関連リンク・リンクボタン（正は rel-link_btn rel-link_btn2） */
.outer-cnts {
    max-width: 1080px;
    padding-bottom: 70px;
    margin: 0 auto;
}

.rel-link_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 40px;
}
.rel-link_list > li {
    width: calc(50% - 5px);
    margin-bottom: 30px;
    box-sizing: border-box;
}
.rel-link_btn {
    height: 100px;
    font-size: 2.4rem;
    font-weight: 700;
}
.rel-link_btn > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 10px 20px;
    border: 3px solid #000;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    box-sizing: border-box;
    color: inherit;
}
.rel-link_btn2 > a {
    border: 3px solid #636363;
    box-shadow: 0 3px 6px rgba(0,0,0,.2);
    border-radius: 6px;
}
.rel-link_btn > a:hover {
    text-decoration: none;
}
.rel-link_btn-center .rel-link_btn-txt,
.rel-link_btn-center i {
    margin: 0 0 0 auto;
}
.rel-link_btn-img {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}
.rel-link_btn-img > img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
}
.rel-link_btn-txt {
    line-height: 1.3;
}

@media screen and (min-width:821px) {
    .slide-case-study_img > img {
        width: auto;
        height: 70%;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
}

@media screen and (min-width:769px) {
    .rel-link_btn > a {
        transition: transform .5s, box-shadow .5s;
    }
    .rel-link_btn > a:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 10px rgb(0,0,0,.2);
    }
    .rel-link_btn > a:hover .rel-link_btn-img img {
        transition: transform .75s;
        transform: rotateY(360deg);
    }
}

@media screen and (max-width:820px) {
    .slide-case-study_inr {
        justify-content: flex-end;
        max-width: 640px;
        padding: 0 20px 40px;
    }

    .slide-case-study_logo {
        left: 20px;
    }
    .slide-case-study_logo > img {
        height: 48px;
    }

    .slide-case-study_tag-grp {
        max-width: 100%;
    }
    .slide-case-study_tag {
        font-size: 1.2rem;
    }

    .slide-case-study_txt {
        font-size: 1.4rem;
    }
    .slide-case-study_img > img {
        position: absolute;
        top: 10%;
        right: 0;
        height: 40%;
        width: auto;
    }

    #Case .cnts h2{
        font-size: 2.4rem;
        font-weight:bold;
        color:#0D47A1;
    }

    #Case .cnts h2.other-ttl{
        font-size: 2.2rem;
}

    #Case .cnts h3{
        font-size: 1.8rem;
        color:#333333;
        font-weight:bold;
    }

    #Case .cnts h3.other-sub_ttl{
        font-size: 1.8rem;
    }

    .outer-cnts {
        max-width: 640px;
        padding: 0 20px 70px;
    }

    .rel-link {
        max-width: 480px;
        margin: 0 auto;
    }
    /* cnts 内は本文と同じ幅。480中央だと見出しだけはみ出す */
    #Case .cnts .rel-link {
        max-width: none;
        margin: 0;
    }
    .rel-link_list > li {
        width: 100%;
        min-width: 0;
        padding-right: 0;
    }
    .rel-link_btn {
        font-size: 2.0rem;
    }
    .rel-link_btn > a {
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 16px;
    }
    .rel-link_btn > a > i {
        margin-left: auto;
    }
    .rel-link_btn-img {
        width: auto;
        margin-right: 0;
        justify-content: flex-start;
    }
    .rel-link_btn-txt {
        margin-right: 0;
        text-align: left;
    }
}

@media screen and (max-width:768px){
    .slide-case-study_img {
        width: calc((100% / 2) - 20px);
        right: 20px;
    }
}