@charset "utf-8";

/* 基本色 値の変数設定。IE,Edgeを除く最新ブラウザで有効。
全面的に使用できるようになったら、こちらを使うと便利。*/
:root {
    --main-color: #39B54A;
    --accent-color1: #FBB03B;
    --accent-color2: #F15A24;
    --text-bright-color: #FFFFFF;
    --text-dull-color: #333333;
    --large-width: 1000px;
}

/* ========================
基本設定：ページ全体
===========================*/
body {
	font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    margin: 0;
}
/* ========================
コンテンツA 新製品案内上部 
===========================*/
.conA {
    text-align: center;
    background-color: #39B54A;
    background-color: var(--main-color);
}
.conA h1 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 24px;
    color: #FFFFFF;
    color: var(--text-bright-color);
}
.conA p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: #FFFFFF;
    color: var(--text-bright-color);
}
/*ロゴ*/
.conA img {
    display: inline-block;
    padding-top: 20px;
}
.conA img:hover {
	opacity: 0.7;
}
/*SNSリンク*/
ul.sns_area {
	list-style-type: none;
	font-size: 2.5rem;
	margin: 0;
	padding: 10px 0;
}
ul.sns_area li {
display: inline-block;
}

ul.sns_area li a {
	color: #fff;
}
ul.sns_area li a:hover {
	opacity: 0.7;
}
ul.sns_area img {
	filter : invert(100%) sepia(0%) saturate(7500%) hue-rotate(23deg) brightness(118%) contrast(118%);
}

/*コンテンツB 新製品案内メイン*/
.conB .container {
    padding-top: 80px;
    padding-bottom: 20px;
}
.conB .text {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
    color: #333333;
    color: var(--text-dull-color);
	word-wrap: break-word; /* IE11用 */
	overflow-wrap: break-word;
}
.conB h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
    border-bottom: double 6px #F15A24;
    font-weight: bold;
    text-align: center;
    position: relative;
}
.conB .color2nd h2 {
    border-bottom: double 6px #FBB03B;
    border-bottom: double 6px var(--accent-color1);
}
.conB ul {
   list-style-type: none;
    padding-left: 0;
    padding-bottom: 15px;
    border-bottom: dotted 2px #F15A24;
    border-bottom: dotted 2px var(--accent-color2);
}
.conB .color2nd ul {
   border-bottom: dotted 2px #FBB03B;
    border-bottom: dotted 2px var(--accent-color1);
}

/*===============================
ダウンロードボタンの設定
下向き矢印は、beforeとafterで同じ図形を重ねて少しずらして表示。
afterの図形のホバー色は、backgroundプロパティが使用不可のため、
スポイトで採取した色を直接指定。
=================================*/
.conB li a {
    color: #FFFFFF;
    color: var(--text-bright-color);
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    background-color: #F15A24;
    background-color: var(--accent-color2);
    border-radius: 6px;
    font-weight: bold;
    position: relative;
}
.conB .color2nd li a {
    color: #333333;
    color: var(--text-dull-color);
    background-color: #FBB03B;
    background-color: var(--accent-color1);
}
.conB li a::before,
.conB li a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: solid 8px #fff;
    border-top: solid 8px var(--text-bright-color);
    border-right: solid 10px transparent;
    border-bottom: solid 5px transparent;
    border-left: solid 10px transparent;
    position: absolute;
    top: 75%;
    left: 45%;
}
.conB .color2nd li a::before,
.conB .color2nd li a::after {
    border-top: solid 8px #333333;
    border-top: solid 8px var(--text-dull-color);
}
.conB li a::after{
    z-index: 1;
    border-top: solid 8px #F15A24;
    border-top: solid 8px var(--accent-color2);
    margin-top: -3px;
}
.conB li a:hover::after{
    border-top: solid 8px #f47b50;
}
.conB .color2nd li a::after{
    z-index: 1;
    border-top: solid 8px #FBB03B;
    border-top: solid 8px var(--accent-color1);
    margin-top: -3px;
}
.conB .color2nd li a:hover::after{
    border-top: solid 8px #fcc062;
}
.conB li a:hover {
   background-image: linear-gradient(
    rgba(255,255,255,0.2),
    rgba(255,255,255,0.2)
    );
}

/*768pxより大きければ、2列表示に*/
@media (min-width: 768px) {
    .conB .container {
        display: flex;
        max-width: 1000px;
        max-width: var(--large-width);
        margin-left: auto;
        margin-right: auto;
    }
    .conB .text {
        flex: 1;
		min-width: 0;
    }
    .conC .container {
        display: flex;
        max-width: 1000px;
        max-width: var(--large-width);
        margin-left: auto;
        margin-right: auto;
    }
}

/*============================
コンテンツC ダウンロード方法
==============================*/
.conC {
    background-color: #F2F2F2;
    color: #333333;
    color: var(--tesxt-dull-color);
}
.conC .container {
    padding: 40px 20px;
}
.conC dl {
    margin: 0;
}
.conC dt {
    font-weight: bold;
    position: relative;
}
.conC dt::before {
    content: '';
    display: inline-block;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-top: solid 5px transparent;
    border-right: solid 5px transparent;
    border-bottom: solid 5px transparent;
    border-left: solid 8px #39B54A;
    border-left: solid 8px var(--main-color);
    position: absolute;
    top: 25%;
}
.conC dd {
    margin: 0;
}
/*============================
更新内容数の目印　21個目で色を変更
==============================*/
.over20 ul:nth-of-type(21) {
	color: red;
}