@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

/* Basic HTML element settings */
:root {
box-sizing: border-box;
cursor: default;
font: 14px/1.7 sans-serif;
font-feature-settings: "palt";
letter-spacing: 1px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-ms-overflow-style: -ms-autohiding-scrollbar;
overflow-y: scroll;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
margin: 0;
padding: 0;
}

html, body {
box-sizing: border-box;
color: #333;
width: 100%;
}
body {
font-family: 'Roboto', 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
width: 100%;
margin: 0!important;
padding-bottom: 3rem;
}

/* 横はみ出を防止 */
.ovfxh {
overflow-x: hidden;
}

/* 実際のコンテンツ幅を制御 */
.contents_wrap {
width: 96%;
margin: 0 auto 2rem;
}

.w950_wrap {
width: 100%;
margin: 0 auto;
}




/* カテゴリページ等 iframe 内 人気商品ごとに探す SP */
.category_page_bagwal_hotitems {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/*align-items: center;*/
box-sizing: border-box;
}
.category_page_bagwal_hotitems .item {
width: 49.3%;
box-sizing: border-box;
text-decoration: none;
color: #333;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;/* おまじない。これがないとiPhone「実機」でimgが縦に伸びる */
border: 2px solid #dfdfdf;
/*＃999*/
/*box-shadow: 0px 5px 5px #f3f3f3;*/
padding: 1.1rem;
margin-bottom: 1.3rem;
transition: all .2s;
}
.category_page_bagwal_hotitems .item:hover,
.category_page_bagwal_hotitems .item:active {
transform: translateY(3px);
}

.category_page_bagwal_hotitems .item img {
width:100%!important;
max-width:initial!important;
height: auto!important;
display: block;
margin-bottom: 1rem;
transition: all .2s;
}

.category_page_bagwal_hotitems .item:hover img,
.category_page_bagwal_hotitems .item:active img {
opacity: .8;
}

.category_page_bagwal_hotitems .item .text_box {
font-size: .8em;
}

.category_page_bagwal_hotitems .item .title {
font-weight: 600;
display: inline-block;
margin-bottom: .7rem;
}





/* カテゴリページ等 iframe 内 新作 SP */

.category_page_new_items {
width: 96%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/*align-items: center;*/
box-sizing: border-box;
}
.category_page_new_items .item {
width: 32.5%;
height:auto;
box-sizing: border-box;
text-decoration: none;
color: #333;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: top;
/*align-items: flex-start;*/
/* おまじない。これがないとiPhone「実機」でimgが縦に伸びる */
/*border: 1px solid #fee;*/
/*box-shadow: 0px 5px 5px #f3f3f3;*/
/*box-shadow: 0px 3px 2px #f3f3f3;*/
/*padding: .6rem;*/
margin-bottom: 1rem;
transition: all .2s;
}
.category_page_new_items .item:hover,
.category_page_new_items .item:active {
transform: translateY(3px);
}

.category_page_new_items .item img {
width:100%;
max-width:initial;
height: auto;
display: block;
align-self: flex-start;/* おまじない。これがないとiPhone「実機」でimgが縦に伸びる */
transition: all .2s;
margin-bottom: 1rem;
}

.category_page_new_items .item:hover img,
.category_page_new_items .item:active img {
opacity: .8;
}

.category_page_new_items .item .text_box {
font-size: .75em;
width: 100%;
text-align: center;
color: #500;
}

.category_page_new_items .item .title {
font-weight: 500;
display: inline-block;
margin-bottom: .7rem;
}





h1,h2,h3,h4,h5 {
/*margin-bottom: 1.5rem;*/
}

h2 {
background-color: #f6f6f6;
box-shadow: 0 2px 0 #ddd;
color: #333;
font-size: 1.3rem;
font-weight: 500;
padding: 14px 10px 10px 14px;
}

h3 {
background: #fffaf4;
border-left: 4px solid #e78113;
color: #333;
font-size: 1.3rem;
font-weight: 500;
margin-left: .5rem;
padding: .5rem .5rem .4rem .8rem;
}

h4 {
border-left: 3px solid #e78113;
color: #e78113;
font-size: 1.1rem;
font-weight: 500;
margin-left: .5rem;
padding: .5rem .5rem .4rem .8rem;
}

