@charset "utf-8";
#control { line-height: 1.5; }
.red { font-size:90%; }
a, .link_txt { text-decoration: none; }
#side { float: none;}
.con{ position: relative;}
.con .box { margin:0 10px; }
.con .txt { width:400px; font-size:13px; }
.con figure { margin:0; }

/* 共通 */
#main:nth-child(2) { margin-top: 3em; }
.control_sttl { font-size: 1.3em; background: #ebf7ff; padding: 8px 0.6em 3px; color: #1d6d80; border-bottom: 2px solid;}
.example { width: 48%; position: relative; padding: 1em 0; }
.control_example .example:first-child,.control_example .example:nth-child(2) { padding-top: 0;}
.control_example { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.control_example figcaption { font-weight: bold; padding-top: 4px;}
.btn-youtube , .btn-vimeo {cursor: pointer;}
.image_photo { margin-top: 2em; }
ul.kome li, p.kome { text-indent:-1em; margin-left:1em; }
ul.kome li::before, p.kome::before { content:"※"; }


/* リード部分 */
.lead a { text-decoration: underline; }
.pro_box li{ margin:6px 0 4px; }
.bold { font-weight: bold;}
p.appdl_info { font-size: 0.85em; text-indent: 0; padding-left: 2em;}
p.appdl_info::before { content: "※"; position: absolute; left: 31px;}

.title_box { gap: 1.5em; padding: 1em 1em 1.8em; border: 1px solid #000; }
.title_box div { flex: 1; }
.title_box p { margin-block: 0.4em 0; }
.title_box img { object-fit: cover; }
.btn-twinkly { margin-top: 1.3em !important; }
.btn-twinkly a { padding: 0.5em 2em; color: #1d2080; font-weight: bold; text-decoration: none !important; border: 1px solid #1d2080; border-radius: 20px; }
.btn-twinkly a:hover { color: #fff; background: #1d2080; transition: 1s; }



/* 制御演出の事例紹介 */
#control_box figcaption { color: #1d2080; }
.link_txt { position: absolute; bottom: 0; right: 0; text-decoration: underline; color: #c51654!important; }
.form_link {margin-top: 1em; padding: 1.5em; border: 1px solid; text-align: center; }
.form_link a { display: inline-block; padding: 0.8em 3em; background: #263c9b; border: none; border-radius: 7px; color: #fff; font-size: 1.3em; font-weight: bold;}

/* Twinkly */
#twinkly .con .box { margin:3em 0 1em; }
#twinkly .fright { margin-top: 1em; padding: 0 0.5em;}
#twinkly .control_example { color: #333; }
.ttl_example h4 { margin: 0.4em 0 6px 0 !important; border-bottom: 1px solid; font-size: 1.2em; color: #1d2080;}
.cap_flex { display: flex ; justify-content: flex-start; }
.cap_flex ul { list-style-type: none; }
.howto_twinkly .control_sttl { margin-bottom: 1.2em; }
figcaption.twinkly_box { font-weight: normal; }

.example_box { margin-block: 1.5em 2.5em; }
.example_box figure { gap: 1.5em; }
.example_box figcaption { width: 48%; }

/* アイテムラインアップ */
.twinkly_item .item_box { display: flex; margin: 1em 0 1.5em; gap: 2em; }
.twinkly_item h4 { color: #1d2080; }
.twinkly_item ul { row-gap: 3em; }
.twinkly_item ul li { width: 31%; }
.twinkly_item ul li figure { border: 1px solid #999; }
.twinkly_item ul li h4 { margin-block: 0.8em 0.5em; }
.twinkly_item ul li p { margin-top: 0.5em; line-height: 1.7; }
.twinkly_item .image_photo { margin-top: 3em; }


/* 設定 */
.howto_twinkly h4 { margin-block: 2em 0em; font-size: 1.2em; color: #1d2080; }
.howto_twinkly .setting_box:first-child { width: 43%; }
.howto_twinkly .setting_box:last-child { width: 55%; }
.howto_twinkly .setting_box { width: 48%; }
.howto_twinkly .setting_box .twinkly_app { gap: 1em; }
.howto_twinkly .setting_box p { margin-top: 0.5em; font-weight: bold; }
.howto_twinkly .setting_box span { font-weight: normal; font-size: 0.9em; }
.howto_twinkly .setting_box .small { margin-top: 1em; font-size: 0.7em; color: #000; }
.howto_twinkly .setting_box a:hover { opacity: 0.7; }
.howto_twinkly .setting_box > a > div , .howto_twinkly .setting_box > div { justify-content: center; align-items: center; height: 160px; gap: 2em; padding: 1em; border: 1px solid #000; }

/* 注意事項 */
.note { padding: 1em; background: #ebebeb; }
.note p { margin-bottom: 0.5em; }
.note ul { font-size: 0.9em; }