@charset "UTF-8"; /******************** グリッド関連 START ********************/ /* Generates all the rules for the grid columns up to the given amount of column */ /* Generates all the rules for the grid column offset up to the given amount of column */ /* Generates all the rules for the grid and columns for the given break point and total of columns */ /* Generates all the rules for the grids and columns */ /* API function to be called to generate a grid config */ /* maximum amount of grid cells to be provided */ /* default breakpoint */ a:hover { opacity: 0.9; text-decoration: none; } .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 100%; } .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 50%; } .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 100%; } .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 100%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 25%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 75%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 25%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 50%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 75%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 100%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 20%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 40%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 60%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 80%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 20%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 40%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 60%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 80%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 100%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 16.66666667%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 83.33333333%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--6 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 16.66666667%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 50%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 83.33333333%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--6 { margin-left: 100%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 14.28571429%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 28.57142857%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 42.85714286%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 57.14285714%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 71.42857143%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--6 { float: left; clear: none; width: 85.71428571%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--7 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 14.28571429%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 28.57142857%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 42.85714286%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 57.14285714%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 71.42857143%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--6 { margin-left: 85.71428571%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--7 { margin-left: 100%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 12.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 25%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 37.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 62.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--6 { float: left; clear: none; width: 75%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--7 { float: left; clear: none; width: 87.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--8 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 12.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 25%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 37.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 50%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 62.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--6 { margin-left: 75%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--7 { margin-left: 87.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--8 { margin-left: 100%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 11.11111111%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 22.22222222%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 44.44444444%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 55.55555556%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--6 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--7 { float: left; clear: none; width: 77.77777778%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--8 { float: left; clear: none; width: 88.88888889%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--9 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 11.11111111%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 22.22222222%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 44.44444444%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 55.55555556%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--6 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--7 { margin-left: 77.77777778%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--8 { margin-left: 88.88888889%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--9 { margin-left: 100%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 10%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 20%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 30%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 40%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--6 { float: left; clear: none; width: 60%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--7 { float: left; clear: none; width: 70%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--8 { float: left; clear: none; width: 80%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--9 { float: left; clear: none; width: 90%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--10 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 10%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 20%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 30%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 40%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 50%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--6 { margin-left: 60%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--7 { margin-left: 70%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--8 { margin-left: 80%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--9 { margin-left: 90%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--10 { margin-left: 100%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 9.09090909%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 18.18181818%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 27.27272727%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 36.36363636%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 45.45454545%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--6 { float: left; clear: none; width: 54.54545455%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--7 { float: left; clear: none; width: 63.63636364%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--8 { float: left; clear: none; width: 72.72727273%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--9 { float: left; clear: none; width: 81.81818182%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--10 { float: left; clear: none; width: 90.90909091%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--11 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 9.09090909%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 18.18181818%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 27.27272727%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 36.36363636%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 45.45454545%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--6 { margin-left: 54.54545455%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--7 { margin-left: 63.63636364%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--8 { margin-left: 72.72727273%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--9 { margin-left: 81.81818182%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--10 { margin-left: 90.90909091%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--11 { margin-left: 100%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 8.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 16.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 25%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 41.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--6 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--7 { float: left; clear: none; width: 58.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--8 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--9 { float: left; clear: none; width: 75%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--10 { float: left; clear: none; width: 83.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--11 { float: left; clear: none; width: 91.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--12 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 8.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 16.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 25%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 41.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--6 { margin-left: 50%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--7 { margin-left: 58.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--8 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--9 { margin-left: 75%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--10 { margin-left: 83.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--11 { margin-left: 91.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--12 { margin-left: 100%; } .aem-Grid.aem-Grid--default--1 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--default--1 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--default--1 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 100%; } .aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 50%; } .aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 100%; } .aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 100%; } .aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 25%; } .aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 75%; } .aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 25%; } .aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 50%; } .aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 75%; } .aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 100%; } .aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 20%; } .aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 40%; } .aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 60%; } .aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 80%; } .aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 20%; } .aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 40%; } .aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 60%; } .aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 80%; } .aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 100%; } .aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 16.66666667%; } .aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 83.33333333%; } .aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--6 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 16.66666667%; } .aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 50%; } .aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 83.33333333%; } .aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--6 { margin-left: 100%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 14.28571429%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 28.57142857%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 42.85714286%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 57.14285714%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 71.42857143%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--6 { float: left; clear: none; width: 85.71428571%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--7 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 14.28571429%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 28.57142857%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 42.85714286%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 57.14285714%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 71.42857143%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--6 { margin-left: 85.71428571%; } .aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--7 { margin-left: 100%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 12.5%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 25%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 37.5%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 62.5%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--6 { float: left; clear: none; width: 75%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--7 { float: left; clear: none; width: 87.5%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--8 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 12.5%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 25%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 37.5%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 50%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 62.5%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--6 { margin-left: 75%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--7 { margin-left: 87.5%; } .aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--8 { margin-left: 100%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 11.11111111%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 22.22222222%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 44.44444444%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 55.55555556%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--6 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--7 { float: left; clear: none; width: 77.77777778%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--8 { float: left; clear: none; width: 88.88888889%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--9 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 11.11111111%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 22.22222222%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 44.44444444%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 55.55555556%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--6 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--7 { margin-left: 77.77777778%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--8 { margin-left: 88.88888889%; } .aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--9 { margin-left: 100%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 10%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 20%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 30%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 40%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--6 { float: left; clear: none; width: 60%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--7 { float: left; clear: none; width: 70%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--8 { float: left; clear: none; width: 80%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--9 { float: left; clear: none; width: 90%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--10 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 10%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 20%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 30%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 40%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 50%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--6 { margin-left: 60%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--7 { margin-left: 70%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--8 { margin-left: 80%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--9 { margin-left: 90%; } .aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--10 { margin-left: 100%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 9.09090909%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 18.18181818%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 27.27272727%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 36.36363636%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 45.45454545%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--6 { float: left; clear: none; width: 54.54545455%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--7 { float: left; clear: none; width: 63.63636364%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--8 { float: left; clear: none; width: 72.72727273%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--9 { float: left; clear: none; width: 81.81818182%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--10 { float: left; clear: none; width: 90.90909091%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--11 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 9.09090909%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 18.18181818%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 27.27272727%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 36.36363636%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 45.45454545%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--6 { margin-left: 54.54545455%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--7 { margin-left: 63.63636364%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--8 { margin-left: 72.72727273%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--9 { margin-left: 81.81818182%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--10 { margin-left: 90.90909091%; } .aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--11 { margin-left: 100%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--1 { float: left; clear: none; width: 8.33333333%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--2 { float: left; clear: none; width: 16.66666667%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--3 { float: left; clear: none; width: 25%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--4 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--5 { float: left; clear: none; width: 41.66666667%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--6 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--7 { float: left; clear: none; width: 58.33333333%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--8 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--9 { float: left; clear: none; width: 75%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--10 { float: left; clear: none; width: 83.33333333%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--11 { float: left; clear: none; width: 91.66666667%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--12 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--0 { margin-left: 0%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--1 { margin-left: 8.33333333%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--2 { margin-left: 16.66666667%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--3 { margin-left: 25%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--4 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--5 { margin-left: 41.66666667%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--6 { margin-left: 50%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--7 { margin-left: 58.33333333%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--8 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--9 { margin-left: 75%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--10 { margin-left: 83.33333333%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--11 { margin-left: 91.66666667%; } .aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--12 { margin-left: 100%; } .aem-Grid > .aem-GridColumn.aem-GridColumn--default--newline { /* newline behavior */ display: block; clear: both !important; } .aem-Grid > .aem-GridColumn.aem-GridColumn--default--none { /* none behavior */ display: block; clear: none !important; float: left; } .aem-Grid > .aem-GridColumn.aem-GridColumn--default--hide { /* hide behavior */ display: none; } /* phone breakpoint */ @media (max-width: 640px) { .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 100%; } .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 50%; } .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 100%; } .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 100%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 25%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 75%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 25%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 50%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 75%; } .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 100%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 20%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 40%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 60%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 80%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 20%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 40%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 60%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 80%; } .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 100%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 16.66666667%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 83.33333333%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--6 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 16.66666667%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 50%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 83.33333333%; } .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--6 { margin-left: 100%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 14.28571429%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 28.57142857%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 42.85714286%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 57.14285714%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 71.42857143%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--6 { float: left; clear: none; width: 85.71428571%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--7 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 14.28571429%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 28.57142857%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 42.85714286%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 57.14285714%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 71.42857143%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--6 { margin-left: 85.71428571%; } .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--7 { margin-left: 100%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 12.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 25%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 37.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 62.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--6 { float: left; clear: none; width: 75%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--7 { float: left; clear: none; width: 87.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--8 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 12.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 25%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 37.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 50%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 62.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--6 { margin-left: 75%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--7 { margin-left: 87.5%; } .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--8 { margin-left: 100%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 11.11111111%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 22.22222222%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 44.44444444%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 55.55555556%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--6 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--7 { float: left; clear: none; width: 77.77777778%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--8 { float: left; clear: none; width: 88.88888889%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--9 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 11.11111111%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 22.22222222%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 44.44444444%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 55.55555556%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--6 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--7 { margin-left: 77.77777778%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--8 { margin-left: 88.88888889%; } .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--9 { margin-left: 100%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 10%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 20%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 30%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 40%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--6 { float: left; clear: none; width: 60%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--7 { float: left; clear: none; width: 70%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--8 { float: left; clear: none; width: 80%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--9 { float: left; clear: none; width: 90%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--10 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 10%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 20%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 30%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 40%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 50%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--6 { margin-left: 60%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--7 { margin-left: 70%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--8 { margin-left: 80%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--9 { margin-left: 90%; } .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--10 { margin-left: 100%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 9.09090909%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 18.18181818%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 27.27272727%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 36.36363636%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 45.45454545%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--6 { float: left; clear: none; width: 54.54545455%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--7 { float: left; clear: none; width: 63.63636364%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--8 { float: left; clear: none; width: 72.72727273%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--9 { float: left; clear: none; width: 81.81818182%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--10 { float: left; clear: none; width: 90.90909091%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--11 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 9.09090909%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 18.18181818%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 27.27272727%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 36.36363636%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 45.45454545%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--6 { margin-left: 54.54545455%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--7 { margin-left: 63.63636364%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--8 { margin-left: 72.72727273%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--9 { margin-left: 81.81818182%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--10 { margin-left: 90.90909091%; } .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--11 { margin-left: 100%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 8.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 16.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 25%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 41.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--6 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--7 { float: left; clear: none; width: 58.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--8 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--9 { float: left; clear: none; width: 75%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--10 { float: left; clear: none; width: 83.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--11 { float: left; clear: none; width: 91.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--12 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 8.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 16.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 25%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 41.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--6 { margin-left: 50%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--7 { margin-left: 58.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--8 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--9 { margin-left: 75%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--10 { margin-left: 83.33333333%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--11 { margin-left: 91.66666667%; } .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--12 { margin-left: 100%; } .aem-Grid.aem-Grid--phone--1 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--phone--1 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--phone--1 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 100%; } .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 50%; } .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 100%; } .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 100%; } .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 25%; } .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 75%; } .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 25%; } .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 50%; } .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 75%; } .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 100%; } .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 20%; } .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 40%; } .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 60%; } .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 80%; } .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 20%; } .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 40%; } .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 60%; } .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 80%; } .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 100%; } .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 16.66666667%; } .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 83.33333333%; } .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--6 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 16.66666667%; } .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 50%; } .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 83.33333333%; } .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--6 { margin-left: 100%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 14.28571429%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 28.57142857%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 42.85714286%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 57.14285714%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 71.42857143%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--6 { float: left; clear: none; width: 85.71428571%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--7 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 14.28571429%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 28.57142857%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 42.85714286%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 57.14285714%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 71.42857143%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--6 { margin-left: 85.71428571%; } .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--7 { margin-left: 100%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 12.5%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 25%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 37.5%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 62.5%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--6 { float: left; clear: none; width: 75%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--7 { float: left; clear: none; width: 87.5%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--8 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 12.5%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 25%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 37.5%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 50%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 62.5%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--6 { margin-left: 75%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--7 { margin-left: 87.5%; } .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--8 { margin-left: 100%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 11.11111111%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 22.22222222%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 44.44444444%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 55.55555556%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--6 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--7 { float: left; clear: none; width: 77.77777778%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--8 { float: left; clear: none; width: 88.88888889%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--9 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 11.11111111%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 22.22222222%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 44.44444444%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 55.55555556%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--6 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--7 { margin-left: 77.77777778%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--8 { margin-left: 88.88888889%; } .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--9 { margin-left: 100%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 10%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 20%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 30%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 40%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--6 { float: left; clear: none; width: 60%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--7 { float: left; clear: none; width: 70%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--8 { float: left; clear: none; width: 80%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--9 { float: left; clear: none; width: 90%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--10 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 10%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 20%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 30%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 40%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 50%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--6 { margin-left: 60%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--7 { margin-left: 70%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--8 { margin-left: 80%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--9 { margin-left: 90%; } .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--10 { margin-left: 100%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 9.09090909%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 18.18181818%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 27.27272727%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 36.36363636%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 45.45454545%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--6 { float: left; clear: none; width: 54.54545455%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--7 { float: left; clear: none; width: 63.63636364%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--8 { float: left; clear: none; width: 72.72727273%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--9 { float: left; clear: none; width: 81.81818182%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--10 { float: left; clear: none; width: 90.90909091%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--11 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 9.09090909%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 18.18181818%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 27.27272727%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 36.36363636%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 45.45454545%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--6 { margin-left: 54.54545455%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--7 { margin-left: 63.63636364%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--8 { margin-left: 72.72727273%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--9 { margin-left: 81.81818182%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--10 { margin-left: 90.90909091%; } .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--11 { margin-left: 100%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--1 { float: left; clear: none; width: 8.33333333%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--2 { float: left; clear: none; width: 16.66666667%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--3 { float: left; clear: none; width: 25%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--4 { float: left; clear: none; width: 33.33333333%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--5 { float: left; clear: none; width: 41.66666667%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--6 { float: left; clear: none; width: 50%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--7 { float: left; clear: none; width: 58.33333333%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--8 { float: left; clear: none; width: 66.66666667%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--9 { float: left; clear: none; width: 75%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--10 { float: left; clear: none; width: 83.33333333%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--11 { float: left; clear: none; width: 91.66666667%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--12 { float: left; clear: none; width: 100%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--0 { margin-left: 0%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--1 { margin-left: 8.33333333%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--2 { margin-left: 16.66666667%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--3 { margin-left: 25%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--4 { margin-left: 33.33333333%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--5 { margin-left: 41.66666667%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--6 { margin-left: 50%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--7 { margin-left: 58.33333333%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--8 { margin-left: 66.66666667%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--9 { margin-left: 75%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--10 { margin-left: 83.33333333%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--11 { margin-left: 91.66666667%; } .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--12 { margin-left: 100%; } .aem-Grid > .aem-GridColumn.aem-GridColumn--phone--newline { /* newline behavior */ display: block; clear: both !important; } .aem-Grid > .aem-GridColumn.aem-GridColumn--phone--none { /* none behavior */ display: block; clear: none !important; float: left; } .aem-Grid > .aem-GridColumn.aem-GridColumn--phone--hide { /* hide behavior */ display: none; } } @media (min-width: 641px) and (max-width: 767px) { .aem-Grid > .aem-GridColumn.aem-GridColumn--phone--hide { display: block; } } /******************** グリッド関連 END ********************/ /******************** ＰＣ、ＳＰ共通 ********************/ /********** 全体 **********/ *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: 'Noto Sans JP', sans-serif; font-style: normal; font-size: 16px; line-height: 24px; } @-moz-document url-prefix() { body { font-family: '游ゴシック Medium','Yu Gothic Medium','游ゴシック体',YuGothic,'Hiragino Sans W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; } } .root { overflow-x: hidden; } .forPcBlock { display: block !important; } .forPcFlex { display: flex !important; } .forSpBlock, .forSpFlex{ display: none !important; } .break_word{ word-wrap:break-word; } #main{ width:1064px; margin: 0 auto; } /********** 横幅関連 **********/ /* グリッド無効 */ .grid_invalid { width: auto !important; } /********** 余白スタイル **********/ /* 上 */ .maT0 { margin-top: 0px !important; } .maT0 h1, .maT0 h2, .maT0 h3, .maT0 h4 { margin-top: 0px !important; } .maT80 { margin-top: 80px !important; } /* 下 */ .maB0 { margin-bottom: 0px !important; } .maB8 { margin-bottom: 8px !important; } .maB16 { margin-bottom: 16px !important; } .maB20 { margin-bottom:20px !important; } .maB24 { margin-bottom:24px !important; } .maB30 { margin-bottom:30px !important; } .maB32 { margin-bottom:32px !important; } .maB40 { margin-bottom:40px !important; } .maB60 { margin-bottom:60px !important; } .maB80 { margin-bottom:80px !important; } .maB120 { margin-bottom:120px !important; } div.title[class*=" maB"].title h1, div.title[class*=" maB"].title h2, div.title[class*=" maB"].title h3, div.title[class*=" maB"].title h4 { margin-bottom: 0 !important; } /* 外側パディング */ /* 左 */ .paL4 { padding-left:4px !important; } .paL16 { padding-left:16px !important; } /* 右 */ .paR4 { padding-right:4px !important; } span.bbe{ position: relative; } span.bbe::before{ position: absolute; content: ""; background-color: #FFF68D; width: 540px; height: 10px; bottom: 5px; right: 0; left: -15px; margin: 0 auto; z-index: -1; } @media print, screen and (max-width: 640px) { span.bbe::before{ width: 292px; height: 7px; bottom: 0px; right: 0; left: -5px; } } /* コンテナ内側パディング */ /* 上 */ .container_inside_paT0 > .cmp-container{ padding-top: 0px !important; } .container_inside_paT16 > .cmp-container{ padding-top: 16px !important; } .container_inside_paT24 > .cmp-container{ padding-top: 24px !important; } .container_inside_paT32 > .cmp-container{ padding-top: 32px !important; } /* 下 */ .container_inside_paB0 > .cmp-container { padding-bottom: 0px !important; } .container_inside_paB24 > .cmp-container { padding-bottom: 24px !important; } .container_inside_paB32 > .cmp-container { padding-bottom: 32px !important; } /* 左 */ .container_inside_paL16 > .cmp-container { padding-left: 16px !important; } .container_inside_paL24 > .cmp-container { padding-left: 24px !important; } .container_inside_paL40 > .cmp-container { padding-left: 40px !important; } /* 右 */ .container_inside_paR24 > .cmp-container { padding-right: 24px !important; } .container_inside_paR40 > .cmp-container { padding-right: 40px !important; } /********** ユーザー エージェント スタイルシート打消し **********/ p{ margin-block-start: 0; margin-block-end: 0; } h1, h2, h3, h4{ margin-block-start: 0; } table { border-spacing: 0; } th { text-align: left; } button { font-family: 'GenJyuuGothic'; } /********** タイトルコンポーネント **********/ /* H1 */ h1 { font-weight: bold; font-size: 34px; line-height: 51px; margin-bottom:24px; color: #272827; } .h1_underline h1{ font-size: 40px; line-height: 40px; margin-bottom: 40px; position: relative; padding-bottom: 21px; text-align: center; } .h1_underline h1::before { position: absolute; bottom: 0px; left: calc(50% - 40px); width: 80px; height: 5px; content: ''; border-radius: 10px; background: linear-gradient(90deg, rgb(70, 193, 200), rgb(70, 168, 188)); } .h1_zerokarachan h1{ font-size: 40px; line-height: 40px; position: relative; text-align: center; margin-bottom: 0; } .h1_zerokarachan { margin-bottom: 60px; } .h1_zerokarachan h1 p{ display: flex; align-items: center; justify-content: center; } .h1_zerokarachan h1 p img{ margin-right: 16px; width: 110px; height: 80px; } @media all and (min-width:641px){ .h1_zerokarachan h1{ margin-top: 64px; } } /* H2 */ h2 { position: relative; font-weight: bold; font-size: 24px; line-height: 36px; margin-top: 80px; margin-bottom:40px; padding-left: 21px; } div.text + div.title:nth-of-type(n+2) h2 { margin-top: 64px; } div.title + div.title:nth-of-type(n+2) h2 { margin-top: 56px; } div.green_line + div.title:nth-of-type(n+2) h2,div.light_green_line + div.title:nth-of-type(n+2) h2, div.gray_line + div.title:nth-of-type(n+2) h2,div.beige + div.title:nth-of-type(n+2) h2, div.dark_beige + div.title:nth-of-type(n+2) h2,div.aboveline_title + div.title:nth-of-type(n+2) h2, div.aboveline_title_green + div.title:nth-of-type(n+2) h2,div.aboveline_title_light_green + div.title:nth-of-type(n+2) h2, div.aboveline_title_short + div.title:nth-of-type(n+2) h2,div.aboveline_title.orange + div.title:nth-of-type(n+2) h2, div.aboveline_title_short.orange + div.title:nth-of-type(n+2) h2 { margin-top: 40px; } h2::before{ position: absolute; left: 0; width: 6px; height: 100%; content: ''; border-radius: 8px; background: #23A0AE } /* H3 */ h3 { font-weight: bold; font-size: 20px; line-height: 30px; margin-top: 64px; margin-bottom:32px; border-bottom: 3px solid #23A0AE; } div.text + div.title:nth-of-type(n+2) h3 { margin-top: 48px; } div.title + div.title:nth-of-type(n+2) h3 { margin-top: 24px; } div.green_line + div.title:nth-of-type(n+2) h3,div.light_green_line + div.title:nth-of-type(n+2) h3, div.gray_line + div.title:nth-of-type(n+2) h3,div.beige + div.title:nth-of-type(n+2) h3, div.dark_beige + div.title:nth-of-type(n+2) h3,div.aboveline_title + div.title:nth-of-type(n+2) h3, div.aboveline_title_green + div.title:nth-of-type(n+2) h3,div.aboveline_title_light_green + div.title:nth-of-type(n+2) h3, div.aboveline_title_short + div.title:nth-of-type(n+2) h3,div.aboveline_title.orange + div.title:nth-of-type(n+2) h3, div.aboveline_title_short.orange + div.title:nth-of-type(n+2) h3 { margin-top: 24px; } /* H4 */ h4 { position: relative; font-weight: bold; font-size: 18px; line-height: 27px; margin-top: 56px; margin-bottom:24px; padding-left: 24px; } div.text + div.title:nth-of-type(n+2) h4 { margin-top: 40px; } div.title + div.title:nth-of-type(n+2) h4 { margin-top: 24px; } div.green_line + div.title:nth-of-type(n+2) h4,div.light_green_line + div.title:nth-of-type(n+2) h4, div.gray_line + div.title:nth-of-type(n+2) h4,div.beige + div.title:nth-of-type(n+2) h4, div.dark_beige + div.title:nth-of-type(n+2) h4,div.aboveline_title + div.title:nth-of-type(n+2) h4, div.aboveline_title_green + div.title:nth-of-type(n+2) h4,div.aboveline_title_light_green + div.title:nth-of-type(n+2) h4, div.aboveline_title_short + div.title:nth-of-type(n+2) h4,div.aboveline_title.orange + div.title:nth-of-type(n+2) h4, div.aboveline_title_short.orange + div.title:nth-of-type(n+2) h4 { margin-top: 16px; } h4::before{ position: absolute; top: 6px; left: 0; width: 14px; height: 14px; content: ''; background: #23A0AE } .detail__title4 { display: block; font-weight: 700; } /********** ボタンコンポーネント **********/ /* ボタンスタイルグループ設定 */ .primary_Button .cmp-button, .primary_Button_s .cmp-button, .secondary_Button .cmp-button, .tertiary_Button .cmp-button{ width: auto; min-width: 400px; max-width: 100%; display: inline-flex; text-decoration: none; font-weight: bold; font-size: 20px; text-align: center; vertical-align: middle; padding: 14px 0; transition: 0.2s; position: relative; z-index: 0; flex-direction: column; justify-content: center; overflow: hidden; } .secondary_Button .cmp-button::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0; display: block; z-index: -1; transition: .5s; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15); border-radius: 100px; } .primary_Button .cmp-button p, .primary_Button_s .cmp-button p, .secondary_Button .cmp-button p, .tertiary_Button .cmp-button p{ padding-left: 40px; padding-right: 40px; } .primary_Button_s.icon_blank .cmp-button p{ padding-left: 32px; padding-right: 48px; } .primary_Button .cmp-button:after, .primary_Button_s .cmp-button:after, .secondary_Button .cmp-button:after, .tertiary_Button .cmp-button:after{ position: absolute; right: 16px; top: 50%; content: " "; width: 1.0em; height: 1.0em; margin-top: -0.5em; background-size: contain; } .primary_Button:not(.disabled) .cmp-button:hover::before, .primary_Button_s:not(.disabled) .cmp-button:hover::before, .tertiary_Button:not(.disabled) .cmp-button:hover::before{ width: 100%; } /* ボタンスタイル設定 */ .primary_Button .cmp-button, .primary_Button_s .cmp-button{ color: #FFFFFF; background: #EB7F1B; border: 2px solid #EB7F1B; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15); border-radius: 100px; } .primary_Button_s .cmp-button{ min-width: 240px; } .secondary_Button .cmp-button{ color: #fff; background: #00819C; border: 1px solid #D3DBE5; border-radius: 4px; font-size: 16px; line-height: 150%; font-weight: 700; min-width: 320px; box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25); } .secondary_Button .cmp-button:hover{ opacity: 0.7; } .tertiary_Button .cmp-button{ color: #1693AD; background: #FFFFFF; border: 1px solid #D3DBE5; border-radius: 4px; font-size: 18px; padding: 16.5px 0; min-width: 320px; height: 60px; position: relative; } .tertiary_Button .cmp-button::before{ position: absolute; right: 29px; top: 39%; content: " "; height: 16px; width: 16px; background: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/icon_arrow.svg) no-repeat center right; background-size: contain; } .tertiary_Button .cmp-button:hover{ opacity: 0.6; } .primary_Button .cmp-button:after, .primary_Button_s .cmp-button:after { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2212%22%20height%3D%2220%22%20viewBox%3D%220%200%2012%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%2018L10%2010L2%202%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat center right; } .primary_Button.icon_blank .cmp-button:after, .primary_Button_s.icon_blank .cmp-button:after { background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16667 14C0.855556 14 0.583333 13.8833 0.35 13.65C0.116667 13.4167 0 13.1444 0 12.8333V1.16667C0 0.855556 0.116667 0.583333 0.35 0.35C0.583333 0.116667 0.855556 0 1.16667 0H7V1.16667H1.16667V12.8333H12.8333V7H14V12.8333C14 13.1444 13.8833 13.4167 13.65 13.65C13.4167 13.8833 13.1444 14 12.8333 14H1.16667ZM10.5 5.83333V3.5H8.16667V2.33333H10.5V0H11.6667V2.33333H14V3.5H11.6667V5.83333H10.5Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } .secondary_Button .cmp-button:after { background: url('/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/header_icon_arrow.svg') no-repeat center right; } .secondary_Button.icon_blank .cmp-button:after { background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16667 14C0.855556 14 0.583333 13.8833 0.35 13.65C0.116667 13.4167 0 13.1444 0 12.8333V1.16667C0 0.855556 0.116667 0.583333 0.35 0.35C0.583333 0.116667 0.855556 0 1.16667 0H7V1.16667H1.16667V12.8333H12.8333V7H14V12.8333C14 13.1444 13.8833 13.4167 13.65 13.65C13.4167 13.8833 13.1444 14 12.8333 14H1.16667ZM10.5 5.83333V3.5H8.16667V2.33333H10.5V0H11.6667V2.33333H14V3.5H11.6667V5.83333H10.5Z' fill='%23EB7F1B'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } .tertiary_Button.icon_blank .cmp-button:after { background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16667 14C0.855556 14 0.583333 13.8833 0.35 13.65C0.116667 13.4167 0 13.1444 0 12.8333V1.16667C0 0.855556 0.116667 0.583333 0.35 0.35C0.583333 0.116667 0.855556 0 1.16667 0H7V1.16667H1.16667V12.8333H12.8333V7H14V12.8333C14 13.1444 13.8833 13.4167 13.65 13.65C13.4167 13.8833 13.1444 14 12.8333 14H1.16667ZM10.5 5.83333V3.5H8.16667V2.33333H10.5V0H11.6667V2.33333H14V3.5H11.6667V5.83333H10.5Z' fill='%23272827'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } /* ボタン装飾 */ /* 影付き */ .primary_Button.shadow_button .cmp-button, .primary_Button_s.shadow_button .cmp-button, .secondary_Button.shadow_button .cmp-button, .tertiary_Button.shadow_button .cmp-button{ box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8); } /* 矢印付き */ .primary_Button.allow_button .cmp-button:after, .primary_Button_s.allow_button .cmp-button:after, .secondary_Button.allow_button .cmp-button:after, .tertiary_Button.allow_button .cmp-button:after{ left: 20px; } /* 破線 */ .primary_Button.dashed_line_button .cmp-button, .primary_Button_s.dashed_line_button .cmp-button, .secondary_Button.dashed_line_button .cmp-button, .tertiary_Button.dashed_line_button .cmp-button{ border: 2px dashed #272827; } /* 幅変更 */ .width_100 .cmp-button{ width: 100%; min-width: 100%; } /* 左右中央寄せ */ .cmp-button_center { text-align: center; } /* テキストリンクボタン */ .textLink_16px_SP14px_arrow .cmp-button, .textLink_16px_SP14px_blank .cmp-button, .textLink_16px_SP14px_black_arrow .cmp-button, .textLink_16px_SP14px_black_blank .cmp-button, .textLink_14px_SP12px_arrow .cmp-button, .textLink_14px_SP12px_blank .cmp-button, .textLink_12px_SP10px_arrow .cmp-button, .textLink_12px_SP10px_blank .cmp-button { display: inline-block; border: none; font-weight: 500; font-size: 16px; color: #3D9BB9; text-underline-offset: 0.4ex; text-align: left; vertical-align: middle; position: relative; padding-right: 1.5em; } div.text + div.textLink_16px_SP14px_arrow,div.text + div.textLink_16px_SP14px_black_arrow, div.text + div.textLink_16px_SP14px_blank,div.text + div.textLink_16px_SP14px_black_blank, div.text + div.textLink_14px_SP12px_arrow,div.text + div.textLink_14px_SP12px_blank, div.text + div.textLink_12px_SP10px_arrow,div.text + div.textLink_12px_SP10px_blank, div.text + div.anchor_up,div.text + div.anchor_down{ margin-top: 8px; } .textLink_14px_SP12px_arrow .cmp-button, .textLink_14px_SP12px_blank .cmp-button { font-size: 14px; line-height: 21px } .textLink_12px_SP10px_arrow .cmp-button, .textLink_12px_SP10px_blank .cmp-button { font-size: 12px; line-height: 18px } .textLink_16px_SP14px_black_arrow .cmp-button, .textLink_16px_SP14px_black_blank .cmp-button { color: #272827; text-decoration: none; width:100%; padding-right: 32px; } .textLink_16px_SP14px_arrow .cmp-button:after, .textLink_16px_SP14px_blank .cmp-button:after, .textLink_16px_SP14px_black_arrow .cmp-button:after, .textLink_16px_SP14px_black_blank .cmp-button:after, .textLink_14px_SP12px_arrow .cmp-button:after, .textLink_14px_SP12px_blank .cmp-button:after, .textLink_12px_SP10px_arrow .cmp-button:after, .textLink_12px_SP10px_blank .cmp-button:after { position: absolute; top: calc(50% - 1em / 2); right: 0px; content:" "; width: 1em; height: 1em; margin-left:8px; display: inline-block; vertical-align: -3px; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16667 14C0.855556 14 0.583333 13.8833 0.35 13.65C0.116667 13.4167 0 13.1444 0 12.8333V1.16667C0 0.855556 0.116667 0.583333 0.35 0.35C0.583333 0.116667 0.855556 0 1.16667 0H7V1.16667H1.16667V12.8333H12.8333V7H14V12.8333C14 13.1444 13.8833 13.4167 13.65 13.65C13.4167 13.8833 13.1444 14 12.8333 14H1.16667ZM10.5 5.83333V3.5H8.16667V2.33333H10.5V0H11.6667V2.33333H14V3.5H11.6667V5.83333H10.5Z' fill='%233D9BB9'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } .textLink_16px_SP14px_arrow .cmp-button:after, .textLink_14px_SP12px_arrow .cmp-button:after, .textLink_12px_SP10px_arrow .cmp-button:after { background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 11L6 6L1 1' stroke='%233D9BB9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center left; background-size: contain; } .textLink_16px_SP14px_black_blank .cmp-button:after { background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16667 14C0.855556 14 0.583333 13.8833 0.35 13.65C0.116667 13.4167 0 13.1444 0 12.8333V1.16667C0 0.855556 0.116667 0.583333 0.35 0.35C0.583333 0.116667 0.855556 0 1.16667 0H7V1.16667H1.16667V12.8333H12.8333V7H14V12.8333C14 13.1444 13.8833 13.4167 13.65 13.65C13.4167 13.8833 13.1444 14 12.8333 14H1.16667ZM10.5 5.83333V3.5H8.16667V2.33333H10.5V0H11.6667V2.33333H14V3.5H11.6667V5.83333H10.5Z' fill='%23272827'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } .textLink_16px_SP14px_black_arrow .cmp-button:after { right: -6px; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 11L6 6L1 1' stroke='%23272827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center left; background-size: contain; } /* アンカーリンクボタン */ .anchor_up .cmp-button, .anchor_down .cmp-button { display: inline-block; border: none; font-weight: 500; color: #3D9BB9; text-underline-offset: 0.4ex; text-align: left; vertical-align: middle; position: relative; padding-left: 21px; } .anchor_up .cmp-button::before, .anchor_down .cmp-button::before { position: absolute; top: calc(50% - 0.8em / 2); left: 0; content:" "; width: 0.8em; height: 0.8em; display: inline-block; vertical-align: -3px; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 6.50391L6 1.50391L1 6.50391' stroke='%233D9BB9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } .anchor_down .cmp-button::before { background: url("data:image/svg+xml;charset=utf8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.50391L6 6.50391L11 1.50391' stroke='%233D9BB9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } /********** テキストコンポーネント **********/ /* フォントサイズと行間の組み合わせ */ span[style*="font-size:"] { line-height: 1.5em; } /* テキストコンポーネント下マージン */ .text_magazine{ margin-bottom: 16px; } /* 通常リスト(非装飾) */ .text_magazine ul { padding-left: 24px; } .text_magazine ul > li::marker { color: #000; font-size: 1em; } .text_magazine ul > li > ul { padding-left: 14px; list-style: none; } .text_magazine ul > li > ul li { padding-left: 1em; text-indent: -1em; } .text_magazine ul > li > ul li::before { content: ''; width: 12px; height: 2px; border-radius: 10px; background: #000; position: relative; left: -12px; top: -4px; display: inline-block; } .text_magazine ul li + li { margin-top: 8px; } /* 数値リスト */ .text_magazine ol { counter-reset: my-counter; list-style: none; padding: 0; margin: 0; } .text_magazine ol li { padding-left: 30px; position: relative; } .text_magazine ol li:before { content: counter(my-counter); counter-increment: my-counter; background-color: #23A0AE; border-radius: 50%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; height: 1.5em; width: 1.5em; color: #fff; font-size: 75%; line-height: 1em; position: absolute; top: 3px; left: 0; } .text_magazine ol li + li { margin-top: 8px; } /* テーブル */ table { border: 1px solid #d4d4d4; table-layout: fixed; overflow: hidden; } tbody { -webkit-text-size-adjust: 100%; } table tr th, table tr td { padding: 16px; border: 1px solid #e5e5e5; } table tr th { font-weight: bold; background: #f2f2f2 !important; } .detail__table tr:nth-child(even) { background: #fafafa } .detail__table tr:nth-child(even) td{ background-color: #fff; } /* テキスト内リンク */ .text_magazine .cmp-text a { font-weight: 500; color: #3D9BB9; text-underline-offset: 0.4ex; } .text_magazine .cmp-text a[target="_self"]:not(:has(.primary_Button_text)):after, .text_magazine .cmp-text a[target="_blank"]:not(:has(.primary_Button_text)):after, .text_magazine .cmp-text a[target="_Winpop"]:not(:has(.primary_Button_text)):after { content:" "; width: 1em; height: 1em; margin-left:8px; display: inline-block; vertical-align: -3px; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16667 14C0.855556 14 0.583333 13.8833 0.35 13.65C0.116667 13.4167 0 13.1444 0 12.8333V1.16667C0 0.855556 0.116667 0.583333 0.35 0.35C0.583333 0.116667 0.855556 0 1.16667 0H7V1.16667H1.16667V12.8333H12.8333V7H14V12.8333C14 13.1444 13.8833 13.4167 13.65 13.65C13.4167 13.8833 13.1444 14 12.8333 14H1.16667ZM10.5 5.83333V3.5H8.16667V2.33333H10.5V0H11.6667V2.33333H14V3.5H11.6667V5.83333H10.5Z' fill='%233D9BB9'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } .text_magazine .cmp-text a[target="_self"]:not(:has(.primary_Button_text)):after { background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 11L6 6L1 1' stroke='%233D9BB9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center left; background-size: contain; } @-moz-document url-prefix(){ /* 現状FireFoxにhasがないのでjsでクラスを設定してアイコンを表示する */ .text_magazine .cmp-text a[target="_self"].iconFireFox:after, .text_magazine .cmp-text a[target="_blank"].iconFireFox:after, .text_magazine .cmp-text a[target="_Winpop"].iconFireFox:after { content:" "; width: 1em; height: 1em; margin-left:8px; display: inline-block; vertical-align: -3px; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16667 14C0.855556 14 0.583333 13.8833 0.35 13.65C0.116667 13.4167 0 13.1444 0 12.8333V1.16667C0 0.855556 0.116667 0.583333 0.35 0.35C0.583333 0.116667 0.855556 0 1.16667 0H7V1.16667H1.16667V12.8333H12.8333V7H14V12.8333C14 13.1444 13.8833 13.4167 13.65 13.65C13.4167 13.8833 13.1444 14 12.8333 14H1.16667ZM10.5 5.83333V3.5H8.16667V2.33333H10.5V0H11.6667V2.33333H14V3.5H11.6667V5.83333H10.5Z' fill='%233D9BB9'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } .text_magazine .cmp-text a[target="_self"].iconFireFox:after { background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 11L6 6L1 1' stroke='%233D9BB9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center left; background-size: contain; } /* FireFoxにhasが実装された時用 */ .text_magazine .cmp-text a[target="_self"]:not(:has(.primary_Button_text)):after, .text_magazine .cmp-text a[target="_blank"]:not(:has(.primary_Button_text)):after, .text_magazine .cmp-text a[target="_Winpop"]:not(:has(.primary_Button_text)):after { content:" "; width: 1em; height: 1em; margin-left:8px; display: inline-block; vertical-align: -3px; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16667 14C0.855556 14 0.583333 13.8833 0.35 13.65C0.116667 13.4167 0 13.1444 0 12.8333V1.16667C0 0.855556 0.116667 0.583333 0.35 0.35C0.583333 0.116667 0.855556 0 1.16667 0H7V1.16667H1.16667V12.8333H12.8333V7H14V12.8333C14 13.1444 13.8833 13.4167 13.65 13.65C13.4167 13.8833 13.1444 14 12.8333 14H1.16667ZM10.5 5.83333V3.5H8.16667V2.33333H10.5V0H11.6667V2.33333H14V3.5H11.6667V5.83333H10.5Z' fill='%233D9BB9'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } .text_magazine .cmp-text a[target="_self"]:not(:has(.primary_Button_text)):after { background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 11L6 6L1 1' stroke='%233D9BB9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center left; background-size: contain; } } /* リストカラー */ /* ベージュ */ .list_beige.text_magazine ul > li::marker{ color: #1693AD; } .list_beige.text_magazine ul > li > ul li::before{ background: #1693AD; } .list_beige.text_magazine ol li:before{ background-color: #1693AD; } .list_beige.check_list ul > li::before{ background: url('/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/check_icon_b.png') no-repeat center right; } .list_beige.text_magazine ul.detail__list.emphasis > li{ color: #444; font-weight: 700; } ul.detail__num-list , ol.detail__num-list { counter-reset: num; } .text_magazine .detail__num-list>li:before { position: absolute; top: 0; left: 0; content: counters(num, "-") ". "; counter-increment: num; border-radius: 0px; font-size: 100%; background-color: #fff !important; color: #000; } ul.detail__list>li.indent , ol.detail__num-list>li.indent { margin-left: 1.2em; } @media screen and (max-width: 640px) { ul.detail__list>li.indent , ol.detail__num-list>li.indent { margin-left: 2em; } } /***** スタイルズ start *****/ /* PCでSP要素を非表示 */ @media all and (min-width:641px){ body .text-sp-block{ display: none !important; } } /* SPでPC要素を非表示 */ @media all and (max-width:640px){ body .text-pc-block { display: none !important; } } /* 注釈 */ .attention_black, .attention_red { display: inline-block; color: #000000; padding-left: 16px; text-indent: -16px; font-size: 14px; line-height: 21px; } .attention_black:before, .attention_red:before { content: "※ "; } .attention_red { color: #EB4D4D; } p:has(span.attention_black){ margin-top: -8px; } p + p:has(span.attention_black),#cta_area_container p:has(span.attention_black), p + p:has(span.attention_black),#cta_area_student_container p:has(span.attention_black), .container.cv_bg_white p:has(span.attention_black),#card_comparison_area_container p:has(span.attention_black){ margin-top: 0px; } @-moz-document url-prefix(){ /* 現状FireFoxにhasがないのでjsでクラスを設定してスタイルをあてる */ div.text.attentionFireFox{ margin-top: -8px; } } /* 注釈のインデント定義（字下げ２文字） */ .attention_indent { display: inline-block; padding-left: 1.8em; text-indent: -1.8em; font-size: 14px; line-height: 21px; } p:has(span.attention_indent){ margin-top: -8px; } p + p:has(span.attention_indent),#cta_area_container p:has(span.attention_indent), p + p:has(span.attention_indent),#cta_area_student_container p:has(span.attention_indent), .container.cv_bg_white p:has(span.attention_indent),#card_comparison_area_container p:has(span.attention_indent){ margin-top: 0px; } /* 黄色マーカー線 */ .yellow_marker { font-weight: bold; background: linear-gradient(transparent 60%, rgba(255, 215, 49, 0.4) 60% 80%,transparent 80% 100%); } /* オレンジマーカー線 */ .orange_marker { font-weight: bold; background: linear-gradient(transparent 60%, #FFED98 0%); } /* 採番見出し */ .numbering { display: inline-block; color: #FFFFFF; font-weight: bold; background: #23A0AE; border-radius: 4px; width: 35px; height: 24px; text-align: center; position: relative; margin-right: 16px; } .numbering:after { content: ""; position: absolute; left: 35px; top: 8px; border-style: solid; border-width: 4px 0 4px 4px; border-color: transparent transparent transparent #23A0AE; } /* 装飾見出し(チェック) */ .decoration_check { display: inline-block; font-weight: bold; padding-left: 24px; font-size: 18.0px; line-height: 27px; position: relative; } .decoration_check::before { position: absolute; top: 2px; left: 0; content:" "; width: 1em; height: 1em; display: inline-block; vertical-align: -3px; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_167_32712)'%3E%3Cpath d='M13 1.8501L4.75 10.1001L1 6.3501' stroke='%2365AE07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_167_32712'%3E%3Crect width='14' height='10.3' fill='white' transform='translate(0 0.850098)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center right; background-size: contain; } /* 採番見出し(ひらめき) */ .numbering_inspiration { display: inline-block; font-weight: bold; padding-left: 43px; font-size: 18.0px; line-height: 27px; position: relative; } .numbering_inspiration::before { position: absolute; top: 2px; left: 0; content:" "; width: 35px; height: 24px; display: inline-block; vertical-align: -3px; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='38' height='25' viewBox='0 0 38 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='24.0037' rx='4' fill='%23E9CE6F'/%3E%3Cpath d='M18.5706 21.524H13.3782C13.0658 21.524 12.8125 21.2956 12.8125 21.014C12.8125 20.7324 13.0658 20.5039 13.3782 20.5039H18.5706C18.883 20.5039 19.1363 20.7323 19.1363 21.014C19.1363 21.2958 18.883 21.524 18.5706 21.524Z' fill='%23272827'/%3E%3Cpath d='M18.2623 23.0025H13.6985C13.3861 23.0025 13.1328 22.7741 13.1328 22.4924C13.1328 22.2106 13.3861 21.9824 13.6985 21.9824H18.2623C18.5748 21.9824 18.8279 22.2108 18.8279 22.4924C18.8279 22.774 18.5746 23.0025 18.2623 23.0025Z' fill='%23272827'/%3E%3Cpath d='M13.5047 20.0632H18.479C18.7656 20.0632 19.0243 19.9728 19.2271 19.8016C19.3845 19.669 19.5052 19.4923 19.5964 19.2617C19.7306 18.9219 19.7889 18.4889 19.8506 18.0304C19.8682 17.8988 19.8865 17.7629 19.9069 17.6268C19.9803 17.1358 20.1349 16.433 20.4554 15.8732C20.6511 15.5313 20.8312 15.2256 21.005 14.9306L21.026 14.895L21.0284 14.8908C21.4871 14.1124 21.8497 13.4971 22.105 12.8849C22.3884 12.2058 22.5148 11.5877 22.5148 10.8807C22.5148 10.0869 22.3421 9.31657 22.0019 8.59117C21.6733 7.89069 21.203 7.2617 20.6042 6.72177C20.0052 6.1817 19.3078 5.75779 18.5309 5.46147C17.7264 5.15467 16.8721 4.99902 15.9918 4.99902C15.1114 4.99902 14.2571 5.15467 13.4526 5.46147C12.6757 5.75779 11.9782 6.18183 11.3793 6.72177C10.7804 7.26183 10.3103 7.89069 9.98163 8.59117C9.64122 9.31657 9.46875 10.0869 9.46875 10.8807C9.46875 11.5876 9.59516 12.2058 9.87848 12.8849C10.1344 13.498 10.4974 14.1141 10.9571 14.8941L10.9575 14.895C11.138 15.2011 11.3245 15.5175 11.5281 15.8732C11.8486 16.433 12.0032 17.1358 12.0766 17.6268C12.097 17.7629 12.1153 17.8988 12.133 18.0304C12.1946 18.4889 12.2529 18.9219 12.3871 19.2617C12.4783 19.4923 12.5992 19.669 12.7564 19.8016C12.9592 19.9728 13.2181 20.0632 13.5047 20.0632Z' fill='%23F8F5E9' stroke='%23272827' stroke-width='0.5'/%3E%3Cpath d='M18.479 20.0632H13.5047C13.2181 20.0632 12.9592 19.9728 12.7564 19.8016C12.5992 19.669 12.4783 19.4923 12.3871 19.2617C12.2529 18.9219 12.1946 18.4889 12.133 18.0304C12.1153 17.8988 12.097 17.7629 12.0766 17.6268C12.0032 17.1358 11.8486 16.433 11.5281 15.8732C11.3245 15.5175 11.138 15.2011 10.9575 14.895C10.4977 14.1145 10.1345 13.4982 9.87848 12.8849C9.59516 12.2058 9.46875 11.5876 9.46875 10.8807C9.46875 10.0869 9.64122 9.31657 9.98163 8.59117C10.3103 7.89069 10.7804 7.26183 11.3793 6.72177C11.9782 6.18183 12.6757 5.75779 13.4526 5.46147C14.2571 5.15467 15.1114 4.99902 15.9918 4.99902C16.8721 4.99902 17.7264 5.15467 18.5309 5.46147C19.3078 5.75779 20.0052 6.1817 20.6042 6.72177C21.203 7.2617 21.6733 7.89069 22.0019 8.59117C22.3421 9.31657 22.5148 10.0869 22.5148 10.8807C22.5148 11.5877 22.3884 12.2058 22.105 12.8849C21.8492 13.4982 21.4858 14.1145 21.026 14.895C20.8457 15.2011 20.659 15.5175 20.4554 15.8732C20.1349 16.433 19.9803 17.1358 19.9069 17.6268C19.8865 17.7629 19.8682 17.8988 19.8506 18.0304C19.7889 18.4889 19.7306 18.9219 19.5964 19.2617C19.5052 19.4923 19.3845 19.669 19.2271 19.8016C19.0243 19.9728 18.7655 20.0632 18.4788 20.0632H18.479ZM13.5171 19.0431H18.4664C18.4885 19.0146 18.5373 18.9344 18.5877 18.7389C18.646 18.5134 18.6856 18.2191 18.7274 17.9075C18.7455 17.7727 18.7642 17.6334 18.7855 17.4904C18.8709 16.9197 19.0553 16.0947 19.4499 15.4052C19.6566 15.0441 19.8531 14.7104 20.0267 14.416C20.4675 13.668 20.8156 13.0773 21.0459 12.5255C21.2791 11.9664 21.3831 11.4591 21.3831 10.8804C21.3831 10.2239 21.2407 9.58729 20.9597 8.98825C20.6881 8.40938 20.2993 7.88946 19.804 7.44281C19.3087 6.99616 18.7321 6.64551 18.0901 6.4008C17.4257 6.14738 16.7197 6.01897 15.9916 6.01897C15.2635 6.01897 14.5575 6.14738 13.8931 6.4008C13.2511 6.64564 12.6745 6.99629 12.1792 7.44281C11.6838 7.88946 11.2949 8.40938 11.0235 8.98825C10.7425 9.58729 10.6001 10.2239 10.6001 10.8804C10.6001 11.459 10.7041 11.9664 10.9373 12.5255C11.1675 13.0773 11.5157 13.6682 11.9566 14.416C12.1301 14.7104 12.3267 15.0441 12.5333 15.4052C12.9279 16.0947 13.1125 16.9197 13.1977 17.4904C13.219 17.6333 13.2377 17.7727 13.2558 17.9075C13.2976 18.2191 13.3372 18.5134 13.3955 18.7389C13.4461 18.9344 13.4949 19.0146 13.5168 19.0431H13.5171Z' fill='%23272827' stroke='%23272827' stroke-width='0.5'/%3E%3Cpath d='M21.9953 5.89561C21.8511 5.89561 21.7069 5.84618 21.5965 5.74718C21.3749 5.5485 21.374 5.22563 21.5942 5.02587L23.128 3.63525C23.3483 3.43549 23.7064 3.43467 23.928 3.63321C24.1495 3.83189 24.1504 4.15476 23.9302 4.35453L22.3964 5.74514C22.2859 5.84536 22.1406 5.89548 21.9953 5.89548V5.89561Z' fill='%23272827'/%3E%3Cpath d='M18.1365 3.91861C18.0888 3.91861 18.0405 3.91316 17.9921 3.90173C17.6901 3.82996 17.5096 3.55108 17.589 3.27859L18.1427 1.38182C18.2223 1.10933 18.5316 0.94674 18.8338 1.01837C19.1358 1.09013 19.3163 1.36902 19.2369 1.6415L18.6832 3.53828C18.6165 3.76718 18.3872 3.91861 18.1365 3.91861Z' fill='%23272827'/%3E%3Cpath d='M13.6726 3.96095C13.4242 3.96095 13.1965 3.81225 13.1274 3.58579L12.5516 1.69447C12.4688 1.4228 12.6461 1.14214 12.9473 1.06766C13.2484 0.993032 13.5598 1.1529 13.6424 1.42443L14.2183 3.31576C14.301 3.58743 14.1237 3.86808 13.8226 3.94257C13.7725 3.95496 13.722 3.96095 13.6725 3.96095H13.6726Z' fill='%23272827'/%3E%3Cpath d='M9.84238 6.01281C9.69906 6.01281 9.55574 5.96406 9.44549 5.86628L7.89539 4.49024C7.67278 4.29265 7.66991 3.96964 7.88919 3.76892C8.10833 3.5682 8.46656 3.56562 8.68917 3.76334L10.2393 5.13938C10.4619 5.33697 10.4648 5.65998 10.2455 5.8607C10.1348 5.96201 9.98857 6.01294 9.84238 6.01294V6.01281Z' fill='%23272827'/%3E%3Cpath d='M7.67257 9.51936C7.62575 9.51936 7.57833 9.51405 7.53091 9.50302L5.42458 9.01334C5.12208 8.94307 4.9401 8.66487 5.01802 8.39211C5.09595 8.11935 5.40449 7.95526 5.70699 8.02553L7.81332 8.51521C8.11582 8.58548 8.2978 8.86368 8.21987 9.13644C8.15403 9.36644 7.92432 9.51923 7.67257 9.51923V9.51936Z' fill='%23272827'/%3E%3Cpath d='M5.62805 14.0639C5.38067 14.0639 5.15353 13.9165 5.08361 13.6912C4.99933 13.4199 5.17498 13.1384 5.47581 13.0624L7.57051 12.5337C7.87135 12.4577 8.18352 12.6161 8.26779 12.8873C8.35206 13.1586 8.17642 13.4401 7.87558 13.516L5.78088 14.0448C5.72984 14.0577 5.67849 14.0639 5.62805 14.0639Z' fill='%23272827'/%3E%3Cpath d='M8.52655 18.3826C8.38413 18.3826 8.24172 18.3345 8.13177 18.2379C7.90811 18.0412 7.90343 17.7184 8.1215 17.5167L9.63974 16.112C9.85782 15.9104 10.2159 15.9062 10.4396 16.1028C10.6632 16.2994 10.6679 16.6223 10.4498 16.824L8.93159 18.2286C8.82074 18.3311 8.67365 18.3826 8.5264 18.3826H8.52655Z' fill='%23272827'/%3E%3Cpath d='M23.7716 18.1115C23.6302 18.1115 23.4887 18.0639 23.3789 17.9685L21.8135 16.6066C21.5887 16.411 21.5823 16.0882 21.7992 15.8854C22.0161 15.6826 22.3741 15.6769 22.599 15.8725L24.1644 17.2344C24.3892 17.4299 24.3956 17.7528 24.1787 17.9555C24.0677 18.0593 23.9197 18.1115 23.7716 18.1115Z' fill='%23272827'/%3E%3Cpath d='M26.4358 13.694C26.3909 13.694 26.3452 13.6891 26.2997 13.679L24.1879 13.2085C23.8847 13.141 23.6995 12.8645 23.7744 12.591C23.8494 12.3175 24.1561 12.1506 24.4593 12.2181L26.5711 12.6886C26.8744 12.7561 27.0595 13.0326 26.9846 13.3062C26.9209 13.5385 26.69 13.694 26.4359 13.694H26.4358Z' fill='%23272827'/%3E%3Cpath d='M24.2062 9.20883C23.9611 9.20883 23.7352 9.06407 23.6633 8.84116C23.576 8.57071 23.7485 8.28761 24.0484 8.2089L26.1371 7.66107C26.437 7.58236 26.751 7.73787 26.8383 8.00831C26.9256 8.27876 26.7531 8.56186 26.4532 8.64057L24.3645 9.1884C24.3118 9.20229 24.2585 9.20883 24.2062 9.20883Z' fill='%23272827'/%3E%3Cpath d='M12.1387 11.7668C11.8521 11.7337 11.6466 11.4746 11.6797 11.188C11.7461 10.6131 11.9234 10.068 12.2063 9.56806C12.4795 9.08539 12.8394 8.66532 13.2757 8.31935C13.7121 7.97338 14.2031 7.71894 14.7354 7.56283C15.2867 7.40118 15.8578 7.35302 16.4328 7.41944C16.7194 7.45255 16.9248 7.71166 16.8917 7.99827C16.8586 8.28489 16.5995 8.49034 16.3129 8.45723C15.4519 8.35778 14.6039 8.59959 13.9247 9.13805C13.2456 9.67651 12.8168 10.4471 12.7174 11.308C12.6842 11.5946 12.4251 11.8001 12.1385 11.767L12.1387 11.7668Z' fill='%23FFD731'/%3E%3Cpath d='M38 12.0017L32 15.4658V8.5376L38 12.0017Z' fill='%23E9CE6F'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } /* オレンジ強調（集中線） */ .orange_emphasis_concentration_line { font-weight: bold; color: #EB7F1B; position: relative; } .orange_emphasis_concentration_line::after { content:""; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2227%22%20height%3D%2221%22%20viewBox%3D%220%200%2027%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_30_62661)%22%3E%3Cpath%20d%3D%22M11.2638%2012.3127C11.3613%2012.4075%2011.4725%2012.4756%2011.5793%2012.5303C12.158%2012.8263%2012.888%2012.7168%2013.3399%2012.2066L16.5254%208.68042C17.0721%208.07275%2017.0315%207.14213%2016.4238%206.59539C15.8161%206.04864%2014.8855%206.08927%2014.3388%206.69694L11.1533%2010.2231C10.6066%2010.8308%2010.6472%2011.7614%2011.2549%2012.3082L11.2638%2012.3127Z%22%20fill%3D%22%23EB7F1B%22%2F%3E%3Cpath%20d%3D%22M3.59722%206.46943C3.37615%207.16508%203.70931%207.89714%204.3325%208.21594C4.40372%208.25237%204.48384%208.29336%204.56417%208.31199C5.34015%208.55169%206.16702%208.12102%206.41128%207.33613L7.83067%202.78296C8.07473%202.02044%207.63515%201.18901%206.86807%200.953859C6.08319%200.7096%205.25632%201.14028%205.01206%201.92516L3.59267%206.47833L3.59722%206.46943Z%22%20fill%3D%22%23EB7F1B%22%2F%3E%3Cpath%20d%3D%22M16.5596%2017.9083C16.6998%2018.2271%2016.9435%2018.4753%2017.2283%2018.6211C17.6112%2018.8169%2018.0805%2018.8436%2018.5026%2018.6551L23.0384%2016.6173C23.784%2016.2798%2024.1139%2015.4152%2023.7764%2014.6697C23.4389%2013.9241%2022.5743%2013.5942%2021.8288%2013.9317L17.293%2015.9696C16.5475%2016.3071%2016.2175%2017.1717%2016.555%2017.9172L16.5596%2017.9083Z%22%20fill%3D%22%23EB7F1B%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_30_62661%22%3E%3Crect%20width%3D%2223.09%22%20height%3D%2211.03%22%20fill%3D%22white%22%20transform%3D%22translate(5.78125%200.375)%20rotate(27.0925)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E') no-repeat; position: absolute; top: -12px; right: -20px; width: 24px; height: 20px; } /* アンカー上 */ .text_anchor_up, .text_anchor_down { font-weight: 500; padding-left: 21px; position: relative; } .text_anchor_up::before, .text_anchor_down::before { position: absolute; top: 4px; left: 0; content:" "; width: 0.8em; height: 0.8em; vertical-align: -3px; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 6.50391L6 1.50391L1 6.50391' stroke='%233D9BB9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } .text_anchor_down::before { background: url("data:image/svg+xml;charset=utf8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.50391L6 6.50391L11 1.50391' stroke='%233D9BB9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } /* プライマリーボタンスタイルズ */ .primary_Button_text { display: inline-block; width: 240px; text-align: center; position: relative; border: solid 2px #EB7F1B; border-radius: 5px; padding: 12px 38px 12px 24px; font-weight: 700; color: #FFFFFF; background: #EB7F1B; letter-spacing: -0.08em; margin: 0; cursor: pointer; transition-duration: 0.3s; transition-property: color, background-color ,opacity; -webkit-transition-duration: 0.3s; -webkit-transition-property: color, background-color ,opacity; border-radius: 100px; z-index: 0; } a .primary_Button_text { color: #FFFFFF !important; text-decoration: none; font-weight: 700 !important; } a[target="_blank"] .primary_Button_text, a[target="_Winpop"] .primary_Button_text { padding: 12px 48px 12px 24px; } .primary_Button_text::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0; display: block; z-index: -1; background: #FFFFFF; transition: .5s; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15); border-radius: 100px; } .primary_Button_text:after { position: absolute; right: 24px; top: calc(50% - 6px); content: ''; height: 0.7em; width: 0.7em; border-style: solid; border-color: #ffffff; border-width: 3px 3px 0 0; transform: rotate(45deg); } a[target="_blank"] .primary_Button_text:after, a[target="_Winpop"] .primary_Button_text:after { position: absolute; right: 24px; top: calc(50% - 8px); content: ''; height: 1em; width: 1em; border-style: none; transform: none; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16667 14C0.855556 14 0.583333 13.8833 0.35 13.65C0.116667 13.4167 0 13.1444 0 12.8333V1.16667C0 0.855556 0.116667 0.583333 0.35 0.35C0.583333 0.116667 0.855556 0 1.16667 0H7V1.16667H1.16667V12.8333H12.8333V7H14V12.8333C14 13.1444 13.8833 13.4167 13.65 13.65C13.4167 13.8833 13.1444 14 12.8333 14H1.16667ZM10.5 5.83333V3.5H8.16667V2.33333H10.5V0H11.6667V2.33333H14V3.5H11.6667V5.83333H10.5Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } /***** スタイルズ end *****/ /* スタイルシステム　テキストコンポーネント */ /* リード文 */ .lead .cmp-text p { font-size: 18.0px; line-height: 27px; } /* 黒色注釈 */ .attention_text_black .cmp-text p { color: #000000; padding-left: 18px; text-indent: -18px; font-size: 14px; line-height: 21px; } .attention_text_black{ margin-top: -8px; } .attention_text_black .cmp-text p:before { content: "※ "; } /* チェック付きリスト　スタイルシステム */ /* シェブロンマーク付きリスト　スタイルシステム */ .check_list ul, .chevron_mark_list ul { list-style: none; padding-left: 0; } .check_list ul li, .chevron_mark_list ul li { padding-left: 1.5em; text-indent: -1.5em; } .check_list ul > li::before, .chevron_mark_list ul > li::before { position: relative; display: inline-block; top: 2px; left: 0; margin-right: 8px; content:" "; width: 1em; height: 1em; vertical-align: -3px; background: url("/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/check_icon_b.png") no-repeat center right; background-size: contain; } .chevron_mark_list ul > li::before { top: 1px; background: url('/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/icon_list.svg') no-repeat center right; background-size: contain; width: 1.2em; height: 1.2em; } /* 行列ヘッダー */ .matrix_header table tr:first-child th { font-weight: bold; background: #f2f2f2 !important; border: 1px solid #e5e5e5; } /********** コンテナコンポーネント **********/ /* スタイルシステム　コンテナコンポーネント */ /* 緑枠 */ .container.green_line{ margin-bottom: 40px; } .container.green_line > div{ border: solid 2px #23A0AE; border-radius: 4px; padding: 12px; } /* 薄緑 */ .container.light_green_line { margin-bottom: 40px; } .container.light_green_line > div{ border: solid 2px #23A0AE; border-radius: 4px; padding: 24px; } .container.light_green_line > div{ border: solid 2px #F2F2F2; } /* グレー枠 */ .container.gray_line{ margin-bottom: 40px; } .container.gray_line > div{ border: solid 2px #dddddd; border-radius: 10px; padding: 12px; } .container.gray_line:has(.cmp-list){ margin-top: 40px; } /* 監修者 */ .container.supervision > div{ border: solid 2px #D7E6C3; border-radius: 10px; padding: 24px 24px 24px 0; } /* ベージュ */ .container.beige { margin-bottom: 40px; } .container.beige > div{ border: solid 2px #F8F5E9; border-radius: 10px; padding: 24px; } /* ベージュ（濃い） */ .container.dark_beige { margin-bottom: 40px; } .container.dark_beige > div{ border: solid 2px #23A0AE; border-radius: 4px; padding: 24px; } /* 囲いリスト（タイトル枠上）ベージュ */ .container.aboveline_title { margin-bottom: 40px; } .container.aboveline_title > .cmp-container > div > .text_magazine > .cmp-text{ background: #F8F5E9; color: #000000; font-weight: bold; border: solid 2px #F8F5E9; border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 16px 24px; } .container.aboveline_title > .cmp-container > div > .container > .cmp-container{ border: solid 2px #F8F5E9; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; padding: 12px; } /* 囲いリスト（タイトル枠上）濃いベージュ */ .container.aboveline_title.orange{ margin-bottom: 40px; } .container.aboveline_title.orange > .cmp-container > div > .text_magazine > .cmp-text{ color: #fff; background: #F96C6E; border: solid 2px #F96C6E; } .container.aboveline_title.orange > .cmp-container > div > .container > .cmp-container{ border: solid 2px #F96C6E; } /* 囲いリスト（タイトル枠上）緑 */ .container.aboveline_title_green{ margin-bottom: 40px; } .container.aboveline_title_green > .cmp-container > div > .text_magazine > .cmp-text{ background: #65AE07; color: #FFFFFF; font-weight: bold; border: solid 2px #65AE07; border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 16px 6px; } .container.aboveline_title_green > .cmp-container > div > .container > .cmp-container{ border: solid 2px #65AE07; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; padding: 24px 12px; } /* 囲いリスト（タイトル枠上）薄緑 */ .container.aboveline_title_light_green { margin-bottom: 40px; } .container.aboveline_title_light_green > .cmp-container > div > .text_magazine > .cmp-text{ background: #23A0AE; color: #fff; font-weight: bold; border: solid 2px #23A0AE; border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 16px 24px; } .container.aboveline_title_light_green > .cmp-container > div > .container > .cmp-container{ border: solid 2px #23A0AE; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; padding: 12px; } /* 囲いリスト（タイトル小枠上） */ .container.aboveline_title_short{ margin-bottom: 40px; } .container.aboveline_title_short > .cmp-container > div > .text_magazine > .cmp-text{ display: inline-block; background: #D7E6C3; color: #000000; font-weight: bold; border: solid 2px #D7E6C3; padding: 8px 24px; border-radius: 5px 5px 0 0; } .container.aboveline_title_short > .cmp-container > div > .container > .cmp-container{ border: solid 2px #D7E6C3; padding: 12px; border-radius: 0px 5px 5px 5px; } /* 囲いリスト（タイトル小枠上_オレンジ） */ .container.aboveline_title_short.orange > .cmp-container > div > .text_magazine > .cmp-text{ color: #fff; background: #23A0AE; border: solid 2px #23A0AE; } .container.aboveline_title_short.orange > .cmp-container > div > .container > .cmp-container{ border: solid 2px #23A0AE; } .container.aboveline_title_short.orange > .cmp-container > div > .container > .cmp-container .text_magazine ul > li > ul li::before{ background: #000; } /* 券面リンク */ .card_link > .cmp-container > div { display:flex; } .card_link > .cmp-container > div > .container { margin: auto 0; } .card_link > .cmp-container > div > .bps-image img { margin-left: auto; margin-right: 16px; width: 240px !important; } .card_link > .cmp-container > div > .container > .cmp-container > div > .primary_Button > .cmp-button{ min-width: 240px !important; } /* 背景色（グレー） */ .container.bg_gray{ margin-bottom: 40px; } .container.bg_gray > .cmp-container{ background: #dcdcdc; padding: 8px 16px; } /* 背景色（ベージュ） */ .container.bg_beige{ margin-bottom: 40px; } .container.bg_beige > .cmp-container{ background: #ECF0F4; padding: 8px 16px; } /* 背景色（濃いベージュ） */ .container.bg_dark_beige{ margin-bottom: 40px; } .container.bg_dark_beige > .cmp-container{ background: #FFFBEB; padding: 8px 16px; } /* 背景色（おすすめバナー） */ .container.bg_recommend_banner > .cmp-container{ background: #FCFBF6; padding: 8px 16px; } /* 枠の形（丸角） */ .container.rounded_corners > div { border-radius: 4px; } /* 枠の形（画面幅Max） */ .container.width_100vw { width: 100vw !important; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); } /* CTA */ @media (min-width: 641px){ .cta, .cta_business_platinum{ width: 85% !important; margin-right: auto !important; margin-left: auto !important; float: none !important; clear: both !important; } .tab_cta ol{ width: 85% !important; margin: 0 auto !important; } #cta_card_title_container > div.aem-Grid > div.container:nth-child(2){ width: 500px; margin-left: 36px; } #cta_area_container .secondary_Button .cmp-button, #cta_area_student_container .secondary_Button .cmp-button{ min-width: 320px; } } #cta_area_container{ padding: 40px; } #cta_area_student_container{ padding: 40px; background-image: url(/content/dam/smcc/jp/ja/nyukai/magazine/img/pict/bg_cta_student_pc.png); } .cta_label_area{ background-image: url(/content/dam/smcc/jp/ja/nyukai/magazine/img/pict/cta_student_label.svg); background-repeat: no-repeat; margin-bottom: 10px; font-size: 13px; color: #FFFFFF; font-weight: bold; padding: 0 20px 0 16px; line-height: 23px; display: flex; } #cta_title_separator{ margin-bottom: 40px; } #cta_title_separator hr{ background: #23A0AE; height: 4px; } #cta_card_img{ margin-bottom: 40px; } #cta_card_abstract_wrapper > div > div:nth-child(1){ width: 370px; } #cta_card_name1{ font-size: 34px; font-weight: bold; line-height: 1.2em; } #cta_card_name2{ font-size: 32px; font-weight: bold; line-height: 48px; } #cta_card_attribute table, #cta_card_attribute th, #cta_card_attribute td{ border: none; font-size: 18px; line-height: 30px; } #cta_card_attribute table{ overflow: initial; } #cta_card_attribute th{ background: none !important; } #cta_card_attribute th, #cta_card_attribute td{ padding:0 0 16px 0; } #cta_card_attribute tr:last-child th, #cta_card_attribute tr:last-child td { padding-bottom: 0px; } #cta_card_attribute span.attention_black { vertical-align: top; font-weight: bold; padding-left: 0px; text-indent: 0px; } #cta_card_attribute img{ vertical-align: middle; } .attention_text_black .cmp-text#cta_campaign_text p{ font-size: 14px; line-height: 20px; } #cta_recomment_title > div{ display: flex; justify-content: center; align-items: flex-start; } #cta_recomment_title > div > .bps-image{ width: auto; } #cta_recomment_title > div > .bps-image > .cmp-image > img{ margin-right: 12px; } #cta_recomment_title > div > .text_magazine { font-size: 32px; font-weight: bold; position: relative; width: auto; } #cta_recomment_title > div > .text_magazine:before{ content: url(/content/dam/smcc/jp/ja/nyukai/magazine/img/icon/cta_title_line.svg); position: absolute; transform: translate(0px, 46px); } #cta_recommend_img{ width: 80px; } #cta_recommend_container > div > div{ text-align: center; display: flex; justify-content: center; } #cta_recommend_text1{ font-weight: 500; font-size: 20px; line-height: 1.5em; display: flex; justify-content: center; align-items: center; flex-direction: column; } #cta_recommend_text1 span[class*="attention_black"], #cta_recommend_text2 span[class*="attention_black"] { vertical-align: top; } #cta_recommend_text2{ color: #EB7F1B; font-weight: 500; } #cta_recommend_text2 > p{ text-align: left; } #cta_recommend_text2 span[style*="font-size:"] { line-height: 1.2em; } #cta_recommend_text2 span[style*="font-size:"] { line-height: 1.2; } #cta_recommend_point_wrapper > div > .container + .container{ position: relative; } #cta_recommend_point_wrapper > div > .container + .container::before{ content: ""; width: 2px; height: 200px; background: rgba(235, 127, 27, 0.5); position: absolute; top: 50%; left: 0%; transform: translateY(-50%); } #cta_recommend_attention{ font-size: 14px; } .cta .primary_Button, .cta_business_platinum .primary_Button{ padding-right: 24px; } .cta .primary_Button .cmp-button, .cta_business_platinum .primary_Button .cmp-button{ background: #EB7F1B; border: 2px solid #EB7F1B; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15); border-radius: 100px; font-size: 24px; padding: 22px 0; } #cta_primary_button{ width: 100%; margin-bottom: 0px; } #cta_secondary_button{ margin-bottom: 0px; } /* CTA学生専用 */ .cta #cta_student_button_area .primary_Button .cmp-button{ background: #E94709; border: 2px solid #E94709; } .cta #cta_student_button_area .secondary_Button .cmp-button{ color: #E94709; border: 2px solid #E94709; } .cta #cta_student_button_area .secondary_Button .cmp-button::before{ background: #E94709; } .cta #cta_student_button_area .secondary_Button .cmp-button:after{ background: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2212%22%20height%3D%2220%22%20viewBox%3D%220%200%2012%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%2018L10%2010L2%202%22%20stroke%3D%22%23E94709%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat center right; } /* CTAビジネスプラチナ */ .cta_business_platinum #cta_card_abstract_container > div > .container:nth-child(1){ width: auto; margin-top: 40px; margin-right: 40px; } .cta_business_platinum #cta_card_abstract_container > div > .container:nth-child(2){ width: 450px; } /* カード比較エリア */ @media (min-width: 641px){ #card_comparison_card_title_container > div.aem-Grid > div.container:nth-child(2){ width: 280px !important; margin-right: 40px; } #card_comparison_card_title_container > div.aem-Grid > div.container:nth-child(3){ width: 500px; } #card_comparison_area_container .secondary_Button .cmp-button{ min-width: 320px; } } #card_comparison_area_container{ padding: 40px; } #card_comparison_img_container > div > .bps-image { width: 328px; } #card_comparison_card_name1{ font-size: 36px; font-weight: bold; line-height: 1.2em; } #card_comparison_card_name2{ font-size: 32px; font-weight: bold; line-height: 48px; } #card_comparison_attribute table, #card_comparison_attribute th, #card_comparison_attribute td{ border: none; font-size: 20px; } #card_comparison_attribute table{ overflow: initial; } #card_comparison_attribute th{ background: none !important; } #card_comparison_attribute th, #card_comparison_attribute td{ padding:0 0 16px 0; } #card_comparison_attribute th{ padding-left: 10px; } #card_comparison_attribute th:first-child{ padding-left: 0px; } #card_comparison_attribute tr:last-child th, #card_comparison_attribute tr:last-child td { padding-bottom: 0px; } #card_comparison_attribute span.attention_black { vertical-align: top; } #card_comparison_attribute img{ vertical-align: middle; } #card_comparison_feature > div{ display: flex; margin: 0px -4px; } #card_comparison_feature > div >div{ margin: 0px 4px; } .container.light_green_line > #card_comparison_feature_item { padding: 4px; } #card_comparison_feature_item{ width: 130px; height: 130px; font-size: 14px; } #card_comparison_feature_item p, #card_comparison_feature_item span[style*="font-size:"] { line-height: 1.2em; } #card_comparison_recomment_title > div{ display: flex; justify-content: center; align-items: flex-start; } #card_comparison_recomment_title > div > .bps-image{ width: auto; } #card_comparison_recomment_title > div > .bps-image > .cmp-image > img{ margin-right: 12px; } #card_comparison_recomment_title > div > .text_magazine { font-size: 32px; font-weight: bold; position: relative; width: auto; } #card_comparison_recomment_title > div > .text_magazine:before{ content: url(/content/dam/smcc/jp/ja/nyukai/magazine/img/icon/cta_title_line.svg); position: absolute; transform: translate(0px, 46px); } #card_comparison_recommend_point_wrapper > div > .container + .container{ position: relative; } #card_comparison_recommend_point_wrapper > div > .container + .container::before{ content: ""; width: 100%; height: 2px; background: rgba(235, 127, 27, 0.5); position: absolute; top: 0%; left: 0%; } #card_comparison_recommend_img{ width: 80px; margin: auto; } #card_comparison_recommend_text{ font-weight: 500; font-size: 20px; line-height: 34px; } #card_comparison_primary_button{ width: 100%; margin-bottom: 0px; } /* CV */ .container.cv_expand_bg{ width: 100vw !important; min-width: 1064px; background: #E9CE6F; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); padding-right: calc(50vw - 50%); padding-left: calc(50vw - 50%); } @media all and (min-width:641px) and (max-width:1064px){ .container.cv_expand_bg{ margin-left: 0px; } } .container.cv_bg_white{ background: #FFFFFF; border-radius: 20px; margin-top: 85px; margin-bottom: 85px; padding: 32px; } #cv_speech_bubble_wrapper > div > .container{ display: flex; justify-content: center; } #cv_speech_bubble{ display: inline-block; background: rgba(233, 206, 111, 0.5); border-radius: 10px; padding: 16px 32px; position: relative; } #cv_speech_bubble:after{ content: ""; border-style: solid; border-width: 20px 16px 0 16px; border-color: #f3e6b6 transparent transparent transparent; position: absolute; left: 46%; bottom: -16px; } #cv_recommended_icon_area > div{ display: flex; justify-content: center; } #cv_recommended_icon_area > div > .container{ width: 175px; } #cv_recommend_button{ width: 100%; min-width: initial; margin-top: 30px; padding: 18px 0px; font-size: 18px; } #cv_recommended_area > div > .container{ padding-right: 8px; padding-left: 8px; } #cv_recommended_area > div > .container:first-child{ padding-right: 16px; padding-left: 0px; } #cv_recommended_area > div > .container:last-child{ padding-right: 0px; padding-left: 16px; } #cv_recommend_speech_bubble_img{ margin-top: 4px; } #cv_recommended_item_title{ display: flex; justify-content: center; align-items: center; } #cv_recommended_item_text{ display: flex; justify-content: center; align-items: center; } #cv_recommended_item_text p{ font-size: 18px; } @-moz-document url-prefix() { #cv_recommended_item_text p { letter-spacing: -0.02em; } } #cv_recommended_item_text span[class*="attention_black"] { vertical-align: top; font-weight: bold; line-height: 18px; padding-left: 0px; text-indent: 0px; } #cv_recommended_item_img{ display: flex; justify-content: center; } #cv_recommended_item_img > div > .bps-image > .cmp-image > img{ width: auto !important; height: 180px !important; } /* SNSエリア */ #sns_container.cmp-container{ border:none; } #sns_container > div{ display: flex; justify-content: center; } #sns_container > div > .cmp-image{ width: auto; margin-left: 14px; margin-right: 14px; } #sns_container > div > .cmp-image:first-child{ margin-left: 0px; } #sns_container > div > .cmp-image:last-child{ margin-right: 0px; } /* カードローンエリア */ #card_loan_button { padding: 14px 0px; font-size: 18px; } #card_loan_textlist > ul { list-style: none; padding-left: 0; } #card_loan_textlist > ul > li:before { position: relative; display: inline-block; top: -1px; left: 0; margin-right: 8px; content:" "; width: 1em; height: 1em; vertical-align: -3px; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2218%22%20height%3D%2219%22%20viewBox%3D%220%200%2018%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14%206.50586L7.125%2013.3809L4%2010.2559%22%20stroke%3D%22%2365AE07%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Crect%20x%3D%220.5%22%20y%3D%221.44336%22%20width%3D%2217%22%20height%3D%2217%22%20rx%3D%222.5%22%20stroke%3D%22%2365AE07%22%2F%3E%3C%2Fsvg%3E') no-repeat center right; background-size: contain; } /* フッターバナーエリア */ #footer_bnr_area .bps-image{ width:227px; } #footer_bnr_area .bps-image + .bps-image{ margin-left: 51px; } #footer_bnr_area .bps-image .cmp-image__image{ width:227px !important; max-width: none; } /* 上下中央揃え */ /* 上下中央揃え SP上揃え */ /* 上下中央揃え SP縦並び */ /* 上下中央 縦並び */ .align_items_center > .cmp-container> .aem-Grid, .align_items_center_SP_top > .cmp-container> .aem-Grid, .align_items_center_SP_tandem > .cmp-container> .aem-Grid, .align_items_center_tandem > .cmp-container> .aem-Grid{ display: flex; align-items: center; } /* 上下中央 縦並び */ .align_items_center_tandem > .cmp-container> .aem-Grid{ height: 100%; justify-content: center; flex-direction: column; } /* 吹き出し（左） */ .speech_bubble_left .cmp-container, .speech_bubble_right .cmp-container { background-color: #F0F0F0; padding: 24px; border-radius: 10px; position: relative; } .speech_bubble_left .cmp-container::before{ content:" "; position: absolute; width: 0; height: 0; border-style: solid; border-width: 2px 16px 16px 0; border-color: transparent #F0F0F0 transparent transparent; top: 45%; left: -16px; } /* 吹き出し（右） */ .speech_bubble_right .cmp-container:after{ content:" "; position: absolute; width: 0; height: 0; border-style: solid; border-width: 2px 0 16px 16px; border-color: transparent transparent transparent #F0F0F0; top: 45%; right: -16px; } /********** タブコンポーネント **********/ /* デフォルトデザイン */ .cmp-tabs__tablist { display: flex; flex-wrap: wrap; padding-left: 0; list-style: none; } .cmp-tabs__tab { box-sizing: border-box; border-bottom: 1px solid transparent; padding: .5rem 1rem; cursor: pointer; } .cmp-tabs__tab--active { border-color: inherit; } .cmp-tabs__tabpanel { display: none; } .cmp-tabs__tabpanel--active { display: block; } .cmp-tabs__tablist { /* コアコンポーネントのスタイルの打消し */ flex-wrap: nowrap; list-style-image: none; list-style-type: disc; list-style-position: outside; margin: 0; padding: 0; display: flex; position: relative; } /* タブリストの左右マージン40px */ div.tabs > div.cmp-tabs > .cmp-tabs__tablist { margin-left: 40px; margin-right: 40px; top: 1px; } .cmp-tabs__tab { /* コアコンポーネントのスタイルの打消し */ box-sizing: border-box; margin-left: 8px; margin-right: 8px; display: flex; justify-content: center; align-items: center; order: 0; width: 50%; flex: auto; align-self: auto; text-align: center; font-weight: bold; border-radius: 16px 16px 0 0; color: #FFFFFF; padding: 19.5px 0; background: LightGray; cursor: pointer; font-size: 16px; position: relative; line-height: 30px; letter-spacing: 0.96px; } .cmp-tabs__tab--active { color: #FFFFFF; top: 0; cursor: default; opacity: 1.0; z-index: 0; background: #23a0ae; border-bottom-color: #23a0ae; border-top-left-radius: 16px; border-top-right-radius: 16px; } .cmp-tabs__tab:focus { outline: none; } .cmp-tabs__tabpanel--active { display: block; background-color: #ffffff; } .cmp-tabs__tabpanel:focus { outline: none; } .tabs > .cmp-tabs > .cmp-tabs__tabpanel { padding-bottom: 0px; } .cmp-tabs__tabpanel > .container > .cmp-container > .aem-Grid > .title:first-child > .cmp-title > .cmp-title__text, .cmp-tabs__tabpanel > .container > .cmp-container > .aem-Grid > div:first-child { margin-top: 0px; } .cmp-tabs__tabpanel > .container > .cmp-container > .aem-Grid > .title:first-child > .cmp-title h2:before { display: none; } .cmp-tabs__tabpanel > .container > .cmp-container > .aem-Grid > div:last-of-type { margin-bottom: 0px; } div.tabs > div.cmp-tabs > .cmp-tabs__tabpanel > .container > .cmp-container{ box-shadow: 0 0 3px rgba(0, 0, 0, .2); border-radius: 10px; padding: 12px; } @media all and (max-width: 960px) { .cmp-tabs__tabpanel { margin-left: 0px; margin-right: 0px; } } /********** リンクコンテナコンポーネント **********/ /* サムネ付きリンク */ .linkcontainer.thumbnail + .linkcontainer.thumbnail { margin-top: 16px; } .linkcontainer.thumbnail a:hover { opacity: 0.7; cursor: pointer; } .linkcontainer.thumbnail a .cmp-linkcontainer .aem-Grid { display: flex; align-items: center; } .linkcontainer.thumbnail .cmp-linkcontainer .cmp-image { width: 160px; margin-right: 0px !important; margin-top: 0; margin-bottom: 0; } .linkcontainer.thumbnail .cmp-linkcontainer button { background-color: transparent; padding-left: 16px; } .linkcontainer.thumbnail .cmp-linkcontainer .textLink_16px_SP14px_black_arrow, .linkcontainer.thumbnail .cmp-linkcontainer .textLink_16px_SP14px_black_blank { width:100%; } .linkcontainer.thumbnail .cmp-linkcontainer .textLink_16px_SP14px_black_arrow .cmp-button, .linkcontainer.thumbnail .cmp-linkcontainer .textLink_16px_SP14px_black_blank .cmp-button { padding-right: 32px; } .linkcontainer.thumbnail .cmp-linkcontainer .textLink_16px_SP14px_black_arrow .cmp-button:after, .linkcontainer.thumbnail .cmp-linkcontainer .textLink_16px_SP14px_black_blank .cmp-button:after { right: 8px; } .linkcontainer.thumbnail .cmp-linkcontainer .cmp-button p { display: block; } /********** リストコンポーネント **********/ ul.cmp-list{ padding-left: 0px; display: inline-block; } .cmp-list a.cmp-list__item-link { text-decoration: none; } .cmp-list li.cmp-list__item { list-style: none; float: left; padding-right: 40px; margin-bottom: 40px; } #corporate_card .cmp-list li.cmp-list__item { padding-right: 0; } div:not(.cate-top,.new-article) > .cmp-list > li.cmp-list__item:last-child { margin-bottom: 0px !important; } .cmp-list p.cmp-list__item-title { font-style: normal; font-weight: 700; font-size: 16px; line-height: 22px; color: #333333; margin: 16px 0px 0px 0px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; height: 66px; } .cmp-list p.cmp-list__item-date { font-weight: 400; font-size: 14px; line-height: 21px; margin: 8px 0px 0px 0px; color: #333333; height: 30px; } .cmp-list__item-date.new_icon:before{ content: url(/content/dam/smcc/jp/ja/nyukai/magazine/img/icon/ico_new.png); vertical-align: middle; padding-right: 10px; } .cmp-list li.PC-columns-2{ width: calc((100% - 52px*1)/2) } .cmp-list li.PC-columns-3{ width: calc((100% - 52px*2)/3) } .cmp-list li.PC-columns-4{ width: calc((100% - 40px*3)/4) } /* 説明文*/ .cate-top .cmp-list article, .ranking .cmp-list article, .new-article .cmp-list article { position: relative; } .cate-top .cmp-list span.cmp-list__item-description, .ranking .cmp-list span.cmp-list__item-description, .new-article .cmp-list span.cmp-list__item-description { display: flex; align-items: center; position: absolute; top: 0px; background: rgba(0,0,0,0.8); color: #FFF; height: 100%; width: 100%; padding: 8px; opacity: 0; transition: 0.3s; font-size: 14px; } .ranking .cmp-list .cmp-list__item:nth-child(1) span.cmp-list__item-description{ font-size: 24px; line-height: 1.5em; } .new-article .cmp-list span.cmp-list__item-description, .ranking .cmp-list span.cmp-list__item-description{ font-size: 18px; line-height: 1.5em; } @media (min-width: 641px){ .cate-top .cmp-list li:hover span.cmp-list__item-description, .ranking .cmp-list li:hover span.cmp-list__item-description, .new-article .cmp-list li:hover span.cmp-list__item-description{ opacity: 1; } } /* カテゴリートップスタイル*/ .cate-top{ margin-bottom: 120px; } .cate-top .cmp-list div.cmp-image{ overflow: hidden; } .cate-top .cmp-list div.cmp-image > img{ border-radius: 10px; } .cate-top .cmp-list li.cmp-list__item{ margin-right: 40px; padding-right: 0px; } .cate-top .cmp-list li.cmp-list__item:nth-child(4n) { margin-right: 0px; } /* ランキングスタイル*/ .ranking .cmp-list li.cmp-list__item:first-child { width: 696px; margin-bottom: 0px; margin-right: 40px; padding-right: 0px; } .ranking .cmp-list li.cmp-list__item:first-child div.cmp-image{ border-radius: 24px; height: 500px; overflow: hidden; filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.2)); } .ranking .cmp-list li.cmp-list__item:first-child .cmp-image img{ border-radius: 24px; } .ranking .cmp-list li.cmp-list__item:first-child .cmp-list__item-date{ font-size: 16px; line-height: 24px; } .ranking .cmp-list li.cmp-list__item div.cmp-image:after { content: " "; position: absolute; top: 0px; } .ranking .cmp-list li.cmp-list__item:first-child div.cmp-image:after { left: 25px; width: 60px; height: 64px; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2243%22%20viewBox%3D%220%200%2040%2043%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.596%2042.7043L18.3472%2036.666C19.3801%2036.2936%2020.6199%2036.2936%2021.6528%2036.666L38.4029%2042.7043C39.1267%2042.965%2040%2042.6109%2040%2042.056V1.20119C40%200.606852%2039.2874%200.125%2038.4085%200.125H1.5915C0.712581%200.125%204.3559e-07%200.606852%204.3559e-07%201.20119V42.056C4.3559e-07%2042.6101%200.873306%2042.965%201.59713%2042.7043H1.596Z%22%20fill%3D%22url(%23paint0_linear_32_62354)%22%2F%3E%3Cpath%20d%3D%22M22.072%2028.125V11.037H18.952L15.472%2014.061V17.421L18.952%2014.397V28.125H22.072Z%22%20fill%3D%22%23272827%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_32_62354%22%20x1%3D%2220%22%20y1%3D%220.125%22%20x2%3D%2220%22%20y2%3D%2242.7917%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FBE377%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23E9BD07%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E') no-repeat; background-size: contain; } .ranking .cmp-list li.cmp-list__item:first-child p.cmp-list__item-title { font-size: 24px; font-weight: 700; line-height: 36px; -webkit-line-clamp: 2; height: auto; } .ranking .cmp-list li.cmp-list__item:not(:first-child) { width: 328px; margin-bottom: 40px; margin-right: 40px; padding-right: 0px; } .ranking .cmp-list li.cmp-list__item:not(:first-child) div.cmp-image{ border-radius: 16px; height: 210px; overflow: hidden; filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.2)); } .ranking .cmp-list li.cmp-list__item:not(:first-child) .cmp-image img{ border-radius: 16px; } .ranking .cmp-list li.cmp-list__item:not(:first-child) .cmp-list__item-date{ font-size: 12px; line-height: 18px; } .ranking .cmp-list li.cmp-list__item:not(:first-child) div.cmp-image:after { left: 16px; width:40px; height: 43px; } .ranking .cmp-list li.cmp-list__item:nth-child(2) div.cmp-image:after { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2243%22%20viewBox%3D%220%200%2040%2043%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.596%2042.5793L18.3472%2036.541C19.3801%2036.1686%2020.6199%2036.1686%2021.6528%2036.541L38.4029%2042.5793C39.1267%2042.84%2040%2042.4859%2040%2041.931V1.07619C40%200.481852%2039.2874%200%2038.4085%200H1.5915C0.712581%200%204.3559e-07%200.481852%204.3559e-07%201.07619V41.931C4.3559e-07%2042.4851%200.873306%2042.84%201.59713%2042.5793H1.596Z%22%20fill%3D%22url(%23paint0_linear_32_63430)%22%2F%3E%3Cpath%20d%3D%22M24.808%2028V25.192H18.208L22.984%2019.648C24.16%2018.28%2024.808%2017.392%2024.808%2015.736C24.808%2012.664%2022.648%2010.768%2019.624%2010.768C16.696%2010.768%2014.416%2012.64%2014.416%2015.76H17.536C17.536%2014.104%2018.592%2013.576%2019.624%2013.576C20.944%2013.576%2021.688%2014.44%2021.688%2015.712C21.688%2016.504%2021.424%2017.032%2020.8%2017.776L14.416%2025.192V28H24.808Z%22%20fill%3D%22%23272827%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_32_63430%22%20x1%3D%2220%22%20y1%3D%220%22%20x2%3D%2220%22%20y2%3D%2242.6667%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23EAEAEA%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23A3A5A5%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E') no-repeat; background-size: contain; } .ranking .cmp-list li.cmp-list__item:nth-child(3) div.cmp-image:after { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2243%22%20viewBox%3D%220%200%2040%2043%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.596%2042.5793L18.3472%2036.541C19.3801%2036.1686%2020.6199%2036.1686%2021.6528%2036.541L38.4029%2042.5793C39.1267%2042.84%2040%2042.4859%2040%2041.931V1.07619C40%200.481852%2039.2874%200%2038.4085%200H1.5915C0.712582%200%200%200.481852%200%201.07619V41.931C0%2042.4851%200.873306%2042.84%201.59713%2042.5793H1.596Z%22%20fill%3D%22url(%23paint0_linear_32_63466)%22%2F%3E%3Cpath%20d%3D%22M24.88%2023.056C24.88%2020.992%2023.896%2019.816%2022.672%2019.168C23.8%2018.568%2024.64%2017.512%2024.64%2015.664C24.64%2012.784%2022.456%2010.768%2019.432%2010.768C16.552%2010.768%2014.272%2012.592%2014.2%2015.64H17.32C17.392%2014.344%2018.256%2013.576%2019.432%2013.576C20.56%2013.576%2021.52%2014.32%2021.52%2015.76C21.52%2016.96%2020.872%2017.896%2019.36%2017.896H18.904V20.608H19.36C20.896%2020.608%2021.76%2021.544%2021.76%2022.96C21.76%2024.496%2020.8%2025.336%2019.456%2025.336C18.232%2025.336%2017.176%2024.64%2017.128%2023.104H14.008C14.056%2026.68%2016.672%2028.144%2019.456%2028.144C22.384%2028.144%2024.88%2026.464%2024.88%2023.056Z%22%20fill%3D%22%23272827%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_32_63466%22%20x1%3D%2220%22%20y1%3D%220%22%20x2%3D%2220%22%20y2%3D%2242.6667%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23F0DED7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23A66D42%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E') no-repeat; background-size: contain; } .ranking .cmp-list li.cmp-list__item:nth-child(4) div.cmp-image:after { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2243%22%20viewBox%3D%220%200%2040%2043%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.596%2042.5793L18.3472%2036.541C19.3801%2036.1686%2020.6199%2036.1686%2021.6528%2036.541L38.4029%2042.5793C39.1267%2042.84%2040%2042.4859%2040%2041.931V1.07619C40%200.481852%2039.2874%200%2038.4085%200H1.5915C0.712581%200%204.3559e-07%200.481852%204.3559e-07%201.07619V41.931C4.3559e-07%2042.4851%200.873306%2042.84%201.59713%2042.5793H1.596Z%22%20fill%3D%22%23B3D08E%22%2F%3E%3Cpath%20d%3D%22M25.288%2025.576V22.624H23.728V19.432H20.728V22.624H17.152L23.008%2010.912H19.6L13.744%2022.624V25.576H20.728V28H23.728V25.576H25.288Z%22%20fill%3D%22%23272827%22%2F%3E%3C%2Fsvg%3E') no-repeat; background-size: contain; } .ranking .cmp-list li.cmp-list__item:nth-child(5) div.cmp-image:after { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2243%22%20viewBox%3D%220%200%2040%2043%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.596%2042.5793L18.3472%2036.541C19.3801%2036.1686%2020.6199%2036.1686%2021.6528%2036.541L38.4029%2042.5793C39.1267%2042.84%2040%2042.4859%2040%2041.931V1.07619C40%200.481852%2039.2874%200%2038.4085%200H1.5915C0.712582%200%200%200.481852%200%201.07619V41.931C0%2042.4851%200.873306%2042.84%201.59713%2042.5793H1.596Z%22%20fill%3D%22%23B3D08E%22%2F%3E%3Cpath%20d%3D%22M24.856%2022.24C24.856%2020.632%2024.664%2019.024%2023.32%2017.68C22.624%2016.984%2021.544%2016.528%2020.128%2016.528C18.976%2016.528%2018.016%2016.96%2017.56%2017.392V13.72H24.472V10.912H14.728V20.56H17.584C17.8%2019.888%2018.376%2019.168%2019.648%2019.168C21.16%2019.168%2021.736%2020.272%2021.736%2022.24C21.736%2023.32%2021.616%2024.232%2021.064%2024.784C20.68%2025.168%2020.176%2025.336%2019.576%2025.336C18.28%2025.336%2017.656%2024.568%2017.488%2023.224H14.368C14.464%2024.472%2014.704%2025.72%2015.76%2026.776C16.504%2027.52%2017.8%2028.144%2019.576%2028.144C21.352%2028.144%2022.576%2027.52%2023.344%2026.752C24.592%2025.504%2024.856%2024.16%2024.856%2022.24Z%22%20fill%3D%22%23272827%22%2F%3E%3C%2Fsvg%3E') no-repeat; background-size: contain; } .ranking .cmp-list li.cmp-list__item:nth-child(6) div.cmp-image:after { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2243%22%20viewBox%3D%220%200%2040%2043%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.596%2042.5793L18.3472%2036.541C19.3801%2036.1686%2020.6199%2036.1686%2021.6528%2036.541L38.4029%2042.5793C39.1267%2042.84%2040%2042.4859%2040%2041.931V1.07619C40%200.481852%2039.2874%200%2038.4085%200H1.5915C0.712582%200%200%200.481852%200%201.07619V41.931C0%2042.4851%200.873306%2042.84%201.59713%2042.5793H1.596Z%22%20fill%3D%22%23B3D08E%22%2F%3E%3Cpath%20d%3D%22M24.808%2022.816C24.808%2019.648%2022.624%2017.752%2020.32%2017.752C19.912%2017.752%2019.456%2017.8%2019.048%2017.968L22.6%2010.912H19.192L15.592%2018.304C14.824%2019.864%2014.152%2021.304%2014.152%2022.864C14.152%2026.248%2016.456%2028.144%2019.48%2028.144C22.504%2028.144%2024.808%2026.176%2024.808%2022.816ZM21.688%2022.84C21.688%2024.424%2020.752%2025.336%2019.48%2025.336C18.208%2025.336%2017.272%2024.424%2017.272%2022.84C17.272%2021.256%2018.208%2020.344%2019.48%2020.344C20.8%2020.344%2021.688%2021.328%2021.688%2022.84Z%22%20fill%3D%22%23272827%22%2F%3E%3C%2Fsvg%3E') no-repeat; background-size: contain; } .ranking .cmp-list li.cmp-list__item:nth-child(7) div.cmp-image:after { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2243%22%20viewBox%3D%220%200%2040%2043%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.596%2042.5793L18.3472%2036.541C19.3801%2036.1686%2020.6199%2036.1686%2021.6528%2036.541L38.4029%2042.5793C39.1267%2042.84%2040%2042.4859%2040%2041.931V1.07619C40%200.481852%2039.2874%200%2038.4085%200H1.5915C0.712582%200%200%200.481852%200%201.07619V41.931C0%2042.4851%200.873306%2042.84%201.59713%2042.5793H1.596Z%22%20fill%3D%22%23B3D08E%22%2F%3E%3Cpath%20d%3D%22M25.072%2013.72V10.912H14.2V16.408H17.176V13.72H21.688L16.144%2028H19.528L25.072%2013.72Z%22%20fill%3D%22%23272827%22%2F%3E%3C%2Fsvg%3E') no-repeat; background-size: contain; } .ranking .cmp-list li.cmp-list__item:nth-child(8) div.cmp-image:after { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2243%22%20viewBox%3D%220%200%2040%2043%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.596%2042.5793L18.3472%2036.541C19.3801%2036.1686%2020.6199%2036.1686%2021.6528%2036.541L38.4029%2042.5793C39.1267%2042.84%2040%2042.4859%2040%2041.931V1.07619C40%200.481852%2039.2874%200%2038.4085%200H1.5915C0.712582%200%200%200.481852%200%201.07619V41.931C0%2042.4851%200.873306%2042.84%201.59713%2042.5793H1.596Z%22%20fill%3D%22%23B3D08E%22%2F%3E%3Cpath%20d%3D%22M25%2023.032C25%2020.944%2023.776%2019.816%2022.84%2019.192C23.704%2018.592%2024.76%2017.464%2024.76%2015.64C24.76%2012.616%2022.384%2010.768%2019.528%2010.768C16.672%2010.768%2014.272%2012.616%2014.272%2015.64C14.272%2017.464%2015.328%2018.592%2016.192%2019.192C15.256%2019.816%2014.056%2020.944%2014.056%2023.032C14.056%2026.344%2016.504%2028.144%2019.528%2028.144C22.552%2028.144%2025%2026.344%2025%2023.032ZM21.64%2015.736C21.64%2016.984%2020.752%2017.896%2019.528%2017.896C18.304%2017.896%2017.392%2016.984%2017.392%2015.736C17.392%2014.512%2018.304%2013.576%2019.528%2013.576C20.752%2013.576%2021.64%2014.512%2021.64%2015.736ZM21.88%2022.984C21.88%2024.304%2020.848%2025.336%2019.528%2025.336C18.208%2025.336%2017.176%2024.304%2017.176%2022.984C17.176%2021.664%2018.208%2020.608%2019.528%2020.608C20.848%2020.608%2021.88%2021.664%2021.88%2022.984Z%22%20fill%3D%22%23272827%22%2F%3E%3C%2Fsvg%3E') no-repeat; background-size: contain; } .ranking .cmp-list li.cmp-list__item:nth-child(9) div.cmp-image:after { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2243%22%20viewBox%3D%220%200%2040%2043%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.596%2042.5793L18.3472%2036.541C19.3801%2036.1686%2020.6199%2036.1686%2021.6528%2036.541L38.4029%2042.5793C39.1267%2042.84%2040%2042.4859%2040%2041.931V1.07619C40%200.481852%2039.2874%200%2038.4085%200H1.5915C0.712582%200%200%200.481852%200%201.07619V41.931C0%2042.4851%200.873306%2042.84%201.59713%2042.5793H1.596Z%22%20fill%3D%22%23B3D08E%22%2F%3E%3Cpath%20d%3D%22M24.88%2016.048C24.88%2012.664%2022.576%2010.768%2019.552%2010.768C16.528%2010.768%2014.224%2012.736%2014.224%2016.096C14.224%2019.264%2016.432%2021.16%2018.736%2021.16C19.144%2021.16%2019.6%2021.112%2020.008%2020.944L16.456%2028H19.84L23.464%2020.608C24.232%2019.048%2024.88%2017.608%2024.88%2016.048ZM21.76%2016.072C21.76%2017.656%2020.824%2018.568%2019.552%2018.568C18.232%2018.568%2017.344%2017.584%2017.344%2016.072C17.344%2014.488%2018.28%2013.576%2019.552%2013.576C20.824%2013.576%2021.76%2014.488%2021.76%2016.072Z%22%20fill%3D%22%23272827%22%2F%3E%3C%2Fsvg%3E') no-repeat; background-size: contain; } .ranking .cmp-list li.cmp-list__item:nth-child(10) div.cmp-image:after { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2243%22%20viewBox%3D%220%200%2040%2043%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.596%2042.5793L18.3472%2036.541C19.3801%2036.1686%2020.6199%2036.1686%2021.6528%2036.541L38.4029%2042.5793C39.1267%2042.84%2040%2042.4859%2040%2041.931V1.07619C40%200.481852%2039.2874%200%2038.4085%200H1.5915C0.712582%200%200%200.481852%200%201.07619V41.931C0%2042.4851%200.873306%2042.84%201.59713%2042.5793H1.596Z%22%20fill%3D%22%23B3D08E%22%2F%3E%3Cpath%20d%3D%22M16.072%2028V10.912H12.952L9.472%2013.936V17.296L12.952%2014.272V28H16.072ZM31.7433%2023.056V15.856C31.7433%2012.592%2029.3433%2010.768%2026.5593%2010.768C23.7753%2010.768%2021.3513%2012.592%2021.3513%2015.856V23.056C21.3513%2026.32%2023.7753%2028.144%2026.5593%2028.144C29.3433%2028.144%2031.7433%2026.32%2031.7433%2023.056ZM28.6233%2023.032C28.6233%2024.472%2027.7833%2025.336%2026.5593%2025.336C25.3353%2025.336%2024.4713%2024.472%2024.4713%2023.032V15.904C24.4713%2014.464%2025.3353%2013.576%2026.5593%2013.576C27.7833%2013.576%2028.6233%2014.464%2028.6233%2015.904V23.032Z%22%20fill%3D%22%23272827%22%2F%3E%3C%2Fsvg%3E') no-repeat; background-size: contain; } .ranking .cmp-list li.cmp-list__item:not(:first-child) p.cmp-list__item-title { font-size: 18px; font-weight: 700; line-height: 24px; -webkit-line-clamp: 2; height: 48px; } .ranking .cmp-list li.cmp-list__item:nth-child(2) { margin-bottom: 20px; margin-right: 0px; } .ranking .cmp-list li.cmp-list__item:nth-child(3n) { margin-right: 0px; } /* 新着記事スタイル*/ .new-article .cmp-list li.cmp-list__item:nth-child(-n+20) { display: block !important; } .new-article .cmp-list li.cmp-list__item { margin-bottom: 32px; } .new-article .cmp-list a.cmp-list__item-link { text-decoration: none; border-radius: 16px; overflow: hidden; display: block; } .new-article .cmp-list article { border-radius: 16px; filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.2)); background: #fff; width: 320px; height: fit-content; } .new-article .cmp-list div.cmp-image{ height: 210px; overflow: hidden; } .new-article .cmp-list p.cmp-list__item-title { font-size: 20px; line-height: 27px; height: 54px; -webkit-line-clamp: 2; padding: 0px 16px; } .new-article .cmp-list p.cmp-list__item-date { margin: 16px 0px; height: 19px; padding: 0px 16px; } /* 特集スタイル*/ .feature .cmp-list li.cmp-list__item{ margin-bottom: 60px; } .feature .cmp-list li.cmp-list__item:nth-child(n+3){ margin-bottom: 0px; } .feature .cmp-list li.cmp-list__item{ padding-right: 0px; margin-right: 52px; } .feature .cmp-list li.cmp-list__item:nth-child(2n){ margin-right: 0px; } .feature .cmp-list a.cmp-list__item-link { text-decoration: none; border-radius: 16px; overflow: hidden; display: block; } .feature .cmp-list article { height: 180px; filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.2)); background: #fff; border-radius: 16px; } .feature .cmp-list div.cmp-image{ float: left; width: 45% !important; } .feature .cmp-list div.cmp-image img{ object-fit: cover; height: 180px !important; } .feature .cmp-list p.cmp-list__item-title { float: left; width: 55%; font-size: 20px; line-height: 30px; height: 60px; padding: 0 16px; -webkit-line-clamp: 2; } .feature .cmp-list p.cmp-list__item-date { display: none; } .feature .cmp-list span.cmp-list__item-description { float: left; width: 55%; color: #000000; font-size: 18px; line-height: 27px; padding: 0 16px; margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* ページネーションスタイル*/ .pagination .disabled { display: none; } div.pagination { clear: both; list-style: none; display: flex; justify-content: center; align-items: center; padding-top: 32px; } .pagination ul{ padding-left: 0px; } .pagination li{ list-style: none; } .pagination a, .pagination li{ float: left; } .pagination li > p, .pagination a{ margin: 0px 16px 0px 0px; text-decoration: none; text-align: center; color: #000000; padding: 9px 0px; font-style: normal; font-weight: 400; font-size: 16px; line-height: 22px; width: 40px; height: 40px; } .pagination li + li { margin-top: 0px; } .pagination li > a { background: #ECF0F4; border-radius: 6px; } .pagination .current a{ background: #1693AD; color: #fff; } .pagination a.prev-page { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a,.b%7Bfill:none;%7D.b%7Bstroke:%23574D32;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;%7D%3C/style%3E%3C/defs%3E%3Crect class='a' width='16' height='16'/%3E%3Cpath class='b' d='M4.55,1.1l5,5-5,5' transform='translate(1.449 1.898)'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; width: 16px; transform: rotate(180deg); } .pagination a.next-page { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a,.b%7Bfill:none;%7D.b%7Bstroke:%23574D32;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;%7D%3C/style%3E%3C/defs%3E%3Crect class='a' width='16' height='16'/%3E%3Cpath class='b' d='M4.55,1.1l5,5-5,5' transform='translate(1.449 1.898)'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; width: 16px; } /* サムネ付きリンク */ .we-list.thumbnail > ul > li + li { margin-top: 12px; border-top: solid 1px #dddddd; padding-top: 12px; position: relative; } .we-list.thumbnail > ul > li + li:before{ position:absolute; width: 60px; height: 4px; background-color: #ffffff; content: " "; top: -2px; } .we-list.thumbnail > ul > li + li:after { position: absolute; width: 60px; height: 4px; background-color: #ffffff; content: " "; top: -2px; right: 0px; } .we-list.thumbnail li.cmp-list__item { width: 100%; padding-right: 0; margin-bottom: 0; } .we-list.thumbnail li a:hover { opacity: 0.7; } .we-list.thumbnail li a { display: flex; align-items: center; width: 100%; } .we-list.thumbnail li a .cmp-image .cmp-image__image{ min-width: 160px; max-width: 160px; } .we-list.thumbnail li a p.cmp-list__item-title { display: block; padding-left: 16px; padding-right: 40px; width: 100%; margin: 0; font-weight: 400; position: relative; height: auto; } .we-list.thumbnail li a p.cmp-list__item-title:after { position: absolute; top: calc(50% - 1em / 2); right: 8px; content:" "; width: 1em; height: 1em; display: inline-block; vertical-align: -3px; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 11L6 6L1 1' stroke='%23272827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center left; background-size: contain; } .cmp-list02 a.cmp-list__item-link { text-decoration: none; } .cmp-list02 li.cmp-list__item { list-style: none; float: left; width: 100%; padding-right: 0; } div:not(.cate-top,.new-article) > .cmp-list02 > li.cmp-list__item:last-child { margin-bottom: 0px !important; } .cmp-list02 .area_name{ background-color: #DCEFF3; border-radius: 4px; padding: 2px 24px; color: #00728E; font-weight: 700; font-size: 12px; margin-left: 16px; } /* 日付のみ */ .date_only p.cmp-list__item-title, .date_only .cmp-image { display: none !important; } .date_only .cmp-list p.cmp-list__item-date{ font-size: 16px; line-height: 24px; } .date_only .cmp-list p.cmp-list__item-date{ margin: 0; } /********** 追加：画像枠制御 **********/ @media (min-width: 641px){ #category_tag_list > li > article > a.cmp-list__item-link > div.cmp-image { max-height: 157px; border-radius: 10px; } } @media (max-width:640px){ #category_tag_list > li > article > a.cmp-list__item-link > div.cmp-image { max-height: 121px; border-radius: 6px; } } /********** 画像コンポーネント **********/ .cmp-image__image { display: block; max-width: 100%; } @media not all and (max-width:640px){ /* サイズ指定 */ .sp_image { display: none !important; } } /* 左右中央寄せ */ .cmp-image_center img { margin: 0 auto; } /* 右寄せ */ .cmp-image_right img { margin-left: auto; margin-right: 0; } /* オリジナルサイズ */ .original_size .cmp-image__image { height: auto !important; width: auto !important; } /* 吹き出しアイコン */ .bps-image.cmp-image.speech_bubble_icon_left, .bps-image.cmp-image.speech_bubble_icon_right { display:flex; justify-content: center; } .speech_bubble_icon_left div.cmp-image, .speech_bubble_icon_right div.cmp-image { width: 80px; height: 80px; background: #fff; border-radius: 50%; position: relative; border: solid 2px #23A0AE; } .speech_bubble_icon_left div.cmp-image img, .speech_bubble_icon_right div.cmp-image img { width:72px !important; height: 72px !important; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /********** アコーディオンコンポーネント **********/ .cmp-accordion__item { border: 1px solid #23A0AE; border-radius: 10px; } h2.cmp-accordion__header{ padding-left: 0px; } h2.cmp-accordion__header::before { content: none; } .cmp-accordion__button{ margin: 0 auto; display: block; width: 100%; font-size: 16px; font-weight: 400; line-height: 32px; border: none; position: relative; text-decoration: none; color: #000000; padding: 16px 72px 16px 24px; text-align: left; background: none; } .cmp-accordion__button::before, .cmp-accordion__button::after { content: ''; display: block; position: absolute; top: 50%; right: 24px; width: 24px; height: 2px; margin-top: -1px; background-color: #23A0AE; transform-origin: 50% 50%; transition: all 0.3s ease-out; } .cmp-accordion__button::after{ transform: rotate(-180deg); } .cmp-accordion__button::before { transform: rotate(-90deg); } .cmp-accordion__button.cmp-accordion__button--expanded::before, .cmp-accordion__button.cmp-accordion__button--expanded::after { transform: rotate(0deg); transform-origin: 50% 50%; transition: all 0.3s ease-out; } .cmp-accordion__panel.cmp-accordion__panel--expanded { max-height: 9999px; padding: 16px 24px; } .cmp-accordion__panel { position: relative; display: block; box-sizing: content-box; overflow: hidden; max-height: 0px; transition-duration: 0.4s; padding: 0px 24px; } /********** 学生ポイントスタイル **********/ #targetServiceWrap { background: #FFFDE8; padding: 24px; } div#targetService__leadTxt p { font-size: 26px; line-height: 1.5; } #targetService > div { display: flex; text-align: center; justify-content: center; } #targetService > div > div { width: fit-content; } #targetService div[id*="targetService__inner"] { width: 306px; background-color: #FAE572; padding: 16px; display: flex; flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; box-sizing: content-box; } #targetService #targetService__inner2 { background-color: #78E8AD; } #targetService #targetService__inner3 { background-color: #B2D9FF; } div[id*="targetService__inner"] .targetService__tit { display: flex; display: -webkit-box; display: -ms-flexbox; justify-content: center; -webkit-box-pack: center; align-items: center; -ms-flex-pack: center; -webkit-box-align: center; -ms-flex-align: center; } .targetService__tit { font-size: 20px; font-weight: bold; line-height: 28px; } div[id*="targetService__inner"] #targetService__item { height: 100%; background-color: #ffffff; border-radius: 10px; padding: 20px 0px 20px 0px; margin: 13px 0px 0px 0px; } div[id*="targetService__inner"] .targetService__item-point--tit { width: 152px; color: #CEBD5D; font-size: 20px; line-height: 28px; font-weight: bold; border-bottom: solid 3px; border-color:#D6CA5D; padding: 0px 0px 1px 0px; display: inline-block; position: relative; } #targetService__inner2 .targetService__item-point--tit { color: #63A783; border-color: #63A783 !important; } #targetService__inner3 .targetService__item-point--tit { color: #6E8398; border-color: #6E8398 !important; } div[id*="targetService__inner"] .targetService__item-point--tit::before { content: ""; width: 13px; height: 13px; border-top: solid 3px; border-right: solid 3px ; border-color:#D6CA5D; position: absolute; background-color: #ffffff; top: 30px; left: 50%; transform: translate(-50%, -46%) rotate(135deg); -webkit-transform: translate(-50%, -46%) rotate(135deg); } #targetService__inner2 .targetService__item-point--tit::before { border-color: #63A783; } #targetService__inner3 .targetService__item-point--tit::before { border-color: #6E8398; } .targetService__item-point--txt { color: #000000; font-weight: bold; font-size: 22px; margin: 16px 0px 16px 0px; } div[id*="targetService__inner"] span.txtHightlight-deserttemple { display: inline; font-weight: bold; font-size: 36px; margin: 0px 2px 0px 0px; } span.txtHightlight-small { font-size: 20px; } #targetService__item-img--logo { margin: 10px 10px } #targetService__item-img--logo > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; align-items: center; } #targetService__item-img--logo .cmp-image { width: fit-content; } /********** セパレータコンポーネント **********/ .separator { margin: 40px 0; } .separator hr { border: solid 1px #D3DBE5 } /* 関連記事 */ .related_article { margin-top: -4px; margin-bottom: 12px; } .related_article hr { border: solid 1px #dddddd } /* おすすめバナー */ .recommend_banner { margin-top: 0px; margin-bottom: 40px; } .recommend_banner hr { border: solid 2px #D7E6C3; } /********** チェックボックススタイル **********/ .boxes .checkbox { padding-left: 1.3em; text-indent: -1.3em; } .boxes .checkbox input[type="checkbox"] { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; font-size: 1em; padding-left: 1em; vertical-align: top; position: relative; } .boxes .checkbox input[type="checkbox"]::before, .boxes .checkbox input[type="checkbox"]::after { content: ""; position: absolute; } .boxes .checkbox input[type="checkbox"]::before { display: block; background-color: #fff; border-radius: 2px; border: 1px solid #23A0AE; width: 1em; height: 1em; top: 0.27em; left: 0em; } .boxes .checkbox input[type="checkbox"]:checked::before { display: none; } .boxes .checkbox input[type="checkbox"]::after { display: none; height: 1em; width: 1em; top: 0.4em; left: 0.15em; background-size: contain; background-repeat: no-repeat; background-image: url('/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/check_icon_b.png'); } .boxes .checkbox input[type="checkbox"]:checked::after { display: block; } .boxes .checkbox label { padding-left: 0.2em; } /********** パンくずスタイル **********/ .bps-breadcrumb{ width: 100vw !important; border-top: 1px solid #F8F5E9; border-bottom: 1px solid #F8F5E9; padding: 16px 0px; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); padding-right: calc(50vw - 50%); padding-left: calc(50vw - 50%); } @media all and (min-width:641px) and (max-width:1064px){ .bps-breadcrumb{ margin:0px; } } .cmp-breadcrumb .cmp-breadcrumb__list{ display: inline-block; list-style: none; font-size: 14px; line-height: 21px; padding: 0; } .cmp-breadcrumb .cmp-breadcrumb__list a.cmp-breadcrumb__item-link{ text-decoration: none; color: #000000; } .cmp-breadcrumb .cmp-breadcrumb__list span.cmp-breadcrumb__arrow { color: rgba(255, 255, 255, 0); display: inline-block; content: ''; height: 12px; background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%2213%22%20viewBox%3D%220%200%208%2013%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1%2012.5L7%206.5L1%200.5%22%20stroke%3D%22%23272827%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E) no-repeat; background-size: contain; margin: 0 16px; vertical-align: middle; -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } .cmp-breadcrumb .cmp-breadcrumb__list span.cmp-breadcrumb__arrow:last-child { display: none; } @media all and (min-width:641px){ .bps-breadcrumb:has(nav.cmp-breadcrumb.swiper){ margin-bottom: 64px; } } /********** インクルードJSPコンポーネント **********/ /* 目次 */ .conclusionArea{ padding: 0 40px; background: #F8F8F8; border-radius: 16px; margin-bottom: 80px; } .conclusionArea .title{ font-weight: bold; padding: 16px; border-bottom: 1px solid #BCD2E3; } .conclusionArea ul li{ list-style: none; padding: 16px 16px 16px 64px; border-bottom: 1px solid #BCD2E3; } .conclusionArea ul li:last-child{ border-bottom-width: 0; } .conclusionArea ul li a{ position: relative; color: #3D9BB9; text-decoration: none; } .conclusionArea ul li a::before { position: absolute; top: calc(50% - 0.8em / 2); left: -46px; content:" "; width: 0.8em; height: 0.8em; display: inline-block; vertical-align: -3px; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.50391L6 6.50391L11 1.50391' stroke='%233D9BB9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center right; background-size: contain; } /* 貸金 */ .kasikin .kasikin__intro, .kasikin .kasikin-j-fsa__box p{ text-align: center; } .kasikin .kasikin__intro{ font-weight: bold; margin-bottom: 16px; } .kasikin .kasikin-j-fsa__box{ border: solid 2px #dddddd; border-radius: 10px; padding: 12px; } .kasikin .kasikin-j-fsa__box{ margin-bottom: 16px; } .kasikin .kasikin-j-fsa__box .kasikin-j-fsa__intro{ margin-bottom: 1em; } .kasikin .kasikin-j-fsa__box .kasikin-j-fsa__name{ font-weight: bold; } .kasikin .kasikin-company__name{ font-weight: bold; } /******************** ＳＰ ********************/ @media all and (max-width:640px) { /********** 全体 **********/ /* 全体 */ .forPcBlock, .forPcFlex{ display: none !important; } .forSpBlock { display: block!important; } .forSpFlex { display: flex !important; } a#break_word{ display: block; word-wrap: break-word; } #main{ width:100%; padding: 0 16px; } body > * { font-size: 16px; line-height: 24px; } body { font-size: 0px; line-height: 0px; } /********** 余白スタイル **********/ /* 上 */ .sp_maT32 { margin-top:32px !important; } .sp_maT20 { margin-top:20px !important; } .sp_maT48 { margin-top:48px !important; } /* 下 */ .sp_maB0 { margin-bottom:0 !important; } .sp_maB8 { margin-bottom:8px !important; } .sp_maB10 { margin-bottom:10px !important; } .sp_maB16 { margin-bottom:16px !important; } .sp_maB24 { margin-bottom:24px !important; } .sp_maB30 { margin-bottom:30px !important; } .sp_maB32 { margin-bottom:32px !important; } .sp_maB40 { margin-bottom:40px !important; } .sp_maB44 { margin-bottom:44px !important; } .sp_maB48 { margin-bottom:48px !important; } .sp_maB56 { margin-bottom:56px !important; } .sp_maB64 { margin-bottom:64px !important; } .sp_maB72 { margin-bottom:72px !important; } div[class*="sp_maB"].title h1, div[class*="sp_maB"].title h2, div[class*="sp_maB"].title h3, div[class*="sp_maB"].title h4 { margin-bottom: 0 !important; } /* 外側パディング */ /* 左 */ .sp_paL0 { padding-left:0px !important; } .sp_paL8 { padding-left:8px !important; } /* 右 */ .sp_paR0 { padding-right:0px !important; } /* コンテナ内側パディング */ /* 上 */ .container_inside_sp_paT0 > .cmp-container { padding-top:0px !important; } .container_inside_sp_paT16 > .cmp-container { padding-top:16px !important; } .container_inside_sp_paT18 > .cmp-container { padding-top:18px !important; } .container_inside_sp_paT24 > .cmp-container { padding-top:24px !important; } /* 下 */ .container_inside_sp_paB16 > .cmp-container { padding-bottom:16px !important; } .container_inside_sp_paB18 > .cmp-container { padding-bottom:18px !important; } .container_inside_sp_paB24 > .cmp-container { padding-bottom:24px !important; } /* 左 */ .container_inside_sp_paL0 > .cmp-container { padding-left: 0 !important; } .container_inside_sp_paL16 > .cmp-container { padding-left:16px !important; } /* 右 */ .container_inside_sp_paR0 > .cmp-container { padding-right: 0 !important; } .container_inside_sp_paR16 > .cmp-container { padding-right:16px !important; } /********** タイトルコンポーネント **********/ /* H1 */ h1 { font-size: 24px; line-height: 36px; margin-bottom:16px; } .h1_underline h1{ font-size: 22px; line-height: 24px; margin-bottom: 24px; padding-bottom: 11px; } .h1_underline h1::before { left: calc(50% - 32px); width: 64px; height: 3px; } .h1_zerokarachan h1{ font-size: 22px; line-height: 40px; padding: 0; text-align: center; } .h1_zerokarachan { margin-bottom: 32px; } .h1_zerokarachan h1 p img{ margin-right: 8px; width: 70px; height: 59px; } /* H2 */ h2 { font-size: 20px; line-height: 30px; margin-top: 48px; margin-bottom: 24px; padding-left: 14px; } div.text + div.title:nth-of-type(n+2) h2 { margin-top: 34px; } div.title + div.title:nth-of-type(n+2) h2 { margin-top: 32px; } div.green_line + div.title:nth-of-type(n+2) h2,div.light_green_line + div.title:nth-of-type(n+2) h2, div.gray_line + div.title:nth-of-type(n+2) h2,div.beige + div.title:nth-of-type(n+2) h2, div.dark_beige + div.title:nth-of-type(n+2) h2,div.aboveline_title + div.title:nth-of-type(n+2) h2, div.aboveline_title_green + div.title:nth-of-type(n+2) h2,div.aboveline_title_light_green + div.title:nth-of-type(n+2) h2, div.aboveline_title_short + div.title:nth-of-type(n+2) h2,div.aboveline_title.orange + div.title:nth-of-type(n+2) h2, div.aboveline_title_short.orange + div.title:nth-of-type(n+2) h2 { margin-top: 24px; } h2::before{ left: 0; } /* H3 */ h3 { font-size: 18px; line-height: 27px; margin-top: 36px; margin-bottom: 20px; } div.text + div.title:nth-of-type(n+2) h3 { margin-top: 22px; } div.title + div.title:nth-of-type(n+2) h3 { margin-top: 12px; } div.green_line + div.title:nth-of-type(n+2) h3,div.light_green_line + div.title:nth-of-type(n+2) h3, div.gray_line + div.title:nth-of-type(n+2) h3,div.beige + div.title:nth-of-type(n+2) h3, div.dark_beige + div.title:nth-of-type(n+2) h3,div.aboveline_title + div.title:nth-of-type(n+2) h3, div.aboveline_title_green + div.title:nth-of-type(n+2) h3,div.aboveline_title_light_green + div.title:nth-of-type(n+2) h3, div.aboveline_title_short + div.title:nth-of-type(n+2) h3,div.aboveline_title.orange + div.title:nth-of-type(n+2) h3, div.aboveline_title_short.orange + div.title:nth-of-type(n+2) h3 { margin-top: 14px; } /* H4 */ h4 { font-size: 16px; line-height: 24px; margin-top:30px; margin-bottom:16px; padding-left: 22px; } div.text + div.title:nth-of-type(n+2) h4 { margin-top: 16px; } div.title + div.title:nth-of-type(n+2) h4 { margin-top: 10px; } div.green_line + div.title:nth-of-type(n+2) h4,div.light_green_line + div.title:nth-of-type(n+2) h4, div.gray_line + div.title:nth-of-type(n+2) h4,div.beige + div.title:nth-of-type(n+2) h4, div.dark_beige + div.title:nth-of-type(n+2) h4,div.aboveline_title + div.title:nth-of-type(n+2) h4, div.aboveline_title_green + div.title:nth-of-type(n+2) h4,div.aboveline_title_light_green + div.title:nth-of-type(n+2) h4, div.aboveline_title_short + div.title:nth-of-type(n+2) h4,div.aboveline_title.orange + div.title:nth-of-type(n+2) h4, div.aboveline_title_short.orange + div.title:nth-of-type(n+2) h4 { margin-top: 6px; } h4::before{ left: 0; width: 12px; height: 12px; } /********** ボタンコンポーネント **********/ /* ボタンスタイル */ .primary_Button .cmp-button, .primary_Button_s .cmp-button, .secondary_Button .cmp-button, .tertiary_Button .cmp-button{ width: 100%; min-width: auto; } .primary_Button_s .cmp-button{ width: 200px; font-size: 16px; padding: 12px 0px; } /* テキストリンクボタン */ div.text + div.textLink_16px_SP14px_arrow,div.text + div.textLink_16px_SP14px_black_arrow, div.text + div.textLink_16px_SP14px_blank,div.text + div.textLink_16px_SP14px_black_blank, div.text + div.textLink_14px_SP12px_arrow,div.text + div.textLink_14px_SP12px_blank, div.text + div.textLink_12px_SP10px_arrow,div.text + div.textLink_12px_SP10px_blank, div.text + div.anchor_up,div.text + div.anchor_down{ margin-top: 2px; } .textLink_16px_SP14px_arrow .cmp-button, .textLink_16px_SP14px_blank .cmp-button, .textLink_16px_SP14px_black_arrow .cmp-button, .textLink_16px_SP14px_black_blank .cmp-button { font-size: 14px; } .textLink_14px_SP12px_arrow .cmp-button, .textLink_14px_SP12px_blank .cmp-button { font-size: 12px; } .textLink_12px_SP10px_arrow .cmp-button, .textLink_12px_SP10px_blank .cmp-button { font-size: 10px; } /* アンカーリンクボタン */ .anchor_up .cmp-button, .anchor_down .cmp-button { font-size: 14px; } /********** テキストコンポーネント **********/ /* テキストコンポーネント下マージン */ .text_magazine{ margin-bottom: 14px; } /* 数値リスト */ .text_magazine ol li { padding-left: 24px; } table tr th, table tr td { padding: 10px; max-width: 340px; } /***** スタイルズ start *****/ .attention_black, .attention_red { padding-left: 16px; text-indent: -16px; font-size: 14px; line-height: 21px; } .text_magazine .cmp-text a[target="_self"]:not(:has(.primary_Button_text)):after, .text_magazine .cmp-text a[target="_blank"]:not(:has(.primary_Button_text)):after, .text_magazine .cmp-text a[target="_Winpop"]:not(:has(.primary_Button_text)):after { width: 14px; height: 14px; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16667 14C0.855556 14 0.583333 13.8833 0.35 13.65C0.116667 13.4167 0 13.1444 0 12.8333V1.16667C0 0.855556 0.116667 0.583333 0.35 0.35C0.583333 0.116667 0.855556 0 1.16667 0H7V1.16667H1.16667V12.8333H12.8333V7H14V12.8333C14 13.1444 13.8833 13.4167 13.65 13.65C13.4167 13.8833 13.1444 14 12.8333 14H1.16667ZM10.5 5.83333V3.5H8.16667V2.33333H10.5V0H11.6667V2.33333H14V3.5H11.6667V5.83333H10.5Z' fill='%233D9BB9'/%3E%3C/svg%3E") no-repeat center right; } .text_magazine .cmp-text a[target="_self"]:not(:has(.primary_Button_text)):after { background: url("data:image/svg+xml;charset=utf8,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 11L6 6L1 1' stroke='%233D9BB9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center left; background-size: contain; } /* 採番見出し */ .numbering { width: 33px; height: 22px; } .numbering:after { left: 33px; top: 7px; } /* 装飾見出し(チェック) */ .decoration_check { font-size: 16.0px; line-height: 24px; } /* 採番見出し(ひらめき) */ .numbering_inspiration { font-size: 16.0px; line-height: 24px; padding-left: 41px; } .numbering_inspiration::before { width: 33px; height: 22px; } /* プライマリーボタンスタイルズ */ .primary_Button_text { width: 100%; padding: 8px 32px 8px 24px; max-width: 240px; } /***** スタイルズ end *****/ /* リード文 */ .lead .cmp-text p { font-size: 16.0px; line-height: 24px; } /* 黒色注釈 */ .attention_text_black .cmp-text p { padding-left: 16px; text-indent: -18px; font-size: 14px; line-height: 21px; } /* 番号付きインデント */ .attention_indent { font-size: 14px; line-height: 21px; } /* SP_横スライド */ .sp_slide_table::before{ display: inline-block; max-width: 100%; width: 100%; border: 4px solid #f5f5f5; margin-bottom: 20px; padding: 24px; text-align: center; content: "下の表は横にスクロールできます。"; } .sp_slide_table > .cmp-text { overflow: auto; } /********** コンテナコンポーネント **********/ /* 緑枠 */ .container.green_line{ margin-bottom: 24px; } /* 薄緑 */ .container.light_green_line { margin-bottom: 24px; } .container.light_green_line > div{ padding: 16px; } /* グレー枠 */ .container.gray_line{ margin-bottom: 24px; } /* 監修者 */ .container.supervision > div{ padding: 16px; } /* ベージュ */ .container.beige { margin-bottom: 24px; } .container.beige > div{ padding: 16px; } /* ベージュ（濃い） */ .container.dark_beige { margin-bottom: 24px; } /* 囲いリスト（タイトル枠上）ベージュ */ .container.aboveline_title { margin-bottom: 24px; } .container.aboveline_title > .cmp-container > div > .text_magazine > .cmp-text{ padding: 16px; } /* 囲いリスト（タイトル枠上）濃いベージュ */ .container.aboveline_title.orange{ margin-bottom: 24px; } /* 囲いリスト（タイトル枠上）緑 */ .container.aboveline_title_green{ margin-bottom: 24px; } /* 囲いリスト（タイトル枠上）薄緑 */ .container.aboveline_title_light_green { margin-bottom: 24px; } .container.aboveline_title_light_green > .cmp-container > div > .text_magazine > .cmp-text{ padding: 16px; } /* 囲いリスト（タイトル小枠上） */ .container.aboveline_title_short{ margin-bottom: 24px; } .container.aboveline_title_short > .cmp-container > div > .text_magazine > .cmp-text{ padding: 8px 16px; } /* 券面リンク */ .card_link > .cmp-container > div > .bps-image img { width: 160px !important; } .card_link > .cmp-container > div > .container .primary_Button .cmp-button{ padding: 12px 0; } .card_link > .cmp-container > div > .container .primary_Button a{ font-size: 16px; line-height: 1.5em; } .card_link > .cmp-container > div > .container > .cmp-container > div > .primary_Button > .cmp-button{ min-width: 170px !important; width: 170px !important; } /* CTAエリア */ #cta_area_container{ padding: 24px 12px; } #cta_area_student_container{ padding: 24px 12px; background-image: url(/content/dam/smcc/jp/ja/nyukai/magazine/img/pict/bg_cta_student_sp.png); } #cta_title_separator{ margin-bottom: 10px; } #cta_title_separator hr{ display: none; } #cta_card_name_sp_container > div > .text_magazine{ display: flex; justify-content: center; } #cta_card_name1{ font-size: 30px; font-weight: 500; line-height: 45px; margin-top: 0px; margin-bottom: 0px; } #cta_card_name2{ font-size: 24px; font-weight: 500; line-height: 36px; } #cta_card_attribute{ font-size: 16px; line-height: 24px; } #cta_card_attribute th { width:135px } #cta_card_attribute td { width:230px } #cta_card_attribute tr:nth-child(n) th{ display: block; float: left; font-size: 16px; padding-bottom: 8px; } #cta_card_attribute tr:nth-child(n) td{ display: block; font-size: 16px; padding-bottom: 8px; } #cta_card_attribute tr:last-child td:last-child, #cta_card_attribute tr:last-child th:last-child { padding-bottom: 0px !important; } #cta_card_attribute tr:last-child th:last-child{ padding-bottom: 0px; } #cta_card_attribute p{ white-space: nowrap; } #cta_card_attribute table{ width: auto; margin: 0px auto; } #cta_recomment_title > div{ align-items: center; margin-bottom: 24px; } #cta_recomment_title > div > .text_magazine { font-size: 24px; line-height: 36px; margin-bottom: 0px; } #cta_recomment_title > div > .text_magazine:before{ transform: translate(-64px, 54px); } #cta_recommend_point_wrapper > div > .container + .container::before{ content: ""; width: 300px; height: 2px; background: rgba(235, 127, 27, 0.5); position: absolute; top: 0%; left: 50%; transform: translateX(-50%); } #cta_recommend_text2 > p{ text-align: left; } #cta_recommend_attention{ font-size: 12px; } .cta .primary_Button, .cta_business_platinum .primary_Button{ padding-right: 0px; } .cta .primary_Button .cmp-button, .cta_business_platinum .primary_Button .cmp-button{ padding: 17px 0px; font-size: 20px; } #cta_primary_button{ font-size: 20px; line-height: 30px; } #cta_secondary_button{ font-size: 20px; line-height: 30px; padding-top: 17px; padding-bottom: 17px; } /* CTA学生専用 */ .cta #cta_student_button_area .primary_Button_s .cmp-button{ background: #E94709; border: 2px solid #E94709; } .cta #cta_student_button_area .secondary_Button_s .cmp-button{ color: #E94709; border: 2px solid #E94709; } .cta #cta_student_button_area .secondary_Button_s .cmp-button::before{ background: #E94709; } .cta #cta_student_button_area .secondary_Button_s .cmp-button:hover{ color: #FFFFFF; } .cta #cta_student_button_area .secondary_Button_s .cmp-button:after{ background: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2212%22%20height%3D%2220%22%20viewBox%3D%220%200%2012%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%2018L10%2010L2%202%22%20stroke%3D%22%23E94709%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat center right; } /* CTAビジネスプラチナ */ .cta_business_platinum #cta_card_abstract_container > div > .container:nth-child(1){ width: 100%; margin-top: 0px; margin-right: 0px; } .cta_business_platinum #cta_card_abstract_container > div > .container:nth-child(2){ width: 100%; } /* カード比較エリア */ #card_comparison_area_container{ padding: 24px 12px; } #card_comparison_card_name_sp_container > div > .text_magazine{ display: flex; justify-content: center; } #card_comparison_img_container > div > .bps-image { width: 100%; } #card_comparison_card_name1{ font-size: 30px; font-weight: 500; line-height: 45px; margin-top: 0px; margin-bottom: 0px; } #card_comparison_card_name2{ font-size: 24px; font-weight: 500; line-height: 36px; } #card_comparison_img_container { margin-right: 0px; } #card_comparison_feature > div{ display: flex; margin-left: 0px; flex-wrap: wrap; justify-content: center; } .container.light_green_line > #card_comparison_feature_item { margin: 4px 0; } #card_comparison_feature_item{ width: 94px; height: 94px; font-size: 10px; } #card_comparison_attribute{ font-size: 16px; line-height: 24px; } #card_comparison_attribute tr:nth-child(n) th{ font-size: 16px; padding-bottom: 8px; padding-left: 4px; } #card_comparison_attribute tr:last-child th{ padding-bottom: 0px; } #card_comparison_attribute tr th:first-child{ padding-left: 0px; } #card_comparison_attribute tr:nth-child(n) td{ font-size: 16px; padding-bottom: 8px; } #card_comparison_attribute th:last-child{ padding-left: 0px; } #card_comparison_attribute p{ white-space: nowrap; } #card_comparison_attribute table{ width: auto; margin: 0px auto; } #card_comparison_recomment_title > div{ align-items: center; margin-bottom: 24px; } #card_comparison_recomment_title > div > .text_magazine { font-size: 24px; line-height: 36px; margin-bottom: 0px; } #card_comparison_recomment_title > div > .text_magazine:before{ transform: translate(-64px, 54px); } #card_comparison_recommend_text{ font-size: 18px; line-height: 27px; } #card_comparison_recommend_point_wrapper > div > .container + .container::before{ content: ""; width: 300px; height: 2px; background: rgba(235, 127, 27, 0.5); position: absolute; top: 0%; left: 50%; transform: translateX(-50%); } #card_comparison_primary_button{ font-size: 20px; line-height: 30px; } /* CVエリア */ .container.cv_expand_bg{ min-width: 100vw; } .container.cv_bg_white{ margin-top: 40px; margin-bottom: 40px; padding: 24px 12px; } #cv_recommended_area > div > .container{ padding-right: 0px; padding-left: 0px; } #cv_recommended_area > div > .container:first-child{ padding-right: 0px; padding-left: 0px; } #cv_recommended_area > div > .container:last-child{ padding-right: 0px; padding-left: 0px; } #cv_recommend_button{ width: 100%; min-width: initial; margin-top: 24px; margin-bottom: 0px; padding: 18px 0px; font-size: 20px; } #cv_speech_bubble{ padding: 8px 16px; } #cv_speech_bubble:after { border-width: 10px 8px 0 8px; bottom: -9px; } #cv_recommended_item_img > div > .bps-image > .cmp-image > img{ width: 100% !important; height: auto !important; } /* SNSエリア */ #sns_container.cmp-container{ border:none; } #sns_container > div > .cmp-image{ width: auto; margin-left: 8px; margin-right: 8px; } #sns_container > div > .cmp-image:first-child{ margin-left: 0px; } #sns_container > div > .cmp-image:last-child{ margin-right: 0px; } /* フッターバナーエリア */ #footer_bnr_area > .aem-Grid{ margin: 0; /* display: flex !important; flex-wrap: nowrap; overflow-x: scroll; */ } #footer_bnr_area .bps-image{ width:304px; float: none; margin: 0 auto; } #footer_bnr_area .bps-image + .bps-image{ margin-left: auto; margin-right: auto; margin-top: 16px; } #footer_bnr_area .bps-image .cmp-image__image{ width:302px !important; } /* 上下中央揃え SP上揃え */ .align_items_center_SP_top > .cmp-container> .aem-Grid { align-items: flex-start; } /* 上下中央揃え SP縦並び */ .align_items_center_SP_tandem > .cmp-container> .aem-Grid { flex-direction: column; } /* 吹き出し（左） */ .speech_bubble_left .cmp-container { padding: 16px; } .speech_bubble_left .cmp-container::before{ top: 8%; } /* 吹き出し（右） */ .speech_bubble_right .cmp-container { padding: 16px; } .speech_bubble_right .cmp-container:after{ top: 8%; } /********** 画像コンポーネント **********/ /* サイズ指定 */ .pc_image { display: none !important; } /* 吹き出しアイコン */ .bps-image.cmp-image.speech_bubble_icon_left { justify-content: left; } .bps-image.cmp-image.speech_bubble_icon_right { justify-content: right; } .speech_bubble_icon_left div.cmp-image, .speech_bubble_icon_right div.cmp-image { width: 56px !important; height: 56px !important; } .speech_bubble_icon_left div.cmp-image img, .speech_bubble_icon_right div.cmp-image img { width:48px !important; height: 48px !important; } /********** タブコンポーネント **********/ /* タブリストの左右マージンを打ち消す */ div.tabs > div.cmp-tabs > .cmp-tabs__tablist { margin-left: 16px; margin-right: 16px; top: 1px; } .cmp-tabs__tab { padding-top: 13.5px; padding-bottom: 13.5px; padding-left: 11.5px; padding-right: 11.5px; font-size: 12px; line-height: 20px; letter-spacing: 0.72px; margin-left: 4px; margin-right: 4px; } .cmp-tabs__tab--active { background-position: bottom center; } .cmp-tabs__tab:first-child { margin-left: 0px; } .cmp-tabs__tab:last-child { margin-right: 0px; } .cmp-section > .tabs > .cmp-tabs { margin-bottom: 56px; } /********** リンクコンテナコンポーネント **********/ /* サムネ付きリンク */ .linkcontainer.thumbnail .cmp-linkcontainer .cmp-image { width: 120px; } .linkcontainer.thumbnail .cmp-linkcontainer .textLink_16px_SP14px_black_arrow .cmp-button:after, .linkcontainer.thumbnail .cmp-linkcontainer .textLink_16px_SP14px_black_blank .cmp-button:after { display: none; } .linkcontainer.thumbnail .cmp-linkcontainer .textLink_16px_SP14px_black_arrow .cmp-button, .linkcontainer.thumbnail .cmp-linkcontainer .textLink_16px_SP14px_black_blank .cmp-button { padding-right: 0; } /********** リストコンポーネント **********/ .cmp-list li.SP-columns-1{ width: 100%; } .cmp-list li.SP-columns-2{ width: 50%; } .cmp-list li.SP-columns-3{ width: 33.33%; } .cmp-list li.SP-columns-4{ width: 25%; } .cmp-list p.cmp-list__item-date { height: auto; } .cmp-list__item-date.new_icon:before{ content: url(/content/dam/smcc/jp/ja/nyukai/magazine/img/icon/ico_new_sp.png); height: 16px; } /* カテゴリートップスタイル*/ .cate-top { margin-bottom: 56px; } .cate-top .cmp-list li.cmp-list__item { margin-bottom: 32px; padding-right: 0px; } .cate-top .cmp-list div.cmp-image{ float: left; width: 45% ; height:100%; overflow: hidden; } .cate-top .cmp-list div.cmp-image > img{ border-radius: 6px; } .cate-top .cmp-list p.cmp-list__item-title { float: left; width: 55%; font-size: 14px; line-height: 21px; height:84px; margin: 0px ; -webkit-line-clamp: 4; padding-left: 16px; } .cate-top .cmp-list p.cmp-list__item-date { width: 55%; margin: 8px 0px 0px 0px; font-size: 10px; line-height: 14px; padding-left: 16px; display: flex; align-items: center; } /* ランキングスタイル*/ .ranking .cmp-list li.cmp-list__item:nth-last-child(n){ padding-right: 0px; margin-bottom: 30px; } .ranking .cmp-list li.cmp-list__item:first-child { width: 100%; height: auto; } .ranking .cmp-list li.cmp-list__item:first-child div.cmp-image{ border-radius: 10px; height: auto; overflow: hidden; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1)); } .ranking .cmp-list li.cmp-list__item:first-child .cmp-image img { border-radius: 10px; } .ranking .cmp-list li.cmp-list__item:first-child p.cmp-list__item-title { font-size: 16px; line-height: 24px; } .ranking .cmp-list li.cmp-list__item:not(:first-child) { width: 100%; height: auto; } .ranking .cmp-list li.cmp-list__item:not(:first-child) div.cmp-image{ float: left; width: 45%; border-radius: 6px; height: auto; overflow: hidden; filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1)); } .ranking .cmp-list li.cmp-list__item:not(:first-child) .cmp-image img { border-radius: 6px; } .ranking .cmp-list li.cmp-list__item:not(:first-child) div.cmp-image:after { left: 8px; width: 28px; height: 30px; } .ranking .cmp-list li.cmp-list__item:not(:first-child) p.cmp-list__item-title { float: left; width: 55%; font-size: 14px; line-height: 21px; margin-top: 0px; padding-left: 16px; -webkit-line-clamp: 4; height: 84px; } .ranking .cmp-list li.cmp-list__item:not(:first-child) p.cmp-list__item-date { float: left; width: 55%; font-size: 12px; line-height: 12px; padding-left: 16px; } /* 新着記事スタイル*/ .new-article .cmp-list li.cmp-list__item { width: 324px; height: 300px; padding-right: 24px; margin-bottom: 32px; } #corporate_card .cmp-list li.cmp-list__item{ padding-right: 24px; } .new-article .cmp-list article { border-radius: 16px; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1)); width: 300px; } .new-article .cmp-list div.cmp-image{ height: 197px; padding-right: 0px; } .new-article .cmp-list p.cmp-list__item-title { font-size: 16px; line-height: 22px; height: 44px; } .new-article .cmp-list p.cmp-list__item-date { margin: 8px 0px 16px 0px; height: 19px; } /* 特集スタイル*/ .feature .cmp-list li.cmp-list__item{ margin-right: 24px !important; padding-left: 0px !important; margin-bottom: 5px !important; } .feature ul{ display: flex; flex-direction: row; flex-wrap: nowrap; overflow: scroll; } .feature .cmp-list li{ width: 300px !important; margin-bottom: 0px; } .feature .cmp-list article { border-radius: 16px; height: 270px; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1)); width: 300px !important; } .feature .cmp-list div.cmp-image{ float: none; width: 100% !important; height: 194px; overflow: hidden; } .feature .cmp-list div.cmp-image img{ height: 194px !important; } .feature .cmp-list p.cmp-list__item-title { float: none; width: 100%; font-size: 16px; line-height: 22px; height: 44px; } .feature .cmp-list span.cmp-list__item-description { float: none; width: 100%; font-size: 14px; line-height: 21px; margin: 8px 0px 16px 0px; height: 42px; -webkit-line-clamp: 2; display: none; } /* ページネーションスタイル*/ div.pagination { padding-top: 16px; } .pagination a{ padding: 5px 0px; font-size: 14px; line-height: 19px; width: 28px; height: 28px; } .pagination li > p{ padding: 6.5px 0px; font-size: 14px; line-height: 19px; width: 10px; height: 28px; } .pagination a.prev-page ,.pagination a.next-page{ width: 12px; } /* サムネ付きリンク */ .we-list.thumbnail li a .cmp-image .cmp-image__image{ min-width: 120px; max-width: 120px; } .we-list.thumbnail li a p.cmp-list__item-title { display: block; padding-right: 0; padding-left: 8px; font-size: 14px; line-height: 21px; color: #1693AD; } .we-list.thumbnail li a p.cmp-list__item-title:after { display: none; } .we-list.thumbnail > ul > li + li:before{ width: 20px; } .we-list.thumbnail > ul > li + li:after { width: 20px; } .cmp-list02 .area_name{ margin-left: 8px; } /********** アコーディオンコンポーネント **********/ .cmp-accordion__button{ font-size: 14px; line-height: 21px; padding: 10px 40px 10px 16px; } .cmp-accordion__button::before, .cmp-accordion__button::after { right: 16px; width: 16px; } /********** 学生ポイントスタイル **********/ div#targetService__leadTxt p { font-size: 24px; } #targetServiceWrap { padding: 16px; } #targetService > div { flex-wrap: wrap; flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; } #targetService div[id*="targetService__inner"] { width: auto; padding: 16px; } div[id*="targetService__inner"] .targetService__tit { font-size: 20px; line-height: 28px; } div[id*="targetService__inner"] .targetService__item-point--tit::before { transform: translate(-50%, 20%) rotate(135deg); -webkit-transform: translate(-50%, 20%) rotate(135deg); top: 22px; } .targetService__item-point--txt { font-size: 20px; margin: 14px 0px; } span.txtHightlight-small { font-size: 18px; } div[id*="targetService__inner"] span.txtHightlight-deserttemple { font-size: 32px; } div[id*="targetService__inner"] .targetService__item-point--tit { font-size: 18px; width: auto; } /********** セパレータコンポーネント **********/ /* おすすめバナー */ .recommend_banner { margin-bottom: 24px; } /********** パンくずスタイル **********/ .cmp-breadcrumb .cmp-breadcrumb__list{ display: inline-block; list-style: none; font-size: 12px; line-height: 18px; padding: 0; } .cmp-breadcrumb .cmp-breadcrumb__list span.cmp-breadcrumb__arrow { height: 8px; } /********** インクルードJSPコンポーネント **********/ /* 目次 */ .conclusionArea{ padding: 0 16px; margin-bottom: 64px; } .conclusionArea .title{ padding: 14px; } .conclusionArea ul li{ padding: 12px 14px 12px 43px; } .conclusionArea ul li a::before { left: -28px; } } /********** インクルードJSPコンポーネント（リスト調整） **********/ @media all and (max-width:640px){ .bps-freehtml:has(#subcat_tag_list) { margin-bottom: 56px; margin-top: -56px; } } @media all and (min-width:641px){ .bps-freehtml:has(#subcat_tag_list) { margin-bottom: 120px; margin-top: -120px; } } /********** 目次下CTA **********/ .cta_top_nlgnl { margin: 0 auto; margin: 0 auto; display: flex; padding: 46px 40px 30px 40px; flex-direction: column; align-items: center; gap: 24px; border-radius: 10px; border: 3px solid #65AE07; background: #FFF; max-width: 905px; } .cta_top_nlgnl .cta_top_ttl { color: #000; text-align: center; font-size: 22px; font-weight: 700; border-bottom: 2px solid #65AE07; display: flex; padding: 0px 16px 8px 16px; justify-content: center; align-items: center; gap: 10px; } .cta_top_nlgnl .cta_top_wrap_lead { display: flex; justify-content: center; align-items: flex-start; gap: 70px; } .cta_top_nlgnl .cta_top_lead { display: flex; flex-direction: column; align-items: center; gap: 10px; } .cta_top_nlgnl .cta_top_lead img { width: 160px; } .cta_top_nlgnl .cta_top_lead_ttl { color: #000; text-align: center; font-size: 24px; font-weight: 700; } .cta_top_nlgnl .cta_top_lead_ttl span { background: linear-gradient(transparent 60%, #c1df9c 0%); } .cta_top_nlgnl .cta_top_wrap { display: flex; flex-direction: column; align-items: flex-start; } .cta_top_nlgnl .cta_top_wrap_check { display: flex; padding: 0px 40px 0px 30px; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 19px; position: relative; list-style: none; } .cta_top_nlgnl .cta_top_mt0 { margin-top: 0 !important; } .cta_top_nlgnl .cta_top_subttl { font-size: 18px; margin: 19px 0 8px 0; } .cta_top_nlgnl .cta_top_wrap_txt { color: #000; font-size: 18px; font-weight: 500; } .cta_top_nlgnl sup { font-size: 60%; } .cta_top_nlgnl .cta_top_txtbg { font-size: 24px !important; } .cta_top_nlgnl .cta_top_txtbg2 { font-size: 22px !important; } .cta_top_nlgnl .cta_top_txtbg3 { color: #65AE07; font-size: 18px !important; } .cta_top_nlgnl .cta_top_wrap_ttl { color: #000; font-size: 18px; font-weight: 500; } .cta_top_nlgnl .cta_top_wrap_txt span { color: #65AE07; font-size: 22px; font-weight: 700; } .cta_top_nlgnl .cta_top_wrap_txt::before { content: url(/content/dam/smcc/jp/ja/nyukai/magazine/img/pict/icon_check.svg); display: block; position: absolute; left: 0; } .cta_top_nlgnl .cta_top_btn_ttl { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin-bottom: 8px; } .cta_top_nlgnl .cta_top_btn_ttl p { color: #EB7F1B; font-size: 16px; line-height: 150%; font-weight: bold; } .cta_top_nlgnl .cta_top_btn_ttl img { width: 10px; } .cta_top_nlgnl .cta_top_btn { display: flex; justify-content: center; align-items: center; gap: 8px; border-radius: 100px; background: #EB7F1B; box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.15); } .cta_top_nlgnl .cta_top_btn a { color: #FFF; text-align: center; font-size: 14px; font-weight: 700; text-decoration: none; padding: 8px 16px 8px 32px; width: 400px; } .cta_top_nlgnl .cta_top_btn:hover { opacity: 0.8; } .cta_top_nlgnl .cta_top_btn a span { font-size: 16px; } .cta_top_nlgnl .cta_top_btn a::after { position: relative; content: url(/content/dam/smcc/jp/ja/nyukai/magazine/img/pict/icon_arrow.svg); top: -10px; left: 135px; } .cta_top_nlgnl .cta_top_btn_content { display: flex; justify-content: center; align-items: center; gap: 24px; } .cta_top_nlgnl .card_note { list-style: none; } .cta_top_nlgnl .card_note_item1, .cta_top_nlgnl .card_note_item2 { padding-left: 20px; position: relative; color: #7A7A7A; font-size: 10px; line-height: 150%; margin-top: 4px; } .cta_top_nlgnl .card_note_item1::before { content: "※1"; display: block; position: absolute; top: 0; left: 0; } .cta_top_nlgnl .card_note_item2::before { content: "※2"; display: block; position: absolute; top: 0; left: 0; } .cta_top_nlgnl .cta_top_note { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; align-self: stretch; } @media (max-width: 640px) { .cta_top_nlgnl { padding: 24px 16px; } .cta_top_nlgnl .cta_top_wrap_lead { display: flex; width: 343px; flex-direction: column; align-items: center; gap: 24px; } .cta_top_nlgnl .cta_top_ttl { font-size: 18px; } .cta_top_nlgnl .cta_top_btn_content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; } .cta_top_nlgnl .cta_top_btn a { width: 311px; } .cta_top_nlgnl .cta_top_btn a::after { left: 90px; } .cta_top_nlgnl .cta_top_lead_ttl span { line-height: 150%; } .cta_top_nlgnl .cta_top_wrap_check { margin-top: 8px; width: 311px; padding: 0 0 0 30px; } .cta_top_nlgnl .cta_top_subttl { margin-top: 8px; } } .cta_top_gnlpp { margin: 0 auto; margin: 0 auto; display: flex; padding: 46px 40px 30px 40px; flex-direction: column; align-items: center; gap: 24px; border-radius: 10px; border: 3px solid #65AE07; background: #FFF; max-width: 905px; } .cta_top_gnlpp .cta_top_ttl { color: #000; text-align: center; font-size: 22px; font-weight: 700; border-bottom: 2px solid #65AE07; display: flex; padding: 0px 16px 8px 16px; justify-content: center; align-items: center; gap: 10px; } .cta_top_gnlpp .cta_top_wrap_lead { display: flex; justify-content: center; align-items: flex-start; gap: 70px; } .cta_top_gnlpp .cta_top_lead { display: flex; flex-direction: column; align-items: center; gap: 10px; } .cta_top_gnlpp .cta_top_lead img { width: 160px; } .cta_top_gnlpp .cta_top_lead_ttl { color: #000; text-align: center; font-size: 24px; font-weight: 700; } .cta_top_gnlpp .cta_top_lead_ttl span { background: linear-gradient(transparent 60%, #c1df9c 0%); line-height: 150%; } .cta_top_gnlpp .cta_top_wrap { display: flex; flex-direction: column; align-items: flex-start; } .cta_top_gnlpp .cta_top_wrap_check { display: flex; padding: 0px 40px 0px 30px; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 19px; position: relative; list-style: none; } .cta_top_gnlpp .cta_top_mt0 { margin-top: 0 !important; } .cta_top_gnlpp .cta_top_subttl { font-size: 18px; margin: 19px 0 8px 0; } .cta_top_gnlpp .cta_top_wrap_txt { color: #000; font-size: 18px; font-weight: 500; } .cta_top_gnlpp sup { font-size: 60%; } .cta_top_gnlpp .cta_top_txtbg { font-size: 24px !important; } .cta_top_gnlpp .cta_top_txtbg2 { font-size: 22px !important; } .cta_top_gnlpp .cta_top_txtbg3 { color: #65AE07; font-size: 18px !important; } .cta_top_gnlpp .cta_top_wrap_ttl { color: #000; font-size: 18px; font-weight: 500; } .cta_top_gnlpp .cta_top_wrap_txt span { color: #65AE07; font-size: 22px; font-weight: 700; } .cta_top_gnlpp .cta_top_wrap_txt::before { content: url(/content/dam/smcc/jp/ja/nyukai/magazine/img/pict/icon_check.svg); display: block; position: absolute; left: 0; } .cta_top_gnlpp .cta_top_btn_ttl { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin-bottom: 8px; } .cta_top_gnlpp .cta_top_btn_ttl p { color: #EB7F1B; font-size: 16px; line-height: 150%; font-weight: bold; } .cta_top_gnlpp .cta_top_btn_ttl img { width: 10px; } .cta_top_gnlpp .cta_top_btn { display: flex; justify-content: center; align-items: center; gap: 8px; border-radius: 100px; background: #EB7F1B; box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.15); } .cta_top_gnlpp .cta_top_btn a { color: #FFF; text-align: center; font-size: 14px; font-weight: 700; text-decoration: none; padding: 8px 16px 8px 32px; width: 400px; } .cta_top_gnlpp .cta_top_btn:hover { opacity: 0.8; } .cta_top_gnlpp .cta_top_btn a span { font-size: 16px; } .cta_top_gnlpp .cta_top_btn a::after { position: relative; content: url(/content/dam/smcc/jp/ja/nyukai/magazine/img/pict/icon_arrow.svg); top: -10px; left: 135px; } .cta_top_gnlpp .cta_top_btn_content { display: flex; justify-content: center; align-items: center; gap: 24px; } .cta_top_gnlpp .card_note { list-style: none; } .cta_top_gnlpp .card_note_item1, .cta_top_gnlpp .card_note_item2 { padding-left: 20px; position: relative; color: #7A7A7A; font-size: 10px; line-height: 150%; margin-top: 4px; } .cta_top_gnlpp .card_note_item1::before { content: "※1"; display: block; position: absolute; top: 0; left: 0; } .cta_top_gnlpp .card_note_item2::before { content: "※2"; display: block; position: absolute; top: 0; left: 0; } .cta_top_gnlpp .cta_top_note { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; align-self: stretch; } @media (max-width: 640px) { .cta_top_gnlpp { padding: 24px 16px; } .cta_top_gnlpp .cta_top_wrap_lead { display: flex; width: 343px; flex-direction: column; align-items: center; gap: 24px; } .cta_top_gnlpp .cta_top_ttl { font-size: 18px; } .cta_top_gnlpp .cta_top_btn_content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; } .cta_top_gnlpp .cta_top_btn a { width: 311px; } .cta_top_gnlpp .cta_top_btn a::after { left: 90px; } .cta_top_gnlpp .cta_top_lead_ttl span { line-height: 150%; } .cta_top_gnlpp .cta_top_wrap_check { margin-top: 8px; width: 311px; padding: 0 0 0 30px; } .cta_top_gnlpp .cta_top_subttl { margin-top: 8px; } } .borderBox_title { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 2px #23A0AE; border-radius: 4px; } .borderBox_title .box-title { position: absolute; display: inline-block; top: -13px; left: 10px; padding: 0 9px; line-height: 1; font-size: 18px; background: #FFF; color: #23A0AE; font-weight: bold; } .borderBox_title p { margin: 0; padding: 10px 16px; font-size: 16px; } /* tabs cta_new_tab */ .tabs .cta_new_tab p.cta_new_feature { font-size: 25px; font-weight: bold; position: relative; padding-left: 28px; line-height: 150%; } .tabs .cta_new_tab p.cta_new_feature::before { content: ""; background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/feather-check-circle.svg); background-repeat: no-repeat; position: absolute; top: 3px; left: 126px; width: 29px; height: 28px; } .tabs .cta_txt_center { text-align: center; } .tabs .cta_new_tab p.cta_new_feature span { color: #23A0AE; } .tabs .cta_new_feature_content { gap:40px; } .tabs .cta_new_feature_content_gnl { display: flex; justify-content: center; align-items: center; margin-top: 24px; gap:40px; } .tabs p.cta_new_feature_content_text_benefit_item_note_bo_g_annual{ color: #333333; line-height: 15px; letter-spacing: 0; font-size: 11px; margin-top: 0; margin-right: -140px; text-align: center; font-weight: normal; } .tabs .cta_c_orange { color: #F55217; } .tabs p.cta_new_feature_content_text_benefit_item_note_bo_g_limit { color: #333333; line-height: 15px; letter-spacing: 0; font-size: 11px; margin-top: 0; margin-right: -75px; font-weight: normal; text-align: center; } .tabs .cta_new_feature_content_text_benefit_i_gnl { margin-left: 26px; } .tabs .cta_fw_b_orange_emphasis::after { content: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/ic_emphasis.svg); position: absolute; top: -12px; } .tabs p.cta_new_feature_content_text_benefit_item_note_bo_cl { color: #333333; line-height: 15px; letter-spacing: 0; font-size: 11px; margin-top: 0; margin-right: -55px; text-align: center; font-weight: normal; } .tabs .cta_new_campaign_head_note { margin-left: 35px; font-weight: bold; margin-top: 12px; text-align: center; } .tabs .cta_new_campaign { margin: 0 0 12px; display: flex; justify-content: center; height: auto; } .tabs p.cta_new_campaign_title { font-size: 18px; color: #fff; line-height: 34px; letter-spacing: 0; background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/ribbon_pc.svg); background-repeat: no-repeat; background-position: center center; padding-left: 20px; padding-right: 32px; } .tabs p.cta_new_campaign_content { font-size: 24px; color: #333333; line-height: 34px; letter-spacing: 0; margin-top: 0; padding-left: 9px; } .tabs .cta_new_point_note { display: flex; padding: 0 20px; } .tabs .cta_new_point_note p { font-size: 12px; margin-top: 0; line-height: 16px; padding-left: 0; text-align: left; } .tabs .cta_new_point_note p:last-child { padding-left: 10px; } .tabs .cta_new_point .cta_new_point_content_feature>div { width: 252px; height: 132px; margin-top: 25px; } .tabs .cta_new_point_content_condition_free { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_01_pc.png); background-repeat: no-repeat; background-position: right; } .tabs .cta_new_point_content_twincard { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_08_pc.png); background-position-x: 45px; background-repeat: no-repeat; background-position: right; } .tabs .cta_new_point_content_threedaysissue { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_07_pc.png); } .tabs .cta_new_point_content_financialstatements p.cta_new_point_content_item_2 { margin-top: 8px; height: 57px; } .tabs .cta_fc_orange { font-weight: bold; color: #23A0AE; } .tabs .linear_01 { background: #FFED98; background: linear-gradient(transparent 60%, #FFED98 0%); } .tabs .cta_new_feature_content_text_benefit { margin-top: 29px; } .tabs .cta_new_point_content_twincard p.cta_new_point_content_item_1 { line-height: 22px; color: #333333; padding-top: 26.5px; } .tabs div.linear_01 { background: #FFED98; background: linear-gradient(transparent 60%, #FFED98 0%); background-size: 222px 67px; background-repeat: no-repeat; background-position-x: 13px; } .tabs .linear_02 { background: #FFED98; background: linear-gradient(transparent 12%, #FFED98 0%); } .tabs .cta_detail_note { padding-top: 15px; display: flex; padding-left: 36px; } .tabs .cta_detail_note p { font-size: 12px; text-align: left; } .tabs .cta_new_point_content_threedaysissue { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_02_pc.png); background-repeat: no-repeat; background-position: right; padding-top: 30px; } .tabs .cta_new_point_content_threedaysissue.kaigai_cta_bg { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_03_pc.png); background-repeat: no-repeat; background-position: right; } .tabs .cta_new_point_content_threedaysissue p.cta_new_point_content_item_1 { line-height: 27px; color: #333333; margin-top: -10px; } .tabs .cta_new_point_content_threedaysissue p.cta_new_point_content_item_1.cta_kaigai_p_item { margin-top: -32px; text-align: left; padding-left: 30px; } .tabs .cta_new_point_content_threedaysissue p.cta_new_point_content_item_2.cta_kaigai { margin-top: -10px; } .tabs .cta_new_point_content_threedaysissue p.cta_new_point_content_item_1.cta_kaigai_p { margin-top: 0px; } .tabs .cta_new_point_content_financialstatements.monthry_cta { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_04_pc.png); background-repeat: no-repeat; background-position: right; } .tabs .cta_new_point_content_threedaysissue.web_cta_bg { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_05_pc.png); background-repeat: no-repeat; background-position: right; padding-top: 3px; } .tabs span.cta_fs16_bn { color: #333 !important; font-size: 16px; background: none; } .tabs .cta_card_detail_note_corp { display: flex; justify-content: center; } .tabs .cta_card_detail_note_corp p { font-size: 12px; text-align: center; padding-top: 16px; } .tabs .cta_fs14 { font-size: 14px; } .tabs .cta_fs20 { font-size: 20px; } .tabs .cta_fs23_point { font-size: 23px; } .tabs .cta_fs24 { font-size: 24px; } .tabs .cta_fs28 { font-size: 28px; } .tabs .cta_fs30 { font-size: 30px; } .tabs .cta_fs32 { font-size: 32px; } .tabs .cta_fs36_n { font-size: 36px; background: none !important; } .tabs .cta_fs43_point { font-size: 43px; } .tabs sup { top: -.5em; } .tabs .set_sup { letter-spacing: -1px; } @media (min-width: 641px) { #business_purchasing.cta_new_tab, #purchasing.cta_new_tab{ width: 85% !important; margin-right: auto !important; margin-left: auto !important; padding: 0 40px; } .tabs .cta_pc_paT25 { padding-top: 25px !important; } .tabs .cta_pc_maT15 { margin-top: 15px !important; } .tabs .cta_pc_paT42 { padding-top: 42px !important; } } @media (max-width: 640px) { div.tabs > div.cmp-tabs > .cmp-tabs__tabpanel > .container > .cmp-container{ border: 1px solid rgba(0, 0, 0, .2); } .tabs .tab_hojin_bizi_switch:checked+.tab_hojin_bizi_label+.tab_hojin_bizi_content { height: auto; overflow: auto; padding: 0px; opacity: 1; transition: .5s opacity; box-shadow: 0 0 3px rgba(0, 0, 0, .2); } .tabs .cta_new_tab p.cta_new_feature { font-size: 17px; font-weight: bold; position: relative; padding-bottom: 22px; padding-top: 10px; padding-left: 26px; letter-spacing: 0; margin-top: 0; } .tabs .cta_new_tab p.cta_new_feature::before { content: ""; background-repeat: no-repeat; position: absolute; top: 16px; left: 5px; width: 16px; height: 16px; background-size: contain; } .tabs .cta_new_feature_content img { width: 284px; } .tabs .cta_new_feature_content_text_benefit_item_dd .cta_emphasis_sp::after { position: absolute; top: -20px; } .tabs .cta_new_feature_content_text_benefit_item_dt_bo_cl { font-size: 16px; line-height: 40px; font-weight: bold; border-bottom: 1px #C7C7C7 solid; height: 50px; } .tabs .cta_new_campaign { margin: 24px 0 16px; display: block; } .tabs p.cta_new_campaign_title { font-size: 16px; font-weight: bold; color: #fff; line-height: 26px; letter-spacing: 0; background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/ribbon_sp.svg); background-repeat: no-repeat; background-position: center center; margin-top: 5px; padding: 0; height: 26px; } .tabs .cta_new_campaign_head_note { font-size: 16px; margin-left: 0; } .tabs p.cta_new_campaign_content { font-size: 28px; font-weight: bold; color: #333333; line-height: 39px; letter-spacing: 0.02em; margin-top: 9px; padding: 0; } .tabs p.cta_new_campaign_content>span { color: #23A0AE; } .tabs p.cta_new_campaign_content span.cta_emphasis_sp_text { font-size: 24px; } .tabs p.cta_new_campaign_content span.cta_emphasis_sp_present { font-size: 28px; color: #333333; } .tabs .cta_new_point .cta_new_point_content_feature>div { width: 252px; height: 90px; margin-top: 20px; } .tabs .cta_new_point .cta_new_point_content_feature>div.cta_new_point_content_financialstatements { margin-top: 49px; } .tabs .cta_new_point .cta_new_point_content_feature>div.cta_new_point_content_financialstatements { background-repeat: no-repeat; background-position-x: right; background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_01_sp.png); } .tabs .cta_new_point_content_financialstatements p.cta_new_point_content_item_1 { padding-top: 0; } .tabs .cta_new_point_content_twincard p.cta_new_point_content_item_1 { line-height: 22px; color: #333333; padding-top: 0; margin-top: 26px; } .tabs .cta_new_point_content_twincard { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_08_sp.png); background-position-x: right; background-repeat: no-repeat; } .tabs .cta_new_point_content_threedaysissue { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_07_sp.png); background-position-x: right; background-repeat: no-repeat; } .tabs .cta_new_feature_content_text_benefit .cta_new_feature_content_text_benefit_img { height: 21px; width: 91px; margin: 9px 0; } .tabs .cta_new_feature_content_text_benefit_item_dt { height: 50px; } .tabs .cta_new_feature_content_text_benefit_item_dd { height: 50px; } .tabs .cta_new_feature_content_text_benefit_item_dd_bo_cl{ height: 45px; } .tabs .cta_new_feature_content_text_benefit .cta_new_feature_content_text_benefit_item_dt:last-child { border-bottom: 1px #C7C7C7 solid; } .tabs .cta_new_feature_content_text_benefit .cta_new_feature_content_text_benefit_item_dd:last-child { border-bottom: 1px #C7C7C7 solid; } .tabs p.cta_new_campaign_content span.cta_emphasis_sp_price { font-size: 37px; } .tabs .cta_new_feature_content_text_benefit_item_dt_gnl{ height: 65px; } .tabs .cta_new_feature_content_text_benefit_item_dd_gnl_annual, .tabs .cta_new_feature_content_text_benefit_item_dd_gnl, .tabs .cta_new_feature_content_text_benefit_item_dd_bo_cl, .tabs .cta_new_feature_content_text_benefit_item_dd_gnl{ height: 50px; } .tabs .cta_new_feature_content_text_benefit_item_dd_gnl_annual{ height: 65px; } .tabs .cta_new_feature_content_text_benefit_item_dd_gnl { border-bottom: 1px #C7C7C7 solid !important; } .tabs .cta_new_point_content_condition_free { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_01_sp.png); background-repeat: no-repeat; background-position-x: right; } .tabs .cta_new_point .cta_new_point_content_feature>div.cta_new_point_content_condition_free { width: 260px; height: 90px; margin-top: 41px; } .tabs .cta_new_feature_content_text_benefit_item_dd.bizi_cta_item { line-height: 24px; padding-right: 0px; } .tabs .cta_new_feature_content_text_benefit_item_dd_bo_parche { height: 50px; } .tabs .cta_new_point_content_threedaysissue p.cta_new_point_content_item_1.cta_kaigai_p_item { margin-top: -30px; text-align: left; padding-left: 18vw; } .tabs .cta_new_point_content_threedaysissue { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_02_sp.png); background-repeat: no-repeat; background-position: center; padding-top: 0px; } .tabs .cta_new_point .cta_new_point_content_feature>div { width: 310px; margin: 0 auto; } .tabs .cta_new_point .cta_new_point_content_feature>div { height: 90px; } .tabs .cta_new_point .cta_new_point_content_feature>div.cta_new_point_content_financialstatements{ background-position: center; } .tabs .cta_new_point_content_threedaysissue p.cta_new_point_content_item_2 { margin-top: 5px; padding-top: 10px; } .tabs .cta_new_point_content_threedaysissue p.cta_new_point_content_item_2.cta_kaigai { margin-top: 0px; padding-top: 10px; } .tabs .cta_feature_lead.cta_p_check img { margin-right: -14px; } .tabs .cta_new_point .cta_new_point_content_feature>div.cta_new_point_content_financialstatements.pl_cta_bg { background-repeat: no-repeat; background-position: center; margin-top: 49px; background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_06_sp.png); } .tabs .cta_new_point .cta_new_point_content_feature>div.cta_new_point_content_financialstatements.bizi_pl_cta_point { margin-top: 10px; } .tabs .cta_new_point .cta_new_point_content_feature>div.cta_new_point_content_financialstatements.monthry_cta { background-repeat: no-repeat; background-position: center; margin-top: 49px; background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_04_sp.png); } .tabs .cta_new_point_content_threedaysissue.web_cta_bg { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_05_sp.png); background-repeat: no-repeat; background-position: center; } .tabs .cta_detail_note { padding: 10px; } .tabs .sp_h60 { height: 60px !important; } .tabs .sp_h85 { height: 85px !important; } .tabs .sp_h130 { height: 130px !important; } } /* cta_new_tab */ .cta_feature_lead { display: flex; justify-content: center; align-items: center; } .cta_feature_lead img { margin-right: 5px; width: 25px; height: 25px; } p.cta_new_feature_bizi { font-size: 25px; font-weight: bold; position: relative; } p.cta_new_feature_bizi span { color: #23A0AE; } .cta_new_feature_content { display: flex; justify-content: center; align-items: center; margin-top: 24px; } .cta_new_plus { position: relative; } .cta_new_feature_content img { width: 273px; } .cta_new_feature_content_text_bo_c { margin-left: 10px; } p.cta_new_feature_content_text_name { font-size: 28px; line-height: 1.5; text-align: left; } .cta_fw_b { font-weight: bold; } .cta_new_feature_content_text_name span { background: #FFED98; background: linear-gradient(transparent 60%, #FFED98 0%); } .cta_new_feature_content_text_benefit { display: flex; margin-top: 10px; } p.cta_new_feature_content_text_benefit_item { color: #333333; line-height: 21px; letter-spacing: 0; height: 21px; } .cta_new_feature_content_text_benefit p { text-align: left; font-size: 15px; font-weight: bold; } .cta_fw_b_orange_emphasis { font-weight: bold; color: #F55217; position: relative; } p.cta_new_feature_content_text_benefit_item:last-child { margin-top: 11px; } .cta_new_feature_content_text_benefit_i:last-child { margin-left: 20px; } .cta_new_feature_content_text_benefit .cta_new_feature_content_text_benefit_img { height: 21px; width: 91px; vertical-align: middle; } .cta_new_point { margin-top: 22px; } .cta_new_point_icon { background-color: #23A0AE; display: flex; justify-content: center; margin: auto; height: 38px; width: 262px; position: relative; z-index: 1; } .cta_new_point .cta_new_point_icon_head { font-weight: bold; font-size: 16px; color: #ffffff; margin: auto 0 auto 7px; line-height: 38px; letter-spacing: 0; } .cta_new_point .cta_new_point_content { border: 3px solid #23A0AE; margin-top: -22px; padding-bottom: 12px; position: relative; } .cta_new_point .cta_new_point_content { margin-bottom: 16px; } .cta_new_point .cta_new_point_content_feature { display: flex; justify-content: center; margin-bottom: 6px; } .cta_new_point .cta_new_point_content_feature { justify-content: space-around; } .cta_new_point_content_financialstatements { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_01_pc.png); background-repeat: no-repeat; background-position: right; } .cta_new_point_content_parchecard { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_02_pc.png); background-repeat: no-repeat; background-position: right; } .cta_new_point_content_threedaysissue { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_02_pc.png); background-repeat: no-repeat; background-position: right; padding-top: 30px; } .cta_new_point .cta_new_point_content_feature>div { width: 252px; height: 132px; margin-top: 25px; } .cta_new_point .cta_new_point_content_feature>div { height: 108px; width: 180px; } .cta_fs18 { font-size: 18px; } .cta_fs25 { font-size: 25px !important; } .cta_new_point_content_feature p { text-align: center; } .cta_new_point_content_financialstatements p.cta_new_point_content_item_1 { line-height: 27px; color: #333333; padding-top: 20px; } .cta_new_point_content_threedaysissue p.cta_new_point_content_item_2 { margin-top: 0; height: 57px; } .cta_fc_blue span { font-weight: bold; color: #23A0AE !important; background: #FFED98; background: linear-gradient(transparent 60%, #FFED98 0%); } .cta_new_point_content_parchecard p.cta_new_point_content_item_1 { line-height: 28px; color: #333333; padding-top: 18px; } .hojin_bizi_cta_twobutton_box { display: block; margin-top: 18px; } .hojin_bizi_cta_1_twobutton_1 { text-decoration: none !important; } .hojin_bizi_cta_twobutton_1 { text-decoration: none; border-radius: 2px; display: block; padding: 10px 13px; text-align: left; background-color: #FD6C6E; border-color: #FD6C6E; border-style: solid; margin: 0 auto; font-weight: bold; font-size: 16px; max-width: 100%; margin-top: 5px; color: #fff; letter-spacing: 0px; } .hojin_bizi_cta_twobutton_1::after { float: right; margin-top: 11px; display: block; width: 0; height: 0; content: ''; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border-width: 4px 0 4px 5px; border-style: solid; border-color: transparent transparent transparent #fff; } .hojin_bizi_cta_1_twobutton_1:hover{ opacity: 0.7; } p.cta_new_feature_content_text_benefit_item.item_entry { font-size: 15px; font-weight: bold; text-align: left; margin-top: 11px; } .cta_new_tab .cta_c_orange { color: #F55217; } @media (max-width: 640px) { .cta_feature_lead { display: flex; justify-content: center; align-items: baseline; } .cta_new_tab { width: 100%; margin: 10px auto 10px; text-align: center; } p.cta_new_feature_bizi { font-size: 18px; font-weight: bold; position: relative; padding-bottom: 13px; padding-top: 10px; } .cta_feature_lead img { width: 16px; height: 16px; } p.cta_new_feature_content_text_name { line-height: 39px; font-size: 26px; font-weight: bold; text-align: center; } .cta_new_feature_content { display: block; margin: 0 auto; } .cta_new_tab p.cta_new_feature { line-height: 22.4px; font-size: 16px; padding-bottom: 24px; border-bottom: none; font-weight: bold; color: #333333; margin-top: 14px; letter-spacing: 0.03em; } .cta_new_feature_content_text { margin: 0 auto; max-width: 343px; } .cta_new_feature_content_text_benefit { display: flex; justify-content: center; margin: 21px auto 0; } .cta_new_feature_content_text_benefit dl.cta_new_feature_content_text_benefit_item { margin-top: 0!important; width: 50%; } .cta_new_feature_content_text_benefit_item_dt { font-size: 16px; line-height: 40px; font-weight: bold; border-bottom: 1px #C7C7C7 solid; } .cta_new_feature_content_text_benefit .cta_new_feature_content_text_benefit_item_dt:last-child { border-bottom: none; } .cta_new_feature_content_text_benefit_item_dd { line-height: 40px; border-bottom: 1px #C7C7C7 solid; padding-left: 3vw; padding-right: 3vw; } .cta_new_feature_content_text_benefit_item_dd.bizi_c_item { line-height: 20px; font-size: 11px; font-weight: bold; padding-bottom: 5px; } .cta_new_feature_content_text_benefit_item_dd .cta_emphasis_sp { color: #F55217; font-weight: bold; position: relative; } .cta_new_feature_content_text_benefit_item_dt_bo_cl { font-size: 16px; line-height: 40px; font-weight: bold; border-bottom: 1px #C7C7C7 solid; } .cta_new_feature_content_text_benefit_item { text-align: left; } .cta_new_feature_content_text_benefit_item_dd_bo_cl { line-height: 20px; border-bottom: 1px #C7C7C7 solid; padding-left: 3vw; padding-right: 3vw; } .cta_new_feature_content_text_benefit .cta_new_feature_content_text_benefit_img { height: 21px; width: 91px; margin: 7px 0; } .cta_new_feature_content_text_benefit .cta_new_feature_content_text_benefit_item_dd:last-child { border-bottom: none; } .cta_new_point .cta_new_point_content_feature { display: block; margin-bottom: 6px; } .cta_new_point_icon { background-color: #23A0AE; display: flex; justify-content: center; margin: auto; height: 36px; width: 252px; position: relative; z-index: 1; } .cta_new_feature_content_text_benefit_item_dt_gnl { font-size: 16px; line-height: 40px; font-weight: bold; border-bottom: 1px #C7C7C7 solid; } .cta_new_feature_content_text_benefit_item_dd_gnl_annual { line-height: 20px; border-bottom: 1px #C7C7C7 solid; padding-left: 3vw; padding-right: 3vw; } .cta_note_sp{ font-size: 11px; line-height: 0.5; } .cta_new_feature_content_text_benefit_item_dd_gnl{ line-height: 40px; border-bottom: 1px #C7C7C7 solid; padding-left: 3vw; padding-right: 3vw; } .cta_new_feature_content_text_benefit .cta_new_feature_content_text_benefit_item_dd_gnl:last-child { border-bottom: none; } .cta_new_feature_content_text_benefit_item_dd_bo_parche { line-height: 40px; border-bottom: 1px #C7C7C7 solid; padding-left: 3vw; padding-right: 3vw; } .cta_sp_paL10 { padding-left: 10px !important; } .cta_new_point .cta_new_point_content_feature>div { width: 319px; margin: 0 auto 10px auto; } .cta_new_point .cta_new_point_content_feature>div.cta_new_point_content_financialstatements { background-repeat: no-repeat; background-position: center; margin-top: 49px; background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_01_sp.png); } .cta_new_point_content_parchecard p.cta_new_point_content_item_1 { padding-top: 0px; margin-top: 5px; } .cta_new_point_content_financialstatements p.cta_new_point_content_item_1 { padding-top: 0; } .cta_new_point_content_parchecard { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_02_sp.png); background-repeat: no-repeat; background-position: center; } .cta_new_point_content_threedaysissue { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_illust_02_sp.png); background-repeat: no-repeat; background-position: center; padding-top: 0px; } .cta_new_point .cta_new_point_content_feature>div{ height: auto; } .cta_fs20_sp { font-size: 20px; } .cta_sp_lh60 { line-height: 60px !important; } .cta_sp_lh85 { line-height: 85px !important; } .cta_sp_lh130 { line-height: 130px !important; } } /* supervision */ .supervision { background-color: #f5f5f5; padding: 10px; margin-top: 24px; margin-bottom: 64px; } .supervision__image img { width: 150px; } .supervision__profile { color: #000; font-weight: 700; } .supervision__profile span { display: block; font-size: 14px; line-height: 2.3; } .supervision__text { display: table-cell; padding: 70px 0 0; vertical-align: top; font-size: 16px; line-height: 1.6; } .supervision a{ color: #1693ad; display: block; width: fit-content; margin-top: 16px; } .supervision .blank{ position: relative; display: inline-block; margin-left: 8px; } .supervision .blank:after, .supervision .blank:before { position: relative; display: inline-block; width: 10px; height: 8px; content: ''; border: #fff solid 1px; background-color: #1693ad; } .supervision .blank:before { top: 2px; left: 5px; } .supervision .blank:after { top: -1px; left: -10px; } @media (min-width: 641px) { .supervision { position: relative; display: table; width: 100%; background-color: #F8F8F8; padding: 40px; margin-top: 40px; margin-bottom: 80px; } .supervision__image { position: relative; display: table-cell; width: 174px; vertical-align: top; } .supervision__profile { position: absolute; top: 0; left: 180px; display: block; width: 500px; font-size: 20px; line-height: 1.4; } } @media (max-width: 640px) { .supervision { padding: 24px; } .supervision__image { text-align: center; } .supervision__image img { width: 100px; display: inline-block; margin-right: 16px; vertical-align: middle; } .supervision__profile { display: inline-block; width: 35%; text-align: left; vertical-align: middle; word-wrap: break-word; font-size: 20px; line-height: 1.4; } .supervision__profile span { display: block; font-size: 14px; line-height: 2.3; } .supervision__text { padding: 16px 0 0; font-size: 14px; line-height: 1.6; } } /* seek */ #seek .seek__content .seek__link { border: none; margin: 0; position: relative; } #seek .seek__link__detail { border: #d3dbe5 solid 1px; } #seek .seek__link a { position: relative; display: block; font-weight: 700; } #seek .seek__content .seek__link a { border-radius: 5px; padding: 8px 20px; font-size: 62%; } #seek .seek__content .seek__link a[target="_blank"] { padding-right: 18px; } #seek .seek__content .seek__link a[target="_blank"]::before { top: calc(50% - 5px); right: 16px; position: absolute; display: inline-block; width: 10px; height: 8px; content: ''; border: #fff solid 1px; background-color: #1693ad; } #seek .seek__content .seek__link a[target="_blank"]::after { top: calc(50% - 3px); right: 19px; position: absolute; display: inline-block; width: 10px; height: 8px; content: ''; border: #fff solid 1px; background-color: #1693ad; } @media print, screen and (min-width: 769px) { #seek .seek__content .seek__link { padding: 0 10px; } #seek .seek__link a { margin: 15px 0 0; padding-right: 10px; font-size: 100%; } } /* seek_card */ #seek_card h2.seek__heading{ color: #333333; text-align: center; font-size: 40px; line-height: 140%; font-weight: 700; margin-top: 0; } #seek_card h2.seek__heading span{ font-size: 24px; position: relative; } #seek_card h2.seek__heading span::before{ position: absolute; content: ""; background-color: #FFF68D; width: 250px; height: 10px; bottom: 0; right: 0; left: -5px; margin: 0 auto; z-index: -1; } #seek_card h2.seek__heading::before{ content: none; } #seek_card .text_type01 { color: #333333; text-align: center; font-size: 20px; line-height: 140%; font-weight: 700; } #seek_card .text_type01 span{ font-size: 14px; font-weight: 400; } #seek_card .seek__list { display: flex; justify-content: center; gap:40px; margin-bottom: 80px; margin-top: 40px; } #seek_card .seek__item { width: 327px; border-radius: 10px; border: 1px solid #ccc; text-align: center; padding: 30px; display: inline-block; box-shadow:0 0px 13px 0px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; } #seek_card .seek__item .seek__image img{ width: 224px; } #seek_card .seek__item .seek__title { font-size: 18px; font-weight: 700; line-height: 140%; color: #333; margin-top: 16px; flex-grow: 1; } #seek_card .seek__item .seek__text { font-size: 14px; font-weight: 400; line-height: 140%; color: #333; margin-top: 8px; } #seek_card .seek__item .seek__link { margin-top: 16px; } #seek_card .seek__link a { padding: 10px; font-size: 16px; font-weight: 400; line-height: 150%; letter-spacing: .4px; position: relative; display: block; border-radius: 4px; text-decoration: none; } #seek_card .seek__link a.seek__link__detail { border: 1px solid #D3DBE5; color: #1693AD; } #seek_card .seek__link a.seek__link__detail[target="_blank"]::before { top: calc(50% - 5px); right: 16px; position: absolute; display: inline-block; width: 10px; height: 8px; content: ''; border: #fff solid 1px; background-color: #00819C; } #seek_card .seek__link a.seek__link__detail[target="_blank"]::after { top: calc(50% - 3px); right: 19px; position: absolute; display: inline-block; width: 10px; height: 8px; content: ''; border: #fff solid 1px; background-color: #00819C; } #seek_card .seek__link a.seek__link__cv { background-color: #00819C; color: #fff; margin-top: 10px; } #seek_card .seek__link a.seek__link__cv[target="_blank"]::before { top: calc(50% - 5px); right: 16px; position: absolute; display: inline-block; width: 10px; height: 8px; content: ''; border: #00819C solid 1px; background-color: #fff; } #seek_card .seek__link a.seek__link__cv[target="_blank"]::after { top: calc(50% - 3px); right: 19px; position: absolute; display: inline-block; width: 10px; height: 8px; content: ''; border: #00819C solid 1px; background-color: #fff; } @media print, screen and (max-width: 640px) { #seek_card h2.seek__heading{ font-size: 24px; } #seek_card h2.seek__heading span { font-size: 14px; } #seek_card h2.seek__heading span::before { width: 147px; height: 7px; bottom: 1px; left: -3.5px; } #seek_card .seek__list{ display: block; margin-top: 32px; margin-bottom: 36px; } #seek_card .seek__item{ margin: 0 auto; display: block; width: auto; } #seek_card li.seek__item{ margin-top: 32px; } #seek_card li.seek__item:first-child{ margin-top: 0; } #seek_card .seek__item .seek__title { font-size: 16px; } } /* seek_cp */ #seek_cp{ border: 2px solid #00819C; border-radius: 10px; box-shadow: 0 0px 13px 0px rgba(0, 0, 0, 0.2); padding: 64px; margin-bottom: 0; margin-top: 0; } @media print, screen and (max-width: 640px) { #seek_cp{ padding: 32px 24px; box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25); } } .text_t-type01{ text-align: center; font-size: 24px; color: #333; line-height: 140%; font-weight: 700; margin-top: 80px; margin-bottom: 48px; } @media print, screen and (min-width: 769px) { .text_t-type01{ font-size: 20px; margin-top: 36px; margin-bottom: 24px; } } /* mainSec */ .mainSec .cta_top_bg_owners { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_owners_pc.png); background-position: center; max-width: 720px; width: 100%; margin: 0 auto; } .mainSec .cta_top_owners .cta_top_lead { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin-bottom: 24px; background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/text_owners.svg); background-position: left top; background-repeat: no-repeat; justify-content: center; } .mainSec .cta_top_owners .cta_top_ttl { color: #000; font-size: 24px; font-weight: 700; line-height: 150%; margin-top: 32px; letter-spacing: 1.2px; } .mainSec .cta_top_owners .cta_top_txt { color: #000; font-size: 14px; font-weight: 400; } .mainSec .cta_top_owners .cta_top_wrap { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/text_owners.svg); background-position: right bottom; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center; gap: 32px; } .mainSec .cta_top_owners .cta_top_wrap_img { max-width: 240px; margin-bottom: 25px; } .mainSec .cta_top_owners .cta_top_wrap_img img { width: 240px; } .mainSec .cta_top_owners .cta_top_wrap_content { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; position: relative; } .mainSec .cta_top_owners .cta_top_wrap_check { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .mainSec .cta_top_owners .cta_top_wrap_txt { padding: 5px 16px 5px 50px; background: #FFF; box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.05); color: #0E434E; font-size: 18px; font-weight: 700; display: inline-block; } .mainSec .cta_top_owners .cta_top_wrap_txt::before { content: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/icon_check.svg); display: block; position: absolute; left: 16px; padding-top: 5px; } .mainSec .cta_top_owners .cta_top_wrap_txt span { color: #1693AD; font-size: 22px; font-weight: 700; } .mainSec .cta_top_owners sup { font-size: 60%; top: -0.8em; color: #7A7A7A; } .mainSec .cta_top_owners .cta_top_txtbg { font-size: 26px !important; } .mainSec .cta_top_owners .card_note_item1 { padding-left: 20px; position: relative; color: #7A7A7A; font-size: 10px; line-height: 150%; padding-bottom: 4px; display: block; } .mainSec .cta_top_owners .card_note_item1::before { content: "※"; display: block; position: absolute; top: 0; left: 0; } .mainSec .cta_top_owners .card_note_item2 { padding-left: 20px; position: relative; color: #7A7A7A; font-size: 10px; line-height: 150%; padding-bottom: 4px; display: block; } .mainSec .cta_top_owners .card_note_item2::before { content: "※1"; display: block; position: absolute; top: 0; left: 0; } .mainSec .cta_top_owners .card_note_item3 { padding-left: 20px; position: relative; color: #7A7A7A; font-size: 10px; line-height: 150%; padding-bottom: 4px; display: block; } .mainSec .cta_top_owners .card_note_item3::before { content: "※2"; display: block; position: absolute; top: 0; left: 0; } .mainSec .cta_top_owners .cta_top_btn { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 38px 0 32px 0; } .mainSec .cta_top_owners .cta_top_btn_ttl { color: #FD6C6E; text-align: center; font-size: 12px; font-weight: 700; line-height: 150%; padding: 4px 16px; gap: 10px; border-radius: 90px; border: 1px solid #FD6C6E; background: #FFF; position: absolute; margin-top: -33px; z-index: 1; } .mainSec .cta_top_owners .cta_top_btn_ttl span { font-size: 14px; } .mainSec .cta_top_owners .cta_top_btn_ttlbg { font-size: 16px !important; } .mainSec .cta_top_owners .cta_top_btn_txt { display: flex; justify-content: center; align-items: center; padding: 18px 140px 8px 145px; border-radius: 4px; background: #FD6C6E; box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.15) inset; color: #FFF !important; text-decoration: none; font-size: 16px; font-weight: 700; line-height: 160%; z-index: 0; } .mainSec .cta_top_owners .cta_top_btn_txt::after { position: relative; content: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/icon_cv-accordion.svg); left: 16px; top: -1px; } @media print, screen and (max-width: 640px) { .mainSec .cta_top_bg_owners { background-image: url(/content/dam/smcc/jp/ja/hojin/magazine/bizi-dora/common/img/bg_owners_sp.png); background-position: unset; } .mainSec .cta_top_owners .cta_top_lead { background-size: 140px; } .mainSec .cta_top_owners .cta_top_ttl { font-size: 18px; letter-spacing: normal; } .mainSec .cta_top_owners .cta_top_txt { font-size: 12px; } .mainSec .cta_top_owners .cta_top_wrap { padding: 0 16px; background-size: 140px; flex-direction: column; } .mainSec .cta_top_owners .cta_top_wrap_img { margin: 0 auto; } .mainSec .cta_top_owners .cta_top_wrap_img img { width: 245px; } .mainSec .cta_top_owners .cta_top_wrap_txt { font-size: 14px; padding: 7px 16px 7px 47px; } .mainSec .cta_top_owners .cta_top_wrap_txt::before { padding-top: 0; } .mainSec .cta_top_owners .cta_top_wrap_txt span { font-size: 18px; } .mainSec .cta_top_owners .cta_top_txtbg { font-size: 22px !important; } .mainSec .cta_top_owners .cta_top_btn_ttl { font-size: 10px; margin-top: -36px; line-height: 180%; } .mainSec .cta_top_owners .cta_top_btn_ttl span { font-size: 12px; } .mainSec .cta_top_owners .cta_top_btn_txt { font-size: 14px; font-weight: 700; min-width: 300px; padding: 18px 100px 8px 100px; } .mainSec .cta_top_owners .cta_top_btn_txt::after { left: 22px; } .mainSec .cta_top_owners .card_note{ max-width: 300px; } } #name_area { background-color: #DCEFF3; border-radius: 4px; padding: 2px 24px; color: #00728E; font-weight: 700; font-size: 12px; } /* new_membership_present */ #new_membership_present{ border: 2px solid #00819C; border-radius: 10px; box-shadow: 0 0px 13px 0px rgba(0, 0, 0, 0.2); padding: 64px; margin-bottom: 40px; margin-top: 47px; } @media print, screen and (max-width: 640px) { #new_membership_present{ padding: 32px 24px; box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25); margin-top: 40px; } } .movie__inner{ width: 742px; padding: 20px 59px 40px; border: solid 1px #d3dbe5; border-radius: 3px; background: #fff; margin: 80px auto 0 auto; } .movie__inner p.movie__heading { font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 40px; } .movie__inner .movie__detail { width: 560px; margin: 30px auto 0; } .movie__inner .detail__note { position: relative; padding-left: 1em; color: #666; font-size: 100%; line-height: 1.7; } .movie__inner .detail__note::before { position: absolute; top: 0px; left: 0px; content: "※"; } @media print, screen and (max-width: 640px) { .movie__inner{ width: auto; padding: 15px 0 0; border-bottom: none; margin-top: 64px; } .movie__inner p.movie__heading { font-size: 18px; margin-bottom: 5px; text-align: center; } .movie__inner .movie__contents { border: solid 1px #d3dbe5; border-radius: 3px; background: #fff; padding: 15px; } .movie__inner .movie__detail { width: 100%; margin-top: 15px; } }