/*
 *  Copyright 2018 Adobe Systems Incorporated
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
/*
 * ADOBE CONFIDENTIAL
 *
 * Copyright 2015 Adobe Systems Incorporated
 * All Rights Reserved.
 *
 * NOTICE:  All information contained herein is, and remains
 * the property of Adobe Systems Incorporated and its suppliers,
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to Adobe Systems Incorporated and its
 * suppliers and may be covered by U.S. and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from Adobe Systems Incorporated.
 */
/* grid component */
.aem-Grid {
  display: block;
  width: 100%;
}
.aem-Grid::before,
.aem-Grid::after {
  display: table;
  content: " ";
}
.aem-Grid::after {
  clear: both;
}
/* placeholder for new components */
.aem-Grid-newComponent {
  clear: both;
  margin: 0;
}
/* column of a grid */
.aem-GridColumn {
  box-sizing: border-box;
  clear: both;
}
/* force showing hidden */
.aem-GridShowHidden > .aem-Grid > .aem-GridColumn {
  display: block !important;
}
/* 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 */
.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: 834px) {
  .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;
  }
}
/* force showing hidden components in unhide mode */
.aem-GridShowHidden > .cmp-container > .aem-Grid > .aem-GridColumn {
  display: block !important;
}

@charset "utf-8";

/**
 * Reset
 */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font-weight:normal;text-decoration:none;vertical-align:baseline;background:transparent;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title] {border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;padding:0;}
input,select{vertical-align:middle;}

/**
 * Basic Element Styles
 */

html {
  font-size: 10px;
  font-family: 'Roboto', 'Noto Sans JP', Osaka, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGOTHIC', sans-serif;
  overflow-y: scroll;
}

body {
  width: 100%;
  font-size: 1.4rem;
  line-height: 1.6;
  line-break: strict;
  word-break: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

* {
  box-sizing: border-box;
}

a {
  color: #000;
  text-decoration: none;
  outline: none;
  transition: all .2s linear;
}

a * {
  transition: all .2s linear;
}

a:hover {
  opacity: .6;
}

a article:hover {
  opacity: .6;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

::-webkit-input-placeholder {
  color: #ccc;
}

:-moz-placeholder {
  color: #ccc;
}

:-ms-input-placeholder {
  color: #ccc;
}

:placeholder-shown {
  color: #ccc;
}

.fontMedium,
.fontMedium * {
  font-family: 'Roboto', 'Noto Sans JP', Osaka, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGOTHIC', sans-serif;
  font-weight: 450;
}

.hide {
  display: none !important;
}

.root {
  position: relative;
}
.root >.cmp-container {
  width: 100%;
  min-width: 1158px;
  margin: 0 auto;
}
.root > .cmp-container:not(#blank-page) {
  padding-top: 90px;
}

.instagram-media {
  margin: 0 auto 3.6rem !important;
}

br.sp {
  display: none;
}

@media screen and (max-width: 834px) {

  body {
    font-size: 1.6rem;
    line-height: 1.6;
  }

  .root >.cmp-container {
    width: auto;
    min-width: auto;
    margin: 0;
  }
  .root > .cmp-container:not(#blank-page) {
    padding-top: 0;
  }

  br.sp {
    display: block;
  }
}

/**
 * Pagination
 */
.pagination {
  color: #4acfbd;
  font-size: 2.2rem;
  font-style: italic;
  text-align: center;
  margin: 32px 0 64px;
  display: flex;
  justify-content: center;
}

.pagination li {
  padding-top: 12px;
}

.pagination a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  min-width: 3.6rem;
  height: 3.6rem;
  color: inherit;
}

.pagination a:hover {
  opacity: 0.6;
}

.pagination span {
  min-width: 3.6rem;
  height: 3.6rem;
}

.pagination a,
.pagination span {
  margin: 0 16px;
}

.pagination button {
  background-color: #FFF;
}


.pagination .clearfix {
  display: flex;
}


.pagination .prev-page button,
.pagination .next-page button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  width: 6rem;
  height: 6rem;
  border: 1px solid #4acfbd;
  border-radius: 50%;
  cursor: pointer;
}

.pagination .prev-page button {
  background: url("../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-arrow-prev.png");
  background-repeat: no-repeat;
  background-position: center;
}

.pagination .next-page button {
  background: url("../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-arrow-next.png");
  background-repeat: no-repeat;
  background-position: center;
}

.pagination .prev-page button p,
.pagination .next-page button p {
  opacity: 0;
}

.pagination .prev-page {
  margin-left: -120px;
  margin-right: 60px;
  padding-right: 2px;
}

.pagination .next-page {
  margin-left: 60px;
  margin-right: -120px;
  padding-left: 2px;
}

.pagination .prev-page.disabled,
.pagination .next-page.disabled {
  display: none;
}

.pagination .current>a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  width: 3.6rem;
  height: 3.6rem;
  background: #f2f2f2;
  padding-right: 3px;
  border-radius: 50%;
}

.pagination .dots {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  width: 3.6rem;
  height: 3.6rem;
}

@media screen and (max-width: 834px) {
  .pagination {
    font-size: 1.8rem;
    margin: 40px 0 40px;
  }

  .pagination a,
  .pagination span {
    margin: 0;
    min-width: 2.4rem;
    height: 2.4rem;
  }

  .pagination .current>a {
    width: 2.4rem;
    height: 2.4rem;
  }

  .pagination .dots {
    width: 2.4rem;
    height: 2.4rem;
  }

  .pagination .prev-page {
    margin-left: -56px;
    margin-right: 6px;
    padding-right: 2px;
  }

  .pagination .next-page {
    margin-left: 6px;
    margin-right: -56px;
    padding-left: 2px;
  }

  .pagination .prev-page button,
  .pagination .next-page button {
    width: 5rem;
    height: 5rem;
  }

}

/**
 * Footer XF
 */

@media screen and (min-width: 835px) {

  #footer {
    margin-bottom: 40px;
  }

  #footer .contentpc {
      width: 1120px;
      margin: 0 auto;
  }

  #footer .link {
    font-size: 1.4rem;
    text-align: center;
  }

  #footer .link ul {
    position: relative;
  }

  #footer .link ul li {
    display: inline-block;
    line-height: 1;
    margin: 8px 0;
    padding: 0 10px;
    border-left: 1px solid #d5d5d5;
  }

  #footer .link ul li:first-child {
    border: none;
  }

  #footer #banners {
    text-align: center;
    margin-top: 32px;
  }

  #footer #banners ul {
    display: inline-block;
  }

  #footer #banners .bannerpc {
    display: inline-block;
  }

  #footer #banners .bannersp {
    display: none;
  }

  #footer #banners ul li {
    float: left;
  }

  #footer #banners ul li:nth-child(5n + 6) {
    clear: both;
  }

  #footer #banners a img {
    max-width: 160px;
    margin: 0 15px 32px;
  }

  #footer #copyright {
    color: #666;
    font-size: 1.2rem;
    font-style: italic;
    text-align: center;
    margin: 0 0 32px;
  }

}
@media screen and (max-width: 834px) {

  #footer {
    padding-bottom: 64px;
  }

  #footer .contentsp {
    margin: 0 25px;
  }

  #footer .link {
    font-size: 1.4rem;
    margin: 0 21px 0 25px;
    overflow: hidden;
  }

  #footer .link ul {
    position: relative;
    left: -4px;
    padding-left: 0;
  }

  #footer .link ul li {
    display: inline-block;
    line-height: 1;
    margin: 8px 0;
    padding: 0 10px;
    border-left: 1px solid #d5d5d5;
  }

  #footer #banners {
    text-align: center;
    margin-top: 20px;
  }

  #footer #banners ul {
    display: inline-block;
  }

  #footer #banners .bannerpc {
    display: none;
  }

  #footer #banners .bannersp {
    display: inline-block;
  }

  #footer #banners ul li {
    max-width: calc(100% / 3);
    float: left;
  }

  #footer #banners ul li:nth-child(3n + 4) {
    clear: both;
  }

  #footer #banners a {
    display: block;
    width: 100%;
    padding: 0 2.5px;
  }

  #footer #banners a img {
    max-width: 100%;
    margin: 0 0 20px;
  }

  #footer #copyright {
    color: #666;
    font-size: 1.2rem;
    font-style: italic;
  }

}

/**
 * Season XF
 */
@media screen and (min-width: 835px) {
  #season.sp {
    display: none;
  }

  #season {
    background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/bg-01.png);
  }

  #season .content {
    width: 1120px;
    margin: 0 auto;
  }

  #season .text h1,
  #season .text h2 {
    position: relative;
    color: #fff;
    font-size: 2.8rem;
    margin-bottom: 24px;
  }

  #season h1:before,
  #season h2:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -12px;
    display: inline-block;
    width: 52px;
    height: 1px;
    background: #fff;
  }

  #season .text p {
    color: #fff;
  }

  #season .flex {
    display: flex;
    justify-content: space-between;
    padding: 60px 0 20px;
  }

  #season .flex .text {
    width: calc((100% - 60px) / 3);
  }

  #season .flex .seasonPickups {
    display: flex;
    justify-content: space-between;
    width: calc(100% - (100% - 60px) / 3 - 30px);
  }

  #season .flex .seasonPickups .seasonPickup {
    width: 226px;
  }

  #season .flex .seasonPickups .seasonPickup .image {
    width: 190px;
  }

  #season .flex .seasonPickups .seasonPickup .shift {
    position: relative;
    bottom: 30px;
    left: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 190px;
    height: 60px;
    font-size: 1.6rem;
    background: #fff;
  }

  #season .flex .seasonPickups .seasonPickup .shift .arrow {
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
}
@media screen and (max-width: 834px) {
  #season.pc {
    display: none;
  }

  #season {
    background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-sp/img/common/bg-01.png);
  }

  #season .content {
    margin: 0 25px;
  }

  #season .head {
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 8px;
    padding-top: 16px;
  }

  #season .seasonPickups {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 24px;
  }

  #season .seasonPickups .seasonPickup {
    width: 49%;
  }

  #season .seasonPickups .seasonPickup div {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    margin: 10px 0 0 10px;
  }

  #season .seasonPickups .seasonPickup div h2,
  #season .seasonPickups .seasonPickup div h3 {
    font-size: 1.4rem;
    margin-right: 4px;
  }

  #season .seasonPickups .seasonPickup div .shift {
    position: relative;
    top: -10px;
    left: -10px;
    width: 58px;
  }

  #season .seasonPickups .seasonPickup div .arrow {
    position: absolute;
    bottom: 8px;
    right: 8px;
  }
}

/**
 * About XF
 */
@media screen and (min-width: 835px) {
  #about {
    color: #fff;
    font-size: 1.4rem;
    background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/bg-01.png);
    padding: 64px 0;
    margin-bottom: 64px;
  }

  #about.sp {
    display: none;
  }

  #about .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1120px;
    margin: 0 auto;
  }

  #about .logo {
    width: 288px;
    text-align: center;
  }

  #about .text {
    width: 400px;
    border-right: 1px solid #fff;
  }

  #about .text p {
    margin-bottom: 16px;
  }

  #about .text .catch {
    font-size: 2.8rem;
    margin-bottom: 4px;
  }

  #about .button {
    display: inline-block;
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: .2rem;
    text-align: center;
    padding: 6px 32px;
    border: 1px solid #fff;
    border-radius: 32px;
  }

  #about .button img {
    width: auto;
    vertical-align: middle;
    margin: 0 0 2px 4px;
  }

  #about .social {
    width: 430px;
    font-size: 1.6rem;
    line-height: 1.2;
  }

  #about .social .inner {
    width: 325px;
    margin: 0 auto;
  }

  #about .social .flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px 0;
  }
}

@media screen and (max-width: 834px) {
  #about {
    color: #fff;
    font-size: 1.4rem;
    background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-sp/img/common/bg-01.png);
    text-align: center;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  
  #about * {
    line-break: strict;
    word-break: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  #about.pc {
    display: none;
  }

  #about .logo {
    padding: 48px 0 24px;
  }
  
  #about .catch {
    font-size: 2rem;
  }
  
  #about p {
    margin-bottom: 24px;
  }
  
  #about .button {
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: .2rem;
    text-align: center;
    padding: 12px 32px;
    border: 1px solid #fff;
    border-radius: 28px;
  }
  
  #about .button img {
    width: auto;
    vertical-align: middle;
    margin: 0 0 2px 4px;
  }
  
  #about .social {
    margin: 32px 0 24px;
  }
  
  #about .social img {
    margin: 0 4px;
  }

  #about .content {
    margin: 0 25px;
  }

}

/**
 * Footer Banner XF
 */
#footerbanner-pc {
  padding-bottom: 64px;
}
#footerbanner-sp {
  margin: 0 20px;
  padding-bottom: 40px;
}

/**
 * Everyone XF
 */
@media screen and (min-width: 835px) {
  #everyone {
    padding-bottom: 60px;
  }
}
@media screen and (max-width: 834px) {
  #everyone {
    padding-bottom: 24px;
  }
}
@charset "utf-8";

/**
 * Padding
 */

.padding_default {
  padding-bottom:  3.6rem;
}

.padding_large {
  padding-bottom: 5.6rem !important;
}

.padding_medium {
  padding-bottom: 3.6rem !important;
}

.padding_small {
  padding-bottom: 1.6rem !important;
}

.padding_none {
  padding-bottom: 0rem !important;
}

@media screen and (max-width: 834px) {
  .padding_default {
    padding-bottom: 3.2rem;
  }

  .padding_large {
    padding-bottom: 4.8rem !important;
  }

  .padding_medium {
    padding-bottom: 3.2rem !important;
  }

  .padding_small {
    padding-bottom: 1.2rem !important;
  }
}

@charset "utf-8";

/**
 * Recommend Article
 */
.recommendarticle .linkbox .linkbox-option,
.recommendarticle .linkbox .linkbox-title {
    font-family: 'Roboto', 'Noto Sans JP', Osaka, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGOTHIC', sans-serif;
    font-weight: 450;
}

