*/
.box_flex_pic_desc a {
position: relative;
width: 100%;
height: 100%;
padding:1px;
top:0px;
}
/*![]()
*/
/*![]()
タグではwidth heightを指定せず、その親で指定することでレスポンシブに対応できる*/
.box_flex_pic_desc .tag_pic{
vertical-align: center;
max-width:100%;
margin:auto; /*サイズ変更の際に中央配置へ縦横の自動調整*/
padding:0px;
object-fit: scale-down;
}
.box_flex_pic_desc:hover .tag_pic{
box-shadow: 10px 10px 20px rgba(0, 0, 60, 0.9);
border-radius: 10px; /* 角丸指定 */
transition: 0.5s; /* アニメーションの速度 */
}
/**/
.box_flex_pic_desc .tag_p{
position: relative; /* ★下層のabsoluteを枠内で利かすため★ */
height: 100%;
}
/*++++++++++box_flex_pic_desc_button定義++++++++++*/
.box_flex_pic_desc_button {
position: relative; /* 親の枠内で絶対値 */
width: 70%;
min-width: 150px;
min-height: 50px;
/*ボタン枠内の要素を中央配置*/
margin-left:auto; margin-right:auto;
/*ボタンの動作装飾のために追加(OVER部分を隠す)*/
overflow: hidden;
text-align: left; /* アイテムのaタグなどのインライン要素を左へセット(親要素である box_flex_pic_desc_button にセットする必要あり) */
}
/*ボタンを覆うクリック範囲*/
.box_flex_pic_desc_button a {
position: absolute; /* 親の枠内で絶対値 */
width: 100%;
height: 100%;
/*余白があると中央からズレる可能性を排除*/
margin:0;
padding:0;
text-decoration: none;
/*ボタン文字の位置 aタグを左にしているため文字は center */
text-align: center;
border-radius: 5px; /* 角丸指定 */
opacity: 1;
}
.box_flex_pic_desc_button span {
position: relative;
width: 100%;
top:15%; /*span文字の縦設定：中央へ*/
}
.box_flex_pic_desc_button:hover span {
color:white; /*span文字を白色にする*/
z-index: 11; /*is_diagonal_LR::beforeより上位*/
}
/*-- ボタン装飾--*/
.is_diagonal_LR::before {
position: absolute; /* 親の枠内で絶対値 */
content: '';
top: 0;
left: -130%;
background-color: var(--AOXYZ_blue); /*AOXYZblue*/
width:120%;
height: 100%;
transform: skewX(-25deg);
}
.is_diagonal_LR:hover::before {
animation: diagonal_LR .3s forwards;
}
@keyframes diagonal_LR {
100% {
left:-10%;
}
}
@keyframes diagonal_RL {
100% {
left:-130%;
}
}
/*スマホレスポンシブ対応--最大が700pxに適用する＝スマホとタブレット*/
/*画像＋文章の幅があるため、一概に960pxにはできない*/
@media screen and (max-width: 700px){
.box_flex_pic_desc {
margin: 1px; /* 内側余白指定 */
flex-direction: column; /* アイテムが垂直方向配置 */
align-items: start;
}
.flex_dir_reverse{
flex-direction: column; /* アイテムが垂直方向配置 :（スマホでは左右関係なし） */
}
.box_flex_pic_desc_item {
max-width: 100%;
height: auto;
width: auto;
min-width: 200px;
padding: 5px; /* 内側余白指定 */
margin: 1%; /* 外側の余白 */
}
}
/*---------------------box_flex_pic_desc-説明文と図形の表示のCSS------------------------*/
/*--------------------------------------------------------------------------------------*/
/*--------------------- box_flex_pic_desc02 -説明文と図形の表示のCSS------------------------*/
/*--------------------------------------------------------------------------------------*/
.box_flex_pic_desc02 {
display: flex; /* フレックスボックスにする */
flex-direction: row; /* アイテムが水平方向に左から右へと配置 */
flex-wrap: wrap; /* 折り返し有無指定 */
justify-content: stretch; /* 主軸方向(複数の場合)-間隔配置 */
align-items: center; /* 主軸でない方向-制約範囲内で拡張(center/flex-start/start/end/stretch) */
max-width: 1400px;
padding: 0px;
margin: 0%; /* 外側の余白 */
margin-left:auto; margin-right:auto;
}
.flex_dir_reverse{
flex-direction: row-reverse; /* アイテムが水平方向に右から左へと配置 */
}
.box_flex_pic_desc02_item {
align-self: center; /* アイテムの垂直方向の位置を指定 */
text-align: center; /* アイテムのaタグなどのインライン要素を中央へセット(親要素であるbox_flex_pic_desc02_itemにセットする必要あり) */
position: relative; /* ★下層のabsoluteを枠内で利かすため aタグなど★ */
width: 50%; /*flexのmax-widthの半分弱*/
min-width: 300px;
padding: 3px;
margin: 0%; /* 外側の余白 */
border-radius: 5px; /* 角丸指定 */
}
.box_flex_pic_desc02_item:hover{
box-shadow: 10px 10px 20px rgba(0, 0, 60, 0.9);
border-radius: 10px; /* 角丸指定 */
transition: 0.5s; /* アニメーションの速度 */
}
/**/
.box_flex_pic_desc02_item .div_a {
text-decoration: none;
display:blcok;
padding:0px;
}
/**/
.box_flex_pic_desc02 .div_left{
position: relative; /* ★下層のabsoluteを枠内で利かすため★ */
display: inline-block; /* div_leftとdiv_rightを横並びへ */
width:65%; /* div_left:65% div_right:30% */
height:150px; /*tag_picの画像の縦最大幅と同じ*/
/* background-color: red; */
}
/*
*/
.box_flex_pic_desc02 .sub_info{
margin: 0;
padding: 0;
width:100%;
line-height: 15px;
color: grey;
}
/*
*/
.box_flex_pic_desc02 .div_right{
position: relative; /* ★下層のabsoluteを枠内で利かすため★ */
display: inline-block; /* div_leftとdiv_rightを横並びへ */
width:30%; /* div_left:65% div_right:30% */
/* background-color: yellow; */
}
/*![]()
*/
/*![]()
タグではwidth heightを指定せず、その親で指定することでレスポンシブに対応できる*/
.box_flex_pic_desc02 .div_right .tag_pic{
position: relative; /* ★下層のabsoluteを枠内で利かすため★ */
margin:0px; /*サイズ変更の際に中央配置へ縦横の自動調整*/
max-width:100%;
max-height:150px; /*画像の縦最大幅*/
object-fit: contain;
}
/*
*/
.box_flex_pic_desc02 hr {
height: 0;
margin: 0;
padding: 0;
border: 0;
border-top: 3px dotted lightgray;
}
/*スマホレスポンシブ対応--最大が700pxに適用する＝スマホとタブレット*/
/*画像＋文章の幅があるため、一概に960pxにはできない*/
@media screen and (max-width: 700px){
.box_flex_pic_desc02 {
flex-direction: column; /* アイテムが垂直方向配置 */
align-items: start;
}
.flex_dir_reverse{
flex-direction: column; /* アイテムが垂直方向配置 :（スマホでは左右関係なし） */
}
.box_flex_pic_desc02_item {
width: 100%;
}
.box_flex_pic_desc02 .title_h{
height:100px;
}
}
/*---------------------box_flex_pic_desc02-説明文と図形の表示のCSS------------------------*/
/*class_box_flex_newsblog*/
/*---------------------box_flex_newsblog-説明文と図形の表示のCSS------------------------*/
.box_flex_newsblog {
display: flex; /* フレックスボックスにする */
flex-wrap: wrap; /* 折り返し指定 --親要素で overflow-X: scroll; */
justify-content:center; /* 主軸方向(複数の場合)-間隔配置 */
align-items:stretch; /* 主軸でない方向-制約範囲内で拡張(center/flex-start-/start/stretch) */
margin-left:auto; margin-right:auto;
margin: 0px;
/* max-width: 2000px;*/
}
.box_flex_newsblog_item {
position: relative; /* ★下層のabsoluteを枠内で利かすため★ */
width: auto;
min-width: 300px;
padding: 10px;
margin: 1%; /* 外側の余白 */
border:1px dashed;
border-radius: 20px; /* 角丸指定 */
/* background-color: red;*/
}
.box_flex_newsblog_item:hover {
background-color: rgb(210, 250, 255,0.7);
}
/*class_box_flex_newsblog*/
/*---新規作成モード---------------------------------*/
.area_newsblog_mode_make{
display : flex;
flex-wrap: nowrap;
justify-content: center;
}
.area_newsblog_mode_make_item{
width: auto;
margin:5px 2px;
/* background-color:RED;*/
}
.btn_newsblog_mode_new{
width:auto;
height:auto;
margin:5px 10px;
padding:0px 50px;
text-align: center;
background-color: var(--AOXYZ_blue); /*AOXYZblue*/
display: table-cell;
vertical-align: middle;
background-color: rgb(200, 200, 230,0.7);
border:1px solid;
border-color: black;
border-radius: 5px;
}
.btn_newsblog_mode_new:hover {
color: white;
background-color: rgba(0, 0, 255, 0.7);
}
/*class_box_flex_newsblog*/
/*---編集モード---------------------------------*/
.area_newsblog_mode_edit{
display : flex;
flex-wrap: nowrap;
flex-direction: row-reverse;
}
.area_newsblog_mode_edit_item{
width: 85px;
margin:5px 2px;
/* background-color:RED;*/
}
.blogs_chkBox{
/* 非表示 display: none; だと要素が存在しなくなるため、クリック時のスクロール(call_func_scroll_move_to_element_by_id)ができなくなる*/
visibility: collapse;
/* display: none; */
}
.blogs_label{
display: block;
padding: 5px; /*内側の枠*/
}
/*「＋」は、すぐ隣、特に、その直後に出現するの要素（チェックの個別対応で使う）*/
/*--クリックで連動*/
.blogs_chkBox + .blogs_label .tag_thumbnail{
display: flex;
width:auto; height:200px; overflow: hidden;
margin-left:auto; margin-right:auto;
background-size: contain; background-repeat: no-repeat;
transition: .5s;
}
.blogs_chkBox:checked + .blogs_label .tag_thumbnail{
/* 非表示 */
width:0px; height: 0px; opacity: 0;
transition: .5s;
}
/*--クリックで連動*/
.blogs_chkBox + .blogs_label .tag_index{
width:300px; /* 拡大前(クリック前)の表題の最大幅を指定 */
margin-left:auto; margin-right:auto;
}
.blogs_chkBox:checked + .blogs_label .tag_index{
width:auto; /* 拡大前(クリック前)の表題の最大幅を指定 */
}
/*--クリックで連動*/
.blogs_chkBox + .blogs_label .tag_p{
margin-left:auto; margin-right:auto;
width:350px; height:300px; overflow: hidden; /*flexitemの横幅となる300px 表示はいらない部分は隠す*/
text-overflow: ellipsis;
background:linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(50, 50, 50, 0.5) 90%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transition: .5s;
/* background-color: rgba(245, 245, 245, 0.5);*/
}
.blogs_chkBox:checked + .blogs_label .tag_p{
/* background-color: rgba(0, 255, 130, 0.7);*/
/* 枠指定⇒Autoへ:必須示 */
width:auto; height:auto; overflow: hidden;
color: black;
padding:5px;
outline: solid 1px blue;
transition: .5s;
}
/*-- デフォルト非表示 */
.blogs_label .blogs_hidden{
/* 非表示 */
width:0px; height: 0px; opacity: 0;
margin-left:auto; margin-right:auto;
transition: .5s;
}
.blogs_chkBox:checked + .blogs_label .blogs_hidden{
/* 枠指定⇒Autoへ:必須示 */
display: flex;
width:auto; height:auto; overflow: hidden; opacity: 1;
margin-top:5px;margin-bottom:5px;
/* 枠最大値はbox_flex_newsblogのmax-widthに合わせる:必須示 */
background-size: contain; background-repeat: no-repeat;
transition: .5s;
}
/*-- デフォルト表示 */
.blogs_label .btn_newsblog_continue{
width:100px;
height:50px;
margin-left:auto; margin-right:auto;
padding: 15px;
border:1px solid;
border-color: blue;
border-radius: 5px;
text-align: center;
color: blue;
}
.blogs_chkBox:checked + .blogs_label .btn_newsblog_continue{
/* 非表示 */
width:0px; height: 0px; opacity: 0;
transition: .5s;
}
/*スマホレスポンシブ対応--最大が700pxに適用する＝スマホとタブレット*/
/*画像＋文章の幅があるため、一概に960pxにはできない*/
@media screen and (max-width: 700px){
.box_flex_newsblog {
margin: 1px; /* 内側余白指定 */
flex-direction: column;
}
.box_flex_newsblog_item {
max-width: 100%; /* 必須:枠内に収める */
min-width: 200px;
padding: 5px; /* 内側余白指定 */
margin: 1%; /* 外側の余白 */
}
.blogs_chkBox + .blogs_label .tag_thumbnail{
height:100px;
}
.blogs_chkBox + .blogs_label .tag_index{
width:auto; /* 拡大前(クリック前)の表題の最大幅を指定 */
}
.blogs_chkBox + .blogs_label .tag_p{
width:auto; /*タブレット以下では自動に変化 PCでは最大300px*/
height:120px;
font-size: small;
}
}
/*---------------------box_flex_newsblog-説明文と図形の表示のCSS------------------------*/
/*--------------------- FLOWBOX - 横並び horizontal -折り返しなし のCSS------------------------*/
.box_flex_nowap_horizontal {
display: flex; /* フレックスボックスにする */
flex-direction: row; /* 主軸方向の定義 */
flex-wrap: nowrap; /* 折り返し指定 --親要素で overflow-X: scroll; */
justify-content:space-around; /* 主軸方向(複数の場合)-間隔配置 */
align-content:stretch; /* 主軸でない方向(複数の場合)-間隔配置 */
align-items:stretch; /* 主軸でない方向-制約範囲内で拡張(center/flex-start-/start/stretch) */
background-color: whitesmoke; /* 背景色指定 */
padding: 2px; /* 余白指定 */
}
.box_flex_nowap_test{
display: inline-block;
}
/*--------------------- FLOWBOX - 横並び horizontal -折り返しなし のCSS------------------------*/
/*--------------------- FLOWBOX - 縦並び vertical -折り返しなし のCSS------------------------*/
.box_flex_nowap_vertical {
display: flex; /* フレックスボックスにする */
flex-direction: column; /* 主軸方向の定義 */
flex-wrap: nowrap; /* 折り返し有無指定*/
justify-content:space-around; /* 主軸方向(複数の場合)-間隔配置 */
align-content:stretch; /* 主軸でない方向(複数の場合)-間隔配置 */
align-items:stretch; /* 主軸でない方向-制約範囲内で拡張(center/flex-start-/start/stretch) */
background-color: whitesmoke; /* 背景色指定 */
padding: 2px; /* 余白指定 */
}
/*--------------------- FLOWBOX - 縦並び vertical -折り返しなし のCSS------------------------*/
/*---------------------FLOWBOX-図形横並び-のCSS------------------------*/
.box_flex {
display: flex; /* フレックスボックスにする */
flex-direction: row; /* 主軸方向の定義 */
flex-wrap: wrap; /* 折り返し有無指定 */
justify-content:space-around; /* 主軸方向(複数の場合)-間隔配置 */
align-content:stretch; /* 主軸でない方向(複数の場合)-間隔配置 */
align-items:stretch; /* 主軸でない方向-制約範囲内で拡張(center/flex-start-/start/stretch) */
background-color: whitesmoke; /* 背景色指定 */
padding: 2px; /* 余白指定 */
}
.box_flex_item , .box_flex_item_mono {
position: relative; /* ★下層のpaper-cornerのabsoluteを枠内で利かすため★ */
max-width: 300px;
min-width: 200px;
padding: 20px;
margin: 0.5%; /* 外側の余白 */
border-radius: 5px; /* 角丸指定 */
color: black;
/* 装飾--紙質を出す */
box-shadow: inset 0 0 30px rgba(199, 177, 111, 0.7);
}
.box_flex_item:nth-child(4n-3) {
/* グラディエーション背景色指定 */
background: linear-gradient(110deg, rgb(170, 255, 170), whitesmoke);
}
.box_flex_item:nth-child(4n-2) {
/* グラディエーション背景色指定 */
background: linear-gradient(110deg, rgb(170, 170, 255), whitesmoke);
}
.box_flex_item:nth-child(4n-1) {
/* グラディエーション背景色指定 */
background: linear-gradient(110deg, rgb(255, 170, 170), whitesmoke);
}
.box_flex_item:nth-child(4n) {
/* グラディエーション背景色指定 */
background: linear-gradient(110deg, rgb(255, 255, 170), whitesmoke);
}
.box_flex_item_mono {
background-color: whitesmoke; /* 背景色指定 */
}
.box_flex_item a , .box_flex_item_mono a{
position: absolute; /* 親の枠内で絶対値 */
width: 100%;
height: 100%;
/*余白による中央からズレの可能性を排除*/
margin:0;
padding:0;
/*★★重要：縦と横の文字のズレが補正----ボタンの大きさ分を調節して中央へ配置★★*/
-ms-transform: translate(-6%,-7%); /*旧対応*/
-webkit-transform: translate(-6%,-7%);/*旧対応*/
transform: translate(-6%,-7%);
opacity: 0;
}
.box_flex_item:hover a , .box_flex_item_mono:hover a{
box-shadow: 10px 10px 20px rgba(0, 0, 255, 1);
opacity: 0.5;
transition: 0.5s; /* アニメーションの速度 */
}
/* 装飾--紙の端が折れた感じを出す ※このためには上位のブロックでrelativeがないとabsoluteの効果がでない*/
.box_papre_corner:before {
position: absolute;
content: " ";
display: block;
right:0;
top: 0;
border-width: 0 20px 20px 0;
width: 20px;
border-style: solid;
border-color: whitesmoke whitesmoke grey grey;
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
.box_flex {
padding: 1px; /* 内側余白指定 */
}
.box_flex_item , .box_flex_item_mono {
width: 300px;
min-width: 200px;
padding: 15px; /* 内側余白指定 */
margin: 1.5%; /* 外側の余白 */
}
}
/*---------------------FLOWBOX-図形横並び-のCSS------------------------*/
/*---------------------FLOWBOX-新規作成/編集選択のCSS------------------------*/
.box_flex_item_new_edit_top {
position: relative; /* ★下層のpaper-cornerのabsoluteを枠内で利かすため★ */
max-width: 400px;
min-width: 300px;
padding: 30px;
margin: 1%; /* 外側の余白 */
border-radius: 5px; /* 角丸指定 */
/* 装飾--紙質を出す */
box-shadow: inset 0 0 30px rgba(170, 170, 255, 0.7);
}
.box_flex_item_new_edit_top {
background-color: whitesmoke; /* 背景色指定 */
min-height: 150px;
text-align: center;
}
.box_flex_item_new_edit_top a{
position: absolute; /* 親の枠内で絶対値 */
width: 100%;
height: 100%;
/*余白による中央からズレの可能性を排除*/
margin:0;
padding:50px 5px;
/* background-color: red;*/
color: grey;
text-decoration: none;
/*★★重要：縦と横の文字のズレが補正----ボタンの大きさ分を調節して中央へ配置★★*/
-ms-transform: translate(-50%,-20%); /*旧対応*/
-webkit-transform: translate(-50%,-20%);/*旧対応*/
transform: translate(-50%,-20%);
}
.box_flex_item_new_edit_top a:hover{
color: black;
box-shadow: 10px 10px 20px rgba(0, 0, 255, 0.5);
transition: 0.5s; /* アニメーションの速度 */
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
.box_flex_item_new_edit_top {
width: 300px;
min-width: 200px;
min-height: 100px;
}
.box_flex_item_new_edit_top a{
padding:30px;
/*★★重要：縦と横の文字のズレが補正----ボタンの大きさ分を調節して中央へ配置★★*/
-ms-transform: translate(-50%,-30%); /*旧対応*/
-webkit-transform: translate(-50%,-30%);/*旧対応*/
transform: translate(-50%,-30%);
}
}
/*---------------------FLOWBOX-新規作成/編集選択のCSS------------------------*/
/*---------------------FLOWBOX-新規作成テンプレート選択のCSS------------------------*/
.box_flex_item_newtmp_choice {
position: relative; /* ★下層のpaper-cornerのabsoluteを枠内で利かすため★ */
max-width: 400px;
min-width: 170px;
padding: 20px;
margin: 1%; /* 外側の余白 */
border-radius: 5px; /* 角丸指定 */
/* 装飾--紙質を出す */
box-shadow: inset 0 0 30px rgba(170, 170, 255, 0.7);
}
.box_flex_item_newtmp_choice {
background-color: whitesmoke; /* 背景色指定 */
min-height: 170px;
text-align: center;
}
.box_flex_item_newtmp_choice button{
/* デフォルトセットを消す */
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}
.box_flex_item_newtmp_choice a ,.box_flex_item_newtmp_choice button{
position: absolute; /* 親の枠内で絶対値 */
width: 100%;
height: 100%;
/*余白による中央からズレの可能性を排除*/
margin:0;
padding:35px;
/* background-color: red;*/
color: rgb(120,120,120,0.8);
text-decoration: none;
/*★★重要：縦と横の文字のズレが補正----ボタンの大きさ分を調節して中央へ配置★★*/
-ms-transform: translate(-50%,-10%); /*旧対応*/
-webkit-transform: translate(-50%,-10%);/*旧対応*/
transform: translate(-50%,-10%);
}
.box_flex_item_newtmp_choice a:hover ,.box_flex_item_newtmp_choice button:hover{
color: black;
box-shadow: 10px 10px 20px rgba(0, 0, 255, 0.5);
transition: 0.5s; /* アニメーションの速度 */
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
.box_flex_item_newtmp_choice {
width: 300px;
min-width: 200px;
min-height: 150px;
}
.box_flex_item_newtmp_choice a ,.box_flex_item_newtmp_choice button {
padding:50px;
/*★★重要：縦と横の文字のズレが補正----ボタンの大きさ分を調節して中央へ配置★★*/
-ms-transform: translate(-50%,-15%); /*旧対応*/
-webkit-transform: translate(-50%,-15%);/*旧対応*/
transform: translate(-50%,-15%);
}
}
/*---------------------FLOWBOX-新規作成テンプレート選択のCSS------------------------*/
/*---------------------FLOWBOX-ユーザ追加-新規/既存の選択のCSS------------------------*/
.box_flex_item_useradd_choice {
position: relative; /* ★下層のpaper-cornerのabsoluteを枠内で利かすため★ */
max-width: 400px;
min-width: 170px;
padding: 20px;
margin: 1%; /* 外側の余白 */
border-radius: 5px; /* 角丸指定 */
/* 装飾--紙質を出す */
box-shadow: inset 0 0 30px rgba(170, 170, 255, 0.7);
}
.box_flex_item_useradd_choice {
background-color: whitesmoke; /* 背景色指定 */
min-height: 170px;
text-align: center;
}
.box_flex_item_useradd_choice button{
/* デフォルトセットを消す */
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}
.box_flex_item_useradd_choice label ,.box_flex_item_useradd_choice button{
position: absolute; /* 親の枠内で絶対値 */
width: 100%;
height: 100%;
/*余白による中央からズレの可能性を排除*/
margin:0;
padding:35px;
/* background-color: red;*/
color: rgb(120,120,120,0.8);
text-decoration: none;
/*★★重要：縦と横の文字のズレが補正----ボタンの大きさ分を調節して中央へ配置★★*/
-ms-transform: translate(-50%,-10%); /*旧対応*/
-webkit-transform: translate(-50%,-10%);/*旧対応*/
transform: translate(-50%,-10%);
}
.box_flex_item_useradd_choice label:hover ,.box_flex_item_useradd_choice button:hover{
color: black;
box-shadow: 10px 10px 20px rgba(0, 0, 255, 0.5);
transition: 0.5s; /* アニメーションの速度 */
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
.box_flex_item_useradd_choice {
width: 300px;
min-width: 200px;
min-height: 150px;
}
.box_flex_item_useradd_choice label ,.box_flex_item_useradd_choice button{
padding:50px;
/*★★重要：縦と横の文字のズレが補正----ボタンの大きさ分を調節して中央へ配置★★*/
-ms-transform: translate(-50%,-15%); /*旧対応*/
-webkit-transform: translate(-50%,-15%);/*旧対応*/
transform: translate(-50%,-15%);
}
}
/*---------------------FLOWBOX-ユーザ追加-新規/既存の選択のCSS------------------------*/
/*---------FLOWBOX-テンプレート追加機能の / など (横並び)のCSS------------------------*/
.tmplate_box_flex {
display: flex; /* フレックスボックスにする */
flex-direction: row; /* 主軸方向の定義 */
flex-wrap: wrap; /* 折り返し有無指定 */
justify-content:space-around; /* 主軸方向(複数の場合)-間隔配置 */
align-content:stretch; /* 主軸でない方向(複数の場合)-間隔配置 */
align-items:stretch; /* 主軸でない方向-制約範囲内で拡張(center/flex-start-/start/stretch) */
background-color: whitesmoke; /* 背景色指定 */
padding: 2px; /* 余白指定 */
}
.tmplate_box_flex_item ,.tmplate_box_flex_item_mono
,.tmplate_box_flex_item_for_double ,.tmplate_box_flex_item_mono_for_double
,.tmplate_box_flex_item_for_triple ,.tmplate_box_flex_item_mono_for_triple {
position: relative; /* ★下層のpaper-cornerのabsoluteを枠内で利かすため★ */
min-width: 250px;
border-radius: 5px;
color: black;
/* 装飾--紙質を出す */
/* box-shadow: inset 0 0 30px rgba(199, 177, 111, 0.7); */
}
.tmplate_box_flex_item_for_double { max-width: 48%; padding: 1%; margin: 0.5%; }
.tmplate_box_flex_item_for_triple { max-width: 31%; padding: 1%; margin: 0.5%; }
.tmplate_box_flex_item_for_double:nth-child(4n-3) ,.tmplate_box_flex_item_for_triple:nth-child(4n-3) {
background-color: rgb(183, 247, 183); /* 背景色指定 */
}
.tmplate_box_flex_item_for_double:nth-child(4n-2) ,.tmplate_box_flex_item_for_triple:nth-child(4n-2) {
background-color: rgb(193, 237, 255); /* 背景色指定 */
}
.tmplate_box_flex_item_for_double:nth-child(4n-1) ,.tmplate_box_flex_item_for_triple:nth-child(4n-1) {
background-color: rgb(252, 224, 229); /* 背景色指定 */
}
.tmplate_box_flex_item_for_double:nth-child(4n-0) ,.tmplate_box_flex_item_for_triple:nth-child(4n-0) {
background-color: rgb(253, 235, 205); /* 背景色指定 */
}
.tmplate_box_flex_item_mono_for_double ,.tmplate_box_flex_item_mono_for_triple {
background-color: whitesmoke; /* 背景色指定 */
}
.tmplate_box_flex_item a , .tmplate_box_flex_item_mono a{
position: absolute; /* 親の枠内で絶対値 */
width: 100%;
height: 100%;
/*余白による中央からズレの可能性を排除*/
margin:0;
padding:0;
/*★★重要：縦と横の文字のズレが補正----ボタンの大きさ分を調節して中央へ配置★★*/
-ms-transform: translate(-6%,-7%); /*旧対応*/
-webkit-transform: translate(-6%,-7%);/*旧対応*/
transform: translate(-6%,-7%);
opacity: 0;
}
.tmplate_box_flex_item a:hover , .tmplate_box_flex_item_mono a:hover{
box-shadow: 10px 10px 20px rgba(0, 0, 255, 1);
opacity: 0.5;
transition: 0.5s; /* アニメーションの速度 */
}
/* 装飾--紙の端が折れた感じを出す ※このためには上位のブロックでrelativeがないとabsoluteの効果がでない*/
.box_papre_corner:before {
position: absolute;
content: " ";
display: block;
right:0;
top: 0;
border-width: 0 20px 20px 0;
width: 20px;
border-style: solid;
border-color: whitesmoke whitesmoke grey grey;
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
.tmplate_box_flex {
padding: 1px; /* 内側余白指定 */
}
.tmplate_box_flex_item , .tmplate_box_flex_item_mono {
width: 300px;
min-width: 200px;
padding: 15px; /* 内側余白指定 */
margin: 1.5%; /* 外側の余白 */
}
}
/*---------FLOWBOX-テンプレート追加機能の (横並び)のCSS------------------------*/
/*-------------------------------- iframe Map/動画埋め込み用CSS --------------------------------*/
.iframeview{
position:relative;
margin:auto; /*サイズ変更の際に中央配置へ縦横の自動調整*/
width:100%;
aspect-ratio: 16 / 9;
/* padding-top: 56.25%;*/ /*PC向けYouTubeの標準アスペクト比は16:9=>9/16=>56.25%*/
overflow: hidden;
background-color: red;
}
.iframeview iframe ,.iframeview img{
position:absolute;
top:0;
left:0;
width: 100%; height: 100%;
margin:0px;
padding:0px;
border:0;
object-fit: contain; /* cover/fill/contain/scale-down */
background-color: yellow;
}
/*-------------------------------- iframe Map/動画埋め込み用CSS --------------------------------*/
/*---------------------------- 基本テーブル設定CSS --------------------------------*/
table{
/*-- 画像のサイズをディスプレイに合わせるCSS */
width: 100%;
/*-- テーブルのセル同士の距離を指定 collapse:境界無し */
border-collapse: collapse;
/*border-spacing:0px;*/
}
/*-- thテーブルヘッダー */
table th{
text-align: center;
vertical-align: middle;
}
/*-- tdテーブルデータ要素 */
table td{
text-align: left;
vertical-align: middle;
}
/*---------------------------- 基本テーブル設定CSS --------------------------------*/
/*--------------------- tbl_multiple -特殊テーブルの表示のCSS ------------------------*/
table.tbl_multiple ,.tbl_pickup {
position: relative;
width:auto;
border-radius: 5px;
}
/*paddingを指定すると幅が広くならず、文字の改行が発生してしまう*/
table.tbl_multiple th ,table.tbl_multiple td ,.tbl_pickup th ,.tbl_pickup td{
/* padding:1%; */
min-width:100px;
}
table.tbl_multiple th ,.tbl_pickup th{ vertical-align: middle;}
table.tbl_multiple tr ,.tbl_pickup tr{ vertical-align: middle;}
/*-- テーブル内の値が![]()
の場合のクラス */
.img_class_box_table_multiple {
display: block; /* marginで中央配置にするため*/
margin-left: auto; margin-right: auto;
object-fit: cover;
width:50px;
}
table.tbl_multiple tr:first-child th:first-child { border-radius: 10px 0 0 0;}
table.tbl_multiple tr:first-child th:last-child { border-radius: 0 10px 0 0;}
/*-- trテーブル行の最後の要素 かつ tdテーブル列の最初/最後の要素を指定 */
table.tbl_multiple tr:last-child td:first-child { border-radius: 0 0 0 10px;}
table.tbl_multiple tr:last-child td:last-child { border-radius: 0 0 10px 0;}
table.tbl_pickup tr:first-child th:first-child { border-radius: 10px 0 0 0;}
table.tbl_pickup tr:first-child th:last-child { border-radius: 0 10px 0 0;}
/*-- trテーブル行の最後の要素 かつ tdテーブル列の最初/最後の要素を指定 */
table.tbl_pickup tr:last-child td:first-child { border-radius: 0 0 0 10px;}
table.tbl_pickup tr:last-child td:last-child { border-radius: 0 0 10px 0;}
/* .tbl_multiple の配色設定 START ---------------------------------------------*/
/*１列目*/
/*-- テーブルの１行目-１列目のth要素のみを指定 */
table.tbl_multiple tr:nth-child(1) th:nth-child(1){
background-color: rgb(220, 220, 220 ,1.0); /*lightgrey+alfa:1.0*/
}
/*-- テーブルの奇数行(3行目以降=2n+3)-1列目のtd要素のみを指定 */
table.tbl_multiple tr:nth-child(2n+3) td:nth-child(1){
background-color: rgb(220, 220, 220 ,1.0); /*lightgrey+alfa:1.0*/
}
/*-- テーブルの偶数行(2n)-1列目(1)のtd要素のみを指定 */
table.tbl_multiple tr:nth-child(2n) td:nth-child(1){
background-color: whitesmoke;
}
/*-- テーブルの１行目-奇数列(3列目以降)のth要素のみを指定 */
table.tbl_multiple tr:nth-child(1) th:nth-child(2n+3){
background-color: rgb(180, 200, 255, 1.0); /*blue+alfa:1.0*/
}
/*-- テーブルの1行目-偶数列(2n)のth要素のみを指定 */
table.tbl_multiple tr:nth-child(1) th:nth-child(2n){
background-color: rgb(200, 250, 255, 1.0); /*lightblue+alfa:1.0*/
}
/*-- テーブルの偶数行(2n)-奇数列(3列目以降=2n+3)のtd要素のみを指定 */
table.tbl_multiple tr:nth-child(2n) td:nth-child(2n+3){
background-color: rgb(180, 200, 255, 0.3); /*blue+alfa:0.3*/
}
/*-- テーブルの偶数行(2n)-偶数列(2列目以降=2n)のtd要素のみを指定 */
table.tbl_multiple tr:nth-child(2n) td:nth-child(2n){
background-color: rgb(200, 250, 255, 0.3); /*lightblue+alfa:0.3*/
}
/*-- テーブルの奇数行(3行目以降=2n+3)-奇数列(3列目以降=2n+3)のtd要素のみを指定 */
table.tbl_multiple tr:nth-child(2n+3) td:nth-child(2n+3){
background-color: rgb(180, 200, 255, 0.5); /*blue+alfa:0.5*/
}
/*-- テーブルの奇数行(3行目以降=2n+3)-偶数列(2列目以降=2n)のtd要素のみを指定 */
table.tbl_multiple tr:nth-child(2n+3) td:nth-child(2n){
background-color: rgb(200, 250, 255, 0.5); /*lightblue+alfa:0.5*/
}
/* .tbl_multiple の配色設定 END ---------------------------------------------*/
/* .tbl_pickup の配色設定 START ---------------------------------------------*/
/*１列目*/
/*-- テーブルの１行目-１列目のth要素のみを指定 */
table.tbl_pickup tr:nth-child(1) th:nth-child(1){
background-color: rgb(220, 220, 220 ,1.0); /*lightgrey+alfa:1.0*/
}
/*-- テーブルの奇数行(3行目以降=2n+3)-1列目のtd要素のみを指定 */
table.tbl_pickup tr:nth-child(2n+3) td:nth-child(1){
background-color: rgb(220, 220, 220 ,1.0); /*lightgrey+alfa:1.0*/
}
/*-- テーブルの偶数行(2n)-1列目(1)のtd要素のみを指定 */
table.tbl_pickup tr:nth-child(2n) td:nth-child(1){
background-color: whitesmoke;
}
/*-- テーブルの１行目-奇数列(3列目以降)のth要素のみを指定 */
table.tbl_pickup tr:nth-child(1) th:nth-child(2n+3){
background-color: rgb(50, 100, 255 ,1.0); /*blue+alfa:1.0 for siteABC*/
border-left: solid 3px blue;
border-right: solid 3px blue;
color:white;
}
/*-- テーブルの1行目-偶数列(2n)のth要素のみを指定 */
table.tbl_pickup tr:nth-child(1) th:nth-child(2n){
background-color: rgb(200, 250, 255, 1.0); /*lightblue+alfa:1.0*/
}
/*-- テーブルの偶数行(2n)-奇数列(3列目以降=2n+3)のtd要素のみを指定 */
table.tbl_pickup tr:nth-child(2n) td:nth-child(2n+3){
background-color: rgb(50, 100, 255 ,0.3); /*blue+alfa:0.3 for siteABC*/
border-left: solid 3px blue;
border-right: solid 3px blue;
}
/*-- テーブルの偶数行(2n)-偶数列(2列目以降=2n)のtd要素のみを指定 */
table.tbl_pickup tr:nth-child(2n) td:nth-child(2n){
background-color: rgb(200, 250, 255, 0.3); /*lightblue+alfa:0.3*/
}
/*-- テーブルの奇数行(3行目以降=2n+3)-奇数列(3列目以降=2n+3)のtd要素のみを指定 */
table.tbl_pickup tr:nth-child(2n+3) td:nth-child(2n+3){
background-color: rgb(50, 100, 255 ,0.5); /*blue+alfa:0.6 for siteABC*/
border-left: solid 3px blue;
border-right: solid 3px blue;
}
/*-- テーブルの奇数行(3行目以降=2n+3)-偶数列(2列目以降=2n)のtd要素のみを指定 */
table.tbl_pickup tr:nth-child(2n+3) td:nth-child(2n){
background-color: rgb(200, 250, 255, 0.6); /*lightblue+alfa:0.6*/
}
/* .tbl_pickup の配色設定 END ---------------------------------------------*/
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 960px){
.scroll_x {
overflow-x: scroll;
}
table.tbl_multiple ,.tbl_pickup {
content: "※このテーブルは横にスクロールできます。";
}
table.tbl_multiple th ,.tbl_pickup th{
white-space:nowrap; /*nowrap:折り返しされない*/
}
/*-- テーブルの１列目の要素のみを指定 */
table.tbl_multiple tr th:first-child , table.tbl_multiple tr td:first-child
,.tbl_pickup tr th:first-child , .tbl_pickup tr td:first-child {
min-width: 200px;
position: sticky;
left: 0;
}
/*-- テーブルの２列目以降の要素を指定 */
table.tbl_multiple tr td:nth-child(n+1)
,.tbl_pickup tr td:nth-child(n+1) {
word-wrap: break-all;
}
/*-- テーブル内の値が![]()
の場合のクラス */
.img_class_box_table_multiple{
width:30px;
}
}
/*--------------------- tbl_multiple -特殊テーブルの表示のCSS ------------------------*/
/*------------ echo_box_html_content_edit ---コンテンツ編集ページの表示のCSS ------------*/
.domain_content_edit_thead {
border-spacing: 0px;
border: 3px solid blue;
}
.domain_content_edit_tbody {
border-bottom: 1px dashed blue;
/* background-color: lightgrey; */
/*border: 1px solid blue;*/
}
.domain_content_edit_tbody:hover {
background-color: rgba(230, 230, 230, 0.9);
box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.8);
transition: all 0.5s ease-out;
}
/*------------ echo_box_html_content_edit ---コンテンツ編集ページの表示のCSS ------------*/
/*-------------------------------- HPトップ画像用CSS --------------------------------------------------*/
/*
/*トップページ背景画像の天気--雪*/
/*javascriptのタグ*/
#front_snow_js{
/*
fixed: この場合は、コンテナの堺関係なく画面全体に雪が降る
relative:この場合は、の区間のみに雪が降る
absolute:この場合は、区切りは関係なく、元々の有効範囲が最優先され、雪が降る →画面サイズが変わっても連動しない
*/
position:absolute;
/* ↓全体を覆うように配置 */
top: 0;
left: 0;
width: 50%;
height: 100%;
display: block;
z-index: 11; /*-- 重なり */
}
#front_snow_js.isOFF{
/*非表示*/
width: 0%;
height: 0%;
}
#front_snow_js.isON{
/*表示*/
width: 100%;
height: 100%;
}
/*javascriptのタグ*/
#front_polygon_js{
position:absolute;
/* ↓全体を覆うように配置 */
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 11; /*-- 重なり */
}
/*-------------------------------- HPトップ画像用CSS ----------------------------------------------------*/
/*-------------------------------- id_home_img_non_anime --画像用CSS --------------------------------*/
#id_home_img_non_anime{
position:relative;
/* container_top全面にセット container_TOP内でフル表示*/
/* サイズはcontainer_topのCLASSで定義*/
width: 100%;
height: 100%;
/* コントロール+スクロールで縮小拡大しても、背景画像は変化させない*/
/* max-width:100vw; 表示端末の画像幅を100とした際の割合 100vm=100%*/
/* min-width:100vw; 表示端末の画像幅を100とした際の割合 100vm=100%*/
background-color: white;
}
/* 画像を動かすアニメーション設定 */
#id_home_img_non_anime .imgFull {
position: absolute;
/* container_top全面にセット container_TOP内でフル表示*/
/* サイズはcontainer_topのCLASSで定義*/
width: 100%;
height: 100%;
/* 位置 --トップメニュー分下げる--タブレット/スマホでは解除してTOP0PXへ*/
top: 80px;
left: 0;
display: block;
/* 背景画像：表示領域に収める */
background: white var(--id_home_img_non_anime_LP_pc_url) no-repeat center center;
background-size:contain; /* contain / cover */
/* アニメーションの設定なし*/
}
/*スマホレスポンシブ対応--最小480px-最大が960pxに適用する＝タブレット*/
@media screen and (min-width: 481px) and (max-width: 960px){
#id_home_img_non_anime .imgFull {
/* 位置 --トップメニュー分下げる--タブレット/スマホでは解除してTOP0PXへ*/
top: 0px;
width: 100%;
max-width: 830px;
/* 背景画像：表示領域に収める */
background: var(--id_home_img_non_anime_LP_mobile_url) no-repeat center center;
/* 背景画面が崩れないように contain で画面を維持 */
background-size:contain; /* contain / cover */
}
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
#id_home_img_non_anime{
/* 画面が崩れないように最大を設定 */
max-width: 480px;
min-height: 700px;
}
#id_home_img_non_anime .imgFull {
/* 位置 --トップメニュー分下げる--タブレット/スマホでは解除してTOP0PXへ*/
top: 0px;
/* 画面が崩れないように最大を設定 */
max-width: 480px;
min-height: 700px;
/* 背景画像：表示領域に収める */
background: var(--id_home_img_non_anime_LP_mobile_url) no-repeat center center;
background-size:contain; /* contain / cover */
}
}
/*トップページ会社名用*/
#id_home_img_non_anime h1 {
/*文字フォントはclassを継承するため、位置と色のみ設定*/
position:absolute;
color: rgba(0, 0, 0, 0.05);
font-weight: bold;/*太字に*/
/*文字を中央に配置*/
top: 45%;
left: 50%;
/*★★重要：縦と横の文字のズレが補正----ボタンの大きさ分を調節して中央へ配置★★*/
-ms-transform: translate(-50%,-45%); /*旧対応*/
-webkit-transform: translate(-50%,-45%);/*旧対応*/
transform: translate(-50%,-45%);
/*余白による中央からズレの可能性を排除*/
margin:0;
padding:0;
z-index: 21; /*--奥行--*/
}
/*-- カーソルオン */
#id_home_img_non_anime h1:hover {
color: rgba(255, 255, 255, 1);
text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8), 6px 2px 15px rgba(0, 0, 0, 0.7); /* 文字にかげをつける */
transition: 1.0s; /* アニメーションの速度 */
}
#id_home_img_non_anime p:hover {
color: rgba(255, 255, 255, 0.9);
background-color: rgba(0, 0, 0, 0.4);
text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8), 6px 2px 15px rgba(0, 0, 0, 0.7); /* 文字にかげをつける */
transition: 1.0s; /* アニメーションの速度 */
}
/*トップページ説明文字*/
#id_home_img_non_anime p{
/*文字フォントはclassを継承するため、位置と色のみ設定*/
position:absolute;
color: rgba(0, 0, 0, 0);
/*文字を中央に配置*/
top: 60%;
left: 50%;
/*★★重要：縦と横の文字のズレが補正----ボタンの大きさ分を調節して中央へ配置★★*/
-ms-transform: translate(-50%,-20%); /*旧対応*/
-webkit-transform: translate(-50%,-20%);/*旧対応*/
transform: translate(-50%,-20%);
/*余白による中央からズレの可能性を排除*/
margin:0;
padding:0;
z-index: 21; /*--奥行--*/
}
/* Vカーソルの表示エリアCSS */
#id_home_img_non_anime .area_down_cursol {
/* カーソルの形状は、共通定義： shape_arrow */
/*配置を定義*/
position:absolute;
content: '';
/*中央下に配置*/
left: 50%;
bottom: 10%;
/*--アニメ--*/
animation-name:ky_flash_onoff;
animation-duration:2S;
animation-timing-function:linear;
animation-iteration-count:infinite;
z-index: 21; /*--奥行--*/
}
/* ボタン */
#id_home_img_non_anime .switchArea {
position:absolute;
color: white;
/*文字を中央に配置*/
bottom: 5%;
right: 0%;
display: block;
}
/*-------------------------------- id_home_img_non_anime --画像用CSS-END --------------------------------*/
/*------------------------------- #id_home_img_rolling --画像用CSS --------------------------------*/
#id_home_img_rolling {
position:relative;
/* container_top全面にセット container_TOP内でフル表示*/
/* サイズはcontainer_topのCLASSで定義*/
width: 100%;
height: 100%;
/* コントロール+スクロールで縮小拡大しても、背景画像は変化させない*/
/* max-width:100vw; 表示端末の画像幅を100とした際の割合 100vm=100%*/
/* min-width:100vw; 表示端末の画像幅を100とした際の割合 100vm=100%*/
}
/* 画像を動かすアニメーション設定 */
#id_home_img_rolling .imgFull {
position: absolute;
/* container_top全面にセット container_TOP内でフル表示*/
/* サイズはcontainer_topのCLASSで定義*/
width: 100%;
height: 100%;
/* 位置 */
top: 0;
left: 0;
display: block;
/* 背景画像：表示領域全体を覆う */
background:white no-repeat center center;
background-size:cover; /* contain / cover */
/* アニメーションの設定 */
animation-name: imgAnime;
animation-duration: calc(6s*6);
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes imgAnime {
0%{
background-position: left;
background-image : var(--id_home_img_rolling_image01_url); /* 背景の画像を指定 */
}
16%{
background-position: right;
background-image : var(--id_home_img_rolling_image01_url); /* 背景の画像を指定 */
}
17%{
background-position: right;
background-image : var(--id_home_img_rolling_image02_url); /* 背景の画像を指定 */
}
33%{
background-position: left;
background-image : var(--id_home_img_rolling_image02_url); /* 背景の画像を指定 */
}
34%{
background-position: left;
background-image : var(--id_home_img_rolling_image03_url); /* 背景の画像を指定 */
}
50%{
background-position: right;
background-image : var(--id_home_img_rolling_image03_url); /* 背景の画像を指定 */
}
51%{
background-position: right;
background-image : var(--id_home_img_rolling_image04_url); /* 背景の画像を指定 */
}
67%{
background-position: left;
background-image : var(--id_home_img_rolling_image04_url); /* 背景の画像を指定 */
}
68%{
background-position: left;
background-image : var(--id_home_img_rolling_image05_url); /* 背景の画像を指定 */
}
84%{
background-position: right;
background-image : var(--id_home_img_rolling_image05_url); /* 背景の画像を指定 */
}
85%{
background-position: right;
background-image : var(--id_home_img_rolling_image06_url); /* 背景の画像を指定 */
}
100%{
background-position: left;
background-image : var(--id_home_img_rolling_image06_url); /* 背景の画像を指定 */
}
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
#id_home_img_rolling{
/* 画面が崩れないように最大を設定 */
max-width: 480px;
min-height: 700px;
}
#id_home_img_rolling .imgFull {
/* 画面が崩れないように最大を設定 */
max-width: 480px;
min-height: 700px;
animation-duration: 60s;
}
}
/* 画像を暗くする オーバーレイ */
.overlay_daytime::after{
position: absolute;
content: '';
/* ↓暗いオーバーレイを半透明で配置 */
background-color: rgba(0, 0, 0, 0);
/* ↓全体を覆うように配置 */
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
.overlay_nighttime::after{
position: absolute;
content: '';
/* ↓暗いオーバーレイを半透明で配置 */
background-color: rgba(0, 0, 0, 0.4);
/* ↓全体を覆うように配置 */
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
/*トップページ会社名用*/
#id_home_img_rolling h1 {
/*文字フォントはclassを継承するため、位置と色のみ設定*/
position:absolute;
color: rgba(255, 255, 255, 0.8);
font-weight: bold;/*太字に*/
/*文字を中央に配置*/
top: 40%;
left: 50%;
/*★★重要：縦と横の文字のズレが補正----ボタンの大きさ分を調節して中央へ配置★★*/
-ms-transform: translate(-50%,-50%); /*旧対応*/
-webkit-transform: translate(-50%,-50%);/*旧対応*/
transform: translate(-50%,-50%);
/*余白による中央からズレの可能性を排除*/
margin:0;
padding:0;
z-index: 21; /*--奥行--*/
}
/*-- カーソルオン */
#id_home_img_rolling h1:hover {
color: rgba(0, 0, 0, 0.7);
text-shadow: 4px 4px 10px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83); /* 文字にかげをつける */
transition: 1.5s; /* アニメーションの速度 */
}
/*トップページ説明文字*/
#id_home_img_rolling p{
/*文字フォントはclassを継承するため、位置と色のみ設定*/
position:absolute;
color: white;
/*文字を中央に配置*/
top: 55%;
left: 50%;
/*★★重要：縦と横の文字のズレが補正----ボタンの大きさ分を調節して中央へ配置★★*/
-ms-transform: translate(-50%,-50%); /*旧対応*/
-webkit-transform: translate(-50%,-50%);/*旧対応*/
transform: translate(-50%,-50%);
/*余白による中央からズレの可能性を排除*/
margin:0; padding:0;
z-index: 21; /*--奥行--*/
}
/* Vカーソルの表示CSS */
#id_home_img_rolling .area_down_cursol {
/* カーソルの形状は、共通定義： shape_arrow */
/*配置を定義*/
position:absolute;
content: '';
/*中央下に配置*/
left: 50%;
bottom: 30%;
/*--アニメ--*/
animation-name:ky_flash_onoff;
animation-duration:2S;
animation-timing-function:linear;
animation-iteration-count:infinite;
z-index: 21; /*--奥行--*/
}
/* ボタン */
#id_home_img_rolling .switchArea {
position:absolute;
color: white;
/*文字を中央に配置*/
bottom: 5%;
right: 0%;
display: block;
}
/*------------------------------- id_home_img_rolling --画像用CSS-END --------------------------------*/
/*--------------------------------メインメニューの目次の装飾関連--------------------------------*/
.sideByside {
position: relative; /* aタグのクリック範囲を広げるための親側の設定 absoluteを有効にするには直前の親がrelativeでないと思った動作いならない */
left: 40%;
min-width:240px;
display: inline-block; /* インラインブロック要素にする */
border: 0px solid;
border-color:White;
background-image: linear-gradient(rgb(50, 50, 250) 0%, #7aceff 100%);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px rgb(50, 50, 250);
border-radius: 30px 30px 30px 30px; /* 枠に丸みをつける */
padding: 40px; /* 余白指定 */
z-index: 31; /*-- 重なり */
}
.sideByside a {
position: absolute; /* aタグのクリック範囲を広げるための子側の設定 */
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: 30px 30px 30px 30px; /* 枠に丸みをつける */
color: White;
text-decoration: none;
text-align: center;
padding:20px 0;
text-shadow: 0px 0px 5px rgba(97, 179, 185, 0.705); /* 文字にかげをつける */
}
.sideByside a:hover {
background-image: linear-gradient(rgb(50, 50, 250) 0%, #7aceff 100%);
color: black;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px rgb(50, 50, 250);
font-weight:700;
transition: 1s; /* アニメーションの速度 */
}
.sideByside a:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
/* ホーム項目ボタンサイズ縮小1 */
.sideByside {
left: 10%;
min-width:150px;
border-radius: 20px 20px 20px 20px; /* 枠に丸みをつける */
padding: 10px; /* 余白指定 */
}
/* ホーム項目ボタンサイズ縮小2 */
.sideByside a {
border-radius: 20px 20px 20px 20px; /* 枠に丸みをつける */
padding:20px 0;
font-size: 1.2rem;
}
/* ホーム項目ボタンサイズ縮小3 */
.sideByside a:hover {
font-size: 1.2rem;
}
}
/*--------------------------------メインメニューの目次の装飾関連--------------------------------*/
/*--------------------------------画面ホバーボタン -------------------------------------------*/
/* 画面ホバーボタン (問合せ用などに使える) */
.cls_hover_btn_300px ,.cls_hover_btn_600px ,.cls_hover_btn_area_left {
position: fixed; /*画面内で位置固定*/
/*絶対(fixed)配置*/
bottom: 5%;
margin:0px;
min-width:250px;
border: 0px solid;
border-radius: 30px 30px 30px 30px; /* 枠に丸みをつける */
background-image: linear-gradient(rgb(50, 50, 250) 50%, #7aceff 100%);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px rgb(50, 50, 250);
/* スクロール前は非表示--jsで表示をコントロール- */
opacity: 0; z-index: -10; /*アクティブ前は最後背景 */
transition: all 0.65s;
}
.cls_hover_btn_size_amazongiftcard ,.cls_hover_btn_size_amazongiftcard_2nd {
position: fixed; /*画面内で位置固定*/
/*絶対(fixed)配置*/
bottom: 20%;
margin:0px;
min-width:150px;
max-width:15%;
border: 0px solid;
border-radius: 10px 10px 10px 10px; /* 枠に丸みをつける */
background-size:cover; /* contain / cover */
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px rgb(50, 150, 50);
/* スクロール前は非表示--jsで表示をコントロール- */
opacity: 0; z-index: -10; /*アクティブ前は最後背景 */
transition: all 0.65s;
}
.cls_hover_btn_size_ask_lineapp ,.cls_hover_btn_size_qrcode_lineapp{
position: fixed; /*画面内で位置固定*/
/*絶対(fixed)配置*/
top: 30%;
margin:0px;
min-width:100px;
max-width:5%;
border: 0px solid;
border-radius: 10px 10px 10px 10px; /* 枠に丸みをつける */
background-size:cover; /* contain / cover */
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px rgb(50, 150, 50);
/* スクロール前は非表示--jsで表示をコントロール- */
opacity: 0; z-index: -10; /*アクティブ前は最後背景 */
transition: all 0.65s;
}
.cls_hover_btn_300px ,.cls_hover_btn_600px{right: 5%;}
.cls_hover_btn_area_left{left: 5%;}
.cls_hover_btn_size_amazongiftcard ,.cls_hover_btn_size_amazongiftcard_2nd{right: 0%;}
.cls_hover_btn_size_ask_lineapp ,.cls_hover_btn_size_qrcode_lineapp{right: 0%;}
.cls_hover_btn_300px.isActive ,.cls_hover_btn_600px.isActive ,.cls_hover_btn_area_left.isActive ,.cls_hover_btn_size_amazongiftcard.isActive ,.cls_hover_btn_size_amazongiftcard_2nd.isActive {
/* スクロール後は表示--jsで表示をコントロール- */
opacity: 1; z-index: 31; /*アクティブ後に表示 */
transition: all 0.65s;
}
.cls_hover_btn_size_ask_lineapp.isActive ,.cls_hover_btn_size_qrcode_lineapp.isActive {
/* スクロール後は表示--jsで表示をコントロール- */
opacity: 1; z-index: 403; /*LINE-btn*/
transition: all 0.65s;
}
.cls_hover_btn_300px a ,.cls_hover_btn_600px a ,.cls_hover_btn_area_left a {
position: relative; /*ボタン内の相対(relative)配置*/
top: 0%;
left: 0px;
margin:0px;
display: block;
width:100%; height:100%;
padding-top:5px; padding-bottom: 5px; /* 余白指定-ボタンの縦幅- */
border-radius: 30px 30px 30px 30px; /* 枠に丸みをつける */
/*文字の定義*/
color: White;
font-size: 1.7rem;
text-align: center;
text-decoration: none;
}
.cls_hover_btn_size_amazongiftcard a ,.cls_hover_btn_size_amazongiftcard_2nd a
,.cls_hover_btn_size_ask_lineapp a ,.cls_hover_btn_size_qrcode_lineapp a {
/* cls_hover_btn_size_amazongiftcardの縦横サイズを揃える */
position: relative; /*ボタン内の相対(relative)配置*/
bottom: -10px; /*位置の調節*/
left: 0px;
margin:0px;
display: block;
width:100%;
/*文字の定義*/
color: White;
font-size: 1.7rem;
text-align: center;
text-decoration: none;
}
.cls_hover_btn_300px a:hover ,.cls_hover_btn_600px a:hover ,.cls_hover_btn_area_left a:hover
,.cls_hover_btn_size_amazongiftcard a:hover ,.cls_hover_btn_size_amazongiftcard_2nd a:hover
,.cls_hover_btn_size_ask_lineapp a:hover ,.cls_hover_btn_size_qrcode_lineapp a:hover {
/*文字*/
color: black;
font-size: 1.9rem;
font-weight:700;
transition: 1s; /* アニメーションの速度 */
}
/*![]()
*/
/*![]()
タグではwidth heightを指定せず、その親で指定することでレスポンシブに対応できる*/
.cls_hover_btn_size_amazongiftcard a .tag_pic ,.cls_hover_btn_size_amazongiftcard_2nd a .tag_pic
,.cls_hover_btn_size_ask_lineapp a .tag_pic ,.cls_hover_btn_size_qrcode_lineapp a .tag_pic
{
vertical-align: center;
max-width:100%;
margin:auto; /*サイズ変更の際に中央配置へ縦横の自動調整*/
padding:0px;
object-fit: scale-down;
}
.cls_hover_btn_size_amazongiftcard a .tag_pic ,.cls_hover_btn_size_amazongiftcard_2nd a .tag_pic
,.cls_hover_btn_size_ask_lineapp a .tag_pic ,.cls_hover_btn_size_qrcode_lineapp a .tag_pic
{
box-shadow: 10px 10px 20px rgba(0, 0, 60, 0.9);
border-radius: 10px; /* 角丸指定 */
transition: 0.5s; /* アニメーションの速度 */
}
/*-------ボタン内における?ボタンエリアの配置-------*/
.area_close_btn {
position: absolute; /*画面内で位置固定*/
top: -5px;
right: -5px;
z-index: 31;
}
.area_close_btn input[type="checkbox"] {
display: none; /* チェックボックス非表示 */
}
/* === チェックボックスのラベル（ONのとき） ==================== */
/* 共通部品 lavel class="close_btnを表示 */
/* === チェックボックスのラベル（OFFのとき） ================ */
/*
.area_close_btn input[type="checkbox"]:checked +label {
background-color: black;
}
*/
/*タブレットスマホレスポンシブ対応--最大が700pxに適用する＝タブレット*/
@media screen and (max-width: 700px){
.cls_hover_btn_size_amazongiftcard ,.cls_hover_btn_size_amazongiftcard_2nd {
width: 150px; height: auto;
right: 1%; /* エリア配置の位置 */
}
.cls_hover_btn_size_amazongiftcard:hover ,.cls_hover_btn_size_amazongiftcard_2nd:hover {
min-width:200px;
width: auto; height: auto;
}
.cls_hover_btn_size_ask_lineapp ,.cls_hover_btn_size_qrcode_lineapp {
min-width:80px;
right: 1%; /* エリア配置の位置 */
}
.cls_hover_btn_size_ask_lineapp:hover ,.cls_hover_btn_size_qrcode_lineapp:hover {
min-width:100px;
width: auto; height: auto;
}
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
.cls_hover_btn_300px ,.cls_hover_btn_600px ,.cls_hover_btn_area_left {
min-width:auto;
width: 85px; height: 70px;
}
.cls_hover_btn_300px:hover ,.cls_hover_btn_600px:hover ,.cls_hover_btn_area_left:hover {
width: auto; height: auto;
}
.cls_hover_btn_300px a ,.cls_hover_btn_600px a ,.cls_hover_btn_area_left a{
font-size: 1.3rem;
padding-left:10px; padding-right:10px; /* 余白指定-ボタンの横幅- */
}
.cls_hover_btn_300px a:hover ,.cls_hover_btn_600px a:hover ,.cls_hover_btn_area_left a:hover {
font-size: 1.9rem;
}
.area_close_btn { top: -10px; right: -10px; }
}
/* -- js--ボタン表示を縮小⇒Xボタンのみへ -- */
.cls_hover_btn_300px.small ,.cls_hover_btn_300px.small a
,.cls_hover_btn_600px.small ,.cls_hover_btn_600px.small a {
width:0px; height: 0px; /*表示幅をなくす＝非表示*/
padding: 0px; /* 余白指定-ボタンの幅になる- */
font-size: 0rem;
right: 0%;
}
.cls_hover_btn_area_left.small ,.cls_hover_btn_area_left.small a {
width:0px; height: 0px; /*表示幅をなくす＝非表示*/
padding: 0px; /* 余白指定-ボタンの幅になる- */
font-size: 0rem;
left: 5%;
}
.cls_hover_btn_size_amazongiftcard.small ,.cls_hover_btn_size_amazongiftcard.small a
,.cls_hover_btn_size_amazongiftcard_2nd.small ,.cls_hover_btn_size_amazongiftcard_2nd.small a {
width:0px; height: 0px; /*表示幅をなくす＝非表示*/
padding: 0px; /* 余白指定-ボタンの幅になる- */
font-size: 0rem;
right: 0%;
}
/*======= ボタンの装飾 部品として他のボタンも作れる ==============*/
/* 必須事項：エリアの定義とそのエリアへのjs付加のコード $css_cls_hover_btn_300.addClass('small')のような*/
.close_btn{
display: block;
position:relative;
/*ボタンの位置⇒追加CSSで設定;*/
/*枠の装飾--大きさ*/
width:30px;
height:30px;
/*枠の装飾--円*/
border: 2px solid white;
border-radius: 50%;
background-color: blue;
transition: all 1s; /* アニメーション設定 */
}
.close_btn a{
position: relative;
/*ボタン内の相対(relative)配置*/
top: 0px;
left: 0px;
margin:0px 0px 0px -25px; /* クリック幅の位置調整指定 */
padding:40px; /* 余白指定-aボタンの見えないクリック領域の幅になる- */
/* background-color: rgba(50,50,50,0.5);*/
z-index: 21; /*--奥行--*/
}
/*バツの棒を１本ずつ定義*/
.close_btn::before, .close_btn::after{
content: '';
position: absolute;
/*ボタン内の相対(relative)配置*/
top: 50%;
left: 50%;
/*-- ×ボタンの大きさ */
width: 4px;
height: 30px;
background-color: white; /* 棒の色 */
border-radius: 2.5px; /* 棒の四隅の丸み*/
}
/*バツの棒を１本ずつ定義*/
.close_btn::before{
transform: translate(-50%,-50%) rotate(45deg);
}
.close_btn::after{
transform: translate(-50%,-50%) rotate(-45deg);
}
.close_btn:hover { /* マウスオーバー時のスタイル */
transform: rotate(360deg);
background-color: black;
}
/*=======?ボタンの装飾 部品として他の?ボタンも作れる===ここまで===========*/
/*--------------------------------画面ホバーボタン -------------------------------------------*/
/*--------------------------------- 編集ボタン -------------------------------------------*/
/*エリアの配置*/
.area_edit_btn {
float: right;
width:40px;
height:40px;
margin-top:10px;
background:var(--parts_edit_button_url) no-repeat center center;
background-size:cover;
/*-- button特有の修飾をなくす-- */
border: none;
outline: none;
z-index: 21; /*-- 重なり */
}
.area_edit_btn:hover {
outline-color: rgba(20, 20, 250,0.6);
outline-style: solid;
outline-width: 5px;
}
.area_edit_btn a{
position: relative;
/*ボタン内の相対(relative)配置*/
margin:0px 0px 0px -20px; /* クリック幅の位置調整指定 */
padding:40px; /* 余白指定-aボタンの見えないクリック領域の幅になる- */
background-color: rgba(50,50,50,0.5);
z-index: 21; /*--奥行--*/
}
/*--------------------------------- 編集ボタン -------------------------------------------*/
/*--------------------------------- 編集クリック -------------------------------------------*/
.acd_chkbox_edit{
display: none; /* 非表示 */
}
.acd_label_edit{
display: block;
/* background-color: rgba(211,211,211,0.5);*/
}
/*--クリック連動でピンon/off*/
.acd_chkbox_edit + .acd_label_edit .edit_dot{
display: inline-block;
width:30px;
height:30px;
margin-left:30%; margin-right:auto;
background:var(--parts_edit_dot01_url) no-repeat center center;
background-size:cover;
vertical-align: middle;
transition: .5s;
}
.acd_chkbox_edit:checked + .acd_label_edit .edit_dot{
background:var(--parts_edit_dot02_url) no-repeat center center;
background-size:cover;
transition: .5s;
}
/*-- デフォルト非表示 */
.acd_label_edit_content_hidden{
position: absolute;
background-color: var(--AOXYZ_blue); /*AOXYZblue*/
background-color: rgba(222,222,222,0.5);
width: 70px; /*表示幅*/
margin-left:0px; margin-right:auto;
padding:2px;
height: 0px;
opacity: 0;
visibility: hidden;
}
.acd_chkbox_edit:checked + .acd_label_edit + .acd_label_edit_content_hidden{
height: Auto;
opacity: 1;
visibility: visible;
transition: .5s;
}
.acd_chkbox_edit_li {
position: relative;
list-style-type: none;
top: 0px;
margin:0; padding:0px 0px 1px 0px ;
/* background-color: red;*/
}
.acd_chkbox_edit_btn{
position: relative;
/*文字*/
color: rgba(88,88,88,1);
margin-left:auto; margin-right:auto;
padding:5px 15px 5px 15px;
border: none;
cursor: pointer;
z-index: 31; /*--奥行--*/
/* background-color: lightgreen;*/
}
.acd_chkbox_edit_btn:hover {
/*文字*/
color: black;
background-color: lightskyblue;
transition: 1s; /* アニメーションの速度 */
}
.acd_chkbox_edit_a{
position: relative;
/*ボタン内のaタグ枠*/
padding:7px 15px 2px 15px;
/*文字*/
color: rgba(88,88,88,1);;
text-decoration: none;
/* background-color: lightgreen;*/
}
.acd_chkbox_edit_a:hover {
/*文字*/
color: black;
background-color: lightskyblue;
transition: 1s; /* アニメーションの速度 */
}
/* チェックボックスの説明ポップアップ */
.editchkboxarea_explain_hidden{
position: absolute;
background-color: var(--AOXYZ_blue); /*AOXYZblue*/
border-radius: 5%;
/*後で*/
background-color: rgba(245,245,245,0.95);
width: auto; /*表示幅*/
top:-25px; right:-10px;
margin-left:10px; margin-right:auto;
padding:2px;
height: 0px;
opacity: 0;
visibility: hidden;
z-index: 21; /*--奥行--*/
}
.editchkboxarea_explain_hidden span{
color:black;
font-size: 1.3em;
}
.acd_label_edit:hover ~ .editchkboxarea_explain_hidden{
height: Auto;
opacity: 1;
visibility: visible;
transition: .5s;
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
.acd_chkbox_edit + .acd_label_edit .edit_dot{
margin-left:auto; margin-right:auto;
}
.acd_label_edit_content_hidden{
margin-left:-30px; margin-right:auto;
}
}
/*--------------------------------- 編集クリック -------------------------------------------*/
/*--------------------------------- ツールチップ -------------------------------------------*/
/* ツールチップのエリア */
.area_tooltip {
display: inline-block;
position: relative;
cursor: pointer;
}
/* ツールチップ用画像エリア */
.area_tooltip_img{
width: 15px; height:auto;
}
/* ツールチップのテキスト */
.tooltip-text ,.tooltip-text_R ,.tooltip-text_L ,.tooltip-text_B {
display: none;/*非表示*/
position: absolute;
padding: 5px; /* 余白 */
border-radius: 3px; /* 角丸 */
/* 文字 */
color: white;
line-height: 1.3; /* 行間 */
white-space: nowrap; /* テキストを折り返さない */
background-color: var(--AOXYZ_blue); /*AOXYZblue*/
opacity: 0;
transition: 0.3s ease-out;
}
.tooltip-text {
top: -45px; /* 親要素からの位置 */
left: 50%; /* 親に対して中央配置 */
transform: translateX(-50%); /* 親に対して中央配置 */
}
.tooltip-text_R {
top: -0px; /* 親要素からの位置 */
right: -130px; /* 親の右配置 */
}
.tooltip-text_L {
top: 0px; /* 親要素からの位置 */
left: -130px; /* 親の左配置 */
}
.tooltip-text_B {
bottom: -50px; /* 親要素からの位置 */
left: 50%; /* 親に対して中央配置 */
transform: translateX(-50%); /* 親に対して中央配置 */
}
.tooltip-text:before ,.tooltip-text_R:before ,.tooltip-text_L:before ,.tooltip-text_B:before {
content: '';
position: absolute;
}
.tooltip-text:before {
top: 25px; /*thisからの距離*/
left: 50%; /*thisからの距離*/
margin-left: -8px; /*▲の位置-左右-*/
border: 8px solid transparent; /*▲の形状*/
border-top: 15px solid var(--AOXYZ_blue); /*AOXYZblue*/ /*▲の形状*/
}
.tooltip-text_R:before {
top: 5px; /*thisからの距離*/
left: -20px; /*thisからの距離*/
margin-left: 0px; /*▲の位置-左右-*/
border: 8px solid transparent; /*▲の形状*/
border-right: 15px solid var(--AOXYZ_blue); /*AOXYZblue*/ /*▲の形状*/
}
.tooltip-text_L:before {
top: 5px; /*thisからの距離*/
right: -20px; /*thisからの距離*/
margin-left: -10px; /*▲の位置-左右-*/
border: 8px solid transparent; /*▲の形状*/
border-left: 15px solid var(--AOXYZ_blue); /*AOXYZblue*/ /*▲の形状*/
}
.tooltip-text_B:before {
bottom: 30px; /*thisからの距離*/
left: 50%; /*thisからの距離*/
margin-left: -8px; /*▲の位置-左右-*/
border: 8px solid transparent; /*▲の形状*/
border-bottom: 15px solid var(--AOXYZ_blue); /*AOXYZblue*/ /*▲の形状*/
}
.area_tooltip:hover .tooltip-text { display: block; opacity: 1;}
.area_tooltip:hover .tooltip-text_R { display: block; opacity: 1;}
.area_tooltip:hover .tooltip-text_L { display: block; opacity: 1;}
.area_tooltip:hover .tooltip-text_B { display: block; opacity: 1;}
/*--------------------------------- ツールチップ -------------------------------------------*/
/*--------------------------------説明コメントの非表示-表示--------------------------------*/
.acd-chkBox{
display: none; /* 非表示 */
}
.acd-label{
display: block;
background-color: rgba(211,211,211,0.5);
color: var(--AOXYZ_blue); /*AOXYZblue*/
font-weight: bold;
padding: 10px;
border-radius: 10px 10px 10px 10px; /* 枠に丸みをつける */
}
.acd-label:hover{
outline-color: rgba(20, 20, 250,1);
outline-style: solid;
outline-width: 3px;
}
.acd-label p{
display: inline-block;
width:auto;
height:auto;
}
/*--クリック連動でピンon/off*/
.acd-chkBox + .acd-label .pin{
display: inline-block;
width:20px;
height:20px;
margin: 0px 10px 5px 0px;
background:var(--img_pin_50px_45deg_url) no-repeat center center;
background-size:cover;
vertical-align: middle;
}
.acd-chkBox:checked + .acd-label .pin{
background:var(--img_pin_50px_0deg_url) no-repeat center center;
background-size:cover;
}
/*-- デフォルト非表示 */
.acd-content_hidden{
padding: 1% 5%;
height: 0px;
opacity: 0;
visibility: hidden;
}
.acd-chkBox:checked + .acd-label + .acd-content_hidden{
height: Auto;
opacity: 1;
visibility: visible;
transition: .5s;
}
/*スマホレスポンシブ対応--最大が700pxに適用する＝スマホとタブレット*/
@media screen and (max-width: 700px){
.acd-content_hidden {
padding: 1% 3%;
}
}
/*
.acd-label:hover + .acd-content_hidden{
height: Auto;
opacity: 1;
visibility: visible;
transition: 1.5s;
}
*/
/*--------------------------------説明コメントの非表示-表示--------------------------------*/
/*--------------------------------矢印アーケード(説明コメントの非表示-表示)--------------------------------*/
.arrow_acd_chkBox{
display: none; /* 非表示 */
}
.arrow_acd_label{
display: block;
background-color: rgba(255,255,255,0); /*透明*/
color: var(--AOXYZ_blue); /*AOXYZblue*/
padding: 5px;
text-align: center;
}
.arrow_acd_label:hover{
outline-color: rgba(20, 20, 250,1);
outline-width: 3px;
}
.arrow_acd_label p{
display: inline-block;
width:auto;
height:auto;
}
/*--クリック連動で矢印の向きのon/off*/
.arrow_acd_chkBox + .arrow_acd_label .img_arrow{
display: block; /* inline-block */
/* vertical-align: middle; */
width:100px;
height:50px;
margin-left: auto; margin-right: auto;
background:var(--img_arrow_150px_0deg_url) no-repeat center center;
background-size:cover;
}
.arrow_acd_chkBox:checked + .arrow_acd_label .img_arrow{
background:var(--img_arrow_150px_180deg_url) no-repeat center center;
background-size:cover;
}
/*-- デフォルト非表示 */
.arrow_acd_content_hidden{
padding: 0px;
height: 0px;
opacity: 0;
visibility: hidden;
}
.arrow_acd_chkBox:checked + .arrow_acd_label + .arrow_acd_content_hidden{
height: Auto;
opacity: 1;
visibility: visible;
transition: .5s;
}
/*--------------------------------矢印アーケード(説明コメントの非表示-表示)--------------------------------*/
/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆スマホ-ＰＣ切り替え◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */
/* スマホ 最大画面横幅サイズ480px以下*/
@media screen and (max-width: 480px) {
/*
ul.topnav li.right {float: right;}
ul.topnav li {float: none;}
*/
/* ホームアイコン画像用サイズ */
.homebackicon {
max-width:32px;
max-height:32px;
top: 25px;
left: 80px;
}
/* 言語切り替え画像サイズ */
.global_lang {
max-width:32px;
max-height:32px;
top: 25px;
left: 120px;
}
/*スマホ用-追加条件*/
.global_input{
/*違い*/
margin-top: 20px;
right: 60px;
}
/* スマホ時_改行する */
.mobile_br {
display: block;
}
/* スマホ時_非表示タグ化 */
.mobile_hidden {
display: none;
}
/* 年間スケジュールボタンサイズ縮小 */
.schedule_button {
min-width:50px;
padding: 3px; /* 余白指定 */
margin: 2px; /* 外側の余白*/
}
}
/* スマホ以外 最小画面サイズ481px以上*/
@media screen and (min-width: 481px) {
/*
ul.topnav li.right {float: right;}
ul.topnav li {float: none;}
*/
img {
width: 100%;
}
/* ホームアイコン画像用サイズ */
.homebackicon {
max-width:36px;
max-height:36px;
top: 20px;
right: 120px;
}
/* 言語切り替え画像サイズ */
.global_lang {
max-width:36px;
max-height:36px;
top: 20px;
right: 70px;
}
/*ＰＣ用-追加条件*/
.global_input{
/*違い*/
margin-top: 60px;
right: 10px;
}
/* スマホ時_改行する */
.mobile_br {
display: none;
}
}
/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆スマホ-ＰＣ切り替え◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */
/*-------------------------------- 日付によって装飾を変更するCSS --------------------------------*/
td.ontoday{
color: white;
background-color: rgb(25, 29, 255);
border: 1px solid lightgrey;
box-shadow: 0px -3px 5px 1px #eee inset;
font-weight: bold;
animation-name:ky_flash_onoff; /*--点滅設定--*/
animation-duration:3S;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
td.ontomorrow{
background-color: lightskyblue;
border: 1px solid lightgrey;
box-shadow: 0px -3px 5px 1px #eee inset;
font-weight: bold;
animation-name:ky_flash_onoff; /*--点滅設定--*/
animation-duration:3S;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
td.onNewterm{
background-color: lightskyblue;
border: 1px solid lightgrey;
box-shadow: 0px -3px 5px 1px #eee inset;
font-weight: bold;
animation-name:ky_flash_onoff; /*--点滅設定--*/
animation-duration:3S;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
.ontoday{
color: pink;
background-color: rgb(25, 29, 255);
font-weight: bold;
animation-name:ky_flash_onoff; /*--点滅設定--*/
animation-duration:3S;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
.ontomorrow{
background-color: lightskyblue;
font-weight: bold;
animation-name:ky_flash_onoff; /*--点滅設定--*/
animation-duration:3S;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
.scroll-flash{
background-color: lightskyblue;
font-weight: bold;
animation-name:ky_flash_onoff; /*--点滅設定--*/
animation-duration:3S;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
/*--アニメーションの定義--*/
@keyframes ky_flash_onoff {
0%,40%,60%,100% {
opacity: 1;
}
45%,55% {
opacity: 0.5;
}
}
/*-------------------------------- 日付によって装飾を変更するCSS --------------------------------*/
/*--------------------------------無限スクロールリストを増加させるボタン要素--------------------------------*/
#id_infinity_scroll {
display: block;
color: white;
background-color: Blue;
text-align:center;
opacity:0.5;
border-radius: 5px;
height: 40px;
width: 200px;
padding: 5px;
cursor:pointer;
bottom: 30px;
}
/*--------------------------------無限スクロールリストを増加させるボタン要素--------------------------------*/