@charset "utf-8";
/*
CSS Document - about.css
=================================================
Viewport Settings
=================================================
   ～479px                      スマホ縦
480～697px  (min-width: 480px)  スマホ横対応
698～1023px (min-width: 698px)  タブレット縦対応
1024px～    (min-width: 1024px) PC・タブレット縦(iPadPro)・タブレット横対応
=================================================
*//*
===================================================================================================
[ for About：Q-TAXについて ]
========================
main.about | #main_head_bg
------------------------

================================================================================================ */





/* ================================================================================================
 main.about | #main_head_bg
================================================================================================ */

#content_main.about #main_head_bg{
 background-color: #f6f6f6;
 border-bottom: 1px solid #f2f2f2;
 text-shadow: #fff 0 0 4px;
}
#content_main.about #main_head_lead{
 background-image: url('../img/about/main_head_bg.png');
 background-position: center center;
 background-size: cover;
}


/*=============================================*/
 @media screen and (min-width: 480px) {/* 480～697px｜スマホ横対応 */
/**/}/*========================================*/
 @media screen and (min-width: 698px) {/* 698～1023px｜タブレット縦対応 */
/*=============================================*/

#content_main.about #main_head_bg{
 background-image: url('../img/about/main_head_bg.png');
 /*
 background-position: center center;
 background-size: cover;
 */
 background-position: right bottom;
 background-size: auto 100%;
}
#content_main.about #main_head_lead{ text-shadow: #fff 0 0 4px;}


/**/}/*========================================*/
 @media screen and (min-width: 1024px) {/* 1024px～｜PC・タブレット縦(大型)・タブレット横対応 */
/*=============================================*/

#content_main.about #main_head_bg{
 background-image: url('../img/about/main_head_bg_w.png');
 background-position: center top;
}


/**/}/*========================================*/






.about span.logoimg{
 position: relative; bottom: -3px;
 display: inline-block;
 width: 82px;
 height: 22px;
 margin-right: 3px;
 vertical-align: baseline;
 /* テキストを画像に置換する */
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
 background: url(../img/logo_mini.svg) left center no-repeat;
}







/* ================================================================================================
 #unit01
================================================================================================ */

.about #unit01{}
.about #unit01 .inner{
 background: #fff url(../img/about/pic_cloud.png) center top no-repeat;
}
.about #unit01 h1{
 padding-top: 20px;
 color: var(--color-brn-bold);
 font-size: 140%; font-weight: 700; text-align: center; text-shadow: 0 0 2px #fff;
}
.about #unit01 ul{
 padding-top: 60px;
 max-width: 28em;
 margin-right: auto;
 margin-left: auto;
}
.about #unit01 li{
 position: relative;
 display: inline-block;
 margin-bottom: 10px;
 margin-left: 22px;
 font-size: 105%;
 font-weight: 500; line-height: 1.4; list-style: none;
}
.about #unit01 li:before{
 position: absolute; top: 0.3em; left: -22px; content: "";
 display: block; width: 18px; height: 15px;
 background: url(../img/about/icon_check.png) 0 0 no-repeat;
}
.about #unit01 br.br2{ display: none;}


