内インナー */
.mainTalent{
width: 80%;
background-color: #fff;
} /* 左カラム80% */
.talentImage{
width: 100%;
margin-top: -40px;
} /* タレントメインイメージ */
.talentProfile{
margin-left: 0;
padding: 0 20px;
margin-bottom: 40px;
} /* タレントプロフィール */
.talentProfile__name{
font-family: "Mplus 1p";
font-size: 30px;
font-weight: 400;
letter-spacing: 19px;
padding: 10px;
box-sizing: border-box;
margin-bottom: 15px;
} /* タレント名 */
.talentProfile__nameAlph{
display: block;
font-size: 24px;
color: #ccc;
font-family: "BenchNine";
letter-spacing: 0.3em;
width: 90%;
border-bottom: 1px #f00 solid;
} /* タレント名（アルファベット） */
.talentProfile__dataList{
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.talentProfile__listItem{
width: 100%;
}
.talentProfile__defList{
display: flex;
align-content: center;
line-height: 2;
margin-bottom: 20px;
}
.talentProfile__defTitle{
width: 30%;
text-transform: uppercase;
padding-right: 20px;
box-sizing: border-box;
}
.talentProfile__defText{
width: 50%;
border-bottom: 1px #777 dotted;
}
.talentProfile__summary{
padding: 5px 20px;
box-sizing: border-box;
line-height: 1.6;
}
.talentHistory{
width: 100%;
text-align: center;
} /* 【タレント・ヒストリー設定】 */
.talentHistory__tabLabel{
display: inline-block;
width: 18.5%;
background-color: #ddd;
padding: 5px 5px;
border: 1px 1px 0 1px;
border-style: solid;
border-color: #ddd;
border-radius: 10px 10px 0 0;
box-sizing: border-box;
color: #333;
} /* 【タブ（通常時）】 */
.talentHistory__tabLabel:hover {
background-color: var(--bgcRGBa);
color: #fff;
text-shadow: 1px 1px 1px #000;
} /* 【タブ（ホバー時）】 */
.talentHistory__tabRadio:checked + .talentHistory__tabLabel{
background-color: var(--bgcRGB);
color: #fff;
text-shadow: 1px 1px 1px #000;
} /* 【タブ（選択時）】 */
.talentHistory__tabRadio{
display: none;
} /* すべてのラジオボタンを非表示に */
[id*="talentHistory__tabCont-"]{
display: none;
width: 100%;
padding: 10px 10px 0px 0;
box-sizing: border-box;
text-align: left;
} /* タブの中身（タブ非選択状態） */
#talentHistory__tab-1:checked ~ #talentHistory__tabCont-1,
#talentHistory__tab-2:checked ~ #talentHistory__tabCont-2,
#talentHistory__tab-3:checked ~ #talentHistory__tabCont-3,
#talentHistory__tab-4:checked ~ #talentHistory__tabCont-4,
#talentHistory__tab-5:checked ~ #talentHistory__tabCont-5{
display: block;
border-top: 10px solid;
border-top-color: var(--bgcRGB);
background-color: #f7faff;
} /* タブの中身（タブ選択状態） */
.talentHistory__contTable{
width: 100%;
} /* ヒストリーテーブル設定 */
.talentHistory__contTableData{
padding: 10px;
border-bottom: 1px #333 dotted;
} /* テーブル内| 設定 */
.talentHistory__contTableData:first-child{
width: 23%;
} /* テーブル内で最初の | の幅 */
.talentHistory__contTableData:last-child{
width: 77%;
} /* テーブル内で最後の | の幅 */
.otherTalents{
background-color: #fff;
width: 20%;
padding: 5px;
box-sizing: border-box;
margin-left: 20px;
overflow: hidden;
} /* 右カラム20% */
.bx-wrapper{
height: 100%;
margin-bottom: -60px !important;
overflow: hidden;
} /* bxsliderの表示域のマージンボトムを除去 */
/* ****************************** */
/* [4] 【コンタクト】のメインコンテンツ */
/* ****************************** */
.contact{
width: 90%;
max-width: 1000px;
padding: 40px 0;
margin: 0 auto;
background-color: #fff;
} /* 【コンタクト】セクション */
.contactFormInner{
/* background-color: #debcbc;*/
}
.contactForm{
display: flex;
justify-content: center;
flex-direction: row;
width: 100%;
background-color: #333;
overflow: hidden;
padding: 10px 0;
box-sizing: border-box;
margin: 0 auto;
text-align: left;
} /* 【お問い合わせフォーム】 */
.contactForm__left{
width: 60%;
background-color: #fff;
border-radius: 20px 0 20px 0;
box-sizing: border-box;
margin: 10px 5px 10px 10px;
} /* 右カラム60% */
.contactForm__right{
width: 40%;
background-color: #fff;
border: 1px #fff solid;
border-radius: 20px 0 20px 0;
box-sizing: border-box;
margin: 10px 10px 10px 5px;
overflow: hidden;
} /* 右カラム40% */
.contactform__text{
width: 220px;
background-color: #eee;
padding: 5px 10px 2px;
border: 1px #333 solid;
border-radius: 13px 13px 0 0;
box-sizing: border-box;
margin: 0 0 0 10px;
font-size: 18px;
color: #333;
} /* 各入力欄の見出し */
.contactform__text:before{
font-family: "FontAwesome";
padding-left: 2px;
padding-right: 4px;
color: #ff0046;
} /* before共通設定 */
.contactform__text:nth-of-type(1):before{
content: "\f1b0";
} /* 1つ目の文頭アイコン */
.contactform__text:nth-of-type(2):before{
content: "\f015";
} /* 2つ目の文頭アイコン */
.contactform__text:nth-of-type(3):before{
content: "\f0e0";
} /* 3つ目の文頭アイコン */
.contactform__text:nth-of-type(4):before{
content: "\f03a";
} /* 4つ目の文頭アイコン */
.contactform__text:nth-of-type(5):before{
content: "\f27a";
} /* 5つ目の文頭アイコン */
[class*="contactform__input"],
.contactform__selecter{
width: 90%;
height: 65px;
background-color: #222;
padding: 10px;
border: 0;
box-sizing: border-box;
margin: 0 0 20px 10px;
color: #fff;
letter-spacing: 1.3px;
}
.contactform__textarea{
width: 90%;
max-width: 90%;
min-width: 90%;
height: 200px;
max-height: 500px;
min-height: 200px;
background-color: #222;
padding: 10px;
box-sizing: border-box;
margin: 0 0 20px 10px;
color: #fff;
letter-spacing: 1.3px;
line-height: 1.7;
} /* テキストエリア設定 */
[class*="contactform__input"]::placeholder,
.contactform__textarea::placeholder{
color: #999;
} /* 各placeholderの色を指定 */
.contactform__preview{
height: 100%;
box-sizing: border-box;
background-color: #333;
}
.previewTabBox{
width: 100%;
text-align: center;
margin: none;
padding: none;
} /* 【プレビュー設定】 */
.previewTabBox__tabLabel{
display: inline-block;
width: 100%;
background-color: #333;
padding: 5px 10px;
border: 1px 1px 0 1px;
border-style: solid;
border-color: #333;
box-sizing: border-box;
color: #eee;
} /* 【タブ（通常時）】 */
.previewTabBox__tabLabel:hover {
background-color: #4c5c53;
border: 1px 1px 0 1px;
border-style: solid;
border-color: #333;
box-sizing: border-box;
} /* 【タブ（ホバー時）】 */
.previewTabBox__tabRadio:checked + .previewTabBox__tabLabel{
background-color: #547c58;
border: 1px 1px 0 1px;
border-style: solid;
border-color: #547c58;
color: #fff;
} /* 【タブ（選択時）】 */
.previewTabBox__tabRadio{
display: none;
} /* すべてのラジオボタンを非表示に */
#previewTabBox__tab-1,
#previewTabBox__tab-2{
display: none;
width: 100%;
height: 100%;
padding: 10px 10px 0 5px;
box-sizing: border-box;
text-align: left;
} /* タブの中身（タブ非選択状態） */
#previewTabBox__tabRadio-1:checked ~ #previewTabBox__tab-1,
#previewTabBox__tabRadio-2:checked ~ #previewTabBox__tab-2{
display: block;
border-top: 1px #547c58 dotted;
background-color: #333;
height: 100%;
} /* タブの中身（タブ選択状態） */
[class*="previewTabBox__tabCont"]{
display: inline;
padding-left: 5px;
border-left: 20px #547c58 solid;
font-size: 10px;
color: #547c58;
font-family: "MSゴシック";
} /* プレビュー内のタイトル */
[class*="previewTabBox__tabImport"]{
display: inline;
margin-left: -3px;
font-size: 10px;
color: #27de3c;
font-family: "MSゴシック";
} /* プレビュー内の可変テキスト */
.contactForm__notes{
width: 100%;
height: 70px;
background-color: #ccc;
text-align: center;
line-height: 70px;
margin-bottom: 20px;
} /* 規約確認チェックボックス領域 */
.contactForm__notesText{
text-align: center;
line-height: 70px;
margin-bottom: 20px;
}
.contactform__notesLabel:hover{
border-bottom: 2px #777 dotted;
} /* 規約確認テキスト */
.contactform__notesCheck{
width: 20px;
height: 20px;
margin-right: 2px;
margin-top: -3px;
} /* 規約確認チェックボックス */
.contactForm__buttonBox{
display: flex;
justify-content: center;
width: 100%;
/* background-color: #ccc;*/
text-align: center;
} /* ボタン領域 */
[class*="contactForm__button-"]{
width: 100px;
padding: 5px 0;
border: 1px #333 solid;
border-radius: 10px 0 10px 0;
box-sizing: border-box;
margin: 10px 10px;
font-size: 16px;
transition: .5s;
} /* ボタン共通デザイン（通常時） */
.contactForm__button:hover{
background-color: #777;
color: #fff;
} /* ボタン共通デザイン（ホバー時） */
.contactForm__button-submit{
background-color: #8cf290;
} /* 送信ボタン */
.contactForm__button-reset{
background-color: #ffdc7b;
} /* リセットボタン */
#contactform__resultBox{
width: 100%;
height: 100%;
padding: 10px 10px 0 5px;
box-sizing: border-box;
text-align: left;
} /* 送信結果画面 */
#contactform__resultBoxItem{
display: block;
border-top: 1px #547c58 dotted;
background-color: #333;
height: 100%;
text-align: left;
} /* 送信結果リスト */
.ui-draggable .ui-dialog-titlebar{
background-color: #547c58;
color: #fff;
} /* jQuery UI の色を変更 */
.ui-button-icon{
background-color: #f00;
} /* 閉じるボタン */
/* ****************************** */
/* [5] 【ニュースリリース】のメインコンテンツ */
/* ****************************** */
.newsRelease{
width: 95%;
margin: 0 auto;
}
.newsReleaseBox{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
width: 100%;
}
/* コンテンツ部分はトップページのニュースと共通 */
/* ****************************** */
/* [6] 【会社概要】のメインコンテンツ */
/* ****************************** */
.companyData{
margin-bottom: 40px;
} /* 【会社概要表】 */
.companyData__list{
width: 80%;
margin: 0 auto;
} /* 会社概要表アウター */
.companyData__defList{
width: 100%;
display: table;
text-align: left;
/* margin-bottom: 20px;*/
padding: 10px;
} /* 会社概要表インナー */
.companyData__defTitle{
display: table-cell;
width: 25%;
/* padding: 20px 0 5px;*/
box-sizing: border-box;
/* border-top: 1px #999 dashed;*/
font-weight: 600;
/* background-color: #ccc;*/
} /* 会社概要表のタイトル */
.companyData__defData{
display: table-cell;
width: 75%;
/* padding: 20px 0 5px;*/
box-sizing: border-box;
border-bottom: 1px #999 dotted;
} /* 会社概要表のデータ */
.companyMap{
width: 80%;
margin: 0 auto;
border-radius: 20px 0 20px 0;
border: 3px #666 solid;
overflow: hidden;
} /* 【マップ設定】 */
.companyMap__data{
width: 100%;
height: 320px;
background-color: #000;
} /* 【マップAPI埋め込み先】 */
.companyData__br{
display: none;
}
/* ****************************** */
/* [7] 【沿革】のメインコンテンツ */
/* ****************************** */
.companyHistory{
}
.historyTable{
width: 80%;
margin: 0 auto;
}
.historyTable__th{
width: 30%;
background-color: #cfcfcf;
padding: 10px;
box-sizing: border-box;
border: 1px #464646 solid;
vertical-align: top;
}
.historyTable__td{
width: 70%;
background-color: #fff;
padding: 10px;
box-sizing: border-box;
border: 1px #464646 solid;
text-align: left;
/* border: 1px #fff dashed;*/
}
/* ****************************** */
/* [8] 機能パーツ */
/* ****************************** */
/*
.anime1{
animation: 10s anime1;
}
.anime2{
animation: 10s anime2;
}
@keyframes anime1{
0% { transform: scale(1, 1); }
50% { transform: scale(-1, 1); }
100% { transform: scale(1, 1); }
}
@keyframes anime2{
10% { right: 100px; }
50% { bottom: 150px; }
100% { bottom: 100px; }
}
*/
/* 【モバイル用CSS】 */
@media screen and (max-width:768px) {
/* ****************************** */
/* [A-2] 共通BEMブロック */
/* ****************************** */
.mainInner{
/* margin: 0;*/
width: 98%;
} /* 各ページのメインインナーのレスポンシブ設定 */
.hideBr{
display: block;
} /* レスポンシブ時に表示される改行 */
/* ****************************** */
/* [A-3] グローバルヘッダー */
/* ****************************** */
.siteTitle{
font-size: 20px;
letter-spacing: -1px;
top: 12px;
left: 8px;
} /* サイトタイトルの全体設定 */
.siteTitle span:nth-child(6),
.siteTitle span:nth-child(8),
.siteTitle span:nth-child(10),
.siteTitle span:nth-child(17),
.siteTitle span:nth-child(20){
font-size:30px;
} /* jQueryで生成したサイトタイトル用spanの設定 */
.globalHeaderLogo{
height: 50px;
padding-top: 5px;
} /* サイトロゴの設定 */
/* ****************************** */
/* [A-4] グローバルナビゲーション */
/* ****************************** */
.globalNavi__list{
width: 100%;
}
.globalNavi__link{
font-size: 15px;
} /* 【リンク設定】 */
/* ****************************** */
/* [A-6] グローバルフッター */
/* ****************************** */
.copyright{
width: 250px;
} /* コピーライトの位置を最下に固定。ネガティブマージンで中央揃え */
/* ****************************** */
/* [1] 【トップページ】のメインコンテンツ */
/* ****************************** */
.topImage__text{
letter-spacing: 5px;
line-height: 1;
} /* テキストそのもの */
.topNews__newsItem{
width: 325px;
box-shadow: 0 1px 10px rgba(0,0,0, .5);
} /* 【各ニュース記事のインナー】 */
.topNews__newsTextBox{
padding: 0;
}
/* ****************************** */
/* [3-1] 【タレント】のメインコンテンツ */
/* ****************************** */
.talentPage{
width: 100%;
flex-direction: column;
justify-content: center;
}
[class*="talentGrid-"]{
width: 350px;
height: 300px;
background-size: cover;
}
.talentGrid-1{
background-position: 0px -200px;
}
.talentGrid-2{
background-position: 0px -50px;
}
.talentGrid-3{
background-position: 0px -300px;
}
.talentGrid-4{
background-position: 0px -110px;
}
.talentGrid-5{
background-position: 0px -50px;
}
.talentGrid-6{
background-position: 0px -100px;
}
.talentGrid-7{
background-position: 0px -70px;
}
.talentGrid-8{
background-position: 0px -40px;
}
.talentGrid-9{
background-position: 0px -10px;
}
/* ****************************** */
/* [3-3] 【タレント個別ページ（共用）】のメインコンテンツ */
/* ****************************** */
.mainTalent{
width: 95%;
margin-bottom: 40px;
}
.otherTalents{
width: 100%;
height: 210px;
margin-left: 0;
padding-top: 0;
}
.talentProfile__defTitle{
width: 45%;
}
.talentProfile__defText{
width: 55%;
}
.talentProfile__nameAlph{
width: 100%;
}
/* ****************************** */
/* [4] 【コンタクト】のメインコンテンツ */
/* ****************************** */
.contactForm__left{
width: 100%;
background-color: #fff;
border-radius: 0px 0 0px 0;
box-sizing: border-box;
margin: 0px 0px 0px 00px;
} /* 右カラム100% */
.contactForm__right{
width: 0%;
display: none;
} /* 右カラム0% */
.modalWindow__link{
width: 45%;
height: 30%;
} /* ABOUTリンクボックス */
/* ****************************** */
/* [6] 【会社概要】のメインコンテンツ */
/* ****************************** */
.companyData__list{
width: 100%;
} /* 会社概要表アウター */
.companyData__defTitle{
width: 20%;
padding-left: 10px;
} /* 会社概要表のタイトル */
.companyData__defData{
width: 60%;
} /* 会社概要表のデータ */
.companyData__br{
display: block;
}
/* ****************************** */
/* [7] 【沿革】のメインコンテンツ */
/* ****************************** */
.historyTable{
width: 96%;
margin: 0 auto;
}
}
|