.recommendarticle .linkbox {
    padding: 24px 30px;
    border: 1px solid #ddd;
}

.recommendarticle .linkbox .linkbox-option {
    color: #4acfbd;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 8px;
}

.recommendarticle .linkbox .linkbox-left {
    width: 160px;
}

.recommendarticle .linkbox .linkbox-right {
    width: calc(100% - 160px);
}

@media screen and (min-width: 835px) {
    .recommendarticle .linkbox a {
        display: flex;
        align-items: center;
        color: #000;
        font-size: 2rem;
        text-decoration: none;
    }
    .recommendarticle .linkbox p {
        margin-bottom: 0;
    }
    .recommendarticle .linkbox .linkbox-left img {
        width: 140px;
        margin: 0 20px 0 0;
    }
    .recommendarticle .linkbox .linkbox-meta {
        color: #a2a2a2;
        font-size: 1.4rem;
        font-style: italic;
    }
}

@media screen and (max-width: 834px) {
    .recommendarticle .linkbox {
        padding: 20px 25px 25px;
    }
    .recommendarticle .linkbox .linkbox-option {
        font-size: 1.6rem;
        margin-bottom: 16px;
    }
    .recommendarticle .linkbox a {
        display: flex;
        text-decoration: none;
    }
    .recommendarticle .linkbox .linkbox-left {
        width: 120px;
    }
    .recommendarticle .linkbox .linkbox-right {
        width: calc(100% - 120px);
        padding-left: 12px;
    }
    .recommendarticle .linkbox .linkbox-right .linkbox-title {
        font-weight: bold;
        color: #000;
        font-size: 1.4rem;
    }
    .recommendarticle .linkbox .linkbox-meta {
        color: #a2a2a2;
        font-style: italic;
    }
}

@charset "utf-8";

/**
 * Separator
 */

hr {
    margin: 0;
}

.separator hr {
    border-top: 1px solid #eee;
    height: 1px;
}

.separator.separator_line-none hr {
    border: none;
}


@charset "utf-8";

/**
 * Text With Image
 */

.textwithimage .talk {
    position: relative;
    min-height: 100px;
    line-height: 1.8;
    padding-left: 130px;
}

.textwithimage .talk img.talkicon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    border-radius: 50%;
}

@media screen and (max-width: 834px) {
    .textwithimage .talk {
        min-height: 70px;
        padding-left: 90px;
    }
    .textwithimage .talk img.talkicon {
        width: 70px;
    }
}
@charset "utf-8";

/**
 * Rich Text
 */
.cmp-text {
    font-size: 1.8rem;
}

.cmp-text b {
    font-weight: bold;
}

.cmp-text i {
    font-weight: italic;
}

.cmp-text u {
    text-decoration: underline;
}

.cmp-text a {
    color: #4acfbd;
    text-decoration: underline;
}

.cmp-text a[target="_blank"]:after {
    content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-outer-link.png);
    margin: 0 4px 0 8px;
}

.cmp-text a:hover {
    text-decoration: none;
}

.cmp-text li {
    line-height: 1.4;
    text-indent: -16px;
    margin-bottom: 1em;
    padding-left: 30px;
}

.cmp-text ul li {
    color: #000;
}

.cmp-text ul li:before {
    content: "∘";
    display: inline-block;
    width: 12px;
    color: #4acfbd;
    margin-left: 4px;
}

.cmp-text ol {
    counter-reset: item;
    list-style-type: none;
}

.cmp-text ol li:before {
    counter-increment: item;
    content: counter(item);
    display: inline-block;
    width: 12px;
    color: #4acfbd;
    font-size: 2.4rem;
    font-style: italic;
    margin-left: 4px;
}

.cmp-text h1,
.cmp-text h2,
.cmp-text h3,
.cmp-text h4,
.cmp-text h5,
.cmp-text h6 {
    font-family: 'Roboto', 'Noto Sans JP', Osaka, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGOTHIC', sans-serif;
    font-weight: 450;
}

.cmp-text hr,
.cmp-text .hr {
    border-top: 1px solid #eee;
    height: 1px;
}

.cmp-text span.head {
    color: #4acfbd;
    font-size: 2rem;
    margin-bottom: 0 !important;
}

.cmp-text span.name {
    font-size: 2rem;
}

.cmp-text span.strong {
    font-weight: normal;
    font-style: normal;
    background: linear-gradient(transparent 60%, #a4e7de 0%);
}

@media screen and (max-width: 834px) {
    .cmp-text {
        font-size: 1.4rem;
    }

    .cmp-text a {
        color: #4acfbd;
        text-decoration: underline;
    }

    .cmp-text a[target="_blank"]:after {
        content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-sp/img/common/icon-outer-link.png);
        margin: 0 4px 0 8px;
    }

    .cmp-text li {
        text-indent: -12px;
        padding-left: 24px;
    }

    .cmp-text ul li:before {
        content: "○";
        width: 8px;
        font-size: 11px;
    }

    .cmp-text ol li:before {
        font-size: 2rem;
        font-style: italic;
        line-height: 1;
        vertical-align: bottom;
    }

    .cmp-text h1,
    .cmp-text h2,
    .cmp-text h3,
    .cmp-text h4,
    .cmp-text h5,
    .cmp-text h6 {
        font-family: 'Roboto', 'Noto Sans JP', Osaka, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGOTHIC', sans-serif;
        font-weight: 450;
    }

    .cmp-text span.head {
        font-size: 1.7rem;
    }

    .cmp-text span.name {
        font-size: 1.7rem;
    }
}

@charset "utf-8";

/**
 * Article Metadata
 */

@media screen and (min-width: 835px) {

  /* header */
  .articlemetadata_header {
    min-width: 800px;
  }

  .articlemetadata .metaWrapper {
    width: 800px;
    font-size: 1.8rem;
    margin: 0 auto;
  }

  .articlemetadata .catch {
    width: 800px;
    text-align: center;
    margin: 40px auto 52px;
  }

  .articlemetadata .catch .inner {
    position: relative;
    display: inline-block;
  }

  .articlemetadata .catch img {
    width: 800px;
    height: 530px;
    max-width: 100%;
  }

  .articlemetadata .catch .category {
    top: auto;
    bottom: 0;
  }

  .articlemetadata .catch .category span {
    margin-right: 1px;
  }

  .articlemetadata .category {
    position: absolute;
    top: 0;
    left: 0;
  }

  .articlemetadata .category span {
    display: inline-block;
    vertical-align: top;
    color: #fff;
    font-size: 1.2rem;
    background: #4acfbd;
    margin-right: 1px;
    padding: 6px 12px;
  }

  .articlemetadata .keyword span,
  .articlemetadata .keyword a {
    display: inline-block;
    color: #4acfbd;
    font-size: 1.2rem;
    background: #f2f2f2;
    margin: 0 0 8px 8px;
    padding: 4px 12px;
    border-radius: 16px;
  }

  .articlemetadata h1 {
    font-size: 3rem;
    font-weight: bold;
  }

  .articlemetadata .meta,
  .articlemetadata .meta .text {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .articlemetadata .meta {
    align-items: center;
    width: 100%;
  }

  .articlemetadata .meta .text {
    width: calc(100% - 76px);
  }

  .articlemetadata .meta .text .by {
    color: #a2a2a2;
    font-size: 1.4rem;
    font-style: italic;
  }

  .articlemetadata .meta .text .name {
    color: #2e6ccf;
    font-size: 1.4rem;
  }

  .articlemetadata .meta .image img {
    width: 60px;
    margin-bottom: 0;
  }

  .articlemetadata .meta .dateCategory .date {
    color: #a2a2a2;
    font-size: 1.4rem;
    font-style: italic;
    white-space: nowrap;
  }

  .articlemetadata .meta .dateCategory .categories {
    margin-left: 28px;
  }

  .articlemetadata .meta .dateCategory .categories a,
  .articlemetadata .meta .dateCategory .categories span {
    color: #4acfbd;
    font-size: 1.4rem;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid #ddd;
  }

  .articlemetadata .meta .dateCategory .categories a:first-child,
  .articlemetadata .meta .dateCategory .categories span:first-child {
    margin: 0;
    padding: 0;
    border: none;
  }

  .articlemetadata .meta .text .written span {
    display: block;
  }

  .articlemetadata .meta .text .written a {
    color: #2e6ccf;
  }

  .articlemetadata .meta .image img {
    border-radius: 50%;
  }


  /* footer */
  .articlemetadata .articlemetadata_footer {
    width: 800px;
    margin: 0 auto;
  }

  .articlemetadata .profile {
    font-size: 1.4rem;
    background: #f2f2f2;
    padding: 24px 0;
  }

  .articlemetadata .profile .sectionHead {
    margin-bottom: 24px;
    padding: 0;
    font-size: 3rem;
    text-align: center;
  }

  .articlemetadata .articlemetadata_footer .sectionHead .gradientText {
    position: relative;
    color: #1ddbd4;
    background: -webkit-linear-gradient(0deg, #1ddbd4, #2f95d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }


  .articlemetadata .profile .flex {
    display: flex;
  }

  .articlemetadata .profile .image {
    width: 180px;
    text-align: right;
  }

  .articlemetadata .profile .image img {
    width: 124px;
    height: 124px;
    border: 2px solid #fff;
    border-radius: 50%;
  }

  .articlemetadata .profile .text {
    width: calc(100% - 270px);
    margin: 0 60px 0 30px;
  }

  .articlemetadata .profile .name {
    color: #176ebe;
    font-size: 2.2rem;
    text-align: left;
    margin: 8px 0;
    padding: 0;
  }

  .articlemetadata .profile .desc {
    margin-bottom: 1.4rem;
  }

  .articlemetadata .profile ul {
    color: #176ebe;
    list-style-type: disc;
    margin-left: 1.4em;
  }

  .articlemetadata .profile ul li a {
    text-decoration: underline;
  }

  .articlemetadata .profile .desc a,
  .articlemetadata .profile .text p > a {
    text-decoration: underline;
  }

  .articlemetadata .profile .desc a[target="_blank"]:after,
  .articlemetadata .profile .text p > a[target="_blank"]:after {
    content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-outer-link.png);
    margin-left: 4px;
  }

  .articlemetadata .profile .social {
    margin-top: 16px;
  }

  .articlemetadata .profile .social img {
    margin: 0 4px;
  }

  .articlemetadata .profile .more {
    margin: 40px 0 24px;
    display: inline-block;
    width: 400px;
    color: #4acfbd;
    font-size: 1.8rem;
    text-align: center;
    padding: 12px 0;
    border: 1px solid #4acfbd;
    border-radius: 28px;
  }

  .articlemetadata .more img {
    vertical-align: middle;
    margin: 0 0 2px 16px;
  }

  .articlemetadata .articleFooter .contentWrap {
    border-bottom: 1px solid #ddd;
  }

  .articlemetadata .articleFooter .keyword {
    text-align: center;
    margin: 60px 0 52px;
  }

  .articlemetadata .articleFooter .keyword a {
    margin: 0 4px 8px 0;
  }

  .articlemetadata .articleFooter .banner {
    text-align: center;
  }

  .articlemetadata .articleFooter hr,
  .articlemetadata .articleFooter .hr {
    border-top: 1px solid #eee;
    height: 1px;
    margin: 54px 0;
  }

  .articlemetadata .articleFooter .sectionHead {
    padding: 0;
    margin: 32px 0 16px;
  }

  .articlemetadata .articleFooter .desc {
    margin: 28px 0 36px;
    text-align: center;
  }

  /* writerProfile */
  .articlemetadata .articlemetadata_writer section {
    width: 800px;
    margin: 0 auto;
  }

  .articlemetadata .pageHeader {
    font-size: 3rem;
    background: #f2f2f2;
    padding: 60px 0;
  }

  .articlemetadata .pageHeader .sectionHead {
    line-height: 1.2;
    padding: 0;
    font-size: 3rem;
    text-align: center;
  }

  .articlemetadata .sectionHead .gradientText {
    position: relative;
    color: #1ddbd4;
    background: -webkit-linear-gradient(0deg, #1ddbd4, #2f95d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .articlemetadata .pageHeader .desc {
    font-size: 1.8rem;
    text-align: center;
    margin-top: 8px;
  }

  .articlemetadata .pageHeader.writerProfile {
    font-size: 1.8rem;
  }

  .articlemetadata .pageHeader.writerProfile .image {
    text-align: center;
    margin-bottom: 32px;
  }

  .articlemetadata .pageHeader.writerProfile .image img {
    width: 120px;
    border: 2px solid #fff;
    border-radius: 50%;
  }

  .articlemetadata .pageHeader.writerProfile .desc {
    text-align: left;
  }

  .articlemetadata .pageHeader.writerProfile .desc a {
    color: #4acfbd;
    text-decoration: underline;
  }

  .articlemetadata .pageHeader.writerProfile .desc a[target="_blank"]:after {
    content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-outer-link.png);
    margin: 0 4px 0 4px;
  }

  .articlemetadata .pageHeader.writerProfile .social {
    text-align: center;
    margin-top: 16px;
  }

  .articlemetadata .pageHeader.writerProfile .social img {
    margin: 0 4px;
  }

}







@media screen and (max-width: 834px) {

  /* header */
  .articlemetadata .metaWrapper {
    font-size: 1.4rem;
    margin: 0 25px;
  }

  .articlemetadata .catch {
    position: relative;
    margin-bottom: 20px;
  }

  .articlemetadata .catch img {
    width: 100%;
  }

  .articlemetadata .catch .category span {
    margin-right: 1px;
  }

  .articlemetadata .category {
    position: absolute;
    top: 0;
    left: 0;
  }

  .articlemetadata .category span {
    display: inline-block;
    vertical-align: top;
    color: #fff;
    font-size: 1rem;
    background: #4acfbd;
    margin-right: 1px;
    padding: 4px 8px;
  }

  .articlemetadata h1 {
    font-size: 1.7rem;
    font-weight: bold;
  }

  .articlemetadata .meta,
  .articlemetadata .meta .text {
    display: flex;
    justify-content: space-between;
  }

  .articlemetadata .meta {
    align-items: center;
    width: 100%;
    margin: 8px 0;
  }

  .articlemetadata .meta .text {
    width: calc(100% - 48px);
    align-items: center;
  }

  .articlemetadata .meta .text .by {
    color: #a2a2a2;
    font-size: 1.1rem;
    font-style: italic;
  }

  .articlemetadata .meta .text .name a {
    color: #2e6ccf;
    font-size: 1.2rem;
    text-decoration: none;
  }

  .articlemetadata .meta .image img {
    margin-bottom: 0;
  }

  .articlemetadata .meta .dateCategory {
    padding-right: 10px;
  }

  .articlemetadata .meta .dateCategory .date {
    display: block;
    color: #a2a2a2;
    font-size: 1.1rem;
    font-style: italic;
    white-space: nowrap;
  }

  .articlemetadata .meta .dateCategory .categories {
    color: #a2a2a2;
    font-size: 1.2rem;
  }

  .articlemetadata .meta .dateCategory .categories a {
    text-decoration: none;
  }

  .articlemetadata .meta .dateCategory .categories span {
    color: #4acfbd;
    font-size: 1.2rem;
  }

  .articlemetadata .meta .dateCategory .categories a,
  .articlemetadata .meta .dateCategory .categories span {
    color: #4acfbd;
    font-size: 1.2rem;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid #a2a2a2;
  }

  .articlemetadata .meta .dateCategory .categories a:first-child,
  .articlemetadata .meta .dateCategory .categories span:first-child {
    margin: 0;
    padding: 0;
    border: none;
  }


  .articlemetadata .meta .text .written {
    white-space: nowrap;
  }

  .articlemetadata .meta .text .written span {
    display: block;
  }

  .articlemetadata .meta .image img {
    width: 40px;
    border-radius: 50%;
  }

  /* footer */
  .articlemetadata .profile {
    font-size: 1.4rem;
    background: #f2f2f2;
    padding: 24px 0;

  }

  .articlemetadata .profile section {
    margin: 0 25px;
  }


  .articlemetadata .profile .sectionHead {
    margin-bottom: 10px;
    padding: 0;
    font-size: 2.2rem;
    text-align: center;
  }

  .articlemetadata .profile .sectionHead .gradientText {
    position: relative;
    color: #1ddbd4;
    background: -webkit-linear-gradient(0deg, #1ddbd4, #2f95d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .articlemetadata .profile .image {
    text-align: center;
  }

  .articlemetadata .profile .image img {
    width: 96px;
    height: 96px;
    border: 2px solid #fff;
    border-radius: 50%;
  }

  .articlemetadata .profile .name {
    color: #176ebe;
    margin: 8px 0;
    padding: 0;
  }

  .articlemetadata .profile .desc a,
  .articlemetadata .profile .text p > a {
    text-decoration: underline;
  }

  .articlemetadata .profile .desc a[target="_blank"]:after,
  .articlemetadata .profile .text p > a[target="_blank"]:after {
    content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-outer-link.png);
    margin-left: 4px;
  }

  .articlemetadata .profile .social {
    text-align: center;
    margin-top: 14px;
  }

  .articlemetadata .profile .social img {
    margin: 0 4px;
  }

  .articlemetadata .profile .more {
    margin: 22px 0 16px;
    display: block;
    width: 100%;
    color: #4acfbd;
    font-size: 1.4rem;
    text-align: center;
    padding: 12px 0;
    border: 1px solid #4acfbd;
    border-radius: 28px;
  }

  .articlemetadata .profile .more span {
    margin-left: 28px;
  }

  .articlemetadata .profile .more img {
    vertical-align: middle;
    margin: 0 0 2px 8px;
  }


  .articlemetadata .articleFooter {
    margin: 0 25px;
  }

  .articlemetadata .articleFooter .keyword {
    margin: 40px 0 32px;
  }

  .articlemetadata .articleFooter .keyword a {
    margin: 0 4px 8px 0;
  }

  .articlemetadata .articleFooter .keyword span,
  .articlemetadata .articleFooter .keyword a {
    display: inline-block;
    color: #4acfbd;
    font-size: 1rem;
    background: #f2f2f2;
    padding: 4px 12px;
    border-radius: 16px;
  }

  /* writerProfile */

  .articlemetadata .pageHeader.writerProfile {
    width: 100%
  }

  .articlemetadata .articlemetadata_writer section {
    margin: 0 25px;
  }

  .articlemetadata .pageHeader {
    font-size: 1.4rem;
    background: #f2f2f2;
    padding: 24px 0;
  }

  .articlemetadata .pageHeader .sectionHead {
    margin: 8px 0;
    font-size: 2.2rem;
    text-align: center;
  }

  .articlemetadata .sectionHead .gradientText {
    color: #176ebe;
    margin: 8px 0;
    padding: 0;
  }

  .articlemetadata .pageHeader .desc {
    text-align: center;
    margin-top: 8px;
  }

  .articlemetadata .pageHeader.writerProfile {
    font-size: 1.4rem;
  }

  .articlemetadata .pageHeader.writerProfile .image {
    text-align: center;
  }

  .articlemetadata .pageHeader.writerProfile .image img {
    width: 96px;
    border: 2px solid #fff;
    border-radius: 50%;
  }

  .articlemetadata .pageHeader.writerProfile .desc {
    text-align: left;
  }

  .articlemetadata .pageHeader.writerProfile .desc a {
    text-decoration: underline;
  }

  .articlemetadata .pageHeader.writerProfile .desc a[target="_blank"]:after {
    content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-outer-link.png);
    margin: 0 4px 0 4px;
  }

  .articlemetadata .pageHeader.writerProfile .social {
    text-align: center;
    margin-top: 16px;
  }

  .articlemetadata .pageHeader.writerProfile .social img {
    margin: 0 4px;
  }

}
@charset "utf-8";

.experiencefragment .xf-content-height{
  min-height: 0px;
  margin: 0;
}
@charset "utf-8";

/**
 * Text 
 */

.text.text_notice .cmp-text {
    color: #a2a2a2;
    font-size: 1.5rem;
}

.text.text_backquote .cmp-text {
    position: relative;
    padding: 48px 60px;
}

.text.text_backquote .cmp-text:before {
    content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-blockquote-start.png);
    position: absolute;
    top: 0;
    left: 0;
}