/*=============================================*/
 @media screen and (min-width: 480px) {/* 480～697px｜スマホ横対応 */
/**/}/*========================================*/
 @media screen and (min-width: 698px) {/* 698～899px｜タブレット縦対応 */
/*=============================================*/
.about #unit01 .inner{ background: none; margin-bottom: 0;}
.about #unit01 .in{ position: relative; display: grid; grid-template-columns: 250px auto; grid-column-gap: 30px; padding: 30px; border: 1px solid var(--color-d6);}
.about #unit01 .in:before{ position: absolute; top: -1px; left: -1px; content: ""; display: block; width: 5px; height: 65px; background: var(--main-color);}
.about #unit01 h1{ position: relative; z-index: 2; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; padding: 0 0 100px;}
.about #unit01 h1:after{ position: absolute; bottom: 5px; right: 50%; transform: translateX(50%); content: ""; z-index: -1; display: block; width: 150px; height: 136px; background: url(../img/about/pic_cloud.png) center 90% no-repeat; background-size: 80% auto;}
.about #unit01 ul{ grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; max-width: 100%; margin: 0; padding-top: 0;}
.about #unit01 li{ position: relative; display: inline-block; margin-bottom: 10px; margin-left: 22px; padding-bottom: 5px; border-bottom: 1px dotted var(--border-line-color-ex-bold);}
.about #unit01 br.br2{ display: block;}
.about p{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; width: 100%; margin-bottom: 0;}

/**/}/*========================================*/
 @media screen and (min-width: 900px) {/* 900～1023px｜OPTION */
/*=============================================*/
.about #unit01 .in{ grid-column-gap: 65px;}


/**/}/*========================================*/
 @media screen and (min-width: 1024px) {/* 1024px～｜PC・タブレット縦(大型)・タブレット横対応 */
/*=============================================*/
.about #unit01 .in{ grid-column-gap: 225px; padding: 30px 10px 30px 45px;}
.about #unit01 h1{ padding: 15px 0 25px;}
.about #unit01 h1:after{ bottom: 5px; right: -200px; transform: translateX(0); background-size: 100% auto;}


/**/}/*========================================*/










/* ================================================================================================
 #unit02
================================================================================================ */

.about #unit02{
 background: var(--bg-color01);
 padding: 20px 0;
}

.about #unit02 h1{
 padding: 20px 0;
 color: var(--color-brn-bold);
 font-size: 140%; font-weight: 700; text-align: center;
}

.about #unit02 div.plc{
 max-width: 32em;
 margin-right: auto; margin-left: auto;
}
.about #unit02 div.plc h2{
 position: relative;
 width: 12em;
 margin: 0 auto 10px auto;
 font-size: 125%; font-weight: 700; line-height: 50px;
}
.about #unit02 div.plc h2:before{
 position: relative; top: 0; left: 0; content: "1";
 display: inline-block; width: 50px; height: 50px; line-height: 50px;
 margin-right: 10px;
 color: #fff; font-size: 135%; font-weight: 700; text-align: center;
 background: url(../img/about/icon_01_bg.png) 0 0 no-repeat;
}
.about #unit02 div.plc:nth-of-type(2) h2:before{ content: "2";}
.about #unit02 div.plc:nth-of-type(3) h2:before{ content: "3";}
.about #unit02 div.plc:nth-of-type(4) h2:before{ content: "4";}
.about #unit02 div.plc:nth-of-type(5) h2:before{ content: "5";}
.about #unit02 dd{}


/*=============================================*/
 @media screen and (min-width: 480px) {/* 480～697px｜スマホ横対応 */
/**/}/*========================================*/
 @media screen and (min-width: 698px) {/* 698～1023px｜タブレット縦対応 */
/*=============================================*/
.about #unit02{ padding: 20px 0 30px 0;}
.about #unit02 .in{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.about #unit02 h1,
.about #unit02 div.plc{ width: calc((100% - 30px) / 2); max-width: 100%; margin: 0;}
.about #unit02 h1{ display: flex; flex-wrap: wrap; justify-content: space-around; align-content: center; font-size: 150%;}
.about #unit02 h1 span.logoimg{ display: block; margin: 0 auto;}
.about #unit02 div.plc{ padding: 15px 0; border-top: 1px dotted var(--border-line-color-ex-bold);}
.about #unit02 div.plc:nth-of-type(1){ border: none;}
.about #unit02 div.plc:nth-of-type(4),
.about #unit02 div.plc:nth-of-type(5){ padding-bottom: 0;}
.about #unit02 div.plc h2{ width: 100%; margin: 0 0 10px 0;}
.about #unit02 div.plc h2:before{ margin-right: 15px;}


/**/}/*========================================*/
 @media screen and (min-width: 1024px) {/* 1024px～｜PC・タブレット縦(大型)・タブレット横対応 */
/*=============================================*/
.about #unit02{ padding: 20px 0 40px 0;}
.about #unit02 h1,
.about #unit02 div.plc{ width: calc((100% - 50px) / 2);}
.about #unit02 h1 span.logoimg{ display: block; margin: 0 auto;}
.about #unit02 div.plc{ padding: 20px 0 25px 0;}

/**/}/*========================================*/