h5 {
background: #fafafa;
border-left: 1px solid #e78113;
color: #e78113;
font-size: 1.1rem;
font-weight: 500;
margin-left: .5rem;
padding: .5rem .5rem .4rem .8rem;
}


strong { font-weight: 500; }
img { width: 100%; }
p { margin: 0; }

table {
width: 100%;
border-left: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
table-layout: fixed;
word-break: break-all;
word-wrap: break-word;
border-collapse: collapse;
}

tr {
border-top: 1px solid #e1e1e1;
min-height: 1px;
}
th, td {
font-size: .9rem;
padding: .5rem .7rem .4rem;
border-left: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
td:first-child, th:first-child {
border-left-width: 0
}
th {
font-weight: 500;
background-color: #f3f3f3;
}
th:first-of-type,
td:first-of-type {
width: 70px;
text-align: center;
}

td + td {
text-align: center;
}

/* .header系の指定 */
.header_main {
display: none;
}

.smpHeader { display: block; }
.ifItemOut { display: none; }

/* PC SP 表示・非表示 */
.pc_show { display: none; }
.sp_show { display: block; }


/*=============== 汎用パーツ群 ===============*/

/* ボックス 薄いグレー かつ 境界線薄いグレー */
.box_bg_gray {
background-color: #f9f9f9;
padding: 1rem;
margin-bottom: 1.5rem;
border: 1px solid #f3f3f3;
}
.box_bg_gray > li {
margin-left: 1rem;
}

.box_bg_white {
background-color: #fff;
padding: 1rem;
margin-bottom: 1.5rem;
border: 1px solid #f3f3f3;
}
.box_bg_white > li {
margin-left: 1.5rem;
}

.box_float_shadow {
border: 1px solid #f1f1f1;
box-shadow: 0 2px 6px #f1f1f1;
padding: .8rem;
}


/*最も基本的な見出し */
.title_text1 {
font-weight: bold;
margin-bottom: 1em;
}

/* 文字サイズ 少し小さい キャプション */
.caption_01 {
font-size: .9rem;
}

/*=============== カラムの指定 ===============*/

/* 1カラム 横幅100% */
.col1 {
margin: 0 auto;
width: 100%;
}
.col1 img {
max-width: 100%;
}

/* 2カラム 50% 50% */
.col2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
width: 100%;
}
.col2 .inn {
width: 46%;
}
.col2 .inn img {
width: 100%;
}

/* カラム数値指定 */

.col1_w300 {
width: 100%;
margin: 0 auto;
}

.col1_w400 {
width: 100%;
margin: 0 auto;
}

.col1_w500 {
width: 100%;
margin: 0 auto;
}

/*====================
ボタンの設定
====================*/

/* Rレッド */
.btn_square_rred /* aタグ */ {
background-color: #bf0000;
border-radius: 5px;
box-shadow:  0 2px 0 #6B0000;
color: #fff;
display: block;
font-size: 1.2rem;
font-weight: 500;
padding: .6rem .8rem .6rem .8rem;
margin: 2rem auto 1rem;
text-align: center;
text-decoration: none;
width: 80%;
transition: all .2s;
}
.btn_square_rred:hover,
.btn_square_rred:active {
background-color: #A90000;
box-shadow:  0 2px 0 #ffffff;
transform: translateY(2px);
}

/* 通常レッド */
.btn_red {
background-color: #ed3d3d;
}
/* ピンク */
.btn_pnk {
background-color: #ff8080; 
}
/*
<div class="single-footer-info-button">
<a href="https://liginc.co.jp/service/web" class="button button-fit">
<span class="button-text">Webサイト制作事業のページへ</span>
<span class="button-icon icon-arrow"></span>
</a>
</div>
*/
.single-footer-info-button {
border: 1px solid #333;
box-shadow: 0 3px 0 #eee;
padding: 0;
text-align: center;
width: 480px;
margin: 0 auto;
border-radius: 5px;
}
.single-footer-info-button a {
color: #333;
display: block;
font-weight: 500;
padding: 1rem;
text-decoration: none;
}
.button-text {
padding: 0 40px;
font-size: 16px;
letter-spacing: .07em;
line-height: 1.75;
}
.icon-arrow {
position: absolute;
top: 50%;
right: 30px;
font-size: 12px;
-webkit-transform: translate(0,-50%);
transform: translate(0,-50%);
}


/* 基本のマージン設定 親要素のpaddng と 子要素 magin-top メインで運用。 */