.text.text_backquote .cmp-text:after {
    content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-blockquote-end.png);
    position: absolute;
    bottom: 0;
    right: 0;
}

.text.text_border_solid .cmp-text {
    padding: 24px 32px;
    border: 1px solid #ddd;
}

.text.text_border_solid_green .cmp-text {
    border: 1px solid #4acfbd;
}

.text.text_border_solid_green .cmp-text .inner {
    margin: 40px 32px;
}

.text.text_border_solid_green .cmp-text p {
    font-size: 1.4rem;
}

.text.text_background_gray .cmp-text {
    position: relative;
    font-size: 1.8rem;
    background: #f2f2f2;
}

.text.text_background_gray .cmp-text .inner {
    line-height: 200%;
    padding: 20px 24px;
}

.text.text_background_gray .cmp-text .inner p {
  margin-bottom: 3.6rem;
}

.text.text_background_gray .cmp-text .inner p:has(span.head) {
  margin-bottom: 0;
}

.text.text_background_gray ul {
    list-style-type: disc;
    margin: 0 0 0 2rem;
}

@media screen and (min-width: 835px) {
    .text.text_background_gray ul li {
        text-indent: 0;
        margin-bottom: 4px;
        padding: 0;
    }

    .text.text_background_gray .cmp-text .inner p {
        margin-bottom: 3.2rem;
    }
}
.text.text_background_gray ul li:before {
    content: "";
    width: auto;
    margin-left: 0;
}

.text .label {
    display: none;
}

.text.text_point_display .cmp-text {
    position: relative;
}

.text.text_point_display .cmp-text .inner:after {
    content: "POINT";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.2rem;
    font-weight: bold;
    font-style: italic;
    background: #fff500;
    padding: 4px 12px;
    line-height: 1.6;
    color: initial;
}

@media screen and (max-width: 834px) {

    .text .inner p {
        line-height: 1.8;
    }

    .text.text_notice .cmp-text {
        font-size: 1.2rem;
    }

    .text.text_backquote .cmp-text {
        position: relative;
        padding: 32px 0;
    }

    .text.text_backquote .cmp-text:before {
        content: "";
        display: inline-block;
        width: 27px;
        height: 21px;
        background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-sp/img/common/icon-blockquote-start@2x.png)
            no-repeat;
        background-size: 27px 21px;
    }

    .text.text_backquote .cmp-text:after {
        content: "";
        display: inline-block;
        width: 27px;
        height: 21px;
        background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-sp/img/common/icon-blockquote-end@2x.png)
            no-repeat;
        background-size: 27px 21px;
        float: right;
    }

    .text.text_border_solid .cmp-text {
        padding: 20px 24px;
    }

    .text.text_border_solid_green .cmp-text .inner {
        margin: 24px 24px 12px;
    }

    .text.text_border_solid_green .cmp-text p {
        font-size: 1.2rem;
        margin: 16px 0 24px;
    }

    .text.text_background_gray .cmp-text {
        font-size: 1.4rem;
    }


    .cmp-text .text_background_gray ul li {
        line-height: inherit;
        text-indent: 0;
        margin-bottom: 0;
        padding-left: 0;
    }

    .cmp-text .text_background_gray ul li:before {
        width: 0;
    }

    .text.text_point_display .cmp-text .inner:after {
        font-size: 1.1rem;
    }
}

@charset "utf-8";

/**
 * Pick Up Article
 */
.pickuparticle .pickup {
    background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/bg-01.png);
    margin-top: 80px;
}

@media screen and (min-width: 835px) {
    .pickuparticle .pickup .inner {
        position: relative;
        top: -50px;
        display: flex;
        justify-content: space-between;
        width: calc(100% - 60px);
        margin: 0 auto;
        padding-bottom: 22px;
    }

    .pickuparticle .pickup .inner .article {
        position: relative;
        width: calc((100% / 3) - 2.5px);
        margin-bottom: 36px;
    }
}

.pickuparticle .pickup .inner div {
    position: relative;
}

.pickuparticle .pickup .inner div img {
    width: 100%;
}

@media screen and (min-width: 835px) {
    .pickuparticle .pickup .title {
        font-size: 2rem;
        line-height: 1.5;
        background: #fff;
        margin: 0;
        padding: 15px 20px;
    }
}

@media screen and (max-width: 834px) {
    .pickuparticle .article:nth-of-type(n + 2) {
        display: none;
    }

    .pickuparticle .pickup {
        background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-sp/img/common/bg-01.png);
        margin-top: 0;
    }
    .pickuparticle .pickup .inner {
        margin: 0 25px;
    }

    .pickuparticle .pickup .inner article {
        position: relative;
        top: -20px;
    }

    .pickuparticle .pickup .inner div {
        position: relative;
    }

    .pickuparticle .pickup .inner div img {
        width: 100%;
    }

    .pickuparticle .pickup .link div:before {
        content: "PICK UP";
        position: absolute;
        top: 0;
        left: 0;
        font-size: 1.1rem;
        font-weight: bold;
        font-style: italic;
        background: #fff500;
        padding: 4px 12px;
    }

    .pickuparticle .pickup .title {
        text-align: justify;
        text-justify: inter-ideograph;
        margin-top: -1px;
    }

    .pickuparticle .pickup .title span {
        line-height: 1.8;
        background: #fff;
        padding: 4px 1px;
    }

}

@charset "utf-8";

/**
 * Accordion
 */

.accordion .cmp-accordion__header {
    position: relative;
    padding-right: 60px;
    border-top: 1px solid #ddd;
    background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/faq/icon_question.png)
        left 38px no-repeat;
}

.accordion .cmp-accordion__header::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 2px;
    background: #4acfbd;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.accordion div[data-cmp-expanded] .cmp-accordion__header::after {
    transform: translateY(-50%) rotate(90deg);
}

.accordion .cmp-accordion__header::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 10px;
    background: #4acfbd;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.2s;
}

.accordion .cmp-accordion__header button {
    color: #4acfbd;
    font-size: 2.4rem;
    font-weight: bold;
    display: inline-block;
    border: none;
    background: none;
    padding: 35px 60px 35px 50px;
}

.accordion .cmp-accordion__header button::after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 1px solid #4acfbd;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.accordion .cmp-accordion__panel {
    font-size: 1.8rem;
}

.accordion .cmp-accordion__panel > div {
    border-top: 1px solid #ddd;
    padding: 30px 0 30px 50px;
    background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/faq/icon_answer.png)
        left 30px no-repeat;
}

.accordion .cmp-accordion__item:last-child {
    border-bottom: 1px solid #ddd;
}

@media screen and (max-width: 834px) {
    .accordion .cmp-accordion__header {
        background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-sp/img/faq/icon_question.png)
            left 38px no-repeat;
        background-size: 25px auto;
    }

    .accordion .cmp-accordion__header button {
        font-size: 1.8rem;
        padding: 35px 60px 35px 40px;
    }

    .accordion .cmp-accordion__panel {
        font-size: 1.6rem;
    }

    .accordion .cmp-accordion__panel > div {
        padding: 30px 0 30px 40px;
        background-size: 25px auto;
    }
}

@charset "utf-8";

/**
 * Searchresults
 */

.searchresults .content {
  width: 1120px;
  margin: 0 auto;
}

.searchresults .pageHeader {
  font-size: 3rem;
  background: #f2f2f2;
  padding: 60px 0;
}

.searchresults .pageHeader .sectionHead {
  font-size: 3rem;
  text-align: center;
  line-height: 1.2;
  padding: 0;
}

