* {
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /*font-family: "Yu Gothic", sans-serif; */
    /* font-family: Arial, sans-serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic"; */
	/*font-family: sans-serif;*/
    
	font-size: 12px;
	line-height: 150%;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
    color: #333333;  
    min-width: 900px;
    text-rendering: geometricPrecision;

}

img {
    width: 100%;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

table {
  border-collapse	: collapse;
  width				: 100%;
}

table, th, td {
  border			: 0;
  font-weight		: bold;
  vertical-align	: middle;
}

th, td {
  border-bottom		: 1px solid #707070;
}

th, td {
  font-size: 1.6em;
  line-height: 1.5em;
}

th {
    text-align: left;
    vertical-align: top;
    padding: 40px 0 0 15px;
}

td {
    padding: 40px 0;
}

a {
    text-decoration: none;
}

h2.clt-section-title  {
    font-size: 40px;
    font-family: "DIN Alternate";
    line-height: 1.5em;
    letter-spacing: 0.1em;
}

h4.clt-section-subhead {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;   
}

:after, :before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;   
    margin: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    resize: vertical;
}

.clt-section {
    max-width: 1000px; 
    min-width: 900px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 80px;
    display: flex;
}

.clt-section.non-flex {
    display: block;
}

.clt-text-center {
    text-align: center;
}

.clt-section.section-title {
    position: relative;
    max-width: unset;
    
    margin-bottom: 97px;
}
.section-title .clt-diagonal-accent.accent-right {
    position: absolute;
    top: 10px;
    right: 0;
}
.section-title .clt-diagonal-accent.accent-left {
    position: absolute;
    top: 10px;
    left: 0;
}

.clt-sub-section {
    flex-basis: 50%;
}

.clt-diagonal-accent {
    max-width: 302px;
}

/*-LOGO SECTION----------------------------------------------------------*/

.clt-logo {
    padding: 24px 28px 24px 28px;
}

.clt-logo img {
    width: auto;
}

/*-HEADER SECTION--------------------------------------------------------*/
.clt-section.header-section{
    padding: 0 30px;
}
.clt-header-left {
    flex-basis: 42%;
}

.clt-header-right {
    flex-basis: 58%;
    position: relative;
    z-index: -1;
}

.clt-header-right .clt-diagonal-accent {
  position: absolute;
  top: -23px;
  right: -6px;
}

.clt-header-text {
    margin-right: 50px;
    position: relative;
}

/* X-shape */
.clt-header-text svg{
    position: absolute;
    max-width: 94px;
    max-height: 95px;
    top: 20%;
    right: -26%;
}

.clt-header-text .company-txt {
    max-width: 387px;
}

.clt-header-text .company-txt-sub {
    max-width: 360px;
}

.clt-header-text .statement-txt {
    font-size: 1.8em;
    line-height: 2.2em;
}

/*-ABOUT-----------------------------------------------------------------*/
.clt-about-img {
    flex-basis: 38%;
    position: relative;
}

.clt-about-img .about-img-1 {
    position: absolute;
    width: auto;
    top: -86px;
    left: 0;
}

.clt-about-img.img-left .clt-diagonal-accent {
    position: absolute;
    bottom: 25px;
    right: -65px;
}

.clt-about-img .about-img-2 {
    position: absolute;
    width: auto;
    bottom: -86px;
    right: 0;
}

.clt-about-txt{
    flex-basis: 62%;
    background-color: #F4F4F4;
    padding: 53px 77px 60px 98px;
}


.clt-about-txt.about-txt-left {
    padding: 53px 98px 60px 77px;
}


.clt-about-txt.about-txt-left {
    position: relative;
}
.clt-about-txt.about-txt-left .clt-diagonal-accent {
    position: absolute;
    bottom: -25px;
    left: -95px;
}

.clt-about-txt .about-title{
    font-size: 40px;  
    font-family: "DIN Alternate";
    line-height: 1em;
    letter-spacing: 0.1em;
}

.clt-about-txt .about-txt{ 
    font-size: 20px;
    line-height: 1.7em;
    font-weight: 400;	
    text-align: justify;
    
}

/*-MERIT-----------------------------------------------------------------*/

.clt-section.merit-section {
    max-width: 950px;
}

.clt-merit-title h4{
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;
}

.clt-merit-item {
    display: flex;
    margin-bottom: 85px;
}

.clt-merit-item-img {
    flex-basis: 40%;
}

.clt-merit-item-txt {
    flex-basis: 60%;
    padding-left: 41px;
}