/* div のマージンを指定 */
section + div,
div + div,
p + div,
table + div,
ul + div,
ol + div,
li + div,
dl + div,
nav + div,
iframe + div,
/* p のマージンを指定 */ 
section + p,
div + p,
p + p,
table + p,
ul + p,
ol + p,
li + p,
iframe + p,
h2 + p,
h3 + p,
h4 + p,
/* section のマージンを指定 */
section + section,
div + section,
p + section,
table + section,
ul + section,
ol + section,
li + section,
dl + section,
nav + section,
iframe + section,
/* table のマージンを指定 */
section + table,
div + table,
p + table,
table + table,
ul + table,
ol + table,
li + table,
dl + table,
nav + table,
iframe + table {
margin-top: 1.5rem;
}

/* h2 のマージンを指定 */
h3 + h2,
h2 + h2,
div + h2,
section + h2,
p + h2,
div + h2,
table + h2,
ul + h2,
ol + h2,
li + h2,
iframe + h3 { margin-top: 2.5rem; }

/* h3 のマージンを指定 */
h3 + h3,
h2 + h3,
div + h3,
section + h3,
p + h3,
div + h3,
table + h3,
ul + h3,
ol + h3,
li + h3,
iframe + h3 { margin-top: 2rem; }

/* h4 のマージンを指定 */
h3 + h4,
h2 + h4,
div + h4,
section + h4,
p + h4,
div + h4,
table + h4,
ul + h4,
ol + h4,
li + h4,
iframe + h4 { margin-top: 2rem; }


/* ul のマージンを指定 */
h3 + ul,
h2 + ul,
div + ul,
section + ul,
p + ul,
div + ul,
table + ul, 
ul + ul,
ol + ul,
iframe + ul { margin-top: 2rem; }

/* iframe単独 のマージンを指定 */
iframe { margin-top: 2.5rem; }

/* マージン 例外 */
.box_float_shadow > h2 {
margin-top: 0;
}

.box_float_shadow + .box_float_shadow {
margin-top: 2rem;
}



/*====================
会社概要ページ
====================*/