.searchresults .sectionHead .gradientText {
  position: relative;
  color: #1ddbd4;
  background: -webkit-linear-gradient(0deg, #1ddbd4, #2f95d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.searchresults .archive {
  margin: 60px 0;
}

.searchresults .archive .articles {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.searchresults .archive .articles .categories a,
.searchresults .archive .articles .categories span {
  color: #4acfbd;
  font-size: 1.3rem;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid #ddd;
}

.searchresults .archive .articles .categories a:first-child,
.searchresults .archive .articles .categories span:first-child {
  margin: 0;
  padding: 0;
  border: none;
}

.searchresults .article .meta.sp,
.searchresults .notFound .sp {
  display: none;
}

.searchresults .archive .articles .meta {
  justify-content: space-between;
}

.searchresults .archive .articles .meta .date {
  padding: 4px 0;
}

.searchresults .article {
  margin-bottom: 36px;
}

.searchresults .article.tri {
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
}

.searchresults .article.tri:nth-child(3n) {
  margin-right: 0;
}

.searchresults .article.tri h1 {
  font-size: 1.8rem;
}

.searchresults .article .image {
  position: relative;
}

.searchresults .category {
  position: absolute;
  top: 0;
  left: 0;
}

.searchresults .category span {
  display: inline-block;
  vertical-align: top;
  color: #fff;
  font-size: 1.2rem;
  background: #4acfbd;
  margin-right: 1px;
  padding: 6px 12px;
}

.searchresults .article h1,
.searchresults .article h2,
.searchresults .article h3 {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 8px 0 6px;
}

.searchresults .article .date {
  color: #a2a2a2;
  font-size: 1.4rem;
  font-style: italic;
  letter-spacing: 1px;
  white-space: nowrap;
  padding: 6px 16px 0 0;
}

.searchresults .article .meta {
  display: flex;
}

.searchresults .article .keyword {
  text-align: right;
}

.searchresults .keyword span,
.searchresults .keyword a {
  display: inline-block;
  color: #4acfbd;
  font-size: 1.2rem;
  background: #f2f2f2;
  margin: 0 0 8px 8px;
  padding: 4px 12px;
  border-radius: 16px;
}

.searchresults .notFound {
  text-align: center;
  margin: 64px 0 60px;
}

.searchresults .notFound p {
  font-size: 1.8rem;
  line-height: 1.8;
}

@media screen and (max-width: 834px) {

  .searchresults .content {
    width: auto;
    margin: 0 25px;
  }

  .searchresults .pageHeader {
    background: #f2f2f2;
    padding: 24px 0;
  }

  .searchresults .pageHeader .sectionHead {
    font-size: 2.2rem;
    line-height: 1.2;
    padding: 0;
  }

  .searchresults .archive {
    margin: 24px 0;
  }

  .searchresults .article .categories,
  .searchresults .article .meta.pc {
    display: none;
  }

  .searchresults .article .meta.sp,
  .searchresults .notFound .sp {
    display: block;
  }

  .searchresults .category span {
    display: inline-block;
    vertical-align: top;
    color: #fff;
    font-size: 1rem;
    background: #4acfbd;
    margin-right: 1px;
    padding: 4px 8px;
  }

  .searchresults .article.tri {
    width: auto;
    margin: 0px;
  }

  .searchresults .article .link {
    display: flex;
  }

  .searchresults .archive .article .image {
    width: 120px;
  }

  .searchresults .archive .article .detail {
    position: relative;
    width: calc(100% - 120px);
  }

  .searchresults .archive .article .detail .inner {
    flex-wrap: wrap;
    align-content: space-between;
    height: 100%;
    margin-left: 16px;
  }

  .searchresults .article .detail .meta.sp .date {
    padding: 0;
    color: #a2a2a2;
    font-size: 1.1rem;
    font-style: italic;
    white-space: nowrap;
  }

  .searchresults .article h1,
  .searchresults .article h2,
  .searchresults .article h3 {
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0;
  }

  .searchresults .article.tri {
    margin-bottom: 24px;
  }

  .searchresults .notFound p {
    font-size: 100%;
    line-height: 1.6;
  }
}
@charset "utf-8";

/**
 * Articlelist
 */

.articlelist .content {
  width: 1120px;
  margin: 0 auto;
}

.articlelist .pageHeader .sectionHead {
  font-size: 3rem;
  text-align: center;
  line-height: 1.2;
  padding: 0;
}

.articlelist .sectionHead .gradientText {
  position: relative;
  color: #1ddbd4;
  background: -webkit-linear-gradient(0deg, #1ddbd4, #2f95d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.articlelist .archive {
  margin: 0;
}

.articlelist .archive .articles {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.articlelist .archive .articles .categories a,
.articlelist .archive .articles .categories span {
  color: #4acfbd;
  font-size: 1.3rem;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid #ddd;
}

.articlelist .archive .articles .categories a:first-child,
.articlelist .archive .articles .categories span:first-child {
  margin: 0;
  padding: 0;
  border: none;
}

.articlelist .article .meta.sp {
  display: none;
}

.articlelist .archive .articles .meta {
  justify-content: space-between;
}

.articlelist .archive .articles .meta .date {
  padding: 4px 0;
}

.articlelist .article {
  margin-bottom: 36px;
}

.articlelist .article .image {
  position: relative;
}

.articlelist .category {
  position: absolute;
  top: 0;
  left: 0;
}

.articlelist .category span {
  display: inline-block;
  vertical-align: top;
  color: #fff;
  font-size: 1.2rem;
  background: #4acfbd;
  margin-right: 1px;
  padding: 6px 12px;
}

.articlelist .article h1,
.articlelist .article h2,
.articlelist .article h3 {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 8px 0 6px;
}

.articlelist .article .date {
  color: #a2a2a2;
  font-size: 1.4rem;
  font-style: italic;
  letter-spacing: 1px;
  white-space: nowrap;
  padding: 6px 16px 0 0;
}

.articlelist .article .meta {
  display: flex;
}

.articlelist .article .keyword {
  text-align: right;
}

.articlelist .keyword span,
.articlelist .keyword a {
  display: inline-block;
  color: #4acfbd;
  font-size: 1.2rem;
  background: #f2f2f2;
  margin: 0 0 8px 8px;
  padding: 4px 12px;
  border-radius: 16px;
}

.articlelist .notFound {
  text-align: center;
  margin: 64px 0 60px;
}

.articlelist .notFound p {
  font-size: 1.8rem;
  line-height: 1.8;
}

/* Articlelist ATコンテンツ用 */
.articlelist .sectionHead {
  font-size: 3rem;
  text-align: center;
  padding: 56px 0 32px;
}

.articlelist .sectionHead .gradientText {
  position: relative;
  color: #1ddbd4;
  background: -webkit-linear-gradient(0deg, #1ddbd4, #2f95d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.articlelist .sectionHead .gradientText.shortUnderLine:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -16px;
  display: inline-block;
  width: 48px;
  height: 1px;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%);
  background-color: #4acfbd;
}

.articlelist .article.recommend {
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
}

.articlelist .article.recommend:nth-child(3n) {
  margin-right: 0;
}

.articlelist .article.recommend h1 {
  font-size: 1.8rem;
}


/* Articlelist TOP3列用 */
.articlelist .archive.tri {
  margin: 0;
}

.articlelist .archive.tri .articles {
  margin: 0;
}

.articlelist .article.tri {
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
}

.articlelist .article.tri:nth-child(3n) {
  margin-right: 0;
}

.articlelist .article.tri h1 {
  font-size: 1.8rem;
}

.articlelist .article.tri .category,
.articlelist .article.tri .categories,
.articlelist .article.tri .meta.pc .keyword {
  display: none;
}

/* Articlelist TOP2列用 */
.articlelist .archive.half {
  margin: 0;
}

.articlelist .article.half {
  width: calc(50% - 15px);
}

.articlelist .archive.half .articles {
  justify-content: space-between;
  margin: 0;
}

.articlelist .article.half .categories {
  display: none;
}

.articlelist .archive .articles .article.half .meta {
  justify-content: normal;
}

.articlelist .archive .article.half article {
  margin: 0 4px;
}

.articlelist .archive .article.half h2 {
  font-size: 1.8rem;
  margin: 16px 0 8px;
}

.articlelist .archive .article.half .date {
  margin: 4px 12px 0 0;
  padding: 0;
}

@media screen and (max-width: 834px) {

  .articlelist .content {
    width: auto;
    margin: 0 25px;
  }

  .articlelist .pageHeader {
    background: #f2f2f2;
    padding: 24px 0;
  }

  .articlelist .pageHeader .sectionHead {
    font-size: 2.2rem;
    line-height: 1.2;
    padding: 0;
  }

  .articlelist .archive {
    margin: 24px 0;
  }

  .articlelist .article .categories,
  .articlelist .article .meta.pc {
    display: none;
  }

  .articlelist .article .meta.sp {
    display: block;
  }

  .articlelist .category span {
    display: inline-block;
    vertical-align: top;
    color: #fff;
    font-size: 1rem;
    background: #4acfbd;
    margin-right: 1px;
    padding: 4px 8px;
  }

  .articlelist .article .link {
    display: flex;
  }

  .articlelist .archive .article .image {
    width: 120px;
  }

  .articlelist .archive .article .detail {
    position: relative;
    width: calc(100% - 120px);
  }

  .articlelist .archive .article .detail .inner {
    flex-wrap: wrap;
    align-content: space-between;
    height: 100%;
    margin-left: 16px;
  }

  .articlelist .article .detail .meta.sp .date {
    padding: 0;
    color: #a2a2a2;
    font-size: 1.1rem;
    font-style: italic;
    white-space: nowrap;
  }

  .articlelist .article h1,
  .articlelist .article h2,
  .articlelist .article h3 {
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0;
  }


  /* Articlelist ATコンテンツ用 */


  .articlelist .sectionHead {
    padding: 0;
    margin: 32px 0 16px;
    font-size: 2.2rem;
    text-align: center;
  }

  .articlelist .sectionHead .gradientText.shortUnderLine:before {
    display: none;
  }

  .articlelist .article.recommend {
    width: auto;
    margin: 0px;
    margin-bottom: 24px;
  }

  /* Articlelist TOP3列用 */
  .articlelist .archive.tri .content {
    width: auto;
    margin: 0;
  }

  .articlelist .article.tri {
    width: calc(50% - 6px);
    margin: 0 4px 28px;
  }

  .articlelist .article.tri:nth-child(2n-1) {
    margin-right: 2px;
  }

  .articlelist .article.tri:nth-child(2n) {
    margin-left: 2px;
  }

  .articlelist .article.tri .link {
    display: block;
  }

  .articlelist .archive .article.tri .image {
    width: 100%;
  }

  .articlelist .archive .article.tri .detail {
    width: 100%
  }

  .articlelist .archive .article.tri .detail .inner {
    margin-left: 0;
  }

  .articlelist .archive .article.tri h2,
  .articlelist .archive .article.tri h3 {
    font-size: 1.4rem;
    margin: 8px;
  }

  .articlelist .archive .article.tri .date {
    margin: 0 8px;
    padding: 0;
  }

  /* Articlelist TOP2列用 */
  .articlelist .article.half {
    width: 100%;
  }

  .articlelist .article.half .link {
    display: block;
  }

  .articlelist .archive .article.half .image {
    width: 100%;
  }

  .articlelist .archive .article.half .detail {
    width: 100%
  }


  .articlelist .archive .article.half h2 {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 8px 0 6px;
  }

  .articlelist .archive .article.half .detail .inner {
    margin-left: 0;
  }

  .articlelist .article.half .meta.sp {
    display: none;
  }

  .articlelist .article.half .meta.pc {
    display: flex;
  }


  .articlelist .archive .article.half .date {
    color: #a2a2a2;
    font-size: 1.1rem;
    font-style: italic;
    white-space: nowrap;
    margin: 0;
    padding: 3px 16px 0 0;
  }

  .articlelist .archive .article.half .keyword a {
    display: inline-block;
    color: #4acfbd;
    font-size: 1rem;
    background: #f2f2f2;
    margin: 0;
    padding: 4px 12px;
    border-radius: 16px;
  }

  .articlelist .archive .article.half {
    margin-bottom: 28px;
  }

}
@charset "utf-8";

/**
 * Teaser 
 */
.teaser.teaser_ambassador .spAmbassador,
.teaser.teaser_share .spAmbassador,
.teaser.teaser_minna .spAmbassador,
.teaser.teaser_ambassador .spMinna,
.teaser.teaser_share .spMinna,
.teaser.teaser_minna .spMinna {
    display: none;
}

@media screen and (min-width: 835px) {
    .teaser .content {
        width: 1120px;
        margin: 0 auto;
    }

    .teaser.teaser_ambassador .main {
        position: relative;
        background-position: center;
        background-size: cover;
    }

    .teaser.teaser_ambassador .category {
        display: inline-block;
        font-size: 1.2rem;
        font-weight: bold;
        background: #fff500;
        margin-top: 76px;
        padding: 6px 12px;
    }

    .teaser.teaser_ambassador .cmp-teaser__title {
        color: #fff;
        font-size: 2.8rem;
        line-height: 1.5;
        letter-spacing: 0.08em;
        margin: 24px 0 12px;
    }

    .teaser.teaser_ambassador .cmp-teaser__description {
        color: #fff;
        font-size: 1.4rem;
        line-height: 1.8;
    }

    .teaser.teaser_ambassador .button {
        display: inline-block;
        color: #fff;
        font-size: 1.6rem;
        margin: 24px 0 76px;
        padding: 8px 24px;
        border: 1px solid #fff;
        border-radius: 24px;
    }

    .teaser.teaser_ambassador .button img {
        vertical-align: middle;
        margin: 0 0 2px 4px;
    }

    .teaser.teaser_ambassador .share {
        display: none;
    }

    .teaser.teaser_share .main {
        color: #fff;
        font-size: 1.8rem;
        text-align: center;
        background-position: center;
        min-height: 380px;
        background-image: url('../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/bg-everyone.jpg') !important;
    }

    .teaser.teaser_share .overlay {
        background: url('../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/everyone/bg-everyone-overlay-02.png')
            center;
        min-height: 380px;
    }

    .teaser.teaser_share .category,
    .teaser.teaser_share .button {
        display: none;
    }

    .teaser.teaser_share .cmp-teaser__title {
        display: inline-block;
        color: #2f95d1;
        font-size: 2.8rem;
        background: #fff;
        margin: 60px 0 16px;
        padding: 4px 20px;
        border-radius: 8px;
    }

    .teaser.teaser_share .share {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.6rem;
        margin: 24px 0 0;
    }

    .teaser.teaser_share .share p,
    .teaser.teaser_share .share div {
        margin: 0 10px;
    }

    @-webkit-keyframes teaser-bgroop {
        from {
            background-position: 0 0;
        }
        to {
            background-position: -12700px 0;
        }
    }

    @keyframes teaser-bgroop {
        from {
            background-position: 0 0;
        }
        to {
            background-position: -12700px 0;
        }
    }

    .teaser.teaser_minna .main {
        position: relative;
        width: 100%;
        -webkit-animation: teaser-bgroop 400s linear infinite;
        animation: teaser-bgroop 400s linear infinite;
        background-image: url('../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/bg-everyone.jpg') !important;
    }

    .teaser.teaser_minna .overlay {
        background: url('../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/bg-everyone-overlay.png');
        background-position: center;
        background-size: cover;
    }

    .teaser.teaser_minna .category,
    .teaser.teaser_minna .share {
        display: none;
    }

    .teaser.teaser_minna .cmp-teaser__title {
        display: inline-block;
        color: #2f95d1;
        font-size: 2.3rem;
        background: #fff;
        margin-top: 60px;
        padding: 6px 20px;
        border-radius: 8px;
    }

    .teaser.teaser_minna .cmp-teaser__description {
        color: #fff;
        font-size: 1.4rem;
        margin: 16px 0;
    }

    .teaser.teaser_minna .button  {
        display: inline-block;
        color: #fff;
        font-size: 1.6rem;
        letter-spacing: 0.2rem;
        text-align: center;
        margin-bottom: 60px;
        padding: 8px 32px;
        border: 1px solid #fff;
        border-radius: 28px;
    }

    .teaser.teaser_minna .button img {
        width: auto;
        vertical-align: middle;
        margin: 0 0 2px 4px;
    }
}

@media screen and (max-width: 834px) {
    .teaser.teaser_ambassador .content {
        display: none;
    }
    .teaser.teaser_ambassador .main {
        background: none !important;
    }

    .teaser.teaser_ambassador .spAmbassador {
        display: block;
    }
    .teaser.teaser_ambassador .spAmbassador .ambassadorBox {
        position: relative;
    }
    .teaser.teaser_ambassador .spAmbassador .ambassadorBox img {
        width: 100%;
    }
    .teaser.teaser_ambassador .spAmbassador .ambassadorBox .category {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 1.1rem;
        font-weight: bold;
        background: #fff500;
        padding: 4px 12px;
    }

    .teaser.teaser_ambassador
        .spAmbassador
        .ambassadorBox
        .cmp-teaser__content {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        margin: 40px 0 0 20px;
    }

    .teaser.teaser_ambassador .cmp-teaser__title {
        color: #fff;
        font-size: 1.8rem;
        line-height: 1.5;
        margin-bottom: 4px;
    }
    .teaser.teaser_ambassador .spAmbassador .ambassadorBox .button {
        color: #fff;
        font-size: 1.2rem;
        padding: 6px 20px;
        border: 1px solid #fff;
        border-radius: 16px;
    }

    .teaser.teaser_ambassador .spAmbassador .ambassadorBox .button img {
        width: auto;
        vertical-align: middle;
        margin: 0 0 2px 4px;
    }

    .teaser.teaser_share .main {
        font-size: 1.4rem;
        background: #f2f2f2;
        padding: 24px 0;
        background-image: none !important;
    }
    .teaser.teaser_share .category,
    .teaser.teaser_share .button,
    .teaser.teaser_share .share {
        display: none;
    }
    .teaser.teaser_share .content {
        margin: 0 25px;
    }

    .teaser.teaser_share section {
        padding: 0;
    }

    .teaser.teaser_share section .cmp-teaser__title {
        font-size: 2.2rem;
        text-align: center;
    }

    .teaser.teaser_share .cmp-teaser__title {
        position: relative;
        color: #1ddbd4;
        background: -webkit-linear-gradient(0deg, #1ddbd4, #2f95d1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .teaser.teaser_share .cmp-teaser__description {
        margin-top: 8px;
    }

    .teaser.teaser_minna .content {
        display: none;
    }
    .teaser.teaser_minna .main {
        background: none !important;
    }

    .teaser.teaser_minna .spMinna {
        display: block;
        position: relative;
    }

    .teaser.teaser_minna .spMinna img {
        width: 100%;
    }

    .teaser.teaser_minna .spMinna .flex {
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .teaser.teaser_minna .spMinna .flex div {
        width: 100%;
        text-align: center;
    }

    .teaser.teaser_minna .spMinna .flex .cmp-teaser__title {
        display: inline-block;
        color: #2f95d1;
        font-size: 2.3rem;
        background: #fff;
        margin-bottom: 12px;
        padding: 6px 20px;
        border-radius: 8px;
    }

    .teaser.teaser_minna .spMinna .flex a {
        color: #fff;
        font-size: 1.2rem;
        letter-spacing: 0.2rem;
        text-align: center;
        padding: 6px 14px;
        border: 1px solid #fff;
        border-radius: 28px;
    }

    .teaser.teaser_minna .spMinna .flex img {
        width: auto;
        vertical-align: middle;
        margin: 0 0 2px 4px;
    }
}

@charset "utf-8";

/**
 * SNS Share 
 */
.snsshare  {
    position: absolute;
    width: 100%;
}
.snsshare .share {
    position: relative;
    width: 800px;
    margin: 0 auto;
}

.snsshare .frame {
    position: absolute;
    top: 0;
    right: -100px;
}

.snsshare .share .text {
    color: #4acfbd;
    font-size: 1.2rem;
    text-align: center;
    margin-top: 40px;
}

.snsshare .share p, .snsshare .share img {
    margin: 0;
}

.snsshare .share .icon {
    margin-top: 16px;
    text-align: center;
}

.snsshare .share a {
    color: #4acfbd;
    text-decoration: underline;
}


@media screen and (max-width: 834px) {
    .snsshare .share {
        display: none;
    }
}

@charset "utf-8";

/**
 * Title
 */

@media screen and (min-width: 835px) {
    .title.title_gradation .cmp-title h1 {
        line-height: 1.2;
        padding: 0;
        font-size: 3rem;
        text-align: center;
    }
}

.title.title_gradation .cmp-title h1 span {
    position: relative;
    color: #1ddbd4;
    background: -webkit-linear-gradient(0deg, #1ddbd4, #2f95d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title.title_gradation .cmp-title h2 {
    font-size: 3rem;
    text-align: center;
    padding: 0 0 32px;
}

.title.title_gradation .cmp-title h2 span {
    position: relative;
    color: #1ddbd4;
    background: -webkit-linear-gradient(0deg, #1ddbd4, #2f95d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title.title_gradation .cmp-title h2 span::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -16px;
    display: inline-block;
    width: 48px;
    height: 1px;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
    background-color: #4acfbd;
}

.title.title_article_sub_background .cmp-title .cmp-title__text > span,
.title.title_article_sub_background .cmp-title .cmp-title__link > span {
    display: block;
    color: #fff;
    font-size: 2.4rem;
    /* font-weight: normal; */
    background: rgb(29, 219, 212);
    background: -moz-linear-gradient(
        left,
        rgba(29, 219, 212, 1) 0%,
        rgba(47, 198, 227, 1) 45%,
        rgba(47, 173, 218, 1) 79%,
        rgba(47, 149, 209, 1) 100%
    );
    background: -webkit-linear-gradient(
        left,
        rgba(29, 219, 212, 1) 0%,
        rgba(47, 198, 227, 1) 45%,
        rgba(47, 173, 218, 1) 79%,
        rgba(47, 149, 209, 1) 100%
    );
    background: linear-gradient(
        to right,
        rgba(29, 219, 212, 1) 0%,
        rgba(47, 198, 227, 1) 45%,
        rgba(47, 173, 218, 1) 79%,
        rgba(47, 149, 209, 1) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1ddbd4', endColorstr='#2f95d1', GradientType=1);
    margin: 0 0 0 0px;
    padding: 22px 0px 22px 22px;
}

.title.title_article_sub_border .cmp-title .cmp-title__text > span,
.title.title_article_sub_border .cmp-title .cmp-title__link > span {
    display: block;
    color: #4acfbd;
    font-size: 2.4rem;
    font-weight: bold;
    padding: 24px 0;
    border-top: 1px solid #4acfbd;
    border-bottom: 1px solid #4acfbd;
}

.title.title_article_sub .cmp-title .cmp-title__text > span,
.title.title_article_sub .cmp-title .cmp-title__link > span {
    display: block;
    color: #4acfbd;
    font-size: 2.4rem;
    font-weight: bold;
}

@media screen and (max-width: 834px) {
    .title.title_gradation .cmp-title h1 {
        padding: 0;
        font-size: 2.2rem;
        text-align: center;
    }

    .title.title_gradation .cmp-title h2 {
        font-size: 2.2rem;
        padding: 0 0 6px;
    }

    .title.title_gradation .cmp-title h2 span::before {
        bottom: -4px;
    }

    .title.title_article_sub_background .cmp-title {
        margin: 0 -25px;
    }

    .title.title_article_sub_background .cmp-title .cmp-title__text > span ,
    .title.title_article_sub_background .cmp-title .cmp-title__link > span {
        font-size: 1.7rem;
        padding: 12px 0px 12px 12px;
    }

    .title.title_article_sub_border .cmp-title .cmp-title__text > span,
    .title.title_article_sub_border .cmp-title .cmp-title__link > span {
        font-size: 1.8rem;
    }

    .title.title_article_sub .cmp-title .cmp-title__text > span,
    .title.title_article_sub .cmp-title .cmp-title__link > span {
        font-size: 1.8rem;
    }
}

@charset "utf-8";

/**
 * Popular Article Ranking
 */
.ranking {
  background: #f2f2f2;
}

.populararticleranking .content {
  width: 1120px;
  margin: 0 auto;
}

.populararticleranking .ranking .flex {
  display: flex;
  justify-content: space-between;
}

.populararticleranking .sectionHead {
  font-size: 3rem;
  text-align: center;
  padding: 56px 0 32px;
}

.populararticleranking .sectionHead .gradientText {
  position: relative;
  color: #1ddbd4;
  background: -webkit-linear-gradient(0deg, #1ddbd4, #2f95d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.populararticleranking .sectionHead .gradientText.shortUnderLine:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -16px;
  display: inline-block;
  width: 48px;
  height: 1px;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%);
  background-color: #4acfbd;
}

.ranking .articles {
  background: #fff;
  width: calc(50% - 15px);
  margin-bottom: 64px;
  padding: 0 40px 40px;
}

.ranking .articles h2,
.ranking .articles h3 {
  color: #4acfbd;
  font-size: 1.8rem;
  text-align: center;
  margin: 16px 0 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid #4acfbd;
}

.ranking .rankingArticle {
  margin: 20px 0;
}

.ranking .rankingArticle:last-child {
  margin-bottom: 0;
}

.ranking .rankingArticle .flex {
  display: flex;
  align-items: center;
}

.ranking .rankingArticle .image {
  width: 100px;
}

.ranking .rankingArticle p {
  width: 64px;
  color: #4acfbd;
  font-size: 3rem;
  font-style: italic;
  text-align: center;
}

.ranking .rankingArticle h1,
.ranking .rankingArticle h4 {
  font-size: 1.6rem;
  width: calc(100% - 164px);
}


.ranking .tab {
  display: none;
  justify-content: center;
}

.ranking .tab h3,
.ranking .tab p {
  color: #888;
  font-size: 1.4rem;
  line-height: 1;
  background: #e6e6e6;
  padding: 8px 40px;
  cursor: pointer;
}

.ranking .tab .selected {
  color: #4acfbd;
  background: #fff;
}

@media screen and (max-width: 834px) {

  .populararticleranking .sectionHead {
    font-size: 2.2rem;
    text-align: center;
    padding: 36px 0 26px;
  }

  .populararticleranking .content {
    width: 100%;
  }

  .ranking .tab {
    display: flex;
  }

  .ranking .articles {
    display: none;
    width: 100%;
    margin-bottom: 0;
    padding: 0;
  }

  .ranking .articles.selected {
    display: block;
  }

  .ranking .content h3 {
    display: none;
  }

  .ranking .rankingArticle {
    padding: 16px 20px;
    margin: 0;
  }

  .ranking a:nth-child(2n-1) .rankingArticle {
    background: #f2f2f2;
  }

  .ranking .rankingArticle p {
    color: #4acfbd;
    font-size: 2.4rem;
    font-style: italic;
    margin: 0 16px;
    width: auto;
  }

  .ranking .rankingArticle h1,
  .ranking .rankingArticle h4 {
    font-size: 1.4rem;
  }

}
@charset "utf-8";

/**
 * Product Information
 */

.productinformation .notice a {
  color: #4acfbd;
  text-decoration: none;
}

.productinformation .notice a[target="_blank"]:after {
  content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-outer-link.png);
  margin: 0 4px 0 8px;
}

@media screen and (min-width: 835px) {
    .productinformation .plan {
        border: 1px solid #4acfbd;
    }

    .productinformation .plan .inner {
        text-align: center;
        margin: 28px 0;
    }

    .productinformation .plan .inner div:first-child h4 {
        color: #000;
        font-weight: normal;
        margin-right: 32px;
        margin-bottom: 1.2rem;
    }

    .productinformation .plan .name {
        font-size: 2rem;
    }

    .productinformation .plan .name span {
        position: relative;
        top: -1px;
        display: inline-block;
        color: #4acfbd;
        font-size: 1.2rem;
        vertical-align: middle;
        margin-right: 12px;
        padding: 3px 8px;
        border: 1px solid #4acfbd;
    }
    .productinformation .plan .name div {
        display: inline;
    }

    .productinformation .plan .detail {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }

    .productinformation .plan .inner .gradientButton a {
        color: #fff;
        margin: 16px auto 12px;
        display: block;
        width: 400px;
        font-size: 1.6rem;
        text-align: center;
        background: rgb(29, 219, 212);
        background: -moz-linear-gradient(
            left,
            rgba(29, 219, 212, 1) 0%,
            rgba(47, 198, 227, 1) 45%,
            rgba(47, 173, 218, 1) 79%,
            rgba(47, 149, 209, 1) 100%
        );
        background: -webkit-linear-gradient(
            left,
            rgba(29, 219, 212, 1) 0%,
            rgba(47, 198, 227, 1) 45%,
            rgba(47, 173, 218, 1) 79%,
            rgba(47, 149, 209, 1) 100%
        );
        background: linear-gradient(
            to right,
            rgba(29, 219, 212, 1) 0%,
            rgba(47, 198, 227, 1) 45%,
            rgba(47, 173, 218, 1) 79%,
            rgba(47, 149, 209, 1) 100%
        );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1ddbd4', endColorstr='#2f95d1', GradientType=1);
        padding: 16px 0;
        border-radius: 32px;
        text-decoration: none;
    }

    .productinformation .plan .inner .gradientButton a[target="_blank"]::after {
        content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-outer-link-03.png);
        display: inline-block;
        vertical-align: middle;
        margin: -1px 0 0 8px;
    }

    .productinformation .plan .notice {
        color: #a2a2a2;
        font-size: 1.2rem;
        margin: 0;
    }

    .productinformation .plan .inner .gradientButton a br {
        display: none;
    }

    .productinformation .plan .notice br {
        display: none;
    }
}

@media screen and (max-width: 834px) {
    .productinformation .plan {
        border: 1px solid #4acfbd;
    }

    .productinformation .plan .inner {
        margin: 24px;
    }

    .productinformation .plan p {
        line-height: 1.8;
        margin-bottom: .4rem;
    }

    .productinformation .plan .name span {
        display: block;
        margin-bottom: 4px;
    }
    .productinformation .plan .name div {
        margin-bottom: 4px;
    }

    .productinformation .plan .name {
        font-size: 1.6rem;
        margin-bottom: .4rem;
        line-height: 1.8;
    }

    .productinformation .plan .name span {
        display: inline;
        color: #4acfbd;
        font-size: 1rem;
        padding: 2px 8px;
        border: 1px solid #4acfbd;
    }

    .productinformation .plan .detail {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }

    .productinformation .plan .inner .gradientButton {
        margin: 12px 0;
        display: block;
        width: 100%;
        font-size: 1.4rem;
        text-align: center;
        background: rgb(29, 219, 212);
        background: -moz-linear-gradient(
            left,
            rgba(29, 219, 212, 1) 0%,
            rgba(47, 198, 227, 1) 45%,
            rgba(47, 173, 218, 1) 79%,
            rgba(47, 149, 209, 1) 100%
        );
        background: -webkit-linear-gradient(
            left,
            rgba(29, 219, 212, 1) 0%,
            rgba(47, 198, 227, 1) 45%,
            rgba(47, 173, 218, 1) 79%,
            rgba(47, 149, 209, 1) 100%
        );
        background: linear-gradient(
            to right,
            rgba(29, 219, 212, 1) 0%,
            rgba(47, 198, 227, 1) 45%,
            rgba(47, 173, 218, 1) 79%,
            rgba(47, 149, 209, 1) 100%
        );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1ddbd4', endColorstr='#2f95d1', GradientType=1);
        padding: 12px 16px;
        border-radius: 28px;
    }

    .productinformation .plan .inner .gradientButton a {
        overflow: hidden;
        color: #fff;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-decoration: none;
    }

    .productinformation .plan .inner .gradientButton a[target="_blank"]::after {
        content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-sp/img/common/icon-outer-link-03.png);
        display: inline-block;
        vertical-align: middle;
        margin: -1px 0 0 8px;
    }

    .productinformation .plan .notice {
        color: #a2a2a2;
        font-size: 1.1rem;
        margin: 0;
    }
}

@charset "utf-8";

/**
 * News List 
 */
@media screen and (min-width: 835px) {
    .newslist .news {
        margin-top: -40px;
    }

    .newslist .news .content {
        width: 1120px;
        margin: 0 auto;
    }

    .newslist .news .inner {
        background: #f2f2f2;
        padding: 20px 40px;
    }

    .newslist .news dl {
        display: flex;
        font-size: 1.4rem;
    }

    .newslist .news dt {
        color: #176ebe;
        font-style: italic;
        white-space: nowrap;
    }

    .newslist .news dd {
        width: 80%;
        margin-left: 16px;
    }

    .newslist .news dd a {
        text-decoration: underline;
    }
}

@media screen and (max-width: 834px) {
    .newslist .news {
        background: #f2f2f2;
        padding: 12px 0;
    }

    .newslist .news .content {
        margin: 0 25px;
    }


    .newslist .news dl {
        display: flex;
        font-size: 1.4rem;
    }

    .newslist .news dt {
        color: #176ebe;
        font-style: italic;
        white-space: nowrap;
    }

    .newslist .news dd {
        width: 80%;
        margin-left: 16px;
    }

    .newslist .news dd a {
        text-decoration: underline;
    }
}

@charset "utf-8";

/**
 * Button
 */

.button.button_capsule_white a {
    display: inline-block;
    width: 400px;
    color: #4acfbd;
    font-size: 1.8rem;
    text-align: center;
    padding: 12px 0;
    border: 1px solid #4acfbd;
    border-radius: 28px;
    background-color: #FFFFFF;
}

.button.button_capsule_white span {
    position: relative;
}

.button.button_capsule_white span::after {
    content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-arrow-green-01.png);
    vertical-align: middle;
    margin: 0 0 0 16px;
    position: absolute;
    bottom: 0;
}

.button.button_capsule_blue a {
    display: inline-block;
    width: 400px;
    color: #FFFFFF;
    font-size: 1.8rem;
    text-align: center;
    padding: 12px 0;
    border: 1px solid #FFFFFF;
    border-radius: 28px;
    background: linear-gradient(45deg, #1DDBD4,#2F95D1);
}

.button.button_capsule_blue span {
    position: relative;
}

.button.button_capsule_blue span::after {
    content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-arrow-white-02.png);
    vertical-align: middle;
    margin: 0 0 0 16px;
    position: absolute;
    bottom: 0;
}

.button.button_align-left {
    text-align: left;
}

.button.button_align-center {
    text-align: center;
}

.button.button_align-right {
    text-align: right;
}

@media screen and (max-width: 834px) {
    .button.button.button_capsule_white,
    .button.button_capsule_blue {
        margin: 0 25px;
    }

    .button.button_capsule_white a {
        display: block;
        width: 100%;
        color: #4acfbd;
        font-size: 1.4rem;
        text-align: center;
        padding: 12px 0;
        border: 1px solid #4acfbd;
        border-radius: 28px;
        /* background-color: #FFFFFF; */
    }
    
    .button.button_capsule_white span {
        position: relative;
    }
    
    .button.button_capsule_white span::after {
        content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-sp/img/common/icon-arrow-green-01.png);
        vertical-align: middle;
        margin: 0 0 0 16px;
        position: absolute;
        bottom: 0;
    }
    
    .button.button_capsule_blue a {
        display: block;
        width: 100%;
        color: #FFFFFF;
        font-size: 1.4rem;
        text-align: center;
        padding: 12px 0;
        border: 1px solid #FFFFFF;
        border-radius: 28px;
        background: linear-gradient(45deg, #1DDBD4,#2F95D1);
    }
    
    .button.button_capsule_blue span {
        position: relative;
    }
    
    .button.button_capsule_blue span::after {
        content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-arrow-white-02.png);
        vertical-align: middle;
        margin: 0 0 0 16px;
        position: absolute;
        bottom: 0;
    }
    
}
@charset "utf-8";

/**
 * Searchform
 */

/* Top */
.search.top .sp {
  display: none;
}

.search.top {
  min-width: 1158px;
  padding-bottom: 64px;
  background: url('../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/top/image-search-bg.jpg' ) no-repeat;
  background-position: center;
  background-size: cover;
}

.search.top .content {
  width: 710px;
  margin: 0 auto;
}

.search.top .content .box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  background: rgba(255, 255, 255, 0.9);
  margin-bottom: 10px;
  padding: 25px 0;
}

.search.top .content .box .title {
  width: 25%;
  color: #00b9be;
  font-size: 1.8rem;
  text-align: center;
}

.search.top .sectionHead {
  font-size: 3rem;
  text-align: center;
  padding: 56px 0 32px;
}

.search.top .sectionHead span {
  position: relative;
  color: #fff;
}

.search.top .sectionHead .shortUnderLine:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -16px;
  display: inline-block;
  width: 48px;
  height: 1px;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%);
  background-color: #fff;
}

.search.top .content .box ul {
  display: flex;
  flex-wrap: wrap;
  width: 75%;
  padding: 4px 15px 4px 25px;
  border-left: 1px solid #36bfc2;
}

.search.top .content .box ul li {
  width: 33.33%;
  font-size: 1.4rem;
}

.search.top .content .box ul li:nth-child(-n+3) input[type="checkbox"]+span {
  margin-top: 0;
}

.search.top .buttonMiddle {
  margin-top: 48px;
  text-align: center;
}

.search.top .buttonMiddle span {
  margin-left: 16px;
}

.search.top .buttonMiddle img {
  vertical-align: middle;
  margin: 0 0 2px 4px;
}


/* Sub */
.search.sub {
  background: #f2f2f2;
  padding: 64px 0 48px;
}

.search.sub .content {
  width: 800px;
  margin: 0 auto;
}

.search.sub .inputArea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid #4acfbd;
}

