@charset "utf-8";

/* ****************************************************************************

　オープンイノベーション トップ（レスポンシブ / ブレイクポイント：767px）

-------------------------------------------------------------------------------

　01. 基本
　02. 追従CV
　03. メインビジュアル
　04. 見出し
　05. 募集テーマ
　06. CVボタン
　07. 活用できるアセット
　08. ご提案フロー
　09. 共創事例
　10. よくある質問
　11. ソーシャル上部設置
　12. スマートフォン（max-width: 767px）

******************************************************************************* */
/* ==

　01. 基本

=============================================================================== */
#main.oiPage {
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: #333;
font-family: 'Noto Sans JP', "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Arial, Helvetica, sans-serif;
	line-height: 1.6;
}
#main.oiPage img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
#main.oiPage section {
	position: relative;
}
.oiIn {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
#main.oiPage p,
#main.oiPage ul,
#main.oiPage dl,
#main.oiPage dd,
#main.oiPage h1,
#main.oiPage h2,
#main.oiPage h3,
#main.oiPage h4 {
	margin: 0;
	padding: 0;
}
#main.oiPage ul {
	list-style: none;
	padding-right: 15px;
}
/* ==

　02. 追従CV

=============================================================================== */
.oiFixCv {
	position: fixed;
	top: 160px;
	right: 0;
	z-index: 100;
}
.oiFixCv a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 123px;
	height: 121px;
	background-color: #e50012;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 28px;
	text-align: center;
	text-decoration: none;
	transition: opacity 0.3s;
}
.oiFixCv a:hover {
	opacity: 0.8;
	color: #fff;
	text-decoration: none;
}
.oiFixCv_ico {
	display: none;
}
/* ==

　03. メインビジュアル

=============================================================================== */
.oiMv {
	padding: clamp(70px, 10.7vw, 150px) 0 clamp(40px, 5.4vw, 76px);
	background: #fff url(/open_innovation/images/bg_main01.jpg) no-repeat center top;
	background-size: max(100%, min(137.143%, 1920px)) auto;
	text-align: center;
	box-sizing: border-box;
	aspect-ratio: 1400 / 960;
}
#main.oiPage .oiMv {
	margin-bottom: calc(min(47.81%, 670px) + 40px - 68.571%);
}
#main.oiPage .oiMv_tit {
	margin-bottom: clamp(20px, 3.1vw, 43px);
	border: none;
	background: none;
	line-height: 1;
}
.oiMv_titSub,
.oiMv_titMain {
	display: block;
	color: #fff;
	letter-spacing: 0;
	white-space: nowrap;
}
.oiMv_titSub {
	padding-top: 0.4em;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: clamp(13.53px, 2.285vw, 32px);
}
.oiMv_titEn {
	font-size: 0.969em;
	font-weight: 500;
}
.oiMv_titJa {
	margin-left: 1.04em;
	font-weight: 400;
}
.oiMv_titMain {
	margin-top: 0.146em;
	padding-bottom: 0.287em;
	font-family: 'Roboto', sans-serif;
	font-size: clamp(43.14px, 7.282vw, 102px);
	font-weight: 300;
}
#main.oiPage .oiMv_txt {
	color: #fff;
	font-size: clamp(14px, 2.14vw, 30px);
	line-height: 1.75;
	text-shadow: 0 0 16px rgba(0, 0, 0, 0.7), 0 0 6px rgba(0, 0, 0, 0.45);
}
/* ==

　04. 見出し

=============================================================================== */
.oiHead {
	padding-bottom: 47px;
	text-align: center;
}
#main.oiPage .oiHead_tit {
	position: relative;
	padding-bottom: 20px;
	border: none;
	background: none;
	color: #333;
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
}
#main.oiPage .oiHead_tit::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 81px;
	height: 5px;
	margin-left: -40px;
	background-color: #e50012;
}
#main.oiPage .oiHead_sub {
	margin-top: 17px;
	color: #333;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.08em;
	line-height: 1.2;
}
/* ==

　05. 募集テーマ

=============================================================================== */
.oiTheme {
	padding: 0;
}
.oiTheme .oiHead {
	padding-bottom: 37px;
}
#main.oiPage .oiTheme_lead {
	margin-bottom: 56px;
	font-size: 24px;
	line-height: 40px;
	text-align: center;
}
.oiTheme_item {
	position: relative;
	margin-bottom: 24px;
}
#main.oiPage .oiTheme_tit {
	position: relative;
	isolation: isolate;
	padding: 0 64px;
	border: none;
	border-radius: 5px;
	background: #d65a58;
	color: #fff;
	font-size: 32px;
	font-weight: bold;
	letter-spacing: 0.04em;
	line-height: 64px;
}
#main.oiPage .oiTheme_tit::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	border-radius: inherit;
	background: url(/open_innovation/images/bg_hanten.svg) 0 0 repeat;
	mix-blend-mode: soft-light;
}
.oiTheme_body {
	padding: 41px 39.3% 0 64px;
	min-height: 268px;
	box-sizing: border-box;
}
#main.oiPage .oiTheme_sub {
	margin-bottom: 22px;
	border: none;
	background: none;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.4;
}
.oiTheme_img {
	position: absolute;
	top: 84px;
	right: 2.45%;
	width: 34.4%;
	max-width: 378px;
	line-height: 1;
}
.oiTheme_img img {
	border-radius: 5px;
}
.oiList li {
	margin-bottom: 13px;
	padding-left: 1em;
	font-size: 18px;
	line-height: 30px;
	text-indent: -1em;
}
.oiList li:last-child {
	margin-bottom: 0;
}
.oiList li::before {
	content: "・";
}
.oiList sub {
	font-size: 75%;
	vertical-align: baseline;
}
/* その他広い領域
------------------------------------------------------------------------------- */
.oiTheme_item-other {
	margin-top: 52px;
	margin-bottom: 0;
}
#main.oiPage .oiTheme_item-other .oiTheme_tit {
	border-radius: 5px 5px 0 0;
	background: #3a79b5;
	line-height: 56px;
}
.oiTheme_item-other .oiTheme_body {
	min-height: 0;
	padding: 24px 64px 16px;
	border-radius: 0 0 10px 10px;
	background: linear-gradient(90deg, #cde0fa 0%, #eaecef 100%);
}
#main.oiPage .oiTheme_item-other .oiTheme_txt {
	margin-bottom: 22px;
	font-size: 24px;
	line-height: 1.4;
}
.oiTheme_item-other .oiList {
	padding-right: 30%;
}
.oiTheme_item-other .oiTheme_img {
	top: 170px;
	right: 2.35%;
	width: 30.9%;
	max-width: 340px;
}
/* ==

　06. CVボタン

=============================================================================== */
.oiCv {
	padding: 129px 0 0;
	text-align: center;
}
.oiCv_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	max-width: 596px;
	height: 109px;
	margin: 0 auto;
	background-color: #e50012;
	color: #fff;
	font-size: 26px;
	font-weight: bold;
	text-decoration: none;
	transition: opacity 0.3s;
}
.oiCv_btn:hover {
	opacity: 0.8;
	color: #fff;
	text-decoration: none;
}
.oiCv_ico {
	position: absolute;
	top: 50%;
	left: 40px;
	margin-top: -26px;
	line-height: 1;
}
.oiCv_arrow {
	position: absolute;
	top: 50%;
	right: 24px;
	margin-top: -10px;
	line-height: 1;
}
/* ==

　07. 活用できるアセット

=============================================================================== */
.oiAssets {
	padding: 118px 0 0;
	background: linear-gradient(180deg, #ffffff 0%, #fef2f2 17%, #ffffff 100%);
	text-align: center;
}
.oiAssets .oiHead {
	padding-bottom: 20px;
}
#main.oiPage .oiAssets_lead {
	font-size: 24px;
	line-height: 32px;
}
#main.oiPage .oiAssets_cap {
	margin-top: 51px;
	font-size: 24px;
	line-height: 1.4;
}
#main.oiPage .oiAssets_list {
	display: flex;
	flex-wrap: wrap;
	width: 752px;
	max-width: 100%;
	margin: 40px auto 0;
	text-align: left;
}
.oiAssets_list li {
	width: 50%;
	margin-bottom: 22px;
	padding-left: 1em;
	font-size: 24px;
	line-height: 1.4;
	text-indent: -1em;
	box-sizing: border-box;
}
.oiAssets_list li::before {
	content: "・";
}
/* 詳細はこちらボタン
------------------------------------------------------------------------------- */
.oiMore {
	padding-top: 29px;
}
.oiMore_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	max-width: 581px;
	height: 100px;
	margin: 0 auto;
	background-color: #0a3d9b;
	color: #fff;
	font-size: 26px;
	font-weight: bold;
	text-decoration: none;
	transition: opacity 0.3s;
}
.oiMore_btn:hover {
	opacity: 0.8;
	color: #fff;
	text-decoration: none;
}
.oiMore_arrow {
	position: absolute;
	top: 50%;
	right: 24px;
	width: 82px;
	height: 20px;
	margin-top: -10px;
}
.oiMore_arrow img {
	display: block;
	width: 82px;
	height: 20px;
}
/* ==

　08. ご提案フロー

=============================================================================== */
.oiEntry {
	padding: 64px 0 0;
	background-color: #fff;
	text-align: center;
}
.oiEntry .oiHead {
	padding-bottom: 13px;
}
.oiEntry_flow {
	width: 950px;
	max-width: 100%;
	margin: 17px auto 0;
	text-align: left;
}
#main.oiPage .oiEntry_note {
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.5;
}
/* ==

　09. 共創事例

=============================================================================== */
.oiCases {
	padding: 136px 0 0;
	background: linear-gradient(180deg, #ffffff 0%, #fef2f2 26%, #ffffff 100%);
	text-align: center;
}
.oiCases .oiHead {
	padding-bottom: 30px;
}
#main.oiPage .oiCases_lead {
	font-size: 24px;
	line-height: 32px;
}
.oiCases .oiMore {
	padding-top: 55px;
}
/* ==

　10. よくある質問

=============================================================================== */
.oiFaq {
	padding: 83px 0 40px;
}
.oiFaq .oiHead {
	padding-bottom: 61px;
}
#main.oiPage .oiFaq_item {
	margin-bottom: 20px;
	border-radius: 8px;
	background-color: #f1f1f1;
	overflow: hidden;
}
#main.oiPage .oiFaq_item:last-child {
	margin-bottom: 0;
}
.oiFaq_q {
	margin: 0;
}
.oiFaq_btn {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 30px 90px 30px 87px;
	border: none;
	background: none;
	color: #333;
	font-family: inherit;
	font-size: 24px;
	line-height: 26px;
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
.oiFaq_mark {
	position: absolute;
	top: 30px;
	left: 33px;
	color: #e50012;
	font-size: 24px;
	font-weight: normal;
	line-height: 26px;
}
.oiFaq_ico {
	position: absolute;
	top: 50%;
	right: 30px;
	width: 30px;
	height: 30px;
	margin-top: -15px;
}
.oiFaq_ico::before,
.oiFaq_ico::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 30px;
	height: 3px;
	margin-top: -1px;
	background-color: #e50012;
	transition: transform 0.3s;
}
.oiFaq_ico::after {
	transform: rotate(90deg);
}
.oiFaq_item.is-open .oiFaq_ico::after {
	transform: rotate(0deg);
}
.oiFaq_a {
	max-height: 0;
	margin: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
#main.oiPage .oiFaq_item.is-open .oiFaq_a {
	max-height: 1000px;
}
.oiFaq_aIn {
	position: relative;
	padding: 0 70px 18px 83px;
}
.oiFaq_aIn p {
	font-size: 18px;
	line-height: 25px;
}
.oiFaq_mark-a {
	top: 0;
	left: 35px;
}
.oiFaq .oiCv {
	padding-top: 49px;
}
/* ==

　11. ソーシャル上部設置

=============================================================================== */
#socialAreaC {
	position: absolute;
	top: -1px;
	right: 0;
	overflow: hidden;
}
#socialAreaC ul {
	float: right;
}
#socialAreaC li {
	float: left;
	line-height: 1;
	margin-right: 11px;
	vertical-align: top;
}
#socialAreaC li a {
	margin-right: 0;
	padding-right: 0;
	background: none;
}
#socialAreaC .twitter {
	width: 75px;
	height: 20px;
	overflow: hidden;
}
/* ==

　12. スマートフォン（max-width: 767px）

=============================================================================== */
@media screen and (max-width: 767px) {
#main.oiPage {
	line-height: 1.7;
}
.oiIn {
	padding: 0 5.33%;
}
body {
	padding-bottom: 48px;
}
/* 追従CV */
.oiFixCv {
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
}
.oiFixCv a {
	width: 100%;
	height: auto;
	padding: 10px 0;
	font-size: 15px;
	line-height: 1.4;
}
.oiFixCv br {
	display: none;
}
.oiFixCv_ico {
	display: block;
	margin-right: 10px;
	line-height: 1;
}
.oiFixCv_ico img {
	display: block;
	width: 28px;
	height: 28px;
}
/* メインビジュアル */
.oiMv {
	padding: 60px 0 50px;
	background-image: url(/open_innovation/images/bg_main01_smp.jpg);
	background-position: center -25px;
	background-size: 100% auto;
	aspect-ratio: 768 / 1046;
}
#main.oiPage .oiMv {
	margin-bottom: calc(350px - 136.2vw);
}
#main.oiPage .oiMv_tit {
	margin-bottom: calc(clamp(20px, 6.4vw, 36px) - 10px);
}
.oiMv_titSub {
	padding-top: 0.4915em;
	font-size: min(13.81px, 3.596vw);
}
.oiMv_titEn {
	font-size: 0.987em;
}
.oiMv_titJa {
	margin-left: 1.12em;
}
.oiMv_titMain {
	margin-top: 0.201em;
	padding-bottom: 0.318em;
	font-size: min(43.16px, 11.243vw);
}
#main.oiPage .oiMv_txt {
	font-size: 14px;
	line-height: 1.9;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.8);
}
.oiMv_txt br {
	display: none;
}
/* 見出し */
.oiHead,
.oiAssets .oiHead,
.oiCases .oiHead,
.oiFaq .oiHead {
	padding-bottom: 26px;
}
.oiEntry .oiHead {
	padding-bottom: 14px;
}
#main.oiPage .oiHead_tit {
	padding-bottom: 12px;
	font-size: 22px;
}
#main.oiPage .oiHead_tit::after {
	width: 54px;
	height: 3px;
	margin-left: -27px;
}
#main.oiPage .oiHead_sub {
	margin-top: 10px;
	font-size: 13px;
}
/* 募集テーマ */
.oiTheme {
	padding-top: 10px;
}
#main.oiPage .oiTheme_lead {
	margin-bottom: 30px;
	font-size: 15px;
	line-height: 1.8;
	text-align: left;
}
.oiTheme_lead br {
	display: none;
}
.oiTheme_item {
	display: flex;
	flex-direction: column;
	margin-bottom: 32px;
}
#main.oiPage .oiTheme_tit {
	order: 1;
	padding: 12px 36px 12px 20px;
	font-size: 20px;
	line-height: 1.4;
}
.oiTheme_img {
	order: 2;
}
.oiTheme_body {
	order: 3;
}
.oiTheme_item-other {
	display: block;
}
.oiTheme_body {
	min-height: 0;
	padding: 18px 0 0;
}
#main.oiPage .oiTheme_sub {
	margin-bottom: 12px;
	font-size: 17px;
}
.oiTheme_img {
	position: static;
	width: auto;
	max-width: none;
	margin-top: 20px;
	margin-bottom: 18px;
	text-align: center;
}
.oiTheme_img img {
	width: 100%;
	max-width: 414px;
}
.oiList li {
	margin-bottom: 12px;
	font-size: 13px;
	line-height: 1.7;
}
/* その他広い領域 */
.oiTheme_item-other {
	margin-top: 40px;
}
#main.oiPage .oiTheme_item-other .oiTheme_tit {
	line-height: 1.4;
}
.oiTheme_item-other .oiTheme_body {
	padding: 18px 20px 24px;
	border-radius: 0 0 6px 6px;
}
.oiTheme_item-other .oiList {
	padding-right: 0;
}
#main.oiPage .oiTheme_item-other .oiTheme_txt {
	margin-bottom: 16px;
	font-size: 15px;
	line-height: 1.7;
}
.oiTheme_item-other .oiTheme_img {
	width: auto;
	max-width: none;
	margin: 0 0 16px;
}
.oiTheme_item-other .oiTheme_img img {
	max-width: 340px;
}
/* CVボタン */
.oiCv {
	padding-top: 40px;
}
.oiCv_btn {
	height: 64px;
	font-size: 16px;
}
.oiCv_ico {
	left: 16px;
	margin-top: -16px;
}
.oiCv_ico img {
	width: 32px;
	height: 32px;
}
.oiCv_arrow {
	right: 12px;
	margin-top: -6px;
}
.oiCv_arrow img {
	width: 50px;
	height: 12px;
}
/* 活用できるアセット */
.oiAssets {
	margin-top: 50px;
	padding: 50px 0 40px;
}
#main.oiPage .oiAssets_lead {
	font-size: 15px;
	line-height: 1.8;
	text-align: left;
}
.oiAssets_lead br {
	display: none;
}
#main.oiPage .oiAssets_cap {
	margin-top: 28px;
	font-size: 15px;
}
#main.oiPage .oiAssets_list {
	width: auto;
	margin-top: 16px;
}
.oiAssets_list li {
	width: 100%;
	margin-bottom: 8px;
	font-size: 15px;
}
/* 詳細はこちらボタン */
.oiMore {
	padding-top: 24px;
}
.oiMore_btn {
	width: calc(100% - 16px);
	height: 48px;
	font-size: 16px;
}
.oiMore_arrow {
	right: 12px;
	width: 50px;
	height: 12px;
	margin-top: -6px;
}
.oiMore_arrow img {
	width: 50px;
	height: 12px;
}
/* ご提案フロー */
.oiEntry {
	padding: 40px 0 30px;
}
.oiEntry_flow {
	width: auto;
	margin-top: 20px;
	text-align: center;
}
.oiEntry_flow img {
	width: 100%;
	max-width: 357px;
}
#main.oiPage .oiEntry_note {
	margin-top: 10px;
	font-size: 11px;
	text-align: left;
}
/* 共創事例 */
.oiCases {
	padding: 50px 0 40px;
}
#main.oiPage .oiCases_lead {
	font-size: 15px;
	line-height: 1.8;
	text-align: left;
}
.oiCases_lead br {
	display: none;
}
.oiCases .oiMore {
	padding-top: 24px;
}
/* よくある質問 */
.oiFaq {
	padding: 40px 0 50px;
}
#main.oiPage .oiFaq_item {
	margin-bottom: 10px;
	border-radius: 6px;
}
.oiFaq_btn {
	padding: 16px 44px 16px 44px;
	font-size: 15px;
	line-height: 1.5;
}
.oiFaq_mark {
	top: 16px;
	left: 16px;
	font-size: 15px;
	line-height: 1.5;
}
.oiFaq_ico {
	right: 14px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
}
.oiFaq_ico::before,
.oiFaq_ico::after {
	width: 18px;
}
.oiFaq_aIn {
	padding: 0 16px 16px 44px;
}
.oiFaq_aIn p {
	font-size: 13px;
	line-height: 1.8;
}
.oiFaq_mark-a {
	left: 18px;
	font-size: 13px;
	line-height: 1.8;
}
.oiFaq .oiCv {
	padding-top: 30px;
}
/* ソーシャル上部設置 */
#socialAreaC {
	position: static;
	padding: 10px 10px 0;
}
#socialAreaC li {
	display: block !important;
}
#socialAreaC .pathActive {
	float: left;
	width: auto;
	line-height: 1;
	margin-right: 11px;
	vertical-align: top;
}
#socialAreaC .pathActive a {
	display: inline;
	min-height: 0;
	line-height: 1.3;
	padding: 0;
	background: none;
}
#socialAreaC li a {
	margin-right: 0;
	padding-right: 0;
	background: none;
}
}