@charset "utf-8";

/*
This file make sure : common.css
Author : TALES WORKS
Author URI : https://talesworks.com/
Last Renew : 更新履歴を記載　2023/10/05/
*/


/*------------------index---------------------

//* root
//* Utility

/
----------------------------------------------*/

/* ============================================   :root   ============================================ */
:root{
  --font_ss:12px;
  --font_s:16px;
  --font_m:24px;
  --font_r:32px;
  --font_l:48px;  
  --space_s:8px;
  --space_m:16px;
  --space_r:24px;
  --space_l:32px;
  --color_red_sakurairo:#fdeeef; /* 桜色(さくらいろ) */
  --color_red_haizakura:#eddbd8; /* 灰桜(はいざくら) */
  --color_red_koubaiiro:#f3a7a5; /* 紅梅色(こうばいいろ) */
  --color_red_aka:#e6002f; /* 赤(あか) */
  --color_red_kinaka:#e8380d; /* 金赤(きんあか) */
  --color_red_shuiro:#e94709; /* 朱色(しゅいろ) */
  --color_red_hiiro:#db4f2e; /* 緋色(ひいろ) */
  --color_red_barairo:	#e94e66; /* 薔薇色(ばらいろ) */
  --color_red_shinku:#b60033; /* 真紅(しんく) */
  --color_red_enji:#b94047; /* 臙脂(えんじ) */
  --color_red_akaneiro:#b7282d; /* 茜色(あかねいろ) */
  --color_yellow_kiiro:#ffd900; /* 黄色(きいろ) */
  --color_yellow_yellow:#ffff00; /* イエロー */
  --color_yellow_ukoniro:#fabf13; /* 鬱金色(うこんいろ) */
  --color_yellow_hadairo:#fce2c4; /* 肌色(はだいろ) */
  --color_yellow_mikaniro:#f18d00; /* 蜜柑色(みかんいろ) */
  --color_yellow_daidaiiro:#f08300; /* 橙色(だいだいいろ) */
  --color_yellow_yamabukiiro:#f8b500; /* 山吹色(やまぶきいろ) */
  --color_yellow_karashiiro:#d2b74e; /* 芥子色(からしいろ) */
  --color_green_moegiiro:#006d4d; /* 萌葱色(もえぎいろ) */
  --color_green_midori:#3eb370; /* 緑(みどり) */
  --color_green_fukamidori:	#00582d; /* 深緑(ふかみどり) */
  --color_green_usumidori:#d0e2be; /* 薄緑(うすみどり) */
  --color_green_kimidori:#b8d200; /* 黄緑(きみどり) */
  --color_green_wakakusairo:#c8d921; /* 若草色(わかくさいろ) */
  --color_green_wakabairo:#b9d08b; /* 若葉色(わかばいろ) */
  --color_green_wakatakeiro:#67be8d; /* 若竹色(わかたけいろ) */
  --color_green_macchairo:#c4c46a; /* 抹茶色(まっちゃいろ) */
  --color_green_uguisuiro:#9d973b; /* 鶯色(うぐいすいろ) */
  --color_blue_ao:#0095d9; /* 青(あお) */
  --color_blue_ruriiro:#1d50a2; /* 瑠璃色(るりいろ) */
  --color_blue_rurikon:#18448e; /* 瑠璃紺(るりこん) */
  --color_blue_gunjyouiro:#4e67b0; /* 群青色(ぐんじょういろ) */
  --color_blue_koniro:#213a70; /* 紺色(こんいろ) */
  --color_blue_noukon:#00053a; /* 濃紺(のうこん) */
  --color_blue_tsuyukusairo:#239dda; /* 露草色(つゆくさいろ) */
  --color_blue_wasurenagusairo:#89c3eb; /* 勿忘草色(わすれなぐさいろ) */
  --color_blue_blue:#0075c2; /* ブルー */
  --color_blue_midnightblue:#001d42; /* ミッドナイトブルー */
  --color_blue_Aquamarine:#00708e; /* アクアマリン */
  --color_blue_indigo:#004876; /* インディゴ */
  --color_blue_cyan:#00a0e9; /* シアン */
  --color_blue_royalblue:#00489d; /* ロイヤルブルー */
  --color_purple_murasaki:#8e4898; /* 紫(むらさき) */
  --color_purple_kokiiro:#6e4c55; /* 濃色(こきいろ) */
  --color_purple_usuiro:#c7b0cd; /* 薄色(うすいろ) */
  --color_purple_edomurasaki:#734e95; /* 江戸紫(えどむらさき) */
  --color_purple_aomurasaki:#6e4598; /* 青紫(あおむらさき) */
  --color_purple_akamurasaki:#ea609e; /* 赤紫(あかむらさき) */
  --color_purple_fujiiro:#bbb7da; /* 藤色(ふじいろ) */
  --color_purple_rindouiro:#6662a4; /* 竜胆色(りんどういろ) */
  --color_purple_kikyouiro:#5654a2; /* 桔梗色(ききょういろ) */
  --color_purple_kakitsubatairo:#4d4398; /* 杜若色(かきつばたいろ) */
  --color_purple_shoubuiro:#674196; /* 菖蒲色(しょうぶいろ) */
  --color_purple_royalpurple:#6a258a; /* ロイヤルパープル */
  --color_purple_violet:#714f9d; /* バイオレット */
  --color_purple_pansy:#51318f; /* パンジー */
  --color_purple_lavender:#c5b3d3; /* ラベンダー */
  --color_brown_chairo:#8d5025; /* 茶色(ちゃいろ) */
  --color_brown_kogecha:#6f4d3e; /* 焦茶(こげちゃ) */
  --color_brown_usucha:#cda16f; /* 薄茶(うすちゃ) */
  --color_brown_oudoiro:#c39043; /* 黄土色(おうどいろ) */
  --color_brown_usukou:#f7e9c5; /* 薄香(うすこう) */
  --color_brown_kurocha:#4b2d16; /* 黒茶(くろちゃ) */
  --color_brown_kincha:#e48e00; /* 金茶(きんちゃ) */
  --color_brown_rikyucha:#98906e; /* 利休茶(りきゅうちゃ) */
  --color_brown_edocha:#cb9057; /* 江戸茶(えどちゃ) */
  --color_brown_kuriiro:#762e05; /* 栗色(くりいろ) */
  --color_brown_kurumiiro:#bf783d; /* 胡桃色(くるみいろ) */
  --color_brown_kasshoku:#813b00; /* 褐色(かっしょく) */
  --color_brown_komugiiro:#e59f5c; /* 小麦色(こむぎいろ) */
  --color_brown_amairo:#efe5ca; /* 亜麻色(あまいろ) */
  --color_brown_kohakuiro:#bf7834; /* 琥珀色(こはくいろ) */
  --color_brown_kitsuneiro:#c97e13; /* 狐色(きつねいろ) */
  --color_brown_sepia:#6f4e27; /* セピア */
  --color_brown_khaki:#bb9855; /* カーキ */
  --color_brown_:#eedcb3; /* ベージュ */
  --color_brown_camel:#c49961; /* キャメル */
  --color_brown_chocholate:#612c16; /* チョコレート */
  --color_brown_caramel:#90692c; /* キャラメル */
  --color_brown_bronze:#a36b21; /* ブロンズ */
  --color_brown_amber:#c28953; /* アンバー */
  --color_monochrome_kinariiro:#fbfaf3; /* 生成色(きなりいろ) */
  --color_monochrome_nyuuhakushoku:#fffffb; /* 乳白色(にゅうはくしょく) */
  --color_monochrome_haiiro:#767676; /* 灰色(はいいろ) */
  --color_monochrome_nibiiro:#666464; /* 鈍色(にびいろ) */
  --color_monochrome_nezumiiro:#949495; /* 鼠色(ねずみいろ) */
  --color_monochrome_rikyuunezu:#7b8174; /* 利休鼠(りきゅうねず) */
  --color_monochrome_sumiiro:#2f2725; /* 炭色(すみいろ) */
  --color_monochrome_snowwhite:#fafdff; /* スノーホワイト */
  --color_monochrome_pearlwhite:#fffef7; /* パールホワイト */
  --color_monochrome_ivory:#f8f5e3; /* アイボリー */
  --color_monochrome_ashgrey:#9f9f9d; /* アッシュグレー */
  --color_monochrome_silvergrey:#afafb0; /* シルバーグレー */
  --color_monochrome_gunmetalgrey:#5c565e; /* ガンメタルグレー */
  --color_monochrome_noir:#333132; /* ノワール */
}

/* ============================================ utility ============================================ */

/* ========================================== */
/* SITE WIDTH
/* ========================================== */
:root {
  --container-size_l:1280px;
  --container-size_r:1024px;
  --container-size_m:980px;
  --container-size_s:800px;
}

/* container */
.u_cont-size_l,
.u_cont-size_r,
.u_cont-size_m,
.u_cont-size_s { position: relative; width: var(--container-size_l); margin: 0 auto; }
.u_cont-size_r { width: var(--container-size_r); }
.u_cont-size_m { width: var(--container-size_m); }
.u_cont-size_s { width: var(--container-size_s); }
@media (max-width: 768px) {
  .u_cont-size_l,
  .u_cont-size_r,
  .u_cont-size_m,
  .u_cont-size_s {
    width: 100%;
  }
}

/* max-width */
.u_cont-mx-size_l,
.u_cont-mx-size_r,
.u_cont-mx-size_m,
.u_cont-mx-size_s { position: relative; width: 100%; max-width: var(--container-size_l); margin: 0 auto; }
.u_cont-mx-size_r { max-width: var(--container-size_r); }
.u_cont-mx-size_m { max-width: var(--container-size_m); }
.u_cont-mx-size_s { max-width: var(--container-size_s); }

/* min-width */
.u_cont-min-size_l,
.u_cont-min-size_r,
.u_cont-min-size_m,
.u_cont-min-size_s { position: relative; min-width: var(--container-size_l); margin: 0 auto;}
.u_cont-min-size_r { min-width: var(--container-size_r); }
.u_cont-min-size_m { min-width: var(--container-size_m); }
.u_cont-min-size_s { min-width: var(--container-size_s); }
@media (max-width: 768px) {
  .u_cont-min-size_l,
  .u_cont-min-size_r,
  .u_cont-min-size_m,
  .u_cont-min-size_s {
    min-width: 100%;
  }
}

/* Nosideの場合はclassを付けない */

/* 特殊対応 u_cos(cont-order-size) */
/*
:root {
  --container-order-size_pc:;
  --container-order-size_tab:;
  --container-order-size_sp:;
}

.u_cos {
  position: relative;
  width: var(--container-order-size_pc);
  max-width: var(--container-order-size_pc);
  min-width: var(--container-order-size_pc);
  margin: 0 auto;
}
@media (max-width: 768px) {
  .u_cos {
    width: var(--container-order-size_tab);
    max-width: var(--container-order-size_tab);
    min-width: var(--container-order-size_tab);
  }
}
@media (max-width: 480px) {
  .u_cos {
    width: var(--container-order-size_sp);
    max-width: var(--container-order-size_sp);
    min-width: var(--container-order-size_sp);
  }
}
*/

/* inner */
.u_inn { margin: 0 16px; }

/* ========================================== */
/* HEADLINE
/* ========================================== */