.search.sub .inputArea input[type="text"] {
  width: calc(100% - 68px);
  font-size: 1.6rem;
  text-align: center;
  padding: 14px 8px;
  border: none;
  outline: none;
}

.search.sub .inputArea input[type="submit"] {
  width: 68px;
  height: 44px;
  background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-search.png) no-repeat center center;
  padding: 12px 24px;
  border: none;
}

.search.sub .keyword {
  text-align: center;
  margin-top: 30px;
}

.search.sub .keyword a {
  display: inline-block;
  color: #4acfbd;
  font-size: 1.2rem;
  background: #fff;
  margin: 0 0 8px 8px;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: 16px;
}


@media screen and (min-width: 835px) {

  /* Top */
  input[type="checkbox"] {
    display: none;
  }

  input[type="checkbox"]+span {
    position: relative;
    display: inline-block;
    line-height: 1.3;
    vertical-align: top;
    margin-top: 20px;
    padding: 3px 0 0 42px;
  }

  input[type="checkbox"]+span:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: #fff;
  }

  input[type="checkbox"]:checked+span:before {
    background: #4acfbd;
  }

  input[type="checkbox"]:checked+span:after {
    content: '';
    position: absolute;
    top: 4px;
    left: 9px;
    display: block;
    width: 6px;
    height: 10px;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
  }

  .search.top .buttonMiddle a {
    color: #999;
    font-size: 1.8rem;
    padding: 16px 120px;
    border: 1px solid #999;
    cursor: default;
    letter-spacing: .2rem;
    text-align: center;
    border-radius: 32px;
  }

  .search.top .buttonMiddle a>*:hover {
    opacity: 1;
  }

  .search.top .buttonMiddle:not(.enable) a:hover {
    opacity: 1;
  }

  .search.top .buttonMiddle.enable a {
    color: #fff;
    background: rgb(29, 219, 212);
    background: -moz-linear-gradient(left, rgba(29, 219, 212, 1) 0%, rgba(47, 198, 227, 1) 45%, rgba(47, 173, 218, 1) 79%, rgba(47, 149, 209, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(29, 219, 212, 1) 0%, rgba(47, 198, 227, 1) 45%, rgba(47, 173, 218, 1) 79%, rgba(47, 149, 209, 1) 100%);
    background: linear-gradient(to right, rgba(29, 219, 212, 1) 0%, rgba(47, 198, 227, 1) 45%, rgba(47, 173, 218, 1) 79%, rgba(47, 149, 209, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1ddbd4', endColorstr='#2f95d1', GradientType=1);
    border: none;
    cursor: pointer;
  }

  .search.top .buttonMiddle * {
    transition: none;
  }

  .search.top .buttonMiddle .submitButton {
    transition: opacity .2s linear;
  }
}

@media screen and (max-width: 834px) {

  /* Top */
  .search.top .pc {
    display: none;
  }

  .search.top .sp {
    display: block;
  }

  .search.top {
    padding-bottom: 48px;
    min-width: auto;
    background: url('../../../../content/dam/viewtabi/assets/themes/viewtabi-sp/img/top/image-search-bg.jpg' ) no-repeat;
    background-position: center;
    background-size: cover;
  }

  .search.top .content {
    width: auto;
    margin: 0 25px;
  }

  .search.top .content .box {
    display: block;
    margin-bottom: 8px;
    padding: 0;
  }

  .search.top .content .box .title {
    width: auto;
  }

  .search.top .content .box h3 {
    color: #36bfc2;
    font-size: 1.5rem;
    text-align: center;
    margin: 0 16px 16px;
    padding: 16px 0 4px;
    border-bottom: 1px solid #36bfc2;
  }

  .search.top .sectionHead {
    font-size: 2.2rem;
    text-align: center;
    padding: 36px 0 26px;
  }

  .search.top .sectionHead span {
    position: relative;
    color: #fff;
  }

  .search.top .sectionHead .shortUnderLine:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    display: inline-block;
    width: 48px;
    height: 1px;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
    background-color: #fff;
  }

  .search.top .content .box ul {
    width: auto;
    padding: 0;
    border-left: none;
    margin: 0 16px;
  }

  .search.top .content .box ul li {
    width: 50%;
    margin-bottom: 16px;
  }

  .search.top .buttonMiddle {
    margin-top: 24px;
    text-align: center;
  }

  .search.top .buttonMiddle a {
    color: #fff;
    font-size: 1.4rem;
    letter-spacing: .2rem;
    text-align: center;
    padding: 12px 32px;
    border: 1px solid #fff;
    border-radius: 32px;
  }

  /* Sub */
  .search.sub {
    padding: 40px 0 36px;
  }

  .search.sub .content {
    width: auto;
    margin: 0 25px;
  }


  .search.sub .inputArea input[type="text"]::-webkit-input-placeholder {
    margin-left: 64px;
    text-align: center;
  }

  .search.sub .inputArea input[type="text"]:-moz-placeholder {
    margin-left: 64px;
    text-align: center;
  }

  .search.sub .inputArea input[type="text"]:-ms-input-placeholder {
    margin-left: 64px;
    text-align: center;
  }

  .search.sub .inputArea input[type="text"]:placeholder-shown {
    margin-left: 64px;
    text-align: center;
  }

  .search.sub .inputArea input[type="text"] {
    width: calc(100% - 68px);
    text-align: left;
    font-size: 1.6rem;
    padding: 14px 8px;
    border: none;
    outline: none;
    color: black;
  }

  .search.sub .inputArea input[type="submit"] {
    width: 68px;
    height: 44px;
    padding: 12px 24px;
    border: none;
  }

  .search.sub .keyword {
    text-align: left;
    max-height: 70px;
    overflow: hidden;
    margin: 18px 0 0;
  }

  .search.sub .keyword a {
    font-size: 1rem;
    padding: 4px 12px;
    margin: 0;
    margin-bottom: 8px;
  }

}
@charset "utf-8";

/**
 * Image 
 */
.image .cmp-image {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    max-width: 100%;
}

.image .cmp-image img {
    margin: 0 auto;
}

.image .cmp-image img[src$=".svg"] {
    width: 100%;
    height: auto;
}

.image .cmp-image span {
    display: block;
    font-size: 1.6rem;
    margin-top: 12px;
}

.image .cmp-image__title a {
  color: #4acfbd;
  text-decoration: underline;
}

.image .cmp-image__title a[target="_blank"]:after {
  content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-sp/img/common/icon-outer-link.png);
  margin: 0 4px 0 8px;
}