.clt-merit-item-txt p{
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 400;
    text-align: justify;
}

.merit-item-title {
    display: flex;
    width: 100%;
}

.merit-item-title img {
    width: auto;
}

.merit-item-title-txt {
    width: 100%;
    position: relative;
    margin-left: 15px;
}

.merit-item-title-txt h2 {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    font-size: 26px;
    font-weight: bold;
	
	letter-spacing: 3px;
}
/*-WORKS-----------------------------------------------------------------*/
.clt-section.works-section {
    max-width: 100%;
    display: block;
    position: relative;
}
.works-section:before {
    background: #f4f4f4;
    /* background: pink; */
    bottom: 0%;
    content: "";
    display: block;
    height: calc(66% + 1.5rem);
    position: absolute;
    right: 0;
    width: 100%;
    z-index: -1;
}
.works-section__intro {
    display: flex;
}

.works-section__intro__photo {
    position: relative;    
    flex-basis: 52%;
}
.works-section__intro__case {
    position: absolute;
    color: white;
    background: #333;
    padding: 13px 33px 12px 190px;
    top: 10%;
    right: -190px;
}
.works-section__intro__case.clt-case-02 {
    padding: 13px 190px 12px 33px;
    top: 10%;
    right: unset;
    left: -265px;
}
.works-section__intro__case h3 {
    font-family: "DIN Alternate";
    font-size: 2.7em;
    line-height: 1.5em;
    white-space: nowrap;
    letter-spacing: 4px;
}
.works-section__intro__text {
    flex-basis: 48%;
}
.works-section__text-container {
    max-width: 36em;
    margin: 33% auto auto 5%;
}
.works-section__text-container.clt-case-02 {
    margin: 33% 5% auto auto;
}
.works-section__intro__head {
    font-size: 2em;
    line-height: 40px;
    font-weight: bold;
    letter-spacing: 3px;

}
.works-section__text-container.clt-case-02 .works-section__intro__head {
    text-align: right;
}
.works-section__intro__subhead p {
    font-size: 1.5em;
    line-height: 1.5em;
}
.works-section__img-list {
    display: flex;
}
.works-section__img-list__item {
    width: fit-content;
}
.works-section__img-list__subtext {
    text-align: right;
    margin: 1em 2%;
}
.works-section__img-list__subtext span{
    font-size: 1.4em;
    line-height: 1.5em;
    font-weight: 400;
}