/* Group 1：UNDERLINE
--------------------------------------*/
/* 1.グレーの下線 */
.u_headline_g1_01 { padding-bottom: 0.5em; border-bottom: 1px solid #ccc; }

/* 2.先頭文字の強調とグレーの下線 */
.u_headline_g1_02 { padding-bottom: 0.5em; border-bottom: 1px solid #ccc; }
.u_headline_g1_02:first-letter { margin-right: 0.1em; font-size: 1.5em; }

/* 3.文字量で可変する下線(padding-bottomで間隔を調整) */
.u_headline_g1_03 { display: inline-block; padding-bottom: 15px; border-bottom: solid 1px #ec2e14; }

/* 4.文字量で可変するドット下線(padding-bottomで間隔を調整) */
.u_headline_g1_04 { letter-spacing: 2px; }
.u_headline_g1_04 span { padding-bottom: 7px; border-bottom: 1px dotted #333; }

/* 5.グレーの下線と文字量で可変するグレーの太線 */
.u_headline_g1_05 { padding: 0; border-bottom: 1px solid #ddd; }
.u_headline_g1_05 span { display: inline-block; margin: 0; padding: 0 0 10px 0; border-bottom: 4px solid #ccc; }

/* 6.グレーの下線と文字量で可変するネイビーの太線 */
.u_headline_g1_06 { padding: 0; border-bottom: 2px solid #ddd; }
.u_headline_g1_06 span { display: inline-block; margin: 0; padding: 0 0 10px 0; border-bottom: 2px solid #191970; }

/* 7.装飾下線 */
.u_headline_g1_07 { font-size: 24px; border-bottom: solid 3px; padding-bottom: 5px; position: relative; font-weight: normal; }
.u_headline_g1_07::before {	content: ''; width: 50px; height: 3px; background-color: #42a6ff; display: block; position: absolute; left:  0; bottom: -3px; }

/* 8.太い下線に文字を挿入 */
.u_headline_g1_08 { color: #0d3852; font-weight: bold; }
.u_headline_g1_08::after { content: "STYLE"; display: block; margin: 8px 0 0; padding-right: 8px; background: #0d3852; color: #fff; font-size: 12px; font-size: 1.2rem; font-weight: bold; text-align: right; }

/* 9.上下線の下線の下に文字を挿入 */
.u_headline_g1_09 { color: #0d3852; font-weight: bold; }
.u_headline_g1_09::before { content: ""; display: block; border-top: 1px solid #0d3852; margin: 0 0 8px; }
.u_headline_g1_09::after { content: "STYLE"; display: block; width: 100%; margin: 8px 0 0; padding-right: 8px; border-top: 1px solid #0d3852; color: #0d3852;
  font-size: 12px; font-size: 1.2rem; font-weight: bold; text-align: right; }

/* 10.下線の上に文字を入れる */
.u_headline_g1_10 { position: relative; color: #0d3852; font-weight: bold; }
.u_headline_g1_10::before { content: "STYLE"; position: absolute; top: 8px; right: 8px; font-size: 12px; font-size: 1.2rem; font-weight: bold; color: #0d3852; }
.u_headline_g1_10::after { content: ""; display: block; width: 100%; margin: 8px 0 0; padding-right: 8px; border-top: 1px solid #0d3852; }

/* 11.ストライプの太い下線 */
.u_headline_g1_11 { position: relative; }
.u_headline_g1_11:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 7px; background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px); background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px); }

/* 12.マルチボーダー */
.u_headline_g1_12 {	padding:6px 0; border-bottom:8px solid #ABDEF7;	position:relative; }
.u_headline_g1_12:before,
.u_headline_g1_12:after{ content:""; display:block; height:8px; position:absolute; bottom:-8px; }
.u_headline_g1_12:before{ width:20%; left:8%; background:rgba(255,255,255,0.7); }
.u_headline_g1_12:after{ width:30%; left:12%; background:rgba(87,176,224,0.6); }

/* Group 2：CENTER
--------------------------------------*/
/* 1.ネイビー下線150px */
.u_headline_g2_01 { text-align: center; }
.u_headline_g2_01::after { display: block; content: ""; width: 150px; height: 2px; margin: 20px auto auto; background: #3b3b3b none repeat scroll 0 0; }

/* 2.グレーの下線と文字量で可変するネイビー下線 */
.u_headline_g2_02 { padding: 0; border-bottom: 2px solid #ddd; text-align: center; }
.u_headline_g2_02 span { display: inline-block; margin: -2px; padding: 0 0 10px 0; border-bottom: 2px solid #191970; }

/* 3.文字の上下中央を中央線が貫通 */
.u_headline_g2_03 { overflow: hidden; text-align: center; }
.u_headline_g2_03 span { position: relative; display: inline-block; margin: 0 2.5em; padding: 0 1em; text-align: left; }
.u_headline_g2_03 span::before,
/* 線の長さはwidthで変更する（100%以内でコンテンツ幅内に収められる） */
.u_headline_g2_03 span::after { position: absolute; top: 50%; content: ''; width: 400%; height: 1px; background-color: #ccc;}
.u_headline_g2_03 span::before { right: 100%; }
.u_headline_g2_03 span::after { left: 100%; }

/* 4.文字の上下中央を中央線二重線が貫通 */
.u_headline_g2_03__Cont { max-width: 7678px; margin: 0 auto; text-align: center;}
.u_headline_g2_04 { position: relative; display: inline-block; padding: 0 55px; }
.u_headline_g2_04:before,
.u_headline_g2_04:after { content: ''; display: inline-block; position: absolute; top: 50%; width: 45px; height: 4px; border-top: solid 1px black; border-bottom: solid 1px black; }
.u_headline_g2_04:before { left:0; }
.u_headline_g2_04:after { right: 0; }

/* 4.シンボルを中央に入れたデザイン */
.u_headline_g2_05 { position: relative; max-width: 768px; margin: 0 auto; padding: 1.5rem; text-align: center; border: 2px solid #000; background: #fff; }
.u_headline_g2_05::before,
.u_headline_g2_05::after { position: absolute; content: ''; }
.u_headline_g2_05::before { top: -40px; left: calc(50% - 40px); width: 80px; height: 80px; border: 2px solid #000; border-radius: 50%; background: #fff; }
.u_headline_g2_05::after { top: 0; left: 0; width: 100%; height: 100%; background: #fff; }
.u_headline_g2_05 i { font-size: 30px; font-size: 3rem; line-height: 60px; position: absolute; z-index: 1; top: -40px; left: calc(50% - 40px); width: 80px; height: 60px; text-align: center; }
.u_headline_g2_05 span { position: relative; z-index: 1; }

/* 5.ステッチ風のデザイン */
.u_headline_g2_06 { position: relative; max-width: 768px; margin: 0 auto; text-align: center; border: 2px solid #000; background: #fff; }
.u_headline_g2_06::before,
.u_headline_g2_06::after { position: absolute; content: ''; box-sizing: border-box; }
.u_headline_g2_06::before { top: -40px; left: calc(50% - 40px); width: 80px; height: 80px; border: 2px solid #000; border-radius: 50%; background: #fff; }
.u_headline_g2_06::after { top: 4px; left: 4px; width: calc(100% - 8px); height: calc(100% - 8px); border: 2px dashed #000; background: #fff; }
.u_headline_g2_06 span { position: relative; z-index: 1; display: block; padding: 1.5rem; }
.u_headline_g2_06 span::before,
.u_headline_g2_06 span::after { position: absolute; content: '';     box-sizing: border-box; }
.u_headline_g2_06 span::before { top: -34px; left: calc(50% - 34px); width: 68px; height: 40px; border: 2px dashed #000; border-radius: 50vw 50vw 0 0; }
.u_headline_g2_06 span::after { position: absolute; top: 4px; left: calc(50% - 32px); width: 64px; height: 10px; background: #fff; }
.u_headline_g2_06 i { font-size: 30px; font-size: 3rem; line-height: 60px; position: absolute; z-index: 2; top: -40px; left: calc(50% - 40px); width: 80px; height: 60px; text-align: center; }

/* Group 3：LEFT BORDER
--------------------------------------*/
/* 1.左ボーダー6px */
.u_headline_g3_01 { padding: .25em 0 .25em .75em; border-left: 6px solid #ccc; }

/* 2.左ボーダー6pxとグレーの1px下線 */
.u_headline_g3_02 { padding: .25em 0 .5em .75em; border-left: 6px solid #ccc; border-bottom: 1px solid #ccc; }

/* 3.左ボーダー6pxと異色1px下線 */
.u_headline_g3_03 { position: relative; padding: .25em 0 .5em .75em; border-left: 6px solid #3498db; }
.u_headline_g3_03::after { position: absolute; left: 0; bottom: 0; content: ''; width: 100%; height: 0; border-bottom: 1px solid #ccc; }

/* Group 4：SOLID
--------------------------------------*/
/* 1.単色で囲む */
.u_headline_g4_01 { padding: 0.6em; background: #c2edff; }

/* 2.線で囲む */
.u_headline_g4_02 { padding: 0.6em; color: #364e96; border: solid 3px #364e96; border-radius: 0.5em; }

/* 3.背景色と下線 */
.u_headline_g4_03 { padding: 0.6em; color: #010101; background: #eaf3ff; border-bottom: solid 3px #516ab6; }

/* 4.吹き出し */
.u_headline_g4_04 { position: relative; padding: 0.6em; background: #e0edff; }
.u_headline_g4_04:after { position: absolute; content: ''; top: 100%; left: 30px; width: 0; height: 0; border: 15px solid transparent; border-top: 15px solid #e0edff; }

/* 5.ステッチ青線 */
.u_headline_g4_05 { padding: 0.2em 0.5em; background: #dfefff; box-shadow: 0px 0px 0px 5px #dfefff; border: dashed 1px #96c2fe; color: #454545; }

/* 6.ステッチ白線 */
.u_headline_g4_06 { padding: 0.2em 0.5em; background: #dfefff; box-shadow: 0px 0px 0px 5px #dfefff; border: dashed 2px white; }

/* 7.ステッチ白線の角が折り曲がった */
.u_headline_g4_07 { position: relative; padding: 0.2em 0.5em; background: #dfefff; box-shadow: 0px 0px 0px 5px #dfefff; border: dashed 2px white; color: #454545; }
.u_headline_g4_07:after { position: absolute; content: ''; left: -7px; top: -7px; border-width: 0 0 15px 15px; border-style: solid; border-color: #fff #fff #a8d4ff; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); }

/* 8.ストライプ背景 */
.u_headline_g4_08 { color: #010079; text-shadow: 0 0 5px white; padding: 0.3em 0.5em; background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px); background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px); }

/* 9.左ボーダーとストライプ背景 */
.u_headline_g4_09{ padding: 0.3em 0.5em; color: #010079; text-shadow: 0 0 5px white; border-left: solid 7px #010079; background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px); background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

/* 10.上下線とストライプ */
.u_headline_g4_10 { color: #6cb4e4; text-align: center; padding: 0.25em; border-top: solid 2px #6cb4e4; border-bottom: solid 2px #6cb4e4; background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px); background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px); }

/* 11.デザインボーダー */
.u_headline_g4_11 { position: relative; font-weight:  normal; font-size: 24px; background-color: #000; color:  #fff;  padding: 10px 0 10px 30px; margin-bottom:  68px; }
.u_headline_g4_11:before { content: ''; height: 110%; width: 3px; display: block; position: absolute; left: 14px; top: -3px; margin: auto; background-color:  #fff; transform: rotate(3deg); }
.u_headline_g4_11:after { content: ''; height: 116%; width: 3px; display:  block; position:  absolute; left: 14px; top: -6px; margin: auto; background-color:  #fff; transform: rotate(-15deg); }

/* 12.デザインボーダーグラデーション */
.u_headline_g4_12 { position:relative; font-weight: normal; font-size:24px; background:-webkit-linear-gradient(to right,rgb(152,116,112),rgba(203,211,251,0.6)); background:linear-gradient(to right,rgb(152,116,112),rgba(203,211,251,0.6));  font-weight:lighter;  box-shadow:0 0 4px rgba(0,0,0,0.56);  color: #fff; padding:10px 0 10px 30px;  margin-bottom:68px; }
.u_headline_g4_12:before { content:''; height:110%; width:3px; display:block; position:absolute; left:14px; top:-3px; margin:auto; background-color: #fff;  transform:rotate(3deg); }
.u_headline_g4_12:after { content:''; height:116%; width:3px; display: block; position: absolute; left:14px; top:-6px; margin:auto; background-color: #fff;  transform:rotate(-15deg); }

/* 13.先頭に横ライン */
.u_headline_g4_13 { position:relative; color:white; padding:0.5em 0.5em 0.5em 1.4em; background-color:#446689; }
.u_headline_g4_13::after { position:absolute; top:50%; left:0; transform:translateY(-50%); content:''; width:18px; height:4px; background-color:white; }

/* 14.高級感のあるゴールドグラデーション */
.u_headline_g4_14 { font-size: 2.4rem; font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'Hiragino Mincho ProN', 'HGS明朝E', 'ＭＳ Ｐ明朝', serif; padding: 1rem 2rem; color: #fff; background: #000; }
.u_headline_g4_14 span { background-image: -webkit-linear-gradient(315deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%); background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* 15.高級感のある上下線がゴールドグラデーション */
.u_headline_g4_15 { font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'Hiragino Mincho ProN', 'HGS明朝E', 'ＭＳ Ｐ明朝', serif; position: relative; padding: 1.5rem 2rem; -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1); box-shadow: 0 2px 14px rgba(0, 0, 0, .1); }
.u_headline_g4_15::before,
.u_headline_g4_15:after { position: absolute; left: 0; width: 100%; height: 4px; content: ''; background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); }
.u_headline_g4_15::before { top: 0; }
.u_headline_g4_15::after { bottom: 0; }

/* 16.シンボルを追加した見出し */
.u_headline_g4_16 { position: relative; overflow: hidden; padding: 1.5rem 2rem 1.5rem 130px; border: 2px solid #000; }
.u_headline_g4_16::before { position: absolute; top: -150%; left: -100px; width: 200px; height: 300%; content: ''; -webkit-transform: rotate(25deg); transform: rotate(25deg); background: #000; }
.u_headline_g4_16 span { font-size: 40px; font-size: 4rem; position: absolute; z-index: 1; top: 0; left: 0; display: block; padding-top: 3px; padding-left: 16px; color: #fff; }
</style>

/* 16.シンボルを追加した見出し */
.u_headline_g4_17 { position: relative; overflow: hidden; padding: 1.5rem 2rem 1.5rem 130px; border-top: 3px solid #000; }
.u_headline_g4_17::before { position: absolute; top: -150%; left: -100px; width: 200px; height: 300%; content: ''; -webkit-transform: rotate(25deg); transform: rotate(25deg); background: #000; }
.u_headline_g4_17 span { font-size: 40px; font-size: 4rem; position: absolute; z-index: 1; top: 0; left: 0; display: block; padding-top: 3px; padding-left: 16px; color: #fff; }

/* Group 5：ONE POINTE
--------------------------------------*/
/* 1.先頭に四角の飾りを付与 */
.u_headline_g5_01 { color:#3cb3e4; }
.u_headline_g5_01 { position: relative; padding-left: 30px; }
.u_headline_g5_01:before,
.u_headline_g5_01:after{ content: "□"; position: absolute; width:4px; height: 4px;}
.u_headline_g5_01:before { left:0; top:-3px; }
.u_headline_g5_01:after { left: 5.5px; top: 3.5px; }

/* 2.先頭の四角の飾りが回転 */
.u_headline_g5_02 { color: #444; font-size: 24px; position: relative; padding: 0 0 2px 32px; border-bottom: 1px solid #888; }
.u_headline_g5_02:before,
.u_headline_g5_02:after { content: ""; position: absolute; bottom: 0; width: 12px; height: 12px; border: 2px solid #d14; margin: auto; }
.u_headline_g5_02:before { top: -6px; left: 0px; animation: spin 4s linear infinite; }
.u_headline_g5_02:after { top: 6px; left: 6px; animation: spin 4s linear infinite; }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 3.先頭に閃いた感じの四角の飾りを付与 */
.u_headline_g5_03 { color: #444; font-size: 24px; position: relative; padding: 10px 0 2px 28px; border-bottom: 2px solid #d14; }
.u_headline_g5_03:before,
.u_headline_g5_03:after { content: ""; position: absolute; margin: auto; }
.u_headline_g5_03:before { width: 12px; height: 12px; top: 0; left: 14px; background: #d14; transform: rotate(50deg); }
.u_headline_g5_03:after { width: 8px; height: 8px; top: 18px; left: 6px; background: #d14; transform: rotate(20deg); }

/* 4.先頭に四角モザイク調飾りを付与 */
.u_headline_g5_04 { position:relative; padding:0 10px 0 55px; font:bold 22px/40px Arial,Helvetica,sans-serif; color:#666; background:#f3f3f3; z-index:1; }
.u_headline_g5_04:before { content:""; position:absolute; top:0; left:0; width:40px; height:40px; border-right:#fff solid 2px; background:#f60; background-image:-webkit-gradient(linear,left top,left bottom,from( rgba(255,255,255,0.0)),color-stop(0.20,rgba(255,255,255,0.0)),color-stop(0.20,rgba(255,255,255,0.1)),color-stop(0.40,rgba(255,255,255,0.1)),color-stop(0.40,rgba(255,255,255,0.3)),color-stop(0.60,rgba(255,255,255,0.3)),color-stop(0.60,rgba(255,255,255,0.5)),color-stop(0.80,rgba(255,255,255,0.5)),color-stop(0.80,rgba(255,255,255,0.6)),to( rgba(255,255,255,0.6))); background-image:-webkit-linear-gradient(top,transparent 20%,rgba(255,255,255,0.1) 20%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0.3) 60%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0.5) 80%,rgba(255,255,255,0.6) 80%,rgba(255,255,255,0.6) 100%); background-image:-moz-linear-gradient(top,transparent 20%,rgba(255,255,255,0.1) 20%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0.3) 60%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0.5) 80%,rgba(255,255,255,0.6) 80%,rgba(255,255,255,0.6) 100%); background-image:-o-linear-gradient(top,transparent 20%,rgba(255,255,255,0.1) 20%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0.3) 60%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0.5) 80%,rgba(255,255,255,0.6) 80%,rgba(255,255,255,0.6) 100%); background-image:linear-gradient(to bottom,transparent 20%,rgba(255,255,255,0.1) 20%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0.3) 60%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0.5) 80%,rgba(255,255,255,0.6) 80%,rgba(255,255,255,0.6) 100%); z-index:-1; }
.u_headline_g5_04:after { content:""; position:absolute; top:0; left:0; width:40px; height:40px; background-image:-webkit-gradient(linear,left top,right top,from( rgba(255,255,255,0.0)),color-stop(0.20,rgba(255,255,255,0.0)),color-stop(0.20,rgba(255,255,255,0.1)),color-stop(0.40,rgba(255,255,255,0.1)),color-stop(0.40,rgba(255,255,255,0.3)),color-stop(0.60,rgba(255,255,255,0.3)),color-stop(0.60,rgba(255,255,255,0.5)),color-stop(0.80,rgba(255,255,255,0.5)),color-stop(0.80,rgba(255,255,255,0.6)),to( rgba(255,255,255,0.6))); background-image:-webkit-linear-gradient(left,transparent 20%,rgba(255,255,255,0.1) 20%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0.3) 60%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0.5) 80%,rgba(255,255,255,0.6) 80%,rgba(255,255,255,0.6) 100%); background-image:-moz-linear-gradient(left,transparent 20%,rgba(255,255,255,0.1) 20%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0.3) 60%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0.5) 80%,rgba(255,255,255,0.6) 80%,rgba(255,255,255,0.6) 100%); background-image:-o-linear-gradient(left,transparent 20%,rgba(255,255,255,0.1) 20%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0.3) 60%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0.5) 80%,rgba(255,255,255,0.6) 80%,rgba(255,255,255,0.6) 100%); background-image:linear-gradient(to right,transparent 20%,rgba(255,255,255,0.1) 20%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0.3) 60%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0.5) 80%,rgba(255,255,255,0.6) 80%,rgba(255,255,255,0.6) 100%); z-index:-1; }

/* 5.先頭にサークルの飾りを付与 */
.u_headline_g5_05 { position: relative; padding-left: 1.3em; }
.u_headline_g5_05::after { position: absolute; top: 50%; left:0; transform:translateY(-50%); content: ''; width: 20px; height:20px; border: solid 4px #446689; border-radius:100%; }

/* Group 6：OTHER
--------------------------------------*/
/* 1.スラッシュで囲む */
.u_headline_g6_01 { position: relative; display: inline-block; padding: 0 45px; }
.u_headline_g6_01:before,
.u_headline_g6_01:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 44px; height: 2px; background-color: black; -webkit-transform: rotate(-60deg); transform: rotate(-60deg); }
.u_headline_g6_01:before { left:0; }
.u_headline_g6_01:after { right: 0; }

/* 2.細いカギ括弧 */
.u_headline_g6_02 { position:relative; line-height:1.4; padding:0.25em 1em; display:inline-block; }
.u_headline_g6_02:before, 
.u_headline_g6_02:after { content:''; width:20px; height:30px; position:absolute; display:inline-block; }
.u_headline_g6_02:before { border-left:solid 1px #ff5722; border-top:solid 1px #ff5722; top:0; left:0; }
.u_headline_g6_02:after { border-right:solid 1px #ff5722; border-bottom:solid 1px #ff5722; bottom:0; right:0; }

/* 3.大括弧 */
.u_headline_g6_03 { position:relative; line-height:1.4; padding:0.25em 1em; display:inline-block; top:0; }
.u_headline_g6_03:before, 
.u_headline_g6_03:after { position:absolute; top:0; content:''; width:8px; height:100%; display:inline-block; }
.u_headline_g6_03:before { border-left:solid 1px black; border-top:solid 1px black; border-bottom:solid 1px black; left:0; }
.u_headline_g6_03:after { content:''; border-top:solid 1px black; border-right:solid 1px black; border-bottom:solid 1px black; right:0; }

/* 4.大括弧点線 */
.u_headline_g6_04 { position:relative; line-height:1.4; padding:0.25em 1em; display:inline-block; top:0; }
.u_headline_g6_04:before,
.u_headline_g6_04:after { position:absolute; top:0; content:''; width:8px; height:100%; display:inline-block; }
.u_headline_g6_04:before { border-top:dotted 1px #535aaa; border-left:dotted 1px #535aaa; border-bottom:dotted 1px #535aaa; left:0; }
.u_headline_g6_04:after { content:''; border-top:dotted 1px #535aaa; border-right:dotted 1px #535aaa; border-bottom:dotted 1px #535aaa; right:0; }

/* 5.サブタイトルつき */
.u_headline_g6_05 { border-bottom: 3px solid #f3f3f3; }
.u_headline_g6_05 span { display: block; margin-bottom: .2em; color: #aaa; font-size: .7em; }

/* 1.内側1pxと外側2pxの枠で囲う */
.u_headline_g6_06 { position: relative; margin: 20px 10px; padding: 10px; border: 1px solid #f0bdc4; color: #e7939f; z-index: 0; }
.u_headline_g6_06:before { content: ''; display: block; position: absolute; top: -8px; bottom: -8px; left: -8px; right: -8px; border: 2px solid #f0bdc4; z-index: -1; }

/* 2.左2重ボーダー */
.u_headline_g6_07 { position:relative; padding:5px 5px 5px 30px; color:#dd6a7a; }
.u_headline_g6_07:before { content:''; position:absolute; top:0; left:3px; width:5px; height:100%; background-color:#ef858c; border-radius:5px; }
.u_headline_g6_07:after { content:''; position:absolute; top:0; left:12px; width:5px; height:100%; background-color:#f3cbd0; border-radius:5px; }

/* 3.ストライプのグラデーション背景と縁取り文字 */
.u_headline_g6_08 { position:relative; padding:5px 10px; color:#fff; text-shadow:-1px -1px 1px #e18692,1px -1px 1px #e18692,-1px 1px 1px #e18692,1px 1px 1px #e18692; z-index:0; }
.u_headline_g6_08:before { content:''; position:absolute; top:0; bottom:0; left:0; right:0; background:repeating-linear-gradient(45deg,#f5d5da,#f5d5da 4px,#fcf0f1 0,#fcf0f1 7px); z-index:-2; }
.u_headline_g6_08:after { content:''; position:absolute; top:0; bottom:0; left:0; right:0; background:linear-gradient(180deg,rgba(255,255,255,1),rgba(255,255,255,.1)); z-index:-1; }

/* 4.左ボーダーとストライプ背景 */
.u_headline_g6_09 { border-left:10px solid #f0bdc4; border-radius:5px; color:#fff; padding:5px 10px; position:relative; text-shadow:-1px -1px 1px #e18692,1px -1px 1px #e18692,-1px 1px 1px #e18692,1px 1px 1px #e18692; }
.u_headline_g6_09:before { background:repeating-linear-gradient(45deg,#f5d5da,#f5d5da 4px,#fcf0f1 0,#fcf0f1 7px); border-radius:0 5px 5px 0; content:''; position:absolute; top:0; bottom:0; left:0; right:0; z-index:-1; }

/* 5.背景に大きな円 */
.u_headline_g6_10 { position:relative; padding:10px; background-color:#ef858c; color:#fff; overflow:hidden; }
.u_headline_g6_10:before { content:''; display:block; position:absolute; top:-20px; left:0px; width:200px; height:200px; background-color:#fff; border-radius:50%; opacity:0.6; }

/* 6.背景に2つの大きな円 */
.u_headline_g6_11 { background-color:#ef858c; color:#fff; overflow:hidden; padding:10px; position:relative; }
.u_headline_g6_11 span { position: relative; color:#000; z-index: 100; }
.u_headline_g6_11:before { background-color:#fff; border-radius:50%; content:''; display:block; opacity:0.6; position:absolute; top:-20px; left:0px; width:200px; height:200px; }
.u_headline_g6_11:after { background-color:#fff; border-radius:50%; content:''; display:block; opacity:0.6; position:absolute; bottom:-50px; left:180px; width:100px; height:100px; }

/* 7.途中で色が変化する */
.u_headline_g6_12 { background-color:#ef858c; color:#fff; overflow:hidden; padding:10px;  position:relative; }
.u_headline_g6_12:before { background-color:#fff; content:''; display:block; opacity:0.6; transform:rotate(-30deg); position:absolute; bottom:-30px; right:-100px; width:200px; height:200px; }

/* 8.花のワンポイント */
.u_headline_g6_13 { color:#d04255; padding:10px 10px 10px 60px; position:relative; }
.u_headline_g6_13:before { content:'＊*'; color:#fff; display:inline-block; font-size:30px; font-weight:bold; position:absolute; top:0px; left:0px; transform:rotate(20deg); -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); text-shadow:0px 0px 6px #EAA8BF,0px 0px 4px #EAA8BF,0 0 0.5px #EAA8BF; }
.u_headline_g6_13:after { border-bottom:2px dotted #EAA8BF; content:''; position:absolute; bottom:0px; left:0px; width:100%; }

/* 9.花のワンポイントと背景 */
.u_headline_g6_14 { background-color:#f5d5da; border-radius:5px; color:#ef858c; padding:10px 10px 10px 60px; position:relative; text-shadow:0px 0px 10px #fff,0px 0px 6px #fff,0px 0px 4px #fff,0 0 0.5px #fff; }
.u_headline_g6_14:before { content:'＊*'; color:#fff; display:inline-block; font-size:30px; font-weight:bold; margin-right:10px; position:absolute; top:0px; left:0px; transform:rotate(20deg); -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); text-shadow:0px 0px 3px #fff,0px 0px 2px #fff,0 0 0.5px #fff; }
.u_headline_g6_14:after { border-bottom:2px dotted #fff; content:''; position:absolute; bottom:3px; left:3px; right:3px; }

/* 10.スプライト下線と背景 */
.u_headline_g6_15 { background-color:#fcf0f1; color:#701722; padding:10px; position:relative; }
.u_headline_g6_15:after { background:repeating-linear-gradient(-45deg,#f0b8bf,#f0b8bf 5px,#fcf0f1 0,#fcf0f1 10px); content:''; height:5px; position:absolute; bottom:0; left:0; right:0; z-index:1; }

/* 11.水玉模様の背景 */
.u_headline_g6_16 { background-color:#f3a3a8; background-image:radial-gradient(#f5b2b6 20%,transparent 0),radial-gradient(#f5b2b6 20%,transparent 0); background-position:0 0,10px 10px; background-size:20px 20px; color:#590c11; padding:10px; }

/* ========================================== */
/* BUTTON
/* ========================================== */
/* 1 */
.u_btn_01 { /* layout */ }
.u_btn_01_obj { display:inline-block; padding:12px 40px 12px 24px; border:2px solid #f00; background:url("img/cmn_icon_arrow__White-right.png") no-repeat; background-size:16px; background-position:center right 16px; background-color:#f00; border-radius:48px; color:#fff; font-size: 1.6rem; transition: all .3s; }
.u_btn_01_obj:hover { background-position:center right 13px; color:#fff; }

/* 2 */
.u_btn_02 { /* layout */ }
.u_btn_02_frm { display: inline-block; padding: 12px 40px 12px 24px; background: url("img/cmn_icon_arrow__White-right.png") no-repeat; background-size: 16px;	background-position: center right 16px;	background-color: #f00;	border: 2px solid #f00;	border-radius: 0; color: #fff; font-size: 1.6rem; transition: all .3s; }
.u_btn_02_frm:hover { background-position: center right 13px; color: #fff; }

/* 3 */
.u_btn_03 { /* layout */ }
.u_btn_03_frm { display: inline-block; padding: 12px 24px; background-color: #f00; border: 2px solid #f00; border-radius: 0; color: #fff; font-size: 1.6rem; }
.u_btn_03_frm span {	display: block; padding: 12px 24px;	border: 1px solid #ccc; }
.u_btn_03_frm:hover { background-position: center right 13px; color: #fff; }

/* 4 */
.u_btn_04 { /* layout */ }
.u_btn_04_frm { position: relative; display: inline-block; padding: .9em 3.6em; border: 2px solid #000; color: #000; font-size: 1.6rem; text-align: center; text-decoration: none; outline: none; transition: all .3s; }
.u_btn_04_frm::before,
.u_btn_04_frm::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; content: ''; transition: all .3s; }
.u_btn_04_frm::before { border-top: 2px solid #3be5ae; border-bottom: 2px solid #3be5ae; transform: scale(0, 1); }
.u_btn_04_frm::after { border-right: 2px solid #3be5ae; border-left: 2px solid #3be5ae; transform: scale(1, 0); }
.u_btn_04_frm:hover { border: 2px solid transparent; color: #3be5ae; }
.u_btn_04_frm:hover::after,
.u_btn_04_frm:hover::before { transform: scale(1); }

/* 5 */
.u_btn_05 { /* layout */ }
.u_btn_05_frm { position: relative; overflow: hidden; display: block; width: 100%; max-width: 250px; padding: 24px 16px; border: 1px solid currentColor; color: #5e2d3b; font-size: 1.6rem; text-align: center; z-index: 0;}
.u_btn_05_frm:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #28050e; -webkit-transform: translateX(-100%); transform: translateX(-100%); box-sizing: border-box; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; z-index: -1; }
.u_btn_05_frm:hover { color: #d0c1c5; }
.u_btn_05_frm:hover:before { -webkit-transform: translateX(0); transform: translateX(0); }

/* 6 */
.u_btn_06 { /* layout */ }
.u_btn_06_frm { position: relative; overflow: hidden; display: block; width: 100%; max-width: 250px; padding: 24px 16px; border: 1px solid currentColor; color: #5e2d3b; font-size: 1.6rem; text-align: center; z-index: 0;}
.u_btn_06_frm:before { content: ''; position: absolute; top: 0; right: -50px; bottom: 0; left: 0; border-right: 50px solid transparent; border-bottom: 80px solid #252869; -webkit-transform: translateX(-100%); transform: translateX(-100%); box-sizing: border-box; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; z-index: -1; }
.u_btn_06_frm:hover { color: #d0c1c5; }
.u_btn_06_frm:hover:before { -webkit-transform: translateX(0); transform: translateX(0); }

/* 7 */
.u_btn_07 { /* layout */ }
.u_btn_07_frm { position: relative; overflow: hidden; display: block; width: 100%; max-width: 250px; padding: 24px 16px; border: 1px solid #b17b39; color: #b17b39; font-size: 1.6rem; text-align: center; z-index: 0;}
.u_btn_07_frm:before,
.u_btn_07_frm:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-bottom: 80px solid #0a6804; box-sizing: border-box; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; z-index: -1; }
.u_btn_07_frm:before { right: -50px; border-right: 50px solid transparent; -webkit-transform: translateX(-100%); transform: translateX(-100%); }
.u_btn_07_frm:after { left: -50px; border-left: 50px solid transparent; -webkit-transform: translateX(100%); transform: translateX(100%); }
.u_btn_07_frm:hover { color: #fff; }
.u_btn_07_frm:hover:before { -webkit-transform: translateX(-40%); transform: translateX(-40%); }
.u_btn_07_frm:hover:after { -webkit-transform: translateX(40%); transform: translateX(40%); }

/* 8 */
.u_btn_08 { /* layout */ }
.u_btn_08_frm { position: relative; overflow: hidden; display: block; width: 100%; max-width: 250px; padding: 24px 16px; border: 1px solid #d4823b; color: #d4823b; font-size: 1.6rem; text-align: center; z-index: 0;}
.u_btn_08_frm span { position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background-color: #d4823b; -webkit-transition: width 0.4s ease-in-out, height 0.4s ease-in-out; transition: width 0.4s ease-in-out, height 0.4s ease-in-out; -webkit-transform: translate(-50%, -50%);          transform: translate(-50%, -50%); z-index: -1; }
.u_btn_08_frm:hover { color: #fff; }
.u_btn_08_frm:hover span { width: 225%; height: 562.5px; }
.u_btn_08_frm:active { background-color: #d4823b; }

/* 9 */
.u_btn_09 { /* layout */ }
.u_btn_09_frm { position: relative; overflow: hidden; display: block; width: 100%; max-width: 250px; padding: 24px 16px; border: 1px solid #d4823b; color: #d4823b; font-size: 1.6rem; text-align: center; z-index: 0;}
.u_btn_09_frm:before,
.u_btn_09_frm:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #2f6552; box-sizing: border-box; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; z-index: -1; }
.u_btn_09_frm:before { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
.u_btn_09_frm:after { -webkit-transform: translateY(100%); transform: translateY(100%); }
.u_btn_09_frm:hover { color: #d3e9e2; }
.u_btn_09_frm:hover:before { -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.u_btn_09_frm:hover:after { -webkit-transform: translateY(50%); transform: translateY(50%); }

/* 10 */
.u_btn_10 { /* layout */ }
.u_btn_10_frm { position: relative; overflow: hidden; display: block; width: 100%; max-width: 250px; padding: 24px 16px; border: 1px solid #d4823b; color: #d4823b; font-size: 1.6rem; text-align: center; z-index: 0;}
.u_btn_10_frm:before,
.u_btn_10_frm:after,
.u_btn_10_frm span:before,
.u_btn_10_frm span:after { content: ''; position: absolute; top: 0; width: 25.25%; height: 0; background-color: #085816; box-sizing: border-box; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; z-index: -1; }
.u_btn_10_frm:before { left: 0; }
.u_btn_10_frm:after { left: 50%; }
.u_btn_10_frm span:before,
.u_btn_10_frm span:after { top: auto; bottom: 0; }
.u_btn_10_frm span:before { left: 25%; }
.u_btn_10_frm span:after { left: 75%; }
.u_btn_10_frm:hover { color: #c3e4c9; }
.u_btn_10_frm:hover:before,
.u_btn_10_frm:hover:after,
.u_btn_10_frm:hover span:before,
.u_btn_10_frm:hover span:after { height: 80px; }

/* 11 */
.u_btn_11 { /* layout */ }
.u_btn_11_frm { position: relative; overflow: hidden; display: block; width: 100%; max-width: 250px; padding: 24px 16px; border: 1px solid #000; color: #000; font-size: 1.6rem; text-align: center;  z-index: 0;}
.u_btn_11_frm:before,
.u_btn_11_frm:after { position: absolute; top: 50%; content: ''; width: 20px; height: 20px; background-color: #000; border-radius: 50%; box-sizing: border-box; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; z-index: -1; }
.u_btn_11_frm:before { left: -20px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.u_btn_11_frm:after { right: -20px; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); }
.u_btn_11_frm:hover { color: #fff; }
.u_btn_11_frm:hover:before { -webkit-animation: ball-from--Left 0.8s both; animation: ball-from--Left 0.8s both; -webkit-animation-direction: alternate; animation-direction: alternate; }
.u_btn_11_frm:hover:after { -webkit-animation: ball-from--Right 0.8s both; animation: ball-from--Right 0.8s both; -webkit-animation-direction: alternate; animation-direction: alternate; }
@-webkit-keyframes ball-from--Left {
0% { left: -20px; }
50% { left: 50%; width: 20px; height: 20px; }
100% { left: 50%; width: 375px; height: 375px; }
}
@keyframes ball-from--Left {
0% { left: -20px; }
50% { left:50%; width:20px; height:20px; }
100% { left:50%; width:375px; height:375px; }
}
@-webkit-keyframes ball-from--Right {
0% {right:-20px}
50% { right:50%;  width:20px;  height:20px}
100% { right:50%;  width:375px;  height:375px}
}
@keyframes ball-from--Right {
0% { right:-20px}
50% { right:50%;  width:20px;  height:20px}
100% { right:50%;  width:375px;  height:375px}
}

/* 12 */
.u_btn_12 { position:relative; display:inline-block; margin: 16px; }
.u_btn_12_inn { stroke-width:6px; fill:transparent; stroke:#009FFD; stroke-dasharray:85 400; stroke-dashoffset:-220; transition:1s all ease; }
.u_btn_12_frm { margin-top:-35px; text-align:center; }
.u_btn_12_frm a { color:#000; text-decoration:none; font-weight:100; font-size:18px; }
.u_btn_12_text { position:absolute; width:100%; height:100%; top:0; left:0; }
.u_btn_12:hover .u_btn_12_inn { stroke-dasharray:50 0; stroke-width:3px; stroke-dashoffset:0; stroke:#06D6A0; }

/* 13 */
.u_btn_13 { display: flex; }
.u_btn_13_inn { margin:20px 20px 0 0; }
.u_btn_13_frm { position:relative; padding:5px 20px; border:1px solid #000; color:#000; text-decoration:none; text-align:center; font-size: 1.6rem; -webkit-transition:.3s ease-in-out; transition:.3s ease-in-out; -ms-transition:.3s ease-in-out; z-index:0; }
.u_btn_13_frm::after { position:absolute; top:5px; left:5px; z-index:-1; content:''; width:101%; height:105%; background-color:#F5E829; -webkit-transition:.3s ease-in-out; transition:.3s ease-in-out; -ms-transition:.3s ease-in-out; }
.u_btn_13_frm img { background-color:transparent; }
.u_btn_13_frm:hover,
.u_btn_13_frm:focus,
.u_btn_13_frm:active { color:#000; text-decoration:none; }
.u_btn_13_frm:hover img { background-color:transparent; opacity:1.0; filter:alpha(opacity=100); -ms-filter:"alpha( opacity=100 )"; }
.u_btn_13_frm:hover::after { top:0; left:0; width:100%; height:100%; }
.u_btn13_img { width:16px; margin-left:6px;  margin-bottom:4px; }
.u_btn13_img img { width:100%; }

/* common */
.u_btn_base { position:relative; display:inline-block; font-size:1.6rem; font-weight:700; line-height:1.5; padding:1rem 4rem; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-transition:all 0.3s; transition:all 0.3s; text-align:center; vertical-align:middle; text-decoration:none; letter-spacing:0.1em; color:#212529; border-radius:0.5rem; }
.u_btn_base { position:relative; display:inline-block; font-size:1.6rem; font-weight:700; line-height:1.5; padding:1rem 4rem; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-transition:all 0.3s; transition:all 0.3s; text-align:center; vertical-align:middle; text-decoration:none; letter-spacing:0.1em; color:#212529; border-radius:0.5rem; }

/* 14 */
.u_btn_14_frm { font-size:2rem;  position:relative;  padding:1.5rem 3rem 1.5rem 2rem; }
.u_btn_14 i.fa { margin-right:1rem; }
.u_bg_orange { color:#fff;  background-color:#eb6100; }
.u_bg_orange:hover { color:#fff;  background:#f56500; }

/* 15 */
.u_btn_15_frm { font-size:1.8rem;  position:relative;  padding:1.5rem 2rem 1.5rem 2rem; border-radius: 100vh; }
.u_btn_15_frm i.fa { margin-right:1rem; }
.u_bg_orange { color:#fff;  background-color:#eb6100; }
.u_bg_orange:hover { color:#fff;  background:#f56500; }

/* 16 */
.u_btn_16_frm { font-size:2rem;  position:relative;  padding:1.5rem 4rem 1.5rem 2rem; }
.u_btn_16_frm i.fa { margin-right:1rem; }
.u_btn_16_frm::before { font-family:"Font Awesome 5 Free";font-weight: 900;content:"\f054"; font-size:1.6rem;  line-height:1;  position:absolute;  top:calc(50% - .8rem);  right:1rem;  margin:0;  padding:0; }
.u_bg_orange { color:#fff;  background-color:#eb6100; }
.u_bg_orange:hover { color:#fff;  background:#f56500; }

/* 17 */
.u_btn_17_frm { font-size:1.8rem;  position:relative;  padding:1.5rem 4rem 1.5rem 2rem; border-radius: 100vh; }
.u_btn_17_frm i.fa { margin-right:1rem; }
.u_btn_17_frm::before { font-family:'Font Awesome 5 Free'; font-weight: 900; content:'\f054'; font-size:1.6rem;  line-height:1;  position:absolute;  top:calc(50% - .8rem);  right:1rem;  margin:0;  padding:0; }
.u_bg_orange { color:#fff;  background-color:#eb6100; }
.u_bg_orange:hover { color:#fff;  background:#f56500; }

/* 18 */
.u_btn_18_frm { font-size:1.8rem;  position:relative;  padding:1.5rem 3rem 1.5rem 2rem; border-bottom: 5px solid #00662d; }
.u_btn_18_frm:hover { margin-top: 3px; border-bottom: 2px solid #00662d; }
.u_btn_18_frm i.fa { margin-right:1rem; }
.u_bg_green { color:#fff;  background-color:#094; }
.u_bg_green:hover { color:#fff;  background:#00a349; }

/* 19 */
.u_btn_19_frm { font-size:1.8rem;  position:relative;  padding:1.5rem 3rem 1.5rem 2rem; border-radius: 100vh; border-bottom: 5px solid #00662d; }
.u_btn_19_frm:hover { margin-top: 3px; border-bottom: 2px solid #00662d; }
.u_btn_19_frm i.fa { margin-right:1rem; }
.u_btn_19_frm::before { font-family:'Font Awesome 5 Free'; font-weight: 900; content:'\f054'; font-size:1.6rem;  line-height:1;  position:absolute;  top:calc(50% - .8rem);  right:1rem;  margin:0;  padding:0; }
.u_bg_green { color:#fff;  background-color:#094; }
.u_bg_green:hover { color:#fff;  background:#00a349; }

/* 20 */
.u_btn_20_frm { font-size:1.8rem;  position:relative;  padding:1.5rem 3rem 1.5rem 2rem; border-radius: 100vh; border-bottom: 5px solid #ccc100; }
.u_btn_20_frm:hover { margin-top: 3px; border-bottom: 2px solid #ccc100; }
.u_btn_20_frm i.fa { margin-right:1rem; }
.u_btn_20_frm::before { font-family:'Font Awesome 5 Free'; font-weight: 900; content:'\f054'; font-size:1.6rem;  line-height:1;  position:absolute;  top:calc(50% - .8rem);  right:1rem;  margin:0;  padding:0; }
.u_bg_yellow { color:#000;  background-color:#fff100; }
.u_bg_yellow:hover { color:#000;  background:#fff20a; }

/* 21 */
.u_btn_21_frm { font-size:1.8rem; position:relative; padding:2rem 5rem 2rem 3rem; color:#fff; border-radius:0; background-image:-webkit-linear-gradient( 335deg, #231557 0%, #44107a 25%, #ff1361 90%, #fff800 100% ); background-image:linear-gradient( 115deg, #231557 0%, #44107a 25%, #ff1361 90%, #fff800 100% );  -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.2); box-shadow:0 10px 10px rgba(0,0,0,0.2); }
.u_btn_21_frm span { position:relative; }
.u_btn_21_frm:before { position:absolute; top:0; left:0; width:100%; height:100%; content:""; -webkit-transition:all 0.3s; transition:all 0.3s; background-image:-webkit-linear-gradient( 335deg, #231557 0%, #44107a 15%, #ff1361 70%, #fff800 100% ); background-image:linear-gradient( 115deg, #231557 0%, #44107a 15%, #ff1361 70%, #fff800 100% ); }
.u_btn_21_frm:after { font-family:"Font Awesome 5 Free"; font-size:1.6rem; line-height:1; position:absolute; top:calc(50% - 0.8rem); right:1rem; margin:0;  padding:0; content:"\f30b"; -webkit-transition:all 0.3s; transition:all 0.3s; }
.u_btn_21_frm:hover { color:#fff; }
.u_btn_21_frm:hover:before { opacity:0; }
.u_btn_21_frm:hover:after { right:0.5rem; }

/* 22 */
.u_btn_22_frm { font-size:1.8rem; position:relative; padding:2rem 5rem 2rem 3rem; color:#fff; border-radius: 100vh; background-image: -webkit-gradient( linear, left top, right top, from(#007adf), to(#00ecbc)); background-image: -webkit-linear-gradient(left, #007adf 0%, #00ecbc 100%); background-image: linear-gradient(to right, #007adf 0%, #00ecbc 100%); -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); }
.u_btn_22_frm span { position:relative; }
.u_btn_22_frm:after { font-family:"Font Awesome 5 Free"; font-size:1.6rem; line-height:1; position:absolute; top:calc(50% - 0.8rem); right:1rem; margin:0;  padding:0; content:"\f30b"; -webkit-transition:all 0.3s; transition:all 0.3s; }
.u_btn_22_frm:hover { -webkit-transform: scale(1.1); transform: scale(1.1); color:#fff; }
.u_btn_22_frm:hover:before { opacity:0; }
.u_btn_22_frm:hover:after { right:0.5rem; }

/* 23 */
.u_btn_23_frm { font-size:1.8rem; position:relative; padding:2rem 4rem 2rem 2rem; color: #fff; border-radius: 100vh; -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); }
.u_btn_23_frm span { position:relative; }
.u_btn_23_frm:after { font-family:"Font Awesome 5 Free"; font-size:1.6rem; line-height:1; position:absolute; top:calc(50% - 0.8rem); right:1rem; margin:0;  padding:0; content:"\f30b"; -webkit-transition:all 0.3s; transition:all 0.3s; }
.u_bg_red { background-color: #d20010; border: 2px solid #9f000c; }

/* 24 */
.u_btn_24_copy { font-size: 1.5rem; font-weight: bold; position: relative; margin-bottom: .2em; text-align: left; }
.u_btn_24_copy:before { margin-right: 1rem; content: '＼'; }
.u_btn_24_copy:after { margin-left: 1rem; content: '／'; }
.u_btn_24_frm { font-size:1.8rem;  position:relative;  padding:1.5rem 3rem 1.5rem 2rem; border-radius: 100vh; border-bottom: 5px solid #ccc100; }
.u_btn_24_frm:hover { margin-top: 3px; border-bottom: 2px solid #ccc100; }
.u_btn_24_frm i.fa { margin-right:1rem; }
.u_btn_24_frm::before { font-family:'Font Awesome 5 Free'; font-weight: 900; content:'\f054'; font-size:1.6rem;  line-height:1;  position:absolute;  top:calc(50% - .8rem);  right:1rem;  margin:0;  padding:0; }
.u_bg_yellow { color:#000;  background-color:#fff100; }
.u_bg_yellow:hover { color:#000;  background:#fff20a; }

/* 25 */
.u_btn_25_frm { font-size:2.2rem;  position:relative;  padding:1.5rem 2rem 1.5rem 5rem; background: #32b16c; color: #fff; -webkit-box-shadow: 0 5px 0 #2c9d60; box-shadow: 0 5px 0 #2c9d60; }
.u_btn_25_frm span { font-size: 1.4rem; display: inline-block; width: 100%; margin-bottom: 0.5em; padding: 0.2rem 0.5rem; color: #32b16c; border-radius: 4px; background: #fff; }
.u_btn_25_frm:hover { -webkit-transform: translate(0, 3px); transform: translate(0, 3px); color: #fff; background: #38c578; -webkit-box-shadow: 0 2px 0 #2c9d60; box-shadow: 0 2px 0 #2c9d60; }
.u_btn_25_frm::before { font-family: "Font Awesome 5 Free"; font-size: 1.8rem; line-height: 1; position: absolute; top: calc(50% - 0.7rem); left: 1.5rem; margin: 0; padding: 0; content: "\f30b"; -webkit-transition: all 0.3s; transition: all 0.3s; }
.u_btn_25_frm:hover::before { left: 2rem; }

/* 26 */
.u_btn_26 { margin: 30px 0; }
.u_btn_26_frm { font-size:2.2rem;  position:relative;  padding: 0.25rem 2rem 1.5rem 3.5rem; background: #32b16c; color: #fff; -webkit-box-shadow: 0 5px 0 #2c9d60; box-shadow: 0 5px 0 #2c9d60; overflow: visible; }
.u_btn_26_frm span { font-size: 1.5rem; position: absolute; top: -10px; left: calc(50% - 150px); display: block; width: 300px; padding: 0.2rem 0; color: #32b16c; border: 2px solid #32b16c; border-radius: 0.5rem; background: #fff; -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); }
.u_btn_26_frm:hover { -webkit-transform: translate(0, 3px); transform: translate(0, 3px); color: #fff; background: #38c578; -webkit-box-shadow: 0 2px 0 #2c9d60; box-shadow: 0 2px 0 #2c9d60; }

/* 27 */
.u_btn_27 { margin: 30px 0; }
.u_btn_27_frm { font-size:2.2rem;  position:relative;  padding: 0.25rem 2rem 1.5rem 3.5rem; background: #e94919; color: #fff; -webkit-box-shadow: 0 5px 0 #d44114; box-shadow: 0 5px 0 #d44114; overflow: visible; }
.u_btn_27_frm span { font-size: 1.5rem; position: absolute; top: -1.25rem; left: calc(50% - 150px); display: block; width: 300px; padding: 0.2rem 0; color: #d44114; border: 2px solid #d44114; border-radius: 100vh; background: #fff; -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); }
.u_btn_27_frm span::before,
.u_btn_27_frm span::after { position: absolute; left: calc(50% - 10px); content: ""; }
.u_btn_27_frm span::before {  bottom: -10px; border-width: 10px 10px 0 10px; border-style: solid; border-color: #d44114 transparent transparent transparent; }
.u_btn_27_frm span::after { bottom: -7px; border-width: 10px 10px 0 10px; border-style: solid; border-color: #fff transparent transparent transparent; }
.u_btn_27_frm:hover { -webkit-transform: translate(0, 3px); transform: translate(0, 3px); color: #fff; background: #e94919; -webkit-box-shadow: 0 2px 0 #2c9d60; box-shadow: 0 2px 0 #2c9d60; }
.u_btn_27_frm i { margin-right: 1rem; }

/* 28 */
.u_btn_28_frm { font-size:1.8rem; position:relative; padding:1.5rem 2rem 1.5rem 2rem; color:#fff; border-radius:100vh; background:#eb6877; -webkit-box-shadow:0 5px 0 #e85163; box-shadow:0 5px 0 #e85163; }
.u_btn_28_frm span { color:#fff100; }
.u_btn_28_frm small { font-weight:bold; }
.u_btn_28_frm i { margin-right:1rem; }
.u_btn_28_frm:hover { -webkit-transform:translate(0,3px); transform:translate(0,3px); color:#fff; background:#ee7f8b; -webkit-box-shadow:0 2px 0 #e85163;  box-shadow:0 2px 0 #e85163; }

/* 29 */
.u_btn_29 { margin: 20px; }
.u_btn_29_frm { font-size:2rem; position:relative; padding:1.5rem 4rem 1.5rem 6rem; color:#000; border: 2px solid #000; border-radius:100vh; background:#fff100; -webkit-box-shadow:0 5px 0 #e6d900; box-shadow:0 5px 0 #e6d900; overflow: visible;}
.u_btn_29_frm span { font-size: 1.3rem; line-height: 1.3; position: absolute; top: -10px; left: -20px; width: 64px; height: 64px; box-sizing: border-box; padding-top: 15px; -webkit-transition: all 0.3s; transition: all 0.3s; color: #000; border: 2px solid #000; border-radius: 50%; background: #fff; }
.u_btn_29_frm span em { font-style: normal; color: #d20010; }
.u_btn_29_frm small { font-weight:bold; }
.u_btn_29_frm i { margin-right:1rem; }
.u_btn_29_frm:hover { -webkit-transform:translate(0,3px); transform:translate(0,3px); color:#000; background:#fff100; -webkit-box-shadow:0 2px 0 #e6d900;  box-shadow:0 2px 0 #e6d900; }
.u_btn_29_frm:hover span { -webkit-transform: translate(0, -5px); transform: translate(0, -5px); }

/* 30 */
.u_btn_30 { margin: 20px; }
.u_btn_30_frm { font-size: 2rem; padding: 1.5rem 4rem 1.5rem 4rem; -webkit-transform: skew(-15deg); transform: skew(-15deg); color: #fff; border-radius: 0; background-image: -webkit-gradient(linear, left top, right top, from(#f83600), to(#f9d423)); background-image: -webkit-linear-gradient(left, #f83600 0%, #f9d423 100%); background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); overflow: visible; }
.u_btn_30_frm::before { position: absolute; top: 46%; right: 0; width: 3rem; height: 1px; content: ""; -webkit-transition: all 0.3s; transition: all 0.3s; background: #fff; }
.u_btn_30_frm::after { position: absolute; top: 55%; right: 1rem; width: 2rem; height: 1px; content: ""; -webkit-transition: all 0.3s; transition: all 0.3s; background: #fff; }
.u_btn_30_frm:hover { -webkit-transform: skew(0); transform: skew(0); color: #fff; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); }
.u_btn_30_frm:hover::before { right: -1.5rem; background: #f83600; }
.u_btn_30_frm:hover::after { right: -1rem; background: #f83600; }

/* 31 */
.u_btn_31_frm { font-size: 2rem; padding: 1.5rem 5rem 1.5rem 4rem; color: #fff100;color: #fff100; border: 1px solid #1b7e40; border-radius: 1rem; background: #1b7e40; background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #1b7e40), to(#20b958)); background: -webkit-linear-gradient(bottom, #1b7e40 50%, #20b958 100%); background: linear-gradient(0deg, #1b7e40 50%, #20b958 100%); -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 5px 10px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 5px 10px rgba(0, 0, 0, .1); }
.u_btn_31_frm:hover { color: #fff100; -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.1); box-shadow: 0 2px 3px rgba(0,0,0,.1); }
.u_btn_31_frm:hover i { -webkit-transform: scale(.9); transform: scale(.9); }
.u_btn_31_frm i { color: #fff; }
.u_btn_31_frm .fa-position-right { position: absolute; top: calc(50% - .5em); right: 1rem; }

/* 32 */
.u_btn_32{display:block; max-width:435px; }
.u_btn_32_frm { font-size:1.8rem; display:block; padding:1.5rem 0 1.5rem 3rem; color: #000; -webkit-box-shadow:0 5px 0 #e6d900; box-shadow:0 5px 0 #e6d900; background:#fff100; }
.u_btn_32_frm::before { font-size:1.2rem; font-weight:bold; position:absolute; top:1.2rem; left:-3.2rem; padding:0 3rem; content:"無料!"; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transform-origin:top; transform-origin:top; color:#fff; background:#eb6100; -webkit-box-shadow:0 3px 3px #e6d900; box-shadow:0 3px 3px #e6d900; }
.u_btn_32_frm:hover { -webkit-transform:translate(0,3px); transform:translate(0,3px); color:#000; background:#fff100; -webkit-box-shadow:0 2px 0 #e6d900;  box-shadow:0 2px 0 #e6d900; }
/* 33 */
.u_btn_33 { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; max-width:435px; margin-right:16px; }
.u_btn_33_frm { line-height:1.4; width:49.5%; padding:1.25rem 0; border-radius:100vh; color:#ffff; }
.u_btn_33_icon_mail { color:#fff; background:#d20010; }
.u_btn_33_icon_tel { color:#fff !important; background:#094; }
.fa-position-right { position:absolute; top:calc(50% - 0.5em); right:1rem; }

/* 34 */
.u_btn_34 { max-width:435px; margin-right:16px; }
.u_btn_34_frm { line-height:1.4; width:100%; padding:1.25rem 0; color:#ffff; }
.u_btn_34_icon_phone { display:block; padding:1.5rem 0; color:#fff; background:#d20010; -webkit-box-shadow:0 5px 0 #b9000e; box-shadow:0 5px 0 #b9000e; }
.u_btn_34_icon_phone i { font-size:2rem; }
.u_btn_34_icon_phone i.fa-position-left { font-size:3rem; left:2rem; }
.u_btn_34_icon_phone:hover { color:#fff; }
.u_btn_34_icon_tel { display:block; margin-top:15px; padding:1rem 0; color:#fff; background:#094; -webkit-box-shadow:0 5px 0 #008039; box-shadow:0 5px 0 #008039; }
.u_btn_34_icon_tel i { font-size:2rem; }
.u_btn_34_icon_tel i.fa-position-left { font-size:3rem; left:2rem; }
.u_btn_34_icon_tel .number { line-height:1; display:inline-block; margin-top:0.5rem; padding:0.25rem 2rem; letter-spacing:0; color:#094; border-radius:0.5rem; background:#fff; }
.u_btn_34_icon_tel:hover{color:#fff; }
.fa-position-left { position:absolute; top:calc(50% - 0.5em); left:1rem; }
.fa-position-right { position:absolute; top:calc(50% - 0.5em); right:1rem; }

/* SNS */
.fab, .far {margin-top: 12px;}
.u_btn_sns { font-size: 2.4rem; line-height: 50px; width: 50px; height: 50px; padding: 0; letter-spacing: 0; color: #fff; border-radius: 50%; }

.u_btn_sns:hover { color: #fff; }
.u_btn_sns_facebook { background: #1877f2; margin-top: 12px;}
.u_btn_sns_twitter { background: #1da1f2; }
.u_btn_sns_instagram { background: #d6249f; background: -webkit-linear-gradient(45deg, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); background: linear-gradient(45deg, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.u_btn_sns_line { background: #00b900; }
.u_btn_sns_youtube { background: #cd201f; }
.u_btn_sns_wordpress { background: #21759b; }
.u_btn_sns_hatenablog { background: #2f70be; }
.u_btn_sns_hatenablog::before { content: "B!"; color: #fff; font-size: 1.6em; font-weight: 900; }
.u_btn_sns_pocket { padding: 0 0 0 16px; background: none; }
.u_btn_sns_pocket::before { font-family: "Font Awesome 5 Brands"; font-weight: 400; font-size: 2em; margin-right: 10px; content: "\f265"; color: red; }

/* ==========================================                TMPに直接記載        */
/* TABLE
/* ========================================== */
/* comparison-chart_01 比較表 */
/*
.comparsion-chart_01 th,
.comparsion-chart_01 td { text-align: center; width: 20%; min-width: 130px; padding: 10px; height: 60px; }
@media only screen and (max-width: 768px) {
  .comparsion-chart_01 { display: block; overflow-x: scroll; white-space: nowrap; }
}
*/
/* comparsion-chart_02 比較表 */
/*
.comparsion-chart_02 th,
.comparsion-chart_02 td {text-align: center; width: 20%; min-width: 130px; padding: 10px; height: 60px; }
.comparsion-chart_02 th { background-color: #f0f0f0; }
.comparsion-chart_02 .head { background-color: #e2e2e2; }
@media only screen and (max-width: 768px) {
  .comparsion-chart_02 { display: block; white-space: nowrap; overflow-x: scroll; }
  .comparsion-chart_02 .fixed { position: -webkit-sticky; position: sticky; height: 100%; left: 0; }
  .comparsion-chart_02 .fixed:before { content: ""; position: absolute; top: 0; left: -1px; right: -1px; height: 100%; border-left: 1px solid #707070; border-right: 1px solid #707070; }
}
*/

/* ========================================== */
/* circle
/* ========================================== */
/* circle */
.u_circle { border-radius: 50%; }
.u_circle_frm { border-radius: 50%; overflow: hidden; }


/* ============================================ utility ============================================ */

/* ========================================== */
/* flex basic style
/* ========================================== */

:root {
  --mb_adjust:24px;
}

.u_col211,
.u_col221,
.u_col222,
.u_col321,
.u_col322,
.u_col331,
.u_col311,
.u_col421,
.u_col422,
.u_col4321,
.u_col4322,
.u_col521,
.u_col522,
.u_col531,
.u_col533,
.u_col632,
.u_col633,
.u_col6431 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: unset;
}

/* 2Colmun
--------------------------------------
u_col211 | 2 > 768px < 1 > 480px < 1　●Col 2 / 4 / 6 / 8 / 10 /
u_col221 | 2 > 768px < 2 > 480px < 1　●Col 2 / 4 / 6 / 8 / 10 /
u_col222 | 2 > 768px < 2 > 480px < 2　●Col 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 18 / 20 / 24 /
*/
/* ▼▼▼ 2 - 1 - 1 ▼▼▼ */
.u_col211 > li,
.u_col211 > div {
  width: calc(100% / 2 - 12px);
  margin: 0 24px var(--mb_adjust) 0;
}

.u_col211 > li:nth-child(2n),
.u_col211 > div:nth-child(2n) {
  margin-right: 0;
}
@media (max-width: 768px) { 
  .u_col211 > li,
  .u_col211 > div {
    width: 100%;
    margin: 0 0 var(--mb_adjust) 0;
  }
}
/* ▲▲▲ 2 - 1 - 1 ▲▲▲ */
/* ▼▼▼ 2 - 2 - 1 ▼▼▼ */
.u_col221 > li,
.u_col221 > div {
  width: calc(100% / 2 - 12px);
  margin: 0 24px var(--mb_adjust) 0;
}

.u_col221 > li:nth-child(2n),
.u_col221 > div:nth-child(2n) {
  margin-right: 0;
}
@media (max-width: 480px) { 
  .u_col221 > li,
  .u_col221 > div {
    width: 100%;
    margin: 0 0 var(--mb_adjust) 0;
  }
}
/* ▲▲▲ 2 - 2 - 1 ▲▲▲ */
/* ▼▼▼ 2 - 2 - 2 ▼▼▼ */
.u_col222 > li,
.u_col222 > div {
  width: calc(100% / 2 - 12px);
  margin: 0 24px var(--mb_adjust) 0;
}

.u_col222 > li:nth-child(2n),
.u_col222 > div:nth-child(2n) {
  margin-right: 0;
}
/* ▲▲▲ 2 - 2 - 2 ▲▲▲ */

/* 3Colmun
--------------------------------------
.u_col321 | 3 > 768px < 2 > 480px > 1 ●Col 6 / 12 / 18 /
.u_col322 | 3 > 768px < 2 > 480px > 2 ●Col 6 / 12 / 18 / 24 /
.u_col331 | 3 > 768px < 3 > 480px > 1 ●Col 3 / 6 / 9 / 12 /
.u_col311 | 3 > 768px < 1 > 480px > 1 ●Col 3 / 6 / 9 / 12 /
*/
/* ▼▼▼ 3 - 2 - 1 ▼▼▼ */
.u_col321 > li,
.u_col321 > div {
  width: calc(100% / 3 - 16px);
  margin: 0 24px var(--mb_adjust) 0;
}

.u_col321 > li:nth-child(3n),
.u_col321 > div:nth-child(3n) {
  margin-right: 0;
}
@media (max-width: 768px) {
  .u_col321 > li,
  .u_col321 > div {
    width: calc(100% / 2 - 12px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col321 > li:nth-child(3n),
  .u_col321 > div:nth-child(3n) {
    margin-right: auto;
  }
  .u_col321 > li:nth-child(2n),
  .u_col321 > div:nth-child(2n) {
    margin-right: 0;
  }
}
@media (max-width: 480px) { 
  .u_col321 > li,
  .u_col321 > div {
    width: 100%;
    margin: 0 0 var(--mb_adjust) 0;
  }
}
/* ▲▲▲ 3 - 2 - 1 ▲▲▲ */
/* ▼▼▼ 3 - 2 - 2 ▼▼▼ */
.u_col322 > li,
.u_col322 > div {
  width: calc(100% / 3 - 16px);
  margin: 0 24px var(--mb_adjust) 0;
}

.u_col322 > li:nth-child(3n),
.u_col322 > div:nth-child(3n) {
  margin-right: 0;
}
@media (max-width: 768px) {
  .u_col322 > li,
  .u_col322 > div {
    width: calc(100% / 2 - 12px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col322 > li:nth-child(3n),
  .u_col322 > div:nth-child(3n) {
    margin-right: auto;
  }
  .u_col322 > li:nth-child(2n),
  .u_col322 > div:nth-child(2n) {
    margin-right: 0;
  }
}
/* ▲▲▲ 3 - 2 - 2 ▲▲▲ */
/* ▼▼▼ 3 - 3 - 1 ▼▼▼ */
.u_col331 > li,
.u_col331 > div {
  width: calc(100% / 3 - 16px);
  margin: 0 24px var(--mb_adjust) 0;
}

.u_col331 > li:nth-child(3n),
.u_col331 > div:nth-child(3n) {
  margin-right: 0;
}
@media (max-width: 480px) {
  .u_col331 > li,
  .u_col331 > div {
    width: 100%;
    margin: 0 0 var(--mb_adjust) 0;
  }
}
/* ▲▲▲ 3 - 3 - 1 ▲▲▲ */
/* ▼▼▼ 3 - 1 - 1 ▼▼▼ */
.u_col311 > li,
.u_col311 > div {
  width: calc(100% / 3 - 16px);
  margin: 0 24px var(--mb_adjust) 0;
}

.u_col311 > li:nth-child(3n),
.u_col311 > div:nth-child(3n) {
  margin-right: 0;
}
@media (max-width: 768px) {
  .u_col311 > li,
  .u_col311 > div {
    width: 100%;
    margin: 0 0 var(--mb_adjust) 0;
  }
}
/* ▲▲▲ 3 - 1 - 1 ▲▲▲ */

/* 4Colmun
--------------------------------------
u_col421	| 4 > 768px < 2 > 480px < 1             ●Col  4 /  8 /
u_col422	| 4 > 768px < 2 > 480px < 2	            ●Col  4 /  8 / 12 / 16 / 20 / 24 / 28 /
u_col4321	| 4 > 980px < 3 > 768px < 2 > 480px < 1	●Col 12 /
u_col4322	| 4 > 980px < 3 > 768px < 2 > 480px < 2 ●Col 12 / 24 / 36 /
*/
/* ▼▼▼ 4 - 2 - 1 ▼▼▼ */
.u_col421 > li,
.u_col421 > div {
  width: calc(100% / 4 - 18px);
  margin: 0 24px var(--mb_adjust) 0;
}

.u_col421 > li:nth-child(4n),
.u_col421 > div:nth-child(4n) {
  margin-right: 0;
}
@media (max-width: 768px) {
  .u_col421 > li,
  .u_col421 > div  {
    width: calc(100% / 2 - 12px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col421 > li:nth-child(2n),
  .u_col421 > div:nth-child(2n) {
    margin-right: 0;
  }
}
@media (max-width: 480px) { 
  .u_col421 > li,
  .u_col421 > div {
    width: 100%;
    margin: 0 0 var(--mb_adjust) 0;
  }
}
/* ▲▲▲ 4 - 2 - 1 ▲▲▲ */
/* ▼▼▼ 4 - 2 - 2 ▼▼▼ */
.u_col422 > li,
.u_col422 > div {
  width: calc(100% / 4 - 18px);
  margin: 0 24px var(--mb_adjust) 0;
}

.u_col422 > li:nth-child(4n),
.u_col422 > div:nth-child(4n) {
  margin-right: 0;
}

@media (max-width: 768px) {
  .u_col422 > li,
  .u_col422 > div  {
    width: calc(100% / 2 - 12px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col422 > li:nth-child(2n),
  .u_col422 > div:nth-child(2n) {
    margin-right: 0;
  }
}
/* ▲▲▲ 4 - 2 - 2 ▲▲▲ */
/* ▼▼▼ 4 - 3 - 2 - 1 ▼▼▼ */
.u_col4321 > li,
.u_col4321 > div {
  width: calc(100% / 4 - 18px);
  margin: 0 24px var(--mb_adjust) 0;
}

.u_col4321 > li:nth-child(4n),
.u_col4321 > div:nth-child(4n) {
  margin-right: 0;
}
@media (max-width: 980px) {
  .u_col4321 > li,
  .u_col4321 > div {
    width: calc(100% / 3 - 16px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col4321 > li:nth-child(4n),
  .u_col4321 > div:nth-child(4n) {
    margin-right: auto;
  }
  .u_col4321 > li:nth-child(3n),
  .u_col4321 > div:nth-child(3n) {
    margin-right: 0;
  }
}
@media (max-width: 768px) {
  .u_col4321 > li,
  .u_col4321 > div {
    width: calc(100% / 2 - 12px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col4321 > li:nth-child(3n),
  .u_col4321 > div:nth-child(3n) {
    margin-right: auto;
  }
  .u_col4321 > li:nth-child(2n),
  .u_col4321 > div:nth-child(2n) {
    margin-right: 0;
  }
}
@media (max-width: 480px) { 
  .u_col4321 > li,
  .u_col4321 > div {
    width: 100%;
    margin: 0 0 var(--mb_adjust) 0;
  }
}
/* ▲▲▲ 4 - 3 - 2 - 1 ▲▲▲ */
/* ▼▼▼ 4 - 3 - 2 - 2 ▼▼▼ */
.u_col4322 > li,
.u_col4322 > div {
  width: calc(100% / 4 - 18px);
  margin: 0 24px var(--mb_adjust) 0;
}

.u_col4322 > li:nth-child(4n),
.u_col4322 > div:nth-child(4n) {
  margin-right: 0;
}
@media (max-width: 980px) {
  .u_col4322 > li,
  .u_col4322 > div {
    width: calc(100% / 3 - 16px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col4322 > li:nth-child(4n),
  .u_col4322 > div:nth-child(4n) {
    margin-right: auto;
  }
  .u_col4322 > li:nth-child(3n),
  .u_col4322 > div:nth-child(3n) {
    margin-right: 0;
  }
}
@media (max-width: 768px) {
  .u_col4322 > li,
  .u_col4322 > div {
    width: calc(100% / 2 - 12px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col4322 > li:nth-child(3n),
  .u_col4322 > div:nth-child(3n) {
    margin-right: auto;
  }
  .u_col4322 > li:nth-child(2n),
  .u_col4322 > div:nth-child(2n) {
    margin-right: 0;
  }
}
/* ▲▲▲ 4 - 3 - 2 - 2 ▲▲▲ */

/* 5Colmun
--------------------------------------
u_col521 | 5 > 768px < 2 > 480px < 1 ●Col 10 /
u_col522 | 5 > 768px < 2 > 480px < 2 ●Col 10 / 20 /
u_col531 | 5 > 768px < 3 > 480px < 1 ●Col 15 /
u_col533 | 5 > 768px < 3 > 480px < 3 ●Col 15 / 30 /
*/
/* ▼▼▼ 5 - 2 - 1 ▼▼▼ */
.u_col521 > li,
.u_col521 > div {
  width: calc(100% / 5 - 20px);
  margin: 0 25px var(--mb_adjust) 0;
}
.u_col521 > li:nth-child(5n),
.u_col521 > div:nth-child(5n) {
  margin-right: 0;
}
@media (max-width: 768px) {
  .u_col521 > li,
  .u_col521 > div {
    width: calc(100% / 2 - 12px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col521 > li:nth-child(5n),
  .u_col521 > div:nth-child(5n) {
    margin-right: auto;
  }
  .u_col521 > li:nth-child(2n),
  .u_col521 > div:nth-child(2n) {
    margin-right: 0;
  }
}
@media (max-width: 480px) { 
  .u_col521 > li,
  .u_col521 > div {
    width: 100%;
    margin: 0 0 var(--mb_adjust) 0;
  }
}
/* ▲▲▲ 5 - 2 - 1 ▲▲▲ */
/* ▼▼▼ 5 - 2 - 2 ▼▼▼ */
.u_col522 > li,
.u_col522 > div {
  width: calc(100% / 5 - 20px);
  margin: 0 25px var(--mb_adjust) 0;
}
.u_col522 > li:nth-child(5n),
.u_col522 > div:nth-child(5n) {
  margin-right: 0;
}
@media (max-width: 768px) {
  .u_col522 > li,
  .u_col522 > div {
    width: calc(100% / 2 - 12px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col522 > li:nth-child(5n),
  .u_col522 > div:nth-child(5n) {
    margin-right: auto;
  }
  .u_col522 > li:nth-child(2n),
  .u_col522 > div:nth-child(2n) {
    margin-right: 0;
  }
}
@media (max-width: 480px) { 
  .u_col522 > li,
  .u_col522 > div {
    width: 100%;
    margin: 0 0 var(--mb_adjust) 0;
  }
}
/* ▲▲▲ 5 - 2 - 2 ▲▲▲ */
/* ▼▼▼ 5 - 3 - 1 ▼▼▼ */
.u_col531 > li,
.u_col531 > div {
  width: calc(100% / 5 - 20px);
  margin: 0 25px var(--mb_adjust) 0;
}
.u_col531 > li:nth-child(5n),
.u_col531 > div:nth-child(5n) {
  margin-right: 0;
}
@media (max-width: 768px) {
  .u_col531 > li,
  .u_col531 > div {
    width: calc(100% / 3 - 16px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col531 > li:nth-child(5n),
  .u_col531 > div:nth-child(5n) {
    margin-right: auto;
  }
  .u_col531 > li:nth-child(3n),
  .u_col531 > div:nth-child(3n) {
    margin-right: 0;
  }
}
@media (max-width: 480px) { 
  .u_col531 > li,
  .u_col531 > div {
    width: 100%;
    margin: 0 0 var(--mb_adjust) 0;
  }
}
/* ▲▲▲ 5 - 3 - 1 ▲▲▲ */
/* ▼▼▼ 5 - 3 - 3 ▼▼▼ */
.u_col533 > li,
.u_col533 > div {
  width: calc(100% / 5 - 20px);
  margin: 0 25px var(--mb_adjust) 0;
}
.u_col533 > li:nth-child(5n),
.u_col533 > div:nth-child(5n) {
  margin-right: 0;
}
@media (max-width: 768px) {
  .u_col533 > li,
  .u_col533 > div {
    width: calc(100% / 3 - 16px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col533 > li:nth-child(5n),
  .u_col533 > div:nth-child(5n) {
    margin-right: auto;
  }
  .u_col533 > li:nth-child(3n),
  .u_col533 > div:nth-child(3n) {
    margin-right: 0;
  }
}
/* ▲▲▲ 5 - 3 - 3 ▲▲▲ */

/* 6Colmun
--------------------------------------
u_col632  | 6 > 768px < 3 > 480px < 2             ●Col  6 / 12 / 24 /
u_col633  | 6 > 768px < 3 > 480px < 3             ●Col  6 / 12 / 24 /
u_col6431 | 6 > 980px < 4 > 768px < 3 > 480px < 1 ●Col  6 / 12 / 24 /
*/
/* ▼▼▼ 6 - 3 - 2 ▼▼▼ */
.u_col632 > li,
.u_col632 > div {
  width: calc(100% / 6 - 20px);
  margin: 0 24px var(--mb_adjust) 0;
}
.u_col632> li:nth-child(6n),
.u_col632> div:nth-child(6n) {
  margin-right: 0;
}
@media (max-width: 768px) {
  .u_col632 > li,
  .u_col632 > div {
    width: calc(100% / 3 - 16px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col632> li:nth-child(6n),
  .u_col632> div:nth-child(6n) {
    margin-right: auto;
  }
  .u_col632> li:nth-child(3n),
  .u_col632> div:nth-child(3n) {
    margin-right: 0;
  }
}
@media (max-width: 480px) { 
  .u_col632 > li,
  .u_col632 > div {
    width: calc(100% / 2 - 12px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col632> li:nth-child(3n),
  .u_col632> div:nth-child(3n) {
    margin-right: auto;
  }
  .u_col632> li:nth-child(2n),
  .u_col632> div:nth-child(2n) {
    margin-right: 0;
  }
}
/* ▲▲▲ 6 - 3 - 2 ▲▲▲ */
/* ▼▼▼ 6 - 3 - 3 ▼▼▼ */
.u_col633 > li,
.u_col633 > div {
  width: calc(100% / 6 - 20px);
  margin: 0 24px var(--mb_adjust) 0;
}
.u_col633> li:nth-child(6n),
.u_col633> div:nth-child(6n) {
  margin-right: 0;
}
@media (max-width: 768px) {
  .u_col633 > li,
  .u_col633 > div {
    width: calc(100% / 3 - 16px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col633> li:nth-child(6n),
  .u_col633> div:nth-child(6n) {
    margin-right: auto;
  }
  .u_col633> li:nth-child(3n),
  .u_col633> div:nth-child(3n) {
    margin-right: 0;
  }
}
/* ▲▲▲ 6 - 3 - 3 ▲▲▲ */
/* ▼▼▼ 6 - 4 - 3 - 1 ▼▼▼ */
.u_col6431 > li,
.u_col6431 > div {
  width: calc(100% / 6 - 20px);
  margin: 0 24px var(--mb_adjust) 0;
}
.u_col6431> li:nth-child(6n),
.u_col6431> div:nth-child(6n) {
  margin-right: 0;
}
@media (max-width: 980px) {
  .u_col6431 > li,
  .u_col6431 > div {
    width: calc(100% / 4 - 18px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col6431> li:nth-child(6n),
  .u_col6431> div:nth-child(6n) {
    margin-right: auto;
  }
  .u_col6431 > li:nth-child(4n),
  .u_col6431 > div:nth-child(4n) {
    margin-right: 0;
  }
}
@media (max-width: 768px) {
  .u_col6431 > li,
  .u_col6431 > div {
    width: calc(100% / 3 - 16px);
    margin: 0 24px var(--mb_adjust) 0;
  }
  .u_col6431> li:nth-child(4n),
  .u_col6431> div:nth-child(4n) {
    margin-right: auto;
  }
  .u_col6431> li:nth-child(3n),
  .u_col6431> div:nth-child(3n) {
    margin-right: 0;
  }
}
@media (max-width: 480px) { 
  .u_col6431 > li,
  .u_col6431 > div {
    width: 100%;
    margin: 0 0 var(--mb_adjust) 0;
  }
}
/* ▲▲▲ 6 - 4 - 3 - 1 ▲▲▲ */

/* ========================================== */
/* side by side layout
/* ========================================== */
/*
flex                親要素に使用できるプロパティ
---------------------------------------------
/*
flex-direction      アイテムを配置する向きを指定するプロパティ
---------------------------------------------
row                 アイテムを水平方向に左から右へと配置（デフォルト）
row-reverse         アイテムを水平方向に右から左へと配置
column              アイテムを垂直方向に上から下へと配置
colmn-reverse       アイテムを垂直方向に下から上へと配置


flex-wrap           アイテムの折り返しを指定するプロパティ
---------------------------------------------
nowrap              アイテムを折り返さずに一列に配置（デフォルト）
wrap                複数行のアイテムを上から下へと配置
wrap-reverse        複数行のアイテムを下から上へと配置

justify-content     水平方向の位置を指定するプロパティ
---------------------------------------------
flex-start          アイテムを左揃えで配置(デフォルト)
flex-end            アイテムを右揃えで配置
center              アイテムを左右中央揃えで配置
space-between       両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置
space-around        両端のアイテムも含めて、均等な間隔を空けて配置

align-items         要素の垂直方向の位置を指定するプロパティ
---------------------------------------------
stretch             アイテムを上下の余白を埋めるように配置(デフォルト)
flex-start          アイテムを上揃えで配置
flex-end            アイテムを下揃えで配置
center              アイテムを上下中央揃えで配置
baseline            アイテムをベースラインに合わせて配置

align-content       複数行の時の垂直方向の位置を指定するプロパティ
---------------------------------------------
stretch             アイテムの行を余白を埋めるように配置
flex-start          アイテムの行を上揃えで配置
flex-end            アイテムの行を下揃えで配置
center              アイテムの行を上下中央揃えで配置
space-between       最上行と最下行のアイテムを余白を空けずに配置し、他のアイテム行は均等に間隔を空けて配置
space-around        最上行と最下行のアイテムを余白を空けずに配置し、他のアイテム行は均等に間隔を空けて配置

子要素に使用できるプロパティ utility
---------------------------------------------
order               アイテムの並び順を指定
    .f-item01 {order: 3;}
    .f-item02 {order: 1;}
    .f-item03 {order: 4;}
    .f-item04 {order: 2;}
flex-grow           アイテムの伸び率を指定
    .f-item01 {flex-grow:3;}
    .f-item02 {flex-grow:1;}
    .f-item03 {flex-grow:4;}
    .f-item04 {flex-grow:2;}
flex-shrink         アイテムの縮み率を指定
    .f-item01 {flex-shrink:1;}
    .f-item02 {flex-shrink:2;}
    .f-item03 {flex-shrink:1.5;}
    .f-item04 {flex-shrink:1;}
flex-basis          アイテムのベースの幅を指定
    .f-item01 {flex-basis:50%;}
    .f-item02 {flex-basis:20%;}
    .f-item03 {flex-basis:30%;}
    .f-item04 {flex-basis:40%;}
flex                アイテムの伸び率、縮み率、ベースの幅を一括指定
    .f-item01 {flex: 1 0 20%;}
    .f-item02 {flex: 2 0 30%;}
    .f-item03 {flex: 1 0 50%;}
align-self          アイテムの垂直方向の位置を指定 (project)
    auto            親要素のalign-itemsの値を使用(デフォルト)
    flex-start      アイテムを上揃えで配置
    flex-end        アイテムを下揃えで配置
    center          アイテムを中央揃えで配置
    baselne         アイテムをベースラインに合わせて配置
    stretch         アイテムを上下の余白を埋めるように配置
*/


/* alternative */
/* odd  奇数 */
/* even 偶数 */

/* 奇数が逆 */
.u_odd-alt:nth-child(odd) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.u_odd-alt:nth-child(even) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column;
flex-direction: column;
}

/*　偶数が逆　*/
.u_even-alt:nth-child(even) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.u_even-alt:nth-child(odd) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column;
flex-direction: column;
}

/* ========================================== */
/* WRITING MODE
/* ========================================== */
/*
.v-mode { 
  font-family: 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'HGP明朝B', serif;
  -webkit-font-feature-settings: 'pkna';
          font-feature-settings: 'pkna';
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}
.mincho-mode { 
  font-family: 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'HGP明朝B', serif;
  -webkit-font-feature-settings: 'pkna';
          font-feature-settings: 'pkna';
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: 0.03em;
}
*/

/* ========================================== */
/* BREADCRUMB
/* ========================================== */

/* ========================================== */
/* SNS
/* ========================================== */

/* ========================================== */
/* ATTENTION
/* ========================================== */
.att {
  margin-bottom: 44px;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}
.att2 {
  margin-bottom: 44px;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  color: #969696;
}
.att3 img {
  width: 100%;
}
.att4 img {
  width: 100%;
  margin-top: 40px;
}
@media screen and (max-width:512px){
.att2 {
  text-align: left;
}
.att3 {
}
}


/* ========================================== */
/* READ MORE
/* ========================================== */

.more {
  display: block;
  clear: both;
  text-align: right;
}

.more.staff-interview {
  margin: 0 0 108px;
  text-align: center;
}
.more.staff-interview img {
  width: 100%;
}

.more:hover {
  text-decoration: underline;
}

/* ========================================== */
/* EXTERNAL LINK
/* ========================================== */
.extlink1 {
  padding-right: 16px;
  background: url(../img/icon-common-extlink1.png)no-repeat right center;
  background-size: 14px;
  background-position: right 4px;
}
.extlink2 {
  padding-right: 16px;
  background: url(../img/icon-common-extlink2.png)no-repeat right center;
  background-size: 14px;
  background-position: right 4px;
}


/* ========================================== */
/* ページネーション
/* ========================================== */

/* ========================================== */
/* GOOGLE MAP
/* ========================================== */
.u_gmap {height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative; }
.u_gmap iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%;}

/* ========================================== */
/* BANNER
/* ========================================== */

/* ========================================== */
/* LIST
/* ========================================== */
/* リストマークと折り返し
--------------------------------------*/
/* 単語と本文で、本文だけが先頭を揃えて折り返す仕様 */
:root {
  --mr_mark_adjust: 24px;
  --ml_mark_adjust: 4px;
  --ml_list_adjust: 42px;
}
.u_head-justify li span:nth-child(1) {
  float: left;
  margin-right: var(--mr_mark_adjust);
  margin-left:  var(--ml_mark_adjust);
}
.u_head-justify li span:nth-child(2) {
  display: block;
  overflow: hidden;
}

/* 表示しない */
.u_no-listmark li {
  list-style-type: none;
  margin-left: var(--ml_list_adjust);
}
.u_no-listmark span {
  display: block;
  margin-left: var(--ml_mark_adjust);
  overflow: hidden;
}

/* 黒丸 */
.u_listmark_disc li {
  list-style-type: disc;
  margin-left: var(--ml_list_adjust);
}
.u_listmark_disc span {
  display: block;
  margin-left: var(--ml_mark_adjust);
  overflow: hidden; 
}

/* 白丸 */
.u_listmark_circle li {
  list-style-type: circle;
  margin-left: var(--ml_list_adjust);
}
.u_listmark_circle span {
  display: block;
  margin-left: var(--ml_mark_adjust);
  overflow: hidden;
}

/* 四角 */
.u_listmark_square li {
  list-style-type: square;
  margin-left: var(--ml_list_adjust);
}
.u_listmark_square span {
  display: block;
  margin-left: var(--ml_mark_adjust);
  overflow: hidden;
}

/* 数字 */
.u_listmark_decimal li {
  list-style-type: decimal;
  margin-left: var(--ml_list_adjust);
}
.u_listmark_decimal span {
  display: block;
  margin-left: var(--ml_mark_adjust);
  overflow: hidden;
}

/* 大文字アルファベット */
.u_listmark_upper-alpha li {
  list-style-type: upper-alpha;
  margin-left: var(--ml_list_adjust);
}
.u_listmark_upper-alpha span {
  display: block;
  margin-left: var(--ml_mark_adjust);
  overflow: hidden;
}

/* 	小文字アルファベット */
.u_listmark_lower-alpha li {
  list-style-type: lower-alpha;
  margin-left: var(--ml_list_adjust);
}
.u_listmark_lower-alpha span {
  display: block;
  margin-left: var(--ml_mark_adjust);
  overflow: hidden;
}

/* 2桁の数字 */
.u_listmark_decimal-leading-zero li {
  list-style-type: decimal-leading-zero;
  margin-left: var(--ml_list_adjust);
}
.u_listmark_decimal-leading-zero span {
  display: block;
  margin-left: var(--ml_mark_adjust);
  overflow: hidden;
}

/* 漢数字 */
.u_listmark_cjk-ideographic li {
  list-style-type: cjk-ideographic;
  margin-left: var(--ml_list_adjust);
}
.u_listmark_cjk-ideographic span {
  display: block;
  margin-left: var(--ml_mark_adjust);
  overflow: hidden;
}

/* ========================================== */
/* テキスト
/* ========================================== */

/* Font */

.u_gothic_01 { font-family: "游ゴシック体","Yu Gothic",YuGothic,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"sans-serif","Osaka,sans-serif"; }

.u_gothic_02 { font-family:"游ゴシック体","Yu Gothic",YuGothic,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"sans-serif","Osaka,sans-serif"; }

.u_gothic_03 { font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif; }

.u_Mincho_01 { font-family: "游明朝","Yu Mincho",YuMincho, Georgia,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; }

.u_Mincho_02 { font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; }

.u_mincho_03 { font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; }

/* よく使うフォントカラー
--------------------------------------*/
.u_white {color: #fff;}
.u_black {color: #000;}

/* 文の途中で折り返さない
--------------------------------------*/
.u_ibrow { display: inline-block; }

/* inline要素をblock要素に変えて改行させる
--------------------------------------*/
.u_block { display: block; }

/* 先頭を揃える（Align Head）
--------------------------------------*/
.u_ah span:first-child {
  float: left;
}
.u_ah span:nth-child(2) {
  display: block;
  margin-left: 12px;
  overflow: hidden;
}

/* テキストの位置　※inline要素対応
--------------------------------------*/
.u_tc_01, /* 1 block要素　2 inline要素 */
.u_tc_02  { text-align: center; }
.u_tc_02  { display: block; }
.u_tr_01,
.u_tr_02  { text-align: right; }
.u_tr_02  { display: block; }
.u_tl_01,
.u_tl_02  { text-align: left; }
.u_tl_02  { display: block; }

/* 画像の上にセンタリング 
--------------------------------------*/
/* 親要素 */
.u_rel {
  position: relative;
}
/* 子要素 */
.u_abs_c {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

/* 縦書き
--------------------------------------*/
.u_vertical-rl { text-align: left; white-space: nowrap; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
.u_vertical-lr { text-align: left; white-space: nowrap; -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; }

/* アンダーライン
--------------------------------------*/
/* text-decoration */
/* 一重の線 */
.u_ul_01 { -webkit-text-decoration: underline solid #000; text-decoration: underline solid #000; }
/* 二重線 */
.u_ul_02 { -webkit-text-decoration: underline double #000; text-decoration: underline double #000; }
/* 点線 */
.u_ul_03 { -webkit-text-decoration: underline dotted #000; text-decoration: underline dotted #000; }
/* 破線 */
.u_ul_04 { -webkit-text-decoration: underline dashed #000; text-decoration: underline dashed #000; }
/* 波状の線 */
.u_ul_05 { -webkit-text-decoration: underline wavy #000; text-decoration: underline wavy #000; }

/* border-bottom */
/* 一重線 */
.u_bb_01 { border-bottom: solid 2px #000; }
/* 二重線 */
.u_bb_02 { border-bottom: double 2px #000; }
/* 破線 */
.u_bb_03 { border-bottom: dashed 2px #000; }
/* 点線 */
.u_bb_04 { border-bottom: dotted 2px #000; }

/* マーカー marker-border */
/* 50%下線にマーカー表示 */
.u_mk_01 { background:-webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(0%, #ffff66)); background:-o-linear-gradient(transparent 50%, #ffff66 0%); background:linear-gradient(transparent 50%, #ffff66 0%); }
/* 40%下線にマーカー表示 */
.u_mk_02 { background:-webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(0%, #ffcc99)); background:-o-linear-gradient(transparent 60%, #ffcc99 0%); background:linear-gradient(transparent 60%, #ffcc99 0%); }
/* 30%下線にマーカー表示 */
.u_mk_03 { background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(0%, #ffcccc)); background: -o-linear-gradient(transparent 70%, #ffcccc 0%); background: linear-gradient(transparent 70%, #ffcccc 0%); }
/* 20%下線にマーカー表示 */
.u_mk_04 { background:-webkit-gradient(linear, left top, left bottom, color-stop(80%, transparent), color-stop(0%, #99ccff)); background:-o-linear-gradient(transparent 80%, #99ccff 0%); background:linear-gradient(transparent 80%, #99ccff 0%); }

/* ========================================== */
/* 画像
/* ========================================== */
.u_img_fit { width: 100%; object-fit: cover; font-family: 'object-fit: cover'; }

/* ========================================== */
/* 背景
/* ========================================== */
.u_bg_usu-gray { background: #ebebeb; }
.u_bg_enji { background: #660000; }
.u_bg_Deep-green { background: #1b3a00; }

/* ========================================== */
/* detail layout style
/* ========================================== */
/* clear */
.u_clear {clear: both;}
.u_clear-left {clear: left;}
.u_clear-right {clear: right;}

/* position */
.u_left   { float: left; }
.u_right  { float: right; }
.u_center { margin: 0 auto; }
.u_hidden { overflow: hidden; }

/* margin - 要素の外側の余白 */

/* margin 0px を指定するクラス */
.u_m0 { margin: 0 !important; }
/* margin-top0px を指定するクラス */
.u_mt0 { margin-top: 0 !important; }
/* margin-right0px を指定するクラス*/
.u_mr0 { margin-right: 0 !important; }
/* margin-bottom0px を指定するクラス*/
.u_mb0 { margin-bottom: 0 !important; }
/* margin-left0px を指定するクラス*/
.u_ml0 { margin-left: 0 !important; }

.u_m5 { margin: 5px !important; }
.u_mt5 { margin-top: 5px !important; }
.u_mr5 { margin-right: 5px !important; }
.u_mb5 { margin-bottom: 5px !important; }
.u_ml5 { margin-left: 5px !important; }
.u_m10 { margin: 10px !important; }
.u_mt10 { margin-top: 10px !important; }
.u_mr10 { margin-right: 10px !important; }
.u_mb10 { margin-bottom: 10px !important; }
.u_ml10 { margin-left: 10px !important; }
.u_m15 { margin: 15px !important; }
.u_mt15 { margin-top: 15px !important; }
.u_mr15 { margin-right: 15px !important; }
.u_mb15 { margin-bottom: 15px !important; }
.u_ml15 { margin-left: 15px !important; }
.u_m20 { margin: 20px !important; }
.u_mt20 { margin-top: 20px !important; }
.u_mr20 { margin-right: 20px !important; }
.u_mb20 { margin-bottom: 20px !important; }
.u_ml20 { margin-left: 20px !important; }
.u_m25 { margin: 25px !important; }
.u_mt25 { margin-top: 25px !important; }
.u_mr25 { margin-right: 25px !important; }
.u_mb25 { margin-bottom: 25px !important; }
.u_ml25 { margin-left: 25px !important; }
.u_m30 { margin: 30px !important; }
.u_mt30 { margin-top: 30px !important; }
.u_mr30 { margin-right: 30px !important; }
.u_mb30 { margin-bottom: 30px !important; }
.u_ml30 { margin-left: 30px !important; }
.u_m35 { margin: 35px !important; }
.u_mt35 { margin-top: 35px !important; }
.u_mr35 { margin-right: 35px !important; }
.u_mb35 { margin-bottom: 35px !important; }
.u_ml35 { margin-left: 35px !important; }
.u_m40 { margin: 40px !important; }
.u_mt40 { margin-top: 40px !important; }
.u_mr40 { margin-right: 40px !important; }
.u_mb40 { margin-bottom: 40px !important; }
.u_ml40 { margin-left: 40px !important; }
.u_m45 { margin: 45px !important; }
.u_mt45 { margin-top: 45px !important; }
.u_mr45 { margin-right: 45px !important; }
.u_mb45 { margin-bottom: 45px !important; }
.u_ml45 { margin-left: 45px !important; }
.u_m50 { margin: 50px !important; }
.u_mt50 { margin-top: 50px !important; }
.u_mr50 { margin-right: 50px !important; }
.u_mb50 { margin-bottom: 50px !important; }
.u_ml50 { margin-left: 50px !important; }
.u_m55 { margin: 55px !important; }
.u_mt55 { margin-top: 55px !important; }
.u_mr55 { margin-right: 55px !important; }
.u_mb55 { margin-bottom: 55px !important; }
.u_ml55 { margin-left: 55px !important; }
.u_m60 { margin: 60px !important; }
.u_mt60 { margin-top: 60px !important; }
.u_mr60 { margin-right: 60px !important; }
.u_mb60 { margin-bottom: 60px !important; }
.u_ml60 { margin-left: 60px !important; }
.u_m65 { margin: 65px !important; }
.u_mt65 { margin-top: 65px !important; }
.u_mr65 { margin-right: 65px !important; }
.u_mb65 { margin-bottom: 65px !important; }
.u_ml65 { margin-left: 65px !important; }
.u_m70 { margin: 70px !important; }
.u_mt70 { margin-top: 70px !important; }
.u_mr70 { margin-right: 70px !important; }
.u_mb70 { margin-bottom: 70px !important; }
.u_ml70 { margin-left: 70px !important; }
.u_m75 { margin: 75px !important; }
.u_mt75 { margin-top: 75px !important; }
.u_mr75 { margin-right: 75px !important; }
.u_mb75 { margin-bottom: 75px !important; }
.u_ml75 { margin-left: 75px !important; }
.u_m80 { margin: 80px !important; }
.u_mt80 { margin-top: 80px !important; }
.u_mr80 { margin-right: 80px !important; }
.u_mb80 { margin-bottom: 80px !important; }
.u_ml80 { margin-left: 80px !important; }
.u_m85 { margin: 85px !important; }
.u_mt85 { margin-top: 85px !important; }
.u_mr85 { margin-right: 85px !important; }
.u_mb85 { margin-bottom: 85px !important; }
.u_ml85 { margin-left: 85px !important; }
.u_m90 { margin: 90px !important; }
.u_mt90 { margin-top: 90px !important; }
.u_mr90 { margin-right: 90px !important; }
.u_mb90 { margin-bottom: 90px !important; }
.u_ml90 { margin-left: 90px !important; }
.u_m95 { margin: 95px !important; }
.u_mt95 { margin-top: 95px !important; }
.u_mr95 { margin-right: 95px !important; }
.u_mb95 { margin-bottom: 95px !important; }
.u_ml95 { margin-left: 95px !important; }
.u_m100 { margin: 100px !important; }
.u_mt100 { margin-top: 100px !important; }
.u_mr100 { margin-right: 100px !important; }
.u_mb100 { margin-bottom: 100px !important; }
.u_ml100 { margin-left: 100px !important; }
.u_m105 { margin: 105px !important; }
.u_mt105 { margin-top: 105px !important; }
.u_mr105 { margin-right: 105px !important; }
.u_mb105 { margin-bottom: 105px !important; }
.u_ml105 { margin-left: 105px !important; }
.u_m110 { margin: 110px !important; }
.u_mt110 { margin-top: 110px !important; }
.u_mr110 { margin-right: 110px !important; }
.u_mb110 { margin-bottom: 110px !important; }
.u_ml110 { margin-left: 110px !important; }
.u_m115 { margin: 115px !important; }
.u_mt115 { margin-top: 115px !important; }
.u_mr115 { margin-right: 115px !important; }
.u_mb115 { margin-bottom: 115px !important; }
.u_ml115 { margin-left: 115px !important; }
.u_m120 { margin: 120px !important; }
.u_mt120 { margin-top: 120px !important; }
.u_mr120 { margin-right: 120px !important; }
.u_mb120 { margin-bottom: 120px !important; }
.u_ml120 { margin-left: 120px !important; }
/* padding - 要素の内側の余白 */
.u_p0 { padding: 0 !important; }
.u_pt0 { padding-top: 0 !important; }
.u_pr0 { padding-right: 0 !important; }
.u_pb0 { padding-bottom: 0 !important; }
.u_pl0 { padding-left: 0 !important; }
.u_p5 { padding: 5px !important; }
.u_pt5 { padding-top: 5px !important; }
.u_pr5 { padding-right: 5px !important; }
.u_pb5 { padding-bottom: 5px !important; }
.u_pl5 { padding-left: 5px !important; }
.u_p10 { padding: 10px !important; }
.u_pt10 { padding-top: 10px !important; }
.u_pr10 { padding-right: 10px !important; }
.u_pb10 { padding-bottom: 10px !important; }
.u_pl10 { padding-left: 10px !important; }
.u_p15 { padding: 15px !important; }
.u_pt15 { padding-top: 15px !important; }
.u_pr15 { padding-right: 15px !important; }
.u_pb15 { padding-bottom: 15px !important; }
.u_pl15 { padding-left: 15px !important; }
.u_p20 { padding: 20px !important; }
.u_pt20 { padding-top: 20px !important; }
.u_pr20 { padding-right: 20px !important; }
.u_pb20 { padding-bottom: 20px !important; }
.u_pl20 { padding-left: 20px !important; }
.u_p25 { padding: 25px !important; }
.u_pt25 { padding-top: 25px !important; }
.u_pr25 { padding-right: 25px !important; }
.u_pb25 { padding-bottom: 25px !important; }
.u_pl25 { padding-left: 25px !important; }
.u_p30 { padding: 30px !important; }
.u_pt30 { padding-top: 30px !important; }
.u_pr30 { padding-right: 30px !important; }
.u_pb30 { padding-bottom: 30px !important; }
.u_pl30 { padding-left: 30px !important; }
.u_p35 { padding: 35px !important; }
.u_pt35 { padding-top: 35px !important; }
.u_pr35 { padding-right: 35px !important; }
.u_pb35 { padding-bottom: 35px !important; }
.u_pl35 { padding-left: 35px !important; }
.u_p40 { padding: 40px !important; }
.u_pt40 { padding-top: 40px !important; }
.u_pr40 { padding-right: 40px !important; }
.u_pb40 { padding-bottom: 40px !important; }
.u_pl40 { padding-left: 40px !important; }
.u_p45 { padding: 45px !important; }
.u_pt45 { padding-top: 45px !important; }
.u_pr45 { padding-right: 45px !important; }
.u_pb45 { padding-bottom: 45px !important; }
.u_pl45 { padding-left: 45px !important; }
.u_p50 { padding: 50px !important; }
.u_pt50 { padding-top: 50px !important; }
.u_pr50 { padding-right: 50px !important; }
.u_pb50 { padding-bottom: 50px !important; }
.u_pl50 { padding-left: 50px !important; }
.u_p55 { padding: 55px !important; }
.u_pt55 { padding-top: 55px !important; }
.u_pr55 { padding-right: 55px !important; }
.u_pb55 { padding-bottom: 55px !important; }
.u_pl55 { padding-left: 55px !important; }
.u_p60 { padding: 60px !important; }
.u_pt60 { padding-top: 60px !important; }
.u_pr60 { padding-right: 60px !important; }
.u_pb60 { padding-bottom: 60px !important; }
.u_pl60 { padding-left: 60px !important; }
.u_p65 { padding: 65px !important; }
.u_pt65 { padding-top: 65px !important; }
.u_pr65 { padding-right: 65px !important; }
.u_pb65 { padding-bottom: 65px !important; }
.u_pl65 { padding-left: 65px !important; }
.u_p70 { padding: 70px !important; }
.u_pt70 { padding-top: 70px !important; }
.u_pr70 { padding-right: 70px !important; }
.u_pb70 { padding-bottom: 70px !important; }
.u_pl70 { padding-left: 70px !important; }
.u_p75 { padding: 75px !important; }
.u_pt75 { padding-top: 75px !important; }
.u_pr75 { padding-right: 75px !important; }
.u_pb75 { padding-bottom: 75px !important; }
.u_pl75 { padding-left: 75px !important; }
.u_p80 { padding: 80px !important; }
.u_pt80 { padding-top: 80px !important; }
.u_pr80 { padding-right: 80px !important; }
.u_pb80 { padding-bottom: 80px !important; }
.u_pl80 { padding-left: 80px !important; }
/* padding Left/Right - ％ */
.u_plr16 { padding: 0 16px !important; }
.u_plr24 { padding: 0 24px !important; }
.u_plr28 { padding: 0 28px !important; }
.u_plr32 { padding: 0 32px !important; }
.u_plr36 { padding: 0 36px !important; }
.u_plr40 { padding: 0 40px !important; }
/* width - ％ */
.u_w10 { width: 10%; }
.u_w20 { width: 20%; }
.u_w30 { width: 30%; }
.u_w40 { width: 40%; }
.u_w50 { width: 50%; }
.u_w60 { width: 60%; }
.u_w70 { width: 70%; }
.u_w80 { width: 80%; }
.u_w90 { width: 90%; }
.u_w100 { width: 100%; }
/* hight - px */
.u_h40 { height: 40px; }
.u_h60 { height: 60px; }
.u_h80 { height: 80px; }
.u_h100 { height: 100px; }
.u_h120 { height: 120px; }
.u_h140 { height: 140px; }
.u_h160 { height: 160px; }
.u_h180 { height: 180px; }
.u_h200 { height: 200px; }
.u_h220 { height: 220px; }
.u_h240 { height: 240px; }
.u_h260 { height: 260px; }
.u_h280 { height: 280px; }
.u_h300 { height: 300px; }
.u_h320 { height: 320px; }
.u_h340 { height: 340px; }
.u_h360 { height: 360px; }
.u_h380 { height: 380px; }
.u_h400 { height: 400px; }
.u_h420 { height: 420px; }
.u_h440 { height: 440px; }
.u_h460 { height: 460px; }
.u_h480 { height: 480px; }
.u_h500 { height: 500px; }
.u_h520 { height: 520px; }
.u_h540 { height: 540px; }
.u_h560 { height: 560px; }
.u_h580 { height: 580px; }
.u_h600 { height: 600px; }
.u_h620 { height: 620px; }
.u_h640 { height: 640px; }
/* border-radius */
.u_b-rad4 { border-radius: 4px; }
.u_b-rad8 { border-radius: 8px; }
.u_b-rad12 { border-radius: 12px; }
.u_b-rad16 { border-radius: 16px; }
.u_b-rad20 { border-radius: 20px; }
.u_b-rad24 { border-radius: 24px; }
.u_b-rad28 { border-radius: 28px; }

/* ========================================== */
/* VIEW POINT
/* ========================================== */

/* テキスト用 */
.u_view { display: block; }
@media (max-width:768px){
.u_view { display: none; }
}

/* pcview */
.u_pcview { display: block; }
@media (max-width:768px){
.u_pcview { display: none; }
}

.u_spview { display: none; }
@media (max-width:768px){
.u_spview { display: block; }
}

/* サイズを伴うオブジェクト用 */
/* PC/TAB(SP兼用)パターン */
.u_lview_01 { display: block; }
.u_mview_01 { display: none; }
@media (max-width: 768px) {
.u_lview_01 { display: none; }
.u_mview_01 { display: block; }
}

/* PC(TAB兼用)/SPパターン */
.u_lview_02 { display: block; }
.u_sview_02 { display: none; }
@media (max-width: 480px) {
.u_lview_02 { display: none; }
.u_sview_02 { display: block; }
}

/* PC/TAB/SPパターン */
.u_lview_03 { display: block; }
.u_mview_03 { display: none; }
.u_sview_03 { display: none; }
@media (max-width: 768px) {
.u_lview_03 { display: none; }
.u_mview_03 { display: block; }
.u_sview_03 { display: none; }
}
@media (max-width: 480px) {
.u_lview_03 { display: none; }
.u_mview_03 { display: none; }
.u_sview_03 { display: block; }
}