.image.image_article .cmp-image,
.image.image_article .cmp-image__image {
    width: 100%;
}

.image.image_align-left {
    text-align: left;
}

.image.image_align-center {
    text-align: center;
}

.image.image_align-right {
    text-align: right;
}

@media screen and (max-width: 834px) {
    .image.image_article .cmp-image,
    .image.image_article .cmp-image__image {
        width: auto;
    }

    .image.image_banner .cmp-image  {
        max-width: 300px;
    }

    .image .cmp-image span {
      font-size: 1.4rem;
    }
}

@charset "utf-8";

/**
 * Container
 */

@media screen and (min-width: 835px) {
    .container.layout_article > .cmp-container {
        width: 800px;
        margin: 0 auto;
        border-top: 1px solid #ddd;
        margin-top: 28px;
        padding-top: 40px;
    }
    .container.layout_threecolumnbanner .cmp-container{
        width: 1120px;
        margin: 0 auto;
        padding-bottom: 45px;
    }
    
    .container.layout_threecolumnbanner .cmp-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .container.layout_threecolumnbanner .image:first-child {
        margin-left: 0;
    }
    
    .container.layout_threecolumnbanner .image {
        margin-left: 30px;
        width: 30%;
    }
}

.container.text_border_solid {
    padding: 24px 32px;
    border: 1px solid #ddd;
}