/* ================================================================================================
 #unit03
================================================================================================ */

.about #unit03{
 padding: 40px 0;
}

.about #unit03 h1{
 margin-bottom: 20px;
 color: var(--color-brn-bold);
 font-size: 135%; font-weight: 700; text-align: center;
}

.about #unit03 dl{
 padding-top: 2px;
 border-top: 1px solid var(--border-line-color-bold);
 max-width: 32em;
 margin-right: auto; margin-left: auto;
}
.about #unit03 dt{
 position: relative;
 display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;
 margin-bottom: 2px;
 font-size: 115%;
 font-weight: 700;
}
.about #unit03 dt span.res{
 position: relative;
 display: block;
 width: 56px; height: 65px;
 /* テキストを画像に置換する */
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
 background-position: left center;
 background-repeat: no-repeat;
}
.about #unit03 dl:nth-of-type(1) dt span.res{ background-image: url(../img/about/icon_01_01.png);}
.about #unit03 dl:nth-of-type(2) dt span.res{ background-image: url(../img/about/icon_01_02.png);}
.about #unit03 dl:nth-of-type(3) dt span.res{ background-image: url(../img/about/icon_01_03.png);}
.about #unit03 dt span.lead{
 display: block;
 width: calc(100% - 56px - 20px);
}
.about #unit03 dd{
 position: relative;
 padding-top: calc(90px + 5px * 2);
 border-top: 1px solid var(--border-line-color-bold);
}
.about #unit03 dd:before{
 position: absolute; top: 5px; left: 50%; transform: translateX(-50%); content: "";
 display: block; width: 90px; height: 90px; line-height: 80px;
 background: var(--color-f6);
 border-radius: 100%;
  opacity: 0.7;
}
.about #unit03 dd:after{
 position: absolute; top: 5px; left: 50%; transform: translateX(-50%); content: "";
 display: block; width: 90px; height: 90px; line-height: 80px;
 background: url('../img/about/icon_10.svg') center center no-repeat;
 background-size: 70px auto;
 opacity: 0.9;
}
.about #unit03 dl:nth-of-type(2) dd:after{ background: url('../img/about/icon_11.svg') center center no-repeat; background-size: 70px auto;}
.about #unit03 dl:nth-of-type(3) dd:after{ background: url('../img/about/icon_12.svg') center center no-repeat; background-size: 70px auto;}


/*=============================================*/
 @media screen and (min-width: 480px) {/* 480～697px｜スマホ横対応 */
/**/}/*========================================*/
 @media screen and (min-width: 698px) {/* 698～899px｜タブレット縦対応 */
/*=============================================*/
.about #unit03 dl{ max-width: 100%;}
.about #unit03 dt span.lead br{ display: none;}
.about #unit03 dd{ padding-top: 20px; padding-left: calc(90px + 20px);}
.about #unit03 dd:before,
.about #unit03 dd:after{ top: 15px; left: 0; transform: translateX(0%);}

/**/}/*========================================*/
 @media screen and (min-width: 900px) {/* 900～1023px｜OPTION */
/**/}/*========================================*/
 @media screen and (min-width: 1024px) {/* 1024px～｜PC・タブレット縦(大型)・タブレット横対応 */
/*=============================================*/
.about #unit03 .inner{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.about #unit03 h1{ width: 100%; margin-bottom: 35px; font-size: 145%; text-align: left;}
.about #unit03 h1 br{ display: none;}
.about #unit03 dl{ width: 310px;}
.about #unit03 dt span.lead br{ display: block;}
.about #unit03 dl{ margin: 0; padding: 0; border: 1px solid var(--color-d6);}
.about #unit03 dt{ position: relative; min-height: 65px; margin-bottom: 0; line-height: 1.4;}
.about #unit03 dt span.res{ position: absolute; top: -1px; left: -1px;}
.about #unit03 dt span.lead{ display: block; width: 100%; padding-left: calc(56px + 20px);}
.about #unit03 dd{ padding: 25px; padding-top: calc(90px + 5px * 2); border-top: none;}
.about #unit03 dd:before,
.about #unit03 dd:after{ top: 5px; left: 50%; transform: translateX(-50%);}

/**/}/*========================================*/