.works-section__info {    
    display: flex;
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.works-section__info h3.works-section__info__header {
    font-family: "DIN Alternate";
    font-size: 1.7em;
    line-height: 1em;
    
    flex-basis: 15%;
    text-align: right;
    margin: auto 60px auto 100px;
}
.works-section__info__list-container {
    flex-basis: 85%;
}
.works-section__info__list {
    list-style-type: none;
    columns: 2;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 60px;
    
    
    border-left: 1px solid #707070;
}
.works-section__info__list li {
    font-size: 20px;
    line-height: 1em;
    margin-bottom: 1.5em;
    font-weight: 400;
}

.works-section__info__list li.bottom-info {
    margin-bottom: 0;
}

.clt-works-diagonal {
    display: block;
    margin-top: 80px;
}
.clt-works-diagonal .clt-diagonal-accent {
    margin: 0 0 0 auto;
}

/*-COMPANY---------------------------------------------------------------*/

.clt-section.company-section {
    max-width: 870px;
    display: block;
    position: relative;
}
.company-section__inner__table ul {
    display: grid;
    grid-template-rows: repeat(4, min-content);
    grid-auto-flow: column;
    width: 75%;
}
.company-section__inner__table ul li {
    /* line-height: 2em; */
    margin-bottom: 10px;
}
.company-section__inner__button-container {
    display: flex;
    justify-content: center;
    margin: 80px auto;
    width: 15em;
    height: 4em;
    width: 44em;
    height: 6em;
    border: 1px solid #333;
}
.company-section__inner__button {
	color: inherit;
    align-items: center;
    justify-content: center;
    display: flex;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.company-section__inner__button-txt {
    font-size: 1.7em;
    line-height: 1em;
    font-weight: bold;
}
.company-section__inner__table .company-groups {
    padding-bottom: 55px;
}
.company-section__inner__table .frontier-container {
    position: relative;
}
.company-section__inner__table .frontier-item {
    position: absolute;
    white-space: nowrap;
}
/*-CONTACT---------------------------------------------------------------*/
.clt-section.contact-section {
    max-width: 870px;
    display: block;
    position: relative;
}

.clt-contact-section-container {
    background-color: #f4f4f4;
}
.clt-section .clt-field-wrap {
    padding: 36px 40px 28px 10px;
    border-bottom: 1px solid #707070;
}
.clt-section .clt-field-wrap:nth-child(6) {
    border-bottom: none;
}

.clt-section .req {
    color: #EF5C5C;
    font-size: 0.8em;
    margin-left: 8px;
}
.clt-section .clt-field-wrap label {
    display: inline-block;
    font-size: 1.5em;
    font-weight: bold;
    
    margin-bottom: 13px;
}
.clt-section .clt-field-wrap label.radio-field {
    margin-bottom: 37px;
}
.clt-section .clt-field-wrap label.clt-radio-label,
.clt-field-wrap .wpcf7-radio .wpcf7-list-item-label{
    margin-right: 20px;
}
.clt-section .clt-field-wrap input:not([type="radio"]),
.clt-section .clt-field-wrap textarea {
    width: 100%;
}
.clt-section .clt-field-wrap input:not([type="radio"]),
.clt-section .clt-field-wrap textarea {
    display: block;
    border: 1px solid #707070;
    margin: 0;
    padding: 12px 10px;
    width: 100%;
    background-color: #fff;
}
.clt-section .clt-field-wrap input:not([type="radio"]), 
.clt-section .clt-field-wrap textarea {
    font-size: 1.3rem;
    font-weight: normal;
    font-family: inherit;
}
.clt-section .clt-field-wrap-content.name-input {
    display: flex;
}
.clt-field-wrap-content.name-input .name-fields {
    display: flex;
}
.clt-field-wrap-content.name-input span.name-label{
    display: inline-block;
    font-size: 1.5em;
    font-weight: bold;
    margin: auto 20px auto 100px;
    white-space: nowrap;
}
.clt-field-wrap-content.input-margin-top {
    margin-top: 30px;
}
.clt-field-wrap-content .wpcf7-form-control-wrap.inquirer-company,
.clt-field-wrap-content .wpcf7-form-control-wrap.inquirer-section {
    width: 100%;
}
.wpcf7-submit {
    align-items: center;
    justify-content: center;
    display: flex;
    width: 100%;
    height: 100%;
    
    border: none;
    background-color: transparent;
    
    font-family: "Yu Gothic Medium";
    font-size: 1.7em;
    line-height: 1em;
    font-weight: bold;
    
    cursor: pointer;
}
.wpcf7-spinner {
    position: absolute;
    display: none !important;
}
.wpcf7 form .wpcf7-response-output {
    border: none !important;
    font-size: 1.2em;
}
.wpcf7-not-valid-tip {
    margin-top: 5px;
    position: absolute;
}
/*-FOOTER----------------------------------------------------------------*/

.clt-return-top-container {
    margin: 0 auto;
}
.clt-return-top-container a {
    cursor: pointer;
}
.clt-return-top-btn span {
    font-size: 1.4em;
    font-family: "DIN Alternate";
    line-height: 2em;
    color: #333333;
}
.clt-return-top-arrow {
    width: 0;
    height: 0;
    border-right: 17px solid transparent;
    border-bottom: 30px solid #333333;
    border-left: 17px solid transparent;
    margin: 0 auto;
    /* position: absolute; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
}

.clt-section.footer-section {
    justify-content: center;
    margin: 32px auto;
    max-width: 1125px;
    border-top: 1px solid #707070;
    padding-top: 33px;
}
.clt-section.footer-section span{
    font-family: "DIN Alternate";
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap;
}
/*-HOVER-----------------------------------------------------------------*/
.clt-button {
    background-color: #ffffff;
}
.clt-button a:hover,
.wpcf7-submit:hover {
    background-color: #333333;
    color: #ffffff;
}

/*-SPACER----------------------------------------------------------------*/

/*-ANIMATE-HEADER--------------------------------------------------------*/
.fadein {
    /* position:absolute; */
}
.fadein img {
    position:absolute;
    top:0px;
    top:0;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 18s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 18s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 {
    /* width:auto; */
    background-color: lightblue;
}
#f2 {
    /* width:auto; */
    -webkit-animation-delay: -12s;
    background-color: yellow;
}
#f3 {
    /* width:auto; */
    -webkit-animation-delay: -6s;
    background-color: lightgreen;
}
/*-----------------------------------------------------------------------*/