.container.text_border_solid_green {
    border: 1px solid #4acfbd;
}

.container.layout_background_gray {
    background: #f2f2f2;
}

@media screen and (max-width: 834px) {
    .container.layout_article > .cmp-container{
        margin: 0 25px;
    }
    .container.layout_threecolumnbanner .cmp-container{
        text-align: center;
        margin: 0px 20px;
    }
    .container.layout_threecolumnbanner img{
        width: 336px;
        margin: 8px 0;
    }
    .container.layout_content > .cmp-container{
        margin: 0 25px;
    }

}

@charset "utf-8";

.spHeaderContent {
  display: none;
}

.pcHeaderContent {
  display: block;
}

@media screen and (max-width: 834px) {
  .spHeaderContent {
    display: block;
  }

  .pcHeaderContent {
    display: none !important;
  }
}

/**
 * header @ Common
 */

#pcHeader #header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 127;
  width: 100%;
  min-width: 1158px;
  height: 90px;
}

#pcHeader #header .logoWrapper .text {
  color: #3aacc9;
  font-size: 1.1rem;
  letter-spacing: 2.5px;
  line-height: 1;
  margin: 4px 5px 0 0;
}

#pcHeader #header .logoWrapper a {
  transition: all 0.2s ease-out, transform 0.2s ease-out;
}

#pcHeader #header .s a {
  margin-bottom: 14px;
  transform: scale(0.66);
}

/**
 * menu @ Common @ Header
 */

body.fixed {
  position: absolute;
  overflow: hidden;
  height: 100%;
}

#pcHeader #menu #mainMenu {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: #fff;
}

#pcHeader #menu #mainMenu>div:first-child,
#pcHeader #menu #mainMenu>div:nth-child(3)>div:nth-child(2) {
  background: #fff;
}

#pcHeader #menu #mainMenu>div>a {
  background: #fff;
}

#pcHeader #menu #mainMenu>div:first-child a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  background: rgb(29, 219, 212);
  background: -moz-linear-gradient(left, rgba(29, 219, 212, 1) 0%, rgba(47, 198, 227, 1) 45%, rgba(47, 173, 218, 1) 79%, rgba(47, 149, 209, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(29, 219, 212, 1) 0%, rgba(47, 198, 227, 1) 45%, rgba(47, 173, 218, 1) 79%, rgba(47, 149, 209, 1) 100%);
  background: linear-gradient(to right, rgba(29, 219, 212, 1) 0%, rgba(47, 198, 227, 1) 45%, rgba(47, 173, 218, 1) 79%, rgba(47, 149, 209, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1ddbd4', endColorstr='#2f95d1', GradientType=1);
  transition: none;
}

#pcHeader #menu #mainMenu>div:first-child a.opened {
  background: #fff;
}

#pcHeader #menu #mainMenu>div:nth-child(2) {
  /*width: calc(100% - 360px);*/
  width: calc(100% - 270px);
  text-align: center;
  padding-left: 90px;
  border-bottom: 1px solid transparent;
  transition: all .5s linear;
}

#pcHeader #menu #mainMenu>.logoWrapper.s {
  border-bottom: 1px solid #ddd;
}

#pcHeader #menu #mainMenu>div:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

#pcHeader #menu #mainMenu>div:nth-child(3) {
  display: flex;
  /*width: 270px;*/
  width: 180px;
}

#pcHeader #menu #mainMenu>div:nth-child(3) div {
  width: 90px;
  height: 90px;
}

#pcHeader #menu #mainMenu>div:nth-child(3) div a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  background: #fff;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  transition: none;
}

#pcHeader #menu #mainMenu>div:nth-child(3) div a.opened {
  border-bottom: 1px solid transparent;
}

#pcHeader #menu #mainMenu>div:nth-child(3) div a {
  position: relative;
  text-align: center;
  padding: 12px 0;
}

#pcHeader #menu #mainMenu>div:nth-child(3) div a .circle {
  position: absolute;
  top: 18px;
  left: calc(50% + .5rem);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  min-width: 1.5rem;
  min-height: 1.5rem;
  font-size: 1rem;
  background: #fff500;
  padding: 0 4px;
  border-radius: 16px;
}

#pcHeader #menu #subMenus {
  position: relative;
  z-index: 255;
  background: #fff;
}

#pcHeader #menu #subMenus .subMenu {
  display: none;
  background: #fff;
  padding: 60px 0;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner {
  display: flex;
  width: 1000px;
  color: #4acfbd;
  margin: 0 auto;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .link {
  width: 390px;
  font-size: 1.8rem;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .link .menuContent {
  width: 330px;
  margin-right: 60px;
  padding-top: 50px;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .link .menuContent ul li,
#pcHeader #menu #subMenus .subMenu.menu .shareMenu {
  border-top: 1px solid #c8f1eb;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .link .menuContent ul li .inner {
  display: flex;
  justify-content: space-between;
  margin: 16px 24px 16px 32px;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .link .menuContent ul li .inner img {
  vertical-align: middle;
  margin: 0 0 2px 4px;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner a {
  color: #4acfbd;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .search {
  width: 610px;
  font-size: 1.4rem;
  border-left: 1px solid #c8f1eb;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .search .inner {
  margin-left: 60px;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .search .inner>p {
  font-size: 2rem;
  margin-bottom: 12px;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .search .inner .themeHead {
  margin: 40px 0 20px;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .search .inner>p img {
  margin-right: 16px;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .search .area {
  display: flex;
  width: 550px;
  margin-bottom: 1px;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .search .area>a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 140px;
  height: 40px;
  color: #fff;
  background: #4acfbe;
  padding: 0 8px 0 16px;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .search .area>a img {
  vertical-align: middle;
  margin: 0 0 2px 4px;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .search .area .subArea {
  display: flex;
  align-items: center;
  width: calc(100% - 140px);
  height: 40px;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .search .area .subArea a {
  white-space: nowrap;
  padding: 0 24px;
  border-left: 1px solid #f6f6f6;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .search .area .subArea a:first-child {
  border: none;
}

#pcHeader #menu #subMenus .subMenu.menu>.inner .search .keyword a {
  font-size: 1.4rem;
  margin: 0 8px 12px 0;
  padding: 10px 24px;
  border-radius: 24px;
}

#pcHeader #menu #subMenus .subMenu.menu .shareMenu {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
}

#pcHeader #menu #subMenus .subMenu.menu .shareMenu p {
  line-height: 1.1;
}

#pcHeader #menu #subMenus .subMenu.menu .shareMenu div,
#pcHeader #menu #subMenus .subMenu.menu .shareMenu div a {
  margin: 0 4px;
}

#pcHeader #menu #subMenus .subMenu.search .inner {
  width: 710px;
  margin: 0 auto;
}

#pcHeader #menu #subMenus .subMenu.search .inner h1 {
  color: #4acfbd;
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 12px;
}

#pcHeader #menu #subMenus .subMenu.search .inner .inputArea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #4acfbd;
}

#pcHeader #menu #subMenus .subMenu.search .inner .inputArea input[type="text"] {
  width: calc(100% - 68px);
  font-size: 1.6rem;
  text-indent: 64px;
  text-align: center;
  padding: 14px 8px;
  border: none;
  outline: none;
}

#pcHeader #menu #subMenus .subMenu.search .inner .inputArea input[type="submit"] {
  width: 48px;
  height: 44px;
  background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-search.png) no-repeat center center;
  padding: 12px;
  border: none;
}

#pcHeader #menu #subMenus .subMenu.search .inner .keyword {
  text-align: center;
  margin: 30px 0 52px;
}

#pcHeader #menu #subMenus .keyword span,
#pcHeader #menu #subMenus .keyword a {
  display: inline-block;
  color: #4acfbd;
  font-size: 1.2rem;
  background: #f2f2f2;
  margin: 0 0 8px 8px;
  padding: 4px 12px;
  border-radius: 16px;
}

#pcHeader #menu #subMenus .subMenu.search .inner .box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f6f6f6;
  margin-bottom: 10px;
  padding: 25px 0;
}

#pcHeader #menu #subMenus .subMenu.search .inner .box .title {
  width: 25%;
  color: #00b9be;
  font-size: 1.8rem;
  text-align: center;
}

#pcHeader #menu #subMenus .subMenu.search .inner .box ul {
  display: flex;
  flex-wrap: wrap;
  width: 75%;
  padding: 4px 15px 4px 25px;
  border-left: 1px solid #36bfc2;
}

#pcHeader #menu #subMenus .subMenu.search .inner .box ul li {
  width: 33.33%;
  font-size: 1.4rem;
  line-height: 1.3;
}

#pcHeader #menu #subMenus .subMenu.search .inner .box ul li:nth-child(-n+3) input[type="checkbox"]+span {
  margin-top: 0;
}

#pcHeader #menu #subMenus .subMenu.search .inner .gradientButton {
  margin: 30px 0 0;
}

#pcHeader #menu #subMenus .subMenu.search .inner .gradientButton a {
  display: block;
  width: 326px;
  color: #e5e5e5;
  font-size: 1.8rem;
  text-align: center;
  margin: 0 auto;
  padding: 14px 32px;
  border: 1px solid #e5e5e5;
  border-radius: 28px;
  cursor: default;
}

#pcHeader #menu #subMenus .subMenu.search .inner .gradientButton a,
#pcHeader #menu #subMenus .subMenu.search .inner .gradientButton a>* {
  opacity: 1;
  transition: none;
}