/* 横スライド 図の部分*/
/* payment-detail */
.payment-detail {margin-top: 50px}
.payment-detail .payment-detail-title {font-size: 18px; font-weight: normal;border-bottom: 1px solid #ddd;padding: 20px 0;position: relative; margin-top: 50px}
.payment-detail .payment-detail-title::after {content:"";position: absolute;left: 0;bottom: -1px;width:80px; height:1px; background:#2490d0;}
.payment-detail .payment-detail-txt {font-size: 14px; margin-top: 30px}
.payment-detail .payment-detail-txt .caution {color: #E73656}
.payment-detail .payment-detail-img {width: auto;margin-top: 20px;}
.payment-detail .payment-detail-table{width:100%; padding:0; border-top:#f0f0f0 1px solid; margin-top: 20px}
.payment-detail .payment-detail-table th{background:#f0f0f0; border-bottom:#fff 1px solid; padding:30px; white-space:nowrap; font-weight:normal; font-size:15px; width:35%; text-align:left}
.payment-detail .payment-detail-table td{padding:30px 0 30px 30px; text-align:left; vertical-align:middle; border-bottom:#f0f0f0 1px solid; width:65%;font-size: 14px}
.payment-detail .payment-detail-table-ptn2{width:100%;padding:0;border-top:#f0f0f0 1px solid;margin-top: 20px;border-left: #f0f0f0 1px solid;}
.payment-detail .payment-detail-table-ptn2 thead th{background:#f0f0f0;border-bottom:#fff 1px solid;padding:30px;white-space:nowrap;font-weight:normal;font-size:15px;width:35%;text-align: center;border-right: 1px solid #fff;}
.payment-detail .payment-detail-table-ptn2 thead th:last-of-type{border-right:none;}
.payment-detail .payment-detail-table-ptn2 tbody th{border-bottom: #f0f0f0 1px solid;padding:30px;white-space:nowrap;font-weight:normal;font-size:15px;width:35%;text-align: center;border-right: #f0f0f0 1px solid;}
.payment-detail .payment-detail-table-ptn2 tbody td{padding:30px 0 30px 30px;text-align: center;vertical-align:middle;border-bottom:#f0f0f0 1px solid;width: 32.5%;font-size: 14px;border-right: #f0f0f0 1px solid;}
.payment-detail .payment-block-ptn1 { border-left: 1px solid #ddd;margin-top: 15px; padding-left: 20px; font-weight: bold;line-height: 2}
.payment-detail .payment-block-ptn2 {border: 1px solid #ddd;background: #f8f8f8;padding: 20px;margin-top: 15px;}
.payment-detail .payment-block-ptn3 {margin-top: 30px;}

/* table内見出し */
.payment-detail .payment-block-ptn3 .payment-block--label{border-left: none; font-size: 1.2em; color: #e78113;}
.payment-detail .payment-block-ptn3 h5.payment-block--label{border-left: none; font-size: 1.2em; color: #e78113;} /* 一応 */

.payment-detail .payment-block-ptn3 .payment-block__container{margin: 10px 0 0 25px;}
.payment-detail .payment-block-ptn3 .guide__flow{margin-top: 15px;}
.payment-detail .payment-block-ptn3 .flow__list{display: -webkit-box;display: -webkit-flex;display: flex;overflow-x: scroll;scroll-behavior: smooth;-ms-overflow-style: -ms-autohiding-scrollbar;-webkit-overflow-scrolling: touch;width: 95%;}

/* スクロールバーを常時表示 */
.payment-detail .payment-block-ptn3 .flow__list::-webkit-scrollbar {height: 10px;}
.payment-detail .payment-block-ptn3 .flow__list::-webkit-scrollbar-track {margin: 0 2px; background: #f6f6f6; border-radius: 5px;}
.payment-detail .payment-block-ptn3 .flow__list::-webkit-scrollbar-thumb {border-radius: 5px; background: #e1e1e1;}

.payment-detail .payment-block-ptn3 .flow__item{width: calc(25% - 20px);margin: 0 15px 0 25px;position: relative;-webkit-flex-shrink: 0;flex-shrink: 0;}
.payment-detail .payment-block-ptn3 .flow__item.pcCanvas__item{width: calc(38.75% - 20px);}
.payment-detail .payment-block-ptn3 .flow__item::after {left: -28px;position: absolute;border-top: 3px solid #4a90e2;border-right: 3px solid #4a90e2;content: "";width: 8px;height: 8px;top: 50%;-webkit-transform: translate(0,-50%) rotate(45deg);transform: translate(0,-50%) rotate(45deg);}
.payment-detail .payment-block-ptn3 .flow__item:first-of-type::after{display:none}
.payment-detail .payment-block-ptn3 .flow__item .flow__canvas{}
.payment-detail .payment-block-ptn3 .flow__item .flow__canvas .flow__image{display: block;max-width: 100%;height: auto;vertical-align: bottom;}
.payment-detail .payment-block-ptn3 .flow__item  .flow__text{margin-top: 10px;font-size: 0.9em;color: #808080;}

@media screen and (max-width:640px){
.payment-detail {margin-top: 30px}
.payment-detail .payment-detail-title {font-size: 15px;padding: 20px 0;margin: 30px 5% 0}
.payment-detail .payment-detail-txt {font-size: 13px;padding:0 5%}
.payment-detail .payment-detail-img {width: 100%;}
.payment-detail .payment-detail-table,
.payment-detail .payment-detail-table tbody,
.payment-detail .payment-detail-table tr,
.payment-detail .payment-detail-table th,
.payment-detail .payment-detail-table td {display: block;}
.payment-detail .payment-detail-table {border-top: none;}
.payment-detail .payment-detail-table th{width: auto;border-top: 1px solid #e9e9e9;border-bottom: 1px solid #e9e9e9;background: #f3f3f3;padding: 12px 5%;color: #666;font-size: 14px;font-weight: bold;}
.payment-detail .payment-detail-table td{border-bottom: none;padding: 12px 5%;font-size: 13px;width: auto;}
.payment-detail .payment-detail-table-ptn2 thead th{padding:12px 5%;font-size: 12px;}
.payment-detail .payment-detail-table-ptn2 tbody th{padding:12px 5%;font-size: 12px;width:35%;}
.payment-detail .payment-detail-table-ptn2 tbody td{padding:12px 5%;font-size: 12px;}
.payment-detail .payment-block-ptn3 .flow__item{width: calc(32% - 20px);}
.payment-detail .payment-block-ptn3 .flow__item.pcCanvas__item{width: calc(49% - 20px);}


.payment-detail .payment-block-ptn3 .flow__list {
padding-left: 0;
width:100%;
}

/* 楽天ペイメントだけ */

.rpay_table_wrap .payment-detail .payment-block-ptn3 .flow__item {
/* width: calc(25% - 20px); */
margin: 0 15px 0 25px;
position: relative;
-webkit-flex-shrink: 0;
flex-shrink: 0;
height: 850px;
width: calc(78% - 20px);
max-width: 200px;    
}

.rpay_table_wrap .payment-detail .payment-block-ptn3 .flow__item .flow__canvas .flow__image {
display: block;
max-width: 100%;
max-height: 700px;
vertical-align: bottom;
width: auto;
}


}




/*====================
特定商取引法ページ
====================*/

.law th,
.law td {
text-align: left;
 }
.law th:first-of-type,
.law td:first-of-type {
background-color: #f9f9f9;
width: 25%;
text-align: left;
}
.law td:first-of-type {
text-align: center;
}

/*====================
ご利用ガイド(FAQ) ページ
====================*/

#guide_faq h2 {
/*  margin-top: 1.5rem;*/
 }

#guide_faq h3 {
margin-top:2rem;
}
/*
#guide_faq h3 a:link,
#guide_faq h3 a:visited,
#guide_faq h3 a:hover,
#guide_faq h3 a:active {
  color:#96b420;#96b420;
}
*/
/*
#guide_faq p { margin:0; padding:0; }
#guide_faq ul,ol,li { margin:0;}
*/
#guide_faq .acmenu li {
  list-style:none;
  padding-left:15px;
  text-indent:-5px;
/*list-style-type:disc;
padding-left:1rem;
text-indent:1rem;*/
}
#guide_faq .acmenu ul {
  margin:10px 0 5px 0; 
  padding-left: 0;
}
#guide_faq .acmenu li:before {
  content:"";
	width: 6px;
	height: 6px;
	display: inline-block;
	border-radius: 100%;
	background: #e78113;
	position: relative;
	left: -5px;
	top: -3px;
}
#guide_faq .red {
  color:#ff0000;
}

#guide_faq .cap {
  color:#666666;
  font-size:.8rem;
}
#guide_faq .cap_bg {
  margin-top:2rem;
  color:#666666;
  font-size:.8em;
  background: #fafafa;
  padding:1rem;
	padding-left:2rem;
	text-indent:-1rem;
}

#guide_faq dl.acmenu {
  box-sizing: border-box;
  margin:2rem auto 1.5rem;
  width: 95%;
}
#guide_faq .acmenu dt {
  box-sizing: border-box;
  font-weight: 500;
  display:block;
  width: 100%;
  height: auto;
  text-align: left;
  border:#ccc 1px solid;
  cursor:pointer;
  padding:10px;
  padding-right:20px;
    
  /* 矢印用 */ 
  position: relative;
  display: inline-block;
  padding-left:35px;
  text-indent:-25px;
}
#guide_faq .acmenu dt:before {
  content:"Q.";
  font-weight: bold;
  padding-right:10px;
}
#guide_faq .acmenu dt:after {
  content:"";
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #e78113; /*#96b420;*/
  border-right: solid 2px #e78113;
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -4px;
}
#guide_faq .acmenu dd {
  box-sizing: border-box;
  font-weight: normal;
  background:/*#fffcf7*/#fafafa;
  width: 100%;
  height: auto;
  text-align: left;
  border: #ccc 1px solid;
  border-top: none;
  margin-left: 0;
  padding: 10px 10px 15px 10px;
  padding-left: 35px;
  text-indent: -25px;
  display: none;
}
#guide_faq .acmenu dd:before {
  color:#e78113;
  content:"A.";
  font-weight: bold;
  padding-right:10px;
}

#guide_faq .acmenu dt.active:after {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);  
}

#guide_faq .inquiry_attention ul {
  border:1px solid #ff0000;
  padding:10px;
  margin-right:10px;
  background-color:#ffffff;
}

#guide_faq .inquiry_attention ul.black {
  border:1px solid #efefef;
}

#guide_faq .inquiry_attention li+li {
  margin-top:10px;
}


/*====================
幅に関する指定
====================*/

/* 幅 % 指定 */
.w20p { width: 20%; }
.w33p { width: 33.3%; }
.w50p { width: 50%; }
.w60p { width: 60%; }
.w70p { width: 70%; }
.w80p { width: 80%; }
.w90p { width: 90%; }
.w100p { width: 100%; }

/*====================
フォントカラーの指定
====================*/
.red { color: #f00; }
.rred { color: #bf0000; }
.orange { color: #ffa500; }
.orange2 { color: #e78113; }
.darkorange { color: #ff8c00; }
.darkorange2 { color: #BE6800; }

/* 緑系 */
.saddlebrown { color: #8b4513; }
.green { color: #0f0; }
.yellowgreen { color: #9acd32; }
.olivedrab { color: #6b8e23; }
.forestgreen { color: #228b22; }

/* 青系 */
.blue { color: #00f; }

/*====================
フォント 太さの指定
====================*/
.bold { font-weight: 600; }
.normal { font-weight: 500; }
.thin { font-weight: 400; }

/*====================
フォント 大きさの指定
====================*/
.fz08r { font-size: .8rem; }
.fz085r { font-size: .85rem; }
.fz09r { font-size: .9rem; }
.fz095r { font-size: .95rem; }
.fz098r { font-size: .98rem; }
.fz105r { font-size: 1.05rem; }
.fz11r { font-size: 1.1rem; }
.fz12r { font-size: 1.2rem; }
.fz13r { font-size: 1.3rem; }
.fz14r { font-size: 1.4rem; }
.fz15r { font-size: 1.5rem; }
.fz16r { font-size: 1.6rem; }
.fz17r { font-size: 1.7rem; }
.fz18r { font-size: 1.8rem; }
.fz19r { font-size: 1.9rem; }
.fz20r { font-size: 2.0rem; }
.fz25r { font-size: 2.5rem; }

.lgr105 { font-size: 1.05em; }/* larger */
.lgr11 { font-size: 1.1em; }
.lgr12 { font-size: 1.2em; }
.lgr13 { font-size: 1.3em; }
.lgr14 { font-size: 1.4em; }
.lgr15 { font-size: 1.5em; }
.lgr18 { font-size: 1.8em; }
.lgr2 { font-size: 2em; }
.lgr25 { font-size: 2.5em; }
.lgr3 { font-size: 3em; }

/*====================
フォント その他の指定
====================*/
.tac { text-align: center; }


/*====================
余白の指定
====================*/
/* 親要素 padding と隣接セレクタ margin-top メインで運用。
   margin-bottom は極力使わない */
.mt1r { margin-top: 1rem; }
.mt15r { margin-top: 1.5rem; }
.mt2r { margin-top: 2rem; }
.mt25r { margin-top: 2.5rem; }
.mt3r { margin-top: 3rem; }
.mt35r { margin-top: 3rem; }
.mt4r { margin-top: 4rem; }
.mt5r { margin-top: 5rem; }

.mb1r { margin-bottom: 1rem; }
.mb15r { margin-bottom: 1.5rem; }
.mb2r { margin-bottom: 2rem; }
.mb25r { margin-bottom: 2.5rem; }
.mb3r { margin-bottom: 3rem; }
.mb4r { margin-bottom: 4rem; }
.mb5r { margin-bottom: 5rem; }

.mb1e { margin-bottom: 1em; }
.mb2e { margin-bottom: 2em; }
.mb3e { margin-bottom: 3em; }
.mb4e { margin-bottom: 4em; }
.mb5e { margin-bottom: 5em; }


/* 例外 幅調節 */
.w10p { width: 10%; }
.w20p { width: 20%; }
.w30p { width: 30%; }
.w40p { width: 40%; }
.w50p { width: 50%; }
.w60p { width: 60%; }
.w70p { width: 70%; }
.w80p { width: 80%; }
.w90p { width: 90%; }
.w100p { width: 100%; }

/* 例外 スマホでは幅100% */
.w100p_sp { width: 100%; }

.w950 { width: 100%; }



/* 左揃え右揃え */
/* block要素 */
.ml0 { margin-left: 0; }/* m0a; のを一部上書きして 左揃え */
.mr0 { margin-right: 0; }/* m0a; のを一部上書きして 右揃え */
/* inline要素 */
.tal { text-align: left; }/* text-align:centerやright を 上書きしてテキスト左揃え */
.tar { text-align: right; }/* text-align:centerやleft を 上書きしてテキスト右揃え */