@charset "utf-8";
/***************************************************
information
filename : matching_parts.css;
***************************************************/
/*======== app_matching_dez.css ========*/
/****************** 手配管理要素 ******************/
/* ** matching_navi start ** */
/*** 01: マッチング管理ナビ ***/
/* マッチング管理ナビ(アイコン) */
/* マッチングトップ */
.mypTp01.mypagenav a.matchingtop,
.mypTp02.mypagenav a.matchingtop {background: var(--app-matchingtop-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav li.crt a.matchingtop,
.mypTp02.mypagenav li.crt a.matchingtop {background: var(--app-matchingtop-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bga);}
/* BIZ会員検索 */
.mypTp01.mypagenav a.matchingbizsearh,
.mypTp02.mypagenav a.matchingbizsearh {background: var(--app-matchingbizsearh-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav li.crt a.matchingbizsearh,
.mypTp02.mypagenav li.crt a.matchingbizsearh {background: var(--app-matchingbizsearh-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bga);}
/* 現場・プロジェクト検索 */
.mypTp01.mypagenav a.matchingcstsearh,
.mypTp02.mypagenav a.matchingcstsearh {background: var(--app-matchingcstsearh-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav li.crt a.matchingcstsearh,
.mypTp02.mypagenav li.crt a.matchingcstsearh {background: var(--app-matchingcstsearh-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bga);}
/* APP会員検索 */
.mypTp01.mypagenav a.matchingappsearh,
.mypTp02.mypagenav a.matchingappsearh {background: var(--app-matchingappsearh-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav li.crt a.matchingappsearh,
.mypTp02.mypagenav li.crt a.matchingappsearh {background: var(--app-matchingappsearh-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bga);}
/*** コミュニティ設定 ***/
/* コミュニティ検索 */
.mypTp01.mypagenav a.matchingcomusearh,
.mypTp02.mypagenav a.matchingcomusearh {background: var(--app-matchingcomusearh-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav li.crt a.matchingcomusearh,
.mypTp02.mypagenav li.crt a.matchingcomusearh {background: var(--app-matchingcomusearh-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bga);}
/* 友達管理 */
.mypTp01.mypagenav a.matchingfriend,
.mypTp02.mypagenav a.matchingfriend {background: var(--app-matchingfriend-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav li.crt a.matchingfriend,
.mypTp02.mypagenav li.crt a.matchingfriend {background: var(--app-matchingfriend-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bga);}
/* 参加コミュニティ */
.mypTp01.mypagenav a.matchingcommunitypart,
.mypTp02.mypagenav a.matchingcommunitypart {background: var(--app-matchingcommunitypart-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav li.crt a.matchingcommunitypart,
.mypTp02.mypagenav li.crt a.matchingcommunitypart {background: var(--app-matchingcommunitypart-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bga);}
/* 登録コミュニティ */
.mypTp01.mypagenav a.matchingcommunityreg,
.mypTp02.mypagenav a.matchingcommunityreg {background: var(--app-matchingcommunityreg-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bg);}
.mypTp01.mypagenav li.crt a.matchingcommunityreg,
.mypTp02.mypagenav li.crt a.matchingcommunityreg {background: var(--app-matchingcommunityreg-ico) var(--app-mypagenav-pos) center no-repeat var(--app-mypagenav-bga);}
.mypTp01.mypagenav a.mypnavIco,
.mypTp02.mypagenav a.mypnavIco,
.mypTp01.mypagenav li.crt a.mypnavIco,
.mypTp02.mypagenav li.crt a.mypnavIco {background-size:24px 24px;}
/* ナビタイトル */
.matching_naviTi {
margin: 2.0rem auto 0.3rem auto; /* マージン */
padding: 0.4rem 1.0rem; /* パディング */
text-align: left;
line-height: 1.6; /* 行間 */
font-size: var(--font-nav-title);
font-weight: var(--fw-heading);
border-radius: var(--app-mypagenav-ti-rod);
color: var(--app-mypagenav-ti-txt); /* テキスト色 */
background: var(--app-mypagenav-ti-bg); /* 背景色 */
}
:root {
/****** マッチング管理サイドナビボタン ******/
--matchingBox-rod: var(--rod-box); /* 角丸 */
/*** 検索 ***/
/* マッチングトップ */
--app-matchingtop-ico-b: url('data:image/svg+xml;utf8,');
--app-matchingtop-ico-w: url('data:image/svg+xml;utf8,');
/* BIZ会員検索 */
--app-matchingbizsearh-ico-b: url('data:image/svg+xml;utf8,');
--app-matchingbizsearh-ico-w: url('data:image/svg+xml;utf8,');
/* 現場・プロジェクト検索 */
--app-matchingcstsearh-ico-b: url('data:image/svg+xml;utf8,');
--app-matchingcstsearh-ico-w: url('data:image/svg+xml;utf8,');
/* APP会員検索 */
--app-matchingappsearh-ico-b: url('data:image/svg+xml;utf8,');
--app-matchingappsearh-ico-w: url('data:image/svg+xml;utf8,');
/*** コミュニティ設定 ***/
/* コミュニティ検索 */
--app-matchingcomusearh-ico-b: url('data:image/svg+xml;utf8,');
--app-matchingcomusearh-ico-w: url('data:image/svg+xml;utf8,');
/* 友達管理 */
--app-matchingfriend-ico-b: url('data:image/svg+xml;utf8,');
--app-matchingfriend-ico-w: url('data:image/svg+xml;utf8,');
/* 参加コミュニティ */
--app-matchingcommunitypart-ico-b: url('data:image/svg+xml;utf8,');
--app-matchingcommunitypart-ico-w: url('data:image/svg+xml;utf8,');/* 登録コミュニティ */
--app-matchingcommunityreg-ico-b: url('data:image/svg+xml;utf8,');
--app-matchingcommunityreg-ico-w: url('data:image/svg+xml;utf8,');
}
/* ** matching_navi end ** */
/* ** matching_box start ** */
/* マッチング用カラー制御 */
.matching .popupTi,
.matching .btdezpt01 .DetSubBtArea li.crt a,
.matching .btdezpt02 .DetSubBtArea,
.matching .btdezpt04 .DetSubBtArea,
.matching .NewOrdBt,
.matching .EditDetBt,
.matching .searchOpCl,
.matching .searchOpCl .slide_btn,
.matching .seplBt,
.matching .editBt a,
.matching .editBt button,
.matching .editBt span,
.matching .editBt.DisDetailBt a,
.matching .editBt.DisDetailBt button,
.matching .editBt.DisDetailBt span {background: var(--brand-primary-matching);}
.matching .btdezpt02 .DetSubBtArea li.crt a,
.matching .mainTi {color: var(--brand-primary-matching);}
.matching .btdezpt03 .DetSubBtArea li.crt a {border-bottom: 3px solid var(--brand-primary-matching);}
.matching .matchingSetTi {background: var(--brand-primary-matching);}
.matching .matchingSetBtEdit a {
background: var(--brand-primary-matching); /* 背景色 */
border: var(--brand-primary-matching); /* ボーダー指定 */
}
.matching .btcontrast.btdezpt04 .DetSubBtArea a,
.matching .btcontrast.btdezpt04 .DetSubBtArea span {border-bottom: var(--brand-primary-matching);}
/* ** matching_box end ** */
/* ** matching_parts start ** */
/*** マッチング専用の各種パーツ設定 ***/
/* 登録リスト表示箇所設定 */
.matchingSetFlx {display: flex;align-items: flex-start;gap: 1.5rem;}
.matchingSetFlxInn {width: 50%;}
.matchingSetFlxInn {padding: 1.0rem 0;}
.matchingSetIdsTi {font-size: var(--font-heading);}
.matchingSetIdsData {font-size: var(--font-heading);}
.FlexListBX .matchingSetFlx {display: block;padding: 0 1.5rem;}
.FlexListBX .matchingSetFlxInn {width: 100%;}
/* カウント箇所設定 */
:root {
--app-matchingSetCnt-txt: var(--color-text-matchingSetCnt); /* テキスト色 */
--app-matchingSetCnt-bg: var(--color-bg-matchingSetCnt); /* 背景色 */
--app-matchingSetCnt-brd: var(--color-brd-matchingSetCnt) /* ボーダー指定 */
}
.matchingSetCnt {
margin: 1.0rem auto;
display: flex;
align-items: center;
padding: 1.5rem 1.0rem;
color: var(--app-matchingSetCnt-txt); /* テキスト色 */
background: var(--app-matchingSetCnt-bg); /* 背景色 */
line-height: 1.2;
}
.matchingSetCntBox {
width: 100%;
text-align: center;
border-left: var(--app-matchingSetCnt-brd); /* ボーダー指定 */
}
.matchingSetCntBox:last-child {
border-right: var(--app-matchingSetCnt-brd); /* ボーダー指定 */
}
.matchingSetCntSup {font-size: var(--font-label);}
.matchingSetCntTxt {font-size: var(--font-sub-title);font-weight: var(--fw-heading);}
@media screen and (max-width: 600px) {
.matchingSetCnt {margin: 0 auto 1.0rem auto;padding: 1.5rem 0.5rem;}
}
/* ==================================================
公開側プロフィールカードの設定
public_profile_wのレイアウトで使用
================================================== */
.matchingSetBoxHead {
width: 100%;
margin: 0 auto;
padding: 2.5rem 1rem;
}
.matchingSetBoxInn {margin: 0 auto;}
.matchingSetBox .matchingSetBoxHead {padding-top: 0.5rem;}
.matchingSetDetail {
display: flex;
align-items: flex-start;
gap: 1.5rem;
padding-bottom: 1rem;
}
.matchingSetDetail .myPhoto {
flex: 0 0 20%;
padding: 0;
}
.matchingPhotoBox.PhotoProfileRectL.photo_RectangleOn .matchingSetDetail .myPhoto,
.matchingPhotoBox.PhotoProfileRectL.photoRectangleOn .matchingSetDetail .myPhoto {flex: 0 0 min(40%, 420px);max-width: 420px;}
.matchingPhotoBox.PhotoProfileRectL.photo_RectangleOn .matchingSetDetail .photoArea,
.matchingPhotoBox.PhotoProfileRectL.photoRectangleOn .matchingSetDetail .photoArea {aspect-ratio: 16 / 9;height: auto;}
@media screen and (max-width: 900px) {
.matchingPhotoBox.PhotoProfileRectL.photo_RectangleOn .matchingSetDetail,
.matchingPhotoBox.PhotoProfileRectL.photoRectangleOn .matchingSetDetail {flex-wrap: wrap;}
.matchingPhotoBox.PhotoProfileRectL.photo_RectangleOn .matchingSetDetail .myPhoto,
.matchingPhotoBox.PhotoProfileRectL.photoRectangleOn .matchingSetDetail .myPhoto {flex: 0 0 100%;max-width: 100%;}
}
.matchingSetDetail .myPhoto .photoAreaPos,
.matchingSetDetail .myPhoto .photoArea {
width: var(--app-photoArea-size, 180px);
height: var(--app-photoAreah-size, 180px);
}
.matchingSetDetail .matchingSetDetInn,
.matchingSetDetail .matchingSetDetInnW {
flex: 1 1 auto;
min-width: 0;
padding: 0;
}
.matchingSetDetail .matchingSetDetBt {
flex: 0 0 18%;
padding: 0;
}
.matchingSetName {font-size: var(--font-main-title-b);}
.matchingSetAdd {
min-height: 2rem;
font-size: var(--font-text);
}
.matchingSetInfo {
padding: 2rem 0;
font-size: var(--font-text-lg);
}
.matchingSetIndustryTi {
margin-top: 1rem;
font-size: var(--font-text);
}
.matchingStaffBizLinks .FlexItemDataInfo {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.matchingStaffBizLinks .IcoBox {
display: inline-flex;
align-items: center;
max-width: 100%;
white-space: normal;
}
@media screen and (max-width: 768px) {
.matchingSetDetail {
flex-wrap: wrap;
gap: 1rem;
}
.matchingSetDetail .myPhoto {
flex: 0 0 28%;
}
.matchingSetDetail .matchingSetDetInn,
.matchingSetDetail .matchingSetDetInnW {
flex: 1 1 calc(72% - 1rem);
}
.matchingSetDetail .matchingSetDetBt {
flex: 0 0 100%;
}
}
@media screen and (max-width: 480px) {
.matchingSetDetail {
display: block;
}
.matchingSetDetail .myPhoto,
.matchingSetDetail .matchingSetDetInn,
.matchingSetDetail .matchingSetDetInnW,
.matchingSetDetail .matchingSetDetBt {
width: 100%;
}
.matchingSetDetail .myPhoto {
margin-bottom: 1rem;
}
.matchingSetDetail .matchingSetDetBt {
margin-top: 1rem;
}
}
/* ** matching_parts end ** */
/* ** matching_detail start ** */
/* ==================================================
公開側・自社プロフィール詳細の設定
matching_profile_detail_boxesのレイアウトで使用
================================================== */
/* 基本枠 */
.matchingSetDetMain,
.matchingSetDetList {
width: 100%;
margin: 4.0rem auto;
padding: 0 3.0rem;
}
/* 基本情報箇所設定 */
.matchingSetDetMain {
display: flex;
align-items: flex-start;
gap: 2.0rem;
}
.matchingSetOclm {
margin: 0 auto;
padding: 1.5rem;
}
/* 本文箇所設定 */
.matchingSetDet {
width: 100%;
padding: 0 3.0rem;
}
.matchingSetDetTi {
font-size: var(--font-main-title-b);
line-height: 1.35;
padding: 2.0rem 0 4.0rem 0;
}
.matchingSetDetTxt {
font-size: var(--font-text-lg);
line-height: 2.25;
padding: 2.0rem 1.0rem 5.0rem 1.0rem;
}
@media screen and (max-width: 600px) {
.matchingSetDetMain,
.matchingSetDetList {
margin: 2.0rem auto;
padding: 0 0.5rem;
display: block;
}
.matchingSetDet {padding: 2.0rem;}
.matchingSetDetTi {padding: 1.0rem 0;}
.matchingSetDetTxt {padding: 1.0rem 0.5rem 3.0rem 0.5rem;}
}
/* ** matching_detail end ** */
/* ** matching_bt start ** */
/* ボタン箇所設定 */
:root {
--app-matchingSetBtFr-txt: var(--color-text-bt-next); /* テキスト色 */
--app-matchingSetBtFr-bg: var(--color-bg-bt-next); /* 背景色 */
--app-matchingSetBtFr-brd: var(--color-brd-bt-next); /* ボーダー指定 */
--app-matchingSetBtFr-sd: var(--color-sd-bt-next); /* 背景影色 */
--app-matchingSetBtFb-txt: var(--color-text-bt-base); /* テキスト色 */
--app-matchingSetBtFb-bg: var(--color-bg-bt-base); /* 背景色 */
--app-matchingSetBtFb-brd: var(--color-brd-bt-base); /* ボーダー指定 */
--app-matchingSetBtFb-sd: var(--color-sd-bt-base); /* 背景影色 */
--app-matchingSetBtFb-crt-txt: var(--color-text-bt-crt); /* テキスト色 */
--app-matchingSetBtFb-crt-bg: var(--color-bg-bt-crt); /* 背景色 */
--app-matchingSetBtFb-crt-brd: var(--color-brd-bt-crt); /* ボーダー指定 */
--app-matchingSetBtFb-crt-sd: var(--color-sd-bt-crt); /* 背景影色 */
}
/* マッチングボタン設定 */
.FlexListBX .matchingSetDetail .matchingSetDetBt {
display: flex;
gap: 0.5rem 0.5rem;
padding: 0.5rem;
}
.matchingSetBtFr,
.matchingSetBtFb {
width: 100%;
font-size: var(--font-button);
font-weight: var(--fw-bt);
}
.matchingSetBtFr a,
.matchingSetBtFr span {
color: var(--app-matchingSetBtFr-txt); /* テキスト色 */
background: var(--app-matchingSetBtFr-bg); /* 背景色 */
border: var(--app-matchingSetBtFr-brd); /* ボーダー指定 */
box-shadow: var(--app-matchingSetBtFr-sd); /* 背景影色 */
}
.matchingSetBtFb a,
.matchingSetBtFb span {
color: var(--app-matchingSetBtFb-txt); /* テキスト色 */
background: var(--app-matchingSetBtFb-bg); /* 背景色 */
border: var(--app-matchingSetBtFb-brd); /* ボーダー指定 */
box-shadow: var(--app-matchingSetBtFb-sd); /* 背景影色 */
}
.matchingSetBtFb.crt a,
.matchingSetBtFb.crt span {
color: var(--app-matchingSetBtFb-crt-txt); /* テキスト色 */
background: var(--app-matchingSetBtFb-crt-bg); /* 背景色 */
border: var(--app-matchingSetBtFb-crt-brd); /* ボーダー指定 */
box-shadow: var(--app-matchingSetBtFb-crt-sd); /* 背景影色 */
}
.matchingSetBtFr a,
.matchingSetBtFr span,
.matchingSetBtFb a,
.matchingSetBtFb span {
margin: 0.5rem auto;
padding: 1.5rem 0.5rem;
}
/* お気に入りボタンアニメーション */
.matchingSetBtFb.matchingFavoriteAnimating a,
.matchingSetBtFb.matchingFavoriteAnimating span {
animation: matchingFavoriteButtonPop 0.48s ease-out;
}
@keyframes matchingFavoriteButtonPop {
0% {
transform: scale(1);
}
35% {
transform: scale(1.08);
}
70% {
transform: scale(0.97);
}
100% {
transform: scale(1);
}
}
/* ** matching_bt end ** */
/* ** matching_box start ** */
/********* マッチング自社プロフ編集箇所 *********/
:root {
--app-matchingSetTi-txt: var(--text-brand-primary-matching); /* テキスト色 */
--app-matchingSetTi-bg: var(--brand-primary-matching); /* 背景色 */
--app-matchingSetBt-brd: 1px solid #eeeeee; /* ボーダー指定 */
--app-matchingSetBt-bg: #eee; /* 背景色 */
--app-matchingSetBtEdit-txt: #fff; /* テキスト色 */
--app-matchingSetBtEdit-bg: #00649d; /* 背景色 */
--app-matchingSetBtEdit-brd: 1px solid #00649d; /* ボーダー指定 */
--app-matchingSetBtEdit-sd: inhelit; /* 背景影色 */
}
/****** マッチング自社プロフ編集ボックス ******/
/* お相手から見た画面のタイトル */
.matchingSetTi {
padding: 0.8rem 1.5rem;
background: var(--app-matchingSetTi-bg);
}
.matchingSetTiInn {
color: var(--app-matchingSetTi-txt);
font-size: var(--font-heading-sm);
font-weight: var(--fw-heading);
text-align: right;
}
.matchingSetArea {
margin: 0 auto;
padding: 0;
border-radius: var(--BgBox-rod);; /* 角丸 */
border: var(--color-brd-box);
background: var(--color-brd-box);
}
/* Flex配置 */
.matchingSetBox {display: flex;align-items: stretch;}
.matchingSetBox .matchingSetDetBox {width: 100%;}
.matchingSetBox .matchingSetBt {width: 15%;}
/* アラート配置 */
.matchingSetPbsBox {margin: 0 auto;padding: 0.5rem;}
.matchingSetPbsBox .CautTxtB,
.matchingSetPbsBox .CautTxtG,
.matchingSetPbsBox .CautTxt {width: 100%;padding: 1.0rem;}
.sidelayout .myPhoto .matchingSetPbsBox p.cnt,
.myPhoto.sidelayout.matchingSetPbsBox p.cnt {text-align: center;}
:root {
--app-matchingSetBt-brd: var(--color-brd-matchingSetCnt); /* ボーダー指定 */
--app-matchingSetBt-bg: var(--color-bg-matchingSetCnt); /* 背景色 */
--app-matchingSetBtEdit-txt: var(--text-brand-primary-matching); /* テキスト色 */
--app-matchingSetBtEdit-bg: var(--brand-primary-matching); /* 背景色 */
}
/* 操作ボタン箇所設定 */
.matchingSetBt {
padding: 1.5rem;
background: var(--app-matchingSetBt-bg);
}
.matchingSetBtBox {
margin: 1.0rem 0;
text-align: center;
}
.matchingSetBtSup {
font-size: var(--font-label);
font-weight: var(--fw-heading);
}
.matchingSetBtEdit a,
.matchingSetBtEdit span {
margin: 0.5rem auto;
padding: 1.0rem 0.5rem;
color: var(--app-matchingSetBtEdit-txt); /* テキスト色 */
background: var(--app-matchingSetBtEdit-bg); /* 背景色 */
border: var(--app-matchingSetBtEdit-brd); /* ボーダー指定 */
font-size: clamp(1.4rem, 1.4vw, 1.4rem);
}
@media screen and (max-width: 600px) {
.matchingSetBox {display: block;}
.matchingSetBox .matchingSetDetBox {width: 100%;}
.matchingSetBox .matchingSetBt {width: 100%;}
.matchingSetArea {
border-left: none;
border-right: none;
}
.matchingSetBt {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 0.5rem;
}
.matchingSetBtBox {width: 32%;margin: 0;}
}
/* ** matching_box end ** */
/* ** matching_make start ** */
/****** マッチング友達申請・連携管理ボックス ******/
:root {
--matchingMake-rod: var(--rod-box); /* 角丸 */
--matchingMake-txt: var(--color-text-box); /* テキスト色 */
--matchingMake-brd: var(--color-brd-box); /* ボーダー指定 */
--matchingMake-bg: var(--color-bg-box); /* 背景色 */
}
.matchingMakeArea {
margin: 0 auto 1.0rem auto;
padding: 0;
border-radius: var(--matchingMake-rod); /* 角丸 */
border: var(--matchingMake-brd);
background: var(--matchingMake-bg);
}
/* 親要素枠 */
.matchingMakeBox {
width: 98%;
margin: 1.5rem auto;
display: grid;
grid-template-columns: minmax(20.0rem, 24.0rem) minmax(0, 1fr) minmax(20.0rem, 24.0rem);
gap: 1.5rem;
align-items: start;
font-weight: bold;
}
/* 子要素枠 */
.matchingMake_item {
position: relative;
width: 100%;
max-width: 24.0rem;
justify-self: center;
border-radius: var(--matchingMake-rod); /* 角丸 */
border: var(--matchingMake-brd);
background: var(--matchingMake-bg);
}
.matchingMake_item .myPhoto {
width: 100%;
margin: 0 auto;
padding: 1.0rem 1.5rem 0;
}
.matchingMake_item .myPhoto .photoAreaImg {padding: 0;}
.matchingMake_item .myPhoto .photoAreaPos,
.matchingMake_item .myPhoto .photoArea {
width: var(--app-photoArea-sizeS);
height: var(--app-photoAreah-sizeS);
}
.matchingMake_item .myPhoto .photoArea a {
display: block;
width: 100%;
height: 100%;
}
.matchingMake_item_Name {
padding: 1.2rem 0.8rem 0;
font-size: var(--font-label);
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.matchingMake_item_Bt {padding: 1.0rem;}
.matchingMake_item_Bt .matchingSetBtFr a,
.matchingMake_item_Bt .matchingSetBtFr span {
min-width: 0;
padding: 1.0rem 0.5rem;
}
/* 操作要素枠 */
.matchingMake_arrowBoxInn {padding: 0;}
/* 矢印要素枠 */
.matchingMake_arrowBox {position: relative;width: 100%;padding: 1.2rem 0;}
.matchingMake_arrow {
display: inline-block;
width: 100%;
height: 25.0px;
background: var(--diagram-aw-l-off-brd);
}
.matchingMake_arrow.arrow_l {clip-path: polygon(0 28.8%, 96.5% 28.8%, 96.5% 0, 100% 50%, 96.5% 100%, 96.5% 71.2%, 0 71.2%);}
.matchingMake_arrow.arrow_r {clip-path: polygon(0 50%, 3.5% 0, 3.5% 28.8%, 100% 28.8%, 100% 71.2%, 3.5% 71.2%, 3.5% 100%);}
.arrow_on .matchingMake_arrow {background: var(--diagram-aw-l-on-brd);}
/* 矢印上タイトル要素枠 */
.matchingMake_Ti {
margin: 0 auto;
padding: 0;
font-size: var(--font-text);
text-align: center;
color: var(--diagram-aw-l-off-brd);
}
.arrow_on .matchingMake_Ti {color: var(--diagram-aw-l-on-brd);}
:root {
--matchingMakeTxtBox-rod: var(--rod-box); /* 角丸 */
--matchingMakeTxtBox-txt: var(--color-text-box-inside); /* テキスト色 */
--matchingMakeTxtBox-brd: var(--color-brd-box-inside); /* ボーダー指定 */
--matchingMakeTxtBox-bg: var(--color-bg-box-inside); /* 背景色 */
}
/* テキスト要素枠 */
.matchingMakeTxtBox {
width: 98%;
margin: 0.5rem auto;
padding: 1.5rem;
font-weight: normal;
border-radius: var(--matchingMakeTxtBox-rod); /* 角丸 */
border: var(--matchingMakeTxtBox-brd);
background: var(--matchingMakeTxtBox-bg);
}
/* タイトル要素枠 */
.matchingMakeTiBox {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.5rem 1.0rem 0.5rem;
border-bottom: var(--color-brd-base-partition);
}
.matchingMakeTiBoxMain {
display: flex;
align-items: center;
}
.matchingMakeTiBoxTi {
font-size: var(--font-text);
font-weight: var(--fw-heading);
}
.matchingMakeTiBoxName {
font-size: var(--font-label);
font-weight: var(--fw-heading);
padding: 0 1.0rem;
}
.matchingMakeTxtBoxMemo {
margin: 0 auto;
padding: 1.5rem 0.5rem;
font-size: var(--font-text);
}
.matchingMakeTiBoxTime {font-size: var(--font-label);}
.matchingMake_arrowBoxInn > .matchingMakeTxtBox {display: none;}
.matchingMakeSpDetailToggle,
.matchingMakeSpDetailSummary,
.matchingMakeSpDetailPanel {display: none;}
.matchingMakeDetailPc {
display: block;
width: 100%;
margin: 0 auto;
}
:root {
--matchingMakeBt-rod: var(--rod-box); /* 角丸 */
--matchingMakeBt-txt: var(--color-text-bt-base); /* テキスト色 */
--matchingMakeBt-brd: var(--color-brd-bt-base); /* ボーダー指定 */
--matchingMakeBt-bg: var(--color-bg-bt-base); /* 背景色 */
}
.matchingMakeDetailPc summary {
display: flex;
justify-content: center;
align-items: center;
min-height: 4.0rem;
padding: 0.8rem 1.0rem;
cursor: pointer;
border-radius: var(--matchingMakeBt-rod); /* 角丸 */
border: var(--matchingMakeBt-brd);
background: var(--matchingMakeBt-bg);
color: var(--matchingMakeBt-txt);
}
.matchingMakeDetailPc summary::-webkit-details-marker {display: none;}
.matchingMakeDetailPc summary::after {
content: "";
width: 0.7rem;
height: 0.7rem;
margin-left: 0.8rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
}
.matchingMakeDetailPc[open] summary::after {transform: rotate(225deg);}
.matchingMakeSpDetailInn {padding-top: 1.0rem;}
.matchingMakeSpFlowBox .matchingMakeTxtBox {width: 100%;}
@media screen and (max-width: 800px) {
.matchingMakeArea {
margin-bottom: 1.5rem;
border-left: none;
border-right: none;
}
.matchingMakeBox {
width: calc(100% - 1.0rem);
margin-top: 1.0rem;
margin-bottom: 0;
display: grid;
grid-template-columns: 9.0rem minmax(5.8rem, 1fr) 9.0rem;
gap: 0.6rem;
justify-content: center;
}
.matchingMake_item {
width: 100%;
min-width: 0;
max-width: 9.0rem;
padding: 0.6rem 0.4rem;
}
.matchingMake_item .myPhoto {
width: 100%;
padding: 0.5rem 0 0;
}
.matchingMake_item .myPhoto .photoAreaPos,
.matchingMake_item .myPhoto .photoArea {
width: var(--app-photoArea-size-sp, 68px);
height: var(--app-photoAreah-size-sp, 68px);
}
.matchingMake_item_Name {
padding: 0;
text-align: center;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.matchingMake_item_Bt {
padding: 0.6rem 0 0;
}
.matchingMake_item_Bt .matchingSetBtFr a,
.matchingMake_item_Bt .matchingSetBtFr span {
padding: 0.7rem 0.3rem;
font-size: 1.1rem;
}
.matchingMake_arrowBoxInn > .matchingMakeTxtBox {
display: none;
}
.matchingMake_arrowBox {
position: relative;
width: 100%;
padding: 0.8rem 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.6rem;
}
.matchingMake_arrowBoxInn {
padding: 0;
}
.matchingMake_arrow {
display: block;
width: 100%;
height: 1.8rem;
margin: 0.2rem auto;
}
.matchingMake_Ti {
font-size: 1.1rem;
line-height: 1.3;
}
.matchingMakeSpDetail {
display: none;
}
.matchingMakeDetailPc {
display: none;
}
.matchingMakeSpDetailSummary {
display: flex;
justify-content: center;
align-items: center;
width: 90%;
margin: 0.6rem auto 0;
min-height: 3.0rem;
padding: 0.5rem 0.8rem;
cursor: pointer;
border-radius: var(--matchingMakeBt-rod); /* 角丸 */
border: var(--matchingMakeBt-brd);
background: var(--matchingMakeBt-bg);
color: var(--matchingMakeBt-txt);
font-size: var(--font-label);
font-weight: var(--fw-heading);
}
.matchingMakeSpDetailSummary::after {
content: "";
width: 0.7rem;
height: 0.7rem;
margin-left: 0.8rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
}
.matchingMakeSpDetailToggle:checked ~ .matchingMake_arrowBox .matchingMakeSpDetailSummary::after {
transform: rotate(225deg);
}
.matchingMakeSpDetailPanel {
grid-column: 1 / -1;
width: 100%;
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
opacity: 0;
margin: 0.4rem auto 1.0rem;
transition:
grid-template-rows 0.25s ease,
opacity 0.20s ease;
}
.matchingMakeSpDetailToggle:checked ~ .matchingMakeSpDetailPanel {
grid-template-rows: 1fr;
opacity: 1;
}
.matchingMakeSpDetailPanel > .matchingMakeSpDetailInn {
min-height: 0;
}
.matchingMakeSpFlowBox {
margin-top: 0;
}
.matchingMakeSpFlowBox .matchingMakeTxtBox {
width: 100%;
padding: 1.0rem;
}
.matchingMakeSpFlowBox .matchingMakeTiBox {
display: block;
padding: 0 0 0.8rem;
}
.matchingMakeSpFlowBox .matchingMakeTiBoxTime {
margin-top: 0.4rem;
}
.matchingMakeSpFlowBox .matchingMakeTxtBoxMemo {
padding: 1.0rem 0 0;
}
}
@media screen and (max-width: 420px) {
.matchingMakeBox {
grid-template-columns: 8.2rem minmax(4.8rem, 1fr) 8.2rem;
gap: 0.3rem;
}
.matchingMakeSpDetail {
display: none;
}
.matchingMake_item {
max-width: 8.2rem;
}
.matchingMake_item .myPhoto .photoAreaPos,
.matchingMake_item .myPhoto .photoArea {
width: var(--app-photoArea-size-sp-s, 62px);
height: var(--app-photoAreah-size-sp-s, 62px);
}
}
/* ** matching_make end ** */