#pcHeader #menu #subMenus .subMenu.search .inner .gradientButton.enable a {
  color: #fff;
  background: rgb(29, 219, 212);
  background: -moz-linear-gradient(left, rgba(29, 219, 212, 1) 0%, rgba(47, 198, 227, 1) 45%, rgba(47, 173, 218, 1) 79%, rgba(47, 149, 209, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(29, 219, 212, 1) 0%, rgba(47, 198, 227, 1) 45%, rgba(47, 173, 218, 1) 79%, rgba(47, 149, 209, 1) 100%);
  background: linear-gradient(to right, rgba(29, 219, 212, 1) 0%, rgba(47, 198, 227, 1) 45%, rgba(47, 173, 218, 1) 79%, rgba(47, 149, 209, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1ddbd4', endColorstr='#2f95d1', GradientType=1);
  border: 1px solid #fff;
  cursor: pointer;
}

#pcHeader #menu #subMenus .subMenu.search .inner .gradientButton a img {
  vertical-align: middle;
  margin: 0 0 2px 4px;
}

#pcHeader #overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 128;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
}

/**
 * SP header @ Common
 */

#spHeader {
  text-align: center;
  padding: 16px 0;
}

body.toppage #spHeader {
  text-align: center;
  padding: 16px 0 36px;
}

#spHeader h1,
#spHeader span {
  color: #3aacc9;
  font-size: .8rem;
}

#spHeader.logoLeft {
  text-align: left;
}

#spHeader.logoLeft a:nth-child(1) img {
  vertical-align: middle;
  margin: 0 5px 0 20px;
}

#spHeader header {
  display: flex;
}

#spHeader header a:nth-child(1) {
  width: 100%;
  margin-right: -108px;
}

#spHeader.top header a:nth-child(1) h1,
#spHeader.top header a:nth-child(1) span {
  display: block;
  margin-right: 1.2em;
}

#spHeader header a:nth-child(2) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 108px;
}

#spHeader header a:nth-child(2) span {
  display: block;
  margin-right: 8px;
}

#spHeader header a:nth-child(2) img {
  margin-right: 22px;
}

#spOverlay {
  position: fixed;
  top: 0;
  z-index: 127;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
}

.mainMenu {
  position: fixed;
  z-index: 255;
  bottom: 0;
  display: flex;
  align-items: center;
  width: 100%;
  line-height: 1;
  background: rgb(29, 219, 212);
  background: -moz-linear-gradient(left, rgba(29, 219, 212, 1) 0%, rgba(47, 198, 227, 1) 45%, rgba(47, 173, 218, 1) 79%, rgba(47, 149, 209, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(29, 219, 212, 1) 0%, rgba(47, 198, 227, 1) 45%, rgba(47, 173, 218, 1) 79%, rgba(47, 149, 209, 1) 100%);
  background: linear-gradient(to right, rgba(29, 219, 212, 1) 0%, rgba(47, 198, 227, 1) 45%, rgba(47, 173, 218, 1) 79%, rgba(47, 149, 209, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1ddbd4', endColorstr='#2f95d1', GradientType=1);
}

.mainMenu a {
  position: relative;
  width: 25%;
  text-align: center;
  padding: 12px 0;
  opacity: 1;
}

.mainMenu img {
  max-height: 34px;
}

.mainMenu .circle {
  position: absolute;
  top: .5rem;
  left: calc(50% + .5rem);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  min-width: 1.5rem;
  min-height: 1.5rem;
  font-size: 1rem;
  background: #fff500;
  padding: 0 4px;
  border-radius: 16px;
}

#spMenu .content {
  margin: 0 25px;
}


#spMenu .spSubMenu {
  display: none;
  z-index: 255;
  width: 100%;
  background: #fff;
  padding: 32px 0;
  overflow: auto;
}

#spMenu .spSubMenu h1,
#spMenu .spSubMenu h2,
#spMenu .spSubMenu .head {
  color: #4acfbd;
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 12px;
}

#spMenu .spSubMenu .inputArea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #4acfbd;
}

#spMenu .spSubMenu .inputArea input[type="text"] {
  width: calc(100% - 68px);
  font-size: 1.6rem;
  text-indent: 64px;
  text-align: center;
  padding: 14px 8px;
  border: none;
  outline: none;
}

#spMenu .spSubMenu .inputArea input[type="submit"] {
  width: 68px;
  height: 44px;
  background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-sp/img/common/icon-search.png) no-repeat center center;
  padding: 12px 24px;
  border: none;
}

@media screen and (-webkit-min-device-pixel-ratio:2),
(min-resolution: 2dppx) {
  #spMenu .spSubMenu .inputArea input[type="submit"] {
    background: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-sp/img/common/icon-search@2x.png) no-repeat center center;
    background-size: 20px 20px;
  }
}

#spMenu .spSubMenu .keyword {
  max-height: 72px;
  overflow: hidden;
  margin: 18px 0 24px;
}

#spMenu .spSubMenu .keyword a {
  margin: 0 4px 8px 0;
}

#spMenu .spSubMenu .keyword span,
#spMenu .spSubMenu .keyword a {
  display: inline-block;
  color: #4acfbd;
  font-size: 1rem;
  background: #f2f2f2;
  padding: 4px 12px;
  border-radius: 16px;
}

#spMenu .spSubMenu .buttonWrap {
  border-top: 1px solid #c8f1eb;
}

#spMenu .spSubMenu .buttonWrap .buttonMiddle {
  margin-top: 32px;
  padding: 12px 0;
  text-align: center;
}

#spMenu .spSubMenu .buttonWrap .buttonMiddle a {
  color: #4acfbd;
  padding: 12px;
  border: 1px solid #4acfbd;
  font-size: 1.4rem;
  letter-spacing: .2rem;
  text-align: center;
  border-radius: 32px;
}

#spMenu .spSubMenu .buttonWrap .buttonMiddle img {
  vertical-align: middle;
  margin: 0 0 2px 4px;
}

#spMenu .spSubMenu .icons {
  display: flex;
  justify-content: center;
}

#spMenu .spSubMenu .icons a {
  margin: 0 10px;
}

#spMenu .spSubMenu .icons a img {
  border-radius: 8px;
}

#spMenu .spSubMenu {
  position: absolute;
  left: 0;
  bottom: 0;
}

#spMenu .spSubMenu.menu {
  left: 0;
  bottom: 0;
  color: #4acfbd;
  background: #f2f2f2;
  padding: 24px 0 0;
}

#spMenu .spSubMenu.menu .sectionHead {
  font-size: 1.8rem;
  padding: 0;
}

#spMenu .spSubMenu.menu .sectionHead img {
  vertical-align: middle;
  margin: 0 8px 2px;
}

#spMenu .spSubMenu.menu .content {
  background: #fff;
}

#spMenu .spSubMenu.menu .menuContent {
  background: #fff;
}

#spMenu .spSubMenu.menu a {
  color: inherit;
}

#spMenu .spSubMenu.menu .content {
  margin: 15px 25px 25px;
}

#spMenu .spSubMenu.menu .content a li,
#spMenu .spSubMenu.menu .content a dt,
#spMenu .spSubMenu.menu .content a dd {
  border-top: 1px solid #f2f2f2;
}

#spMenu .spSubMenu.menu .menuContent a:nth-child(n+2)>li,
#spMenu .spSubMenu.menu .menuContent a:nth-child(n+2)>dt,
#spMenu .spSubMenu.menu .menuContent a:nth-child(n+2)>dd,
#spMenu .spSubMenu.menu .shareMenu {
  border-top: 1px solid #c8f1eb;
}

#spMenu .spSubMenu.menu ul a>li,
#spMenu .spSubMenu.menu dl a>dt,
#spMenu .spSubMenu.menu dl a>dd {
  padding: 12px 0;
}

#spMenu .spSubMenu.menu ul li .inner,
#spMenu .spSubMenu.menu dl dt .inner,
#spMenu .spSubMenu.menu dl dd .inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#spMenu .spSubMenu.menu ul a li .inner .menuIcon,
#spMenu .spSubMenu.menu dl a dt .inner .menuIcon,
#spMenu .spSubMenu.menu dl a dd .inner .menuIcon {
  margin-right: 8px;
}

#spMenu .spSubMenu.menu ul a li .inner span:first-child,
#spMenu .spSubMenu.menu dl a dt .inner span:first-child,
#spMenu .spSubMenu.menu dl a dd .inner span:first-child {
  margin-left: 25px;
}

#spMenu .spSubMenu.menu ul a li .inner span:nth-child(2),
#spMenu .spSubMenu.menu dl a dt .inner span:nth-child(2),
#spMenu .spSubMenu.menu dl a dd .inner span:nth-child(2) {
  margin-right: 20px;
}

#spMenu .spSubMenu.menu ul li div span img,
#spMenu .spSubMenu.menu dl dt div span img,
#spMenu .spSubMenu.menu dl dd div span img {
  vertical-align: middle;
  margin-bottom: 3px;
}

#spMenu .spSubMenu.menu .link {
  display: none;
  width: 100%;
}

#spMenu .spSubMenu.menu .link ul,
#spMenu .spSubMenu.menu .link dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
}

#spMenu .spSubMenu.menu .link ul a,
#spMenu .spSubMenu.menu .link dl a {
  width: 100%;
}

#spMenu .spSubMenu.menu .link ul a li,
#spMenu .spSubMenu.menu .link dl a dt,
#spMenu .spSubMenu.menu .link dl a dd {
  color: #000;
  background: #fcfcfc;
}

#spMenu .spSubMenu.menu ul .link ul a li .inner span,
#spMenu .spSubMenu.menu dl .link dl a dt .inner span,
#spMenu .spSubMenu.menu dl .link dl a dd .inner span {
  margin-left: 53px;
}

#spMenu .spSubMenu.menu .shareMenu {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
}

#spMenu .spSubMenu.menu .shareMenu p {
  line-height: 1.1;
}

#spMenu .spSubMenu.menu .shareMenu div,
#spMenu .spSubMenu.menu .shareMenu div a {
  margin: 0 6px;
}

#spMenu .go2search > span {
  margin-left: 16px;
}
@charset "utf-8";

/**
 * Contentfragmentlist 
 */

@media screen and (min-width: 835px) {
    .contentfragmentlist .content {
        width: 1120px;
        margin: 0 auto;
    }

    .contentfragmentlist .archives {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .contentfragmentlist .archives .archive.writer article {
        display: contents;
    }

    .contentfragmentlist .archives .archive.writer {
        display: flex;
        justify-content: space-between;
        width: calc(50% - 15px);
        margin-bottom: 60px;
    }

    .contentfragmentlist .archives .archive.writer:nth-last-child(1),
    .contentfragmentlist .archives .archive.writer:nth-last-child(2) {
        margin-bottom: 28px;
    }
    
    .contentfragmentlist .archive.writer .image img {
        width: 120px;
        border-radius: 50%;
    }

    .contentfragmentlist .archive.writer .detail {
        width: 400px;
    }

    .contentfragmentlist .archive.writer .detail .inner h1,
    .contentfragmentlist .archive.writer .detail .inner h2 {
        color: #176ebe;
        font-size: 2rem;
        line-height: 1;
        margin-bottom: 16px;
    }

    .contentfragmentlist .archive.writer .detail .inner div {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }

    .contentfragmentlist .archive.writer .detail .inner div a {
        color: #4acfbd;
        text-decoration: underline;
    }

    .contentfragmentlist
        .archive.writer
        .detail
        .inner
        div
        a[target="_blank"]:after {
        content: url(../../../../content/dam/viewtabi/assets/themes/viewtabi-pc/img/common/icon-outer-link.png);
        margin: 0 4px 0 4px;
    }

    .contentfragmentlist .more {
        display: inline-block;
        width: 400px;
        color: #4acfbd;
        font-size: 1.8rem;
        text-align: center;
        padding: 12px 0;
        border: 1px solid #4acfbd;
        border-radius: 28px;
    }
    .contentfragmentlist .archive.writer .detail .inner .more {
        width: 176px;
        font-size: 1.5rem;
        padding: 6px 0;
    }

    .contentfragmentlist .archive.writer .detail .inner .more span {
        margin-left: 16px;
    }

    .contentfragmentlist .archive.writer .detail .inner .more img {
        margin-left: 14px;
        vertical-align: middle;
        margin: 0 0 2px 16px;
    }
}
@media screen and (max-width: 834px) {
    .contentfragmentlist * {
        word-break: break-all;
    }

    .contentfragmentlist .content {
        margin: 0 25px;
    }

    .contentfragmentlist .archives .archive.writer {
        margin-bottom: 32px;
        position: relative;
    }

    .contentfragmentlist .archive.writer article {
        display: flex;
    }

    .contentfragmentlist .archives .image {
        width: 120px;
    }

    .contentfragmentlist .archive.writer .image img {
        border-radius: 50%;
    }

    .contentfragmentlist .archives .image img {
        width: 100%;
    }

    .contentfragmentlist .archives .detail {
        position: relative;
        width: calc(100% - 120px);
    }

    .contentfragmentlist .archives .detail .inner {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        height: 100%;
        margin-left: 16px;
    }

    .contentfragmentlist .archives .detail h1,
    .contentfragmentlist .archives .detail h2,
    .contentfragmentlist .archives .detail h3 {
        font-size: 1.4rem;
        font-weight: bold;
        margin: 0;
    }

    .contentfragmentlist .archive.writer .detail h1,
    .contentfragmentlist .archive.writer .detail h2 {
        color: #176ebe;
        font-size: 1.6rem;
    }

    .contentfragmentlist .archive.writer .detail .inner div {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }

    .contentfragmentlist .archive.writer .detail .inner div a {
        color: #4acfbd;
        text-decoration: underline;
    }

    .contentfragmentlist .more {
        display: block;
        width: 100%;
        color: #4acfbd;
        font-size: 1.4rem;
        text-align: center;
        padding: 12px 0;
        border: 1px solid #4acfbd;
        border-radius: 28px;
    }

    .contentfragmentlist .archive.writer .detail .more {
        padding: 8px 0;
    }

    .contentfragmentlist .archive.writer .detail .more span {
        margin-left: 16px;
    }

    .contentfragmentlist .more img {
        vertical-align: middle;
        margin: 0 0 2px 8px;
    }
}