@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/************************出現用**************************/
.sa {
  opacity: 0;
  transition: all .5s ease;
}

.sa.show{
  opacity: 1;
  transform: none;
}
.top_content_inner__box .sa.slow{
  transition: all 3s;
}

.sa--lr {
  transform: translate(-100px, 0);
}

.sa--rl {
  transform: translate(100px, 0);
}

.sa--up {
  transform: translate(0, 100px);
}

.sa--down {
  transform: translate(0, -100px);
}

.sa--scaleUp {
  transform: scale(.5);
}

.sa--scaleDown {
  transform: scale(1.5);
}

.sa--rotateL {
  transform: rotate(180deg);
}

.sa--rotateR {
  transform: rotate(-180deg);
}

/************************出現用ここまで**************************/

.top_content_box{
  margin-top: 10%;
}

.home #content{
    padding-top: 0;
    margin-bottom: 0;
}

.top_content_box .top_content_inner_box{
    position: relative;
    height: 200px;
    width: 100%;
    display: table;
    margin-bottom: 15%;
}

.top_content_box .top_content_inner_box .top_content_inner__box{
    display: table-cell;
    width: 80%;
    vertical-align: middle;
    padding-right: 5%;
}
.top_content_box .top_content_inner_box .top_content_inner__box .top_content_text{
    position: relative;
    z-index: 10;
}
.top_content_box .top_content_inner_box .top_content_inner__box .top_content_text a{
    display: block;
    width: 40%;
    text-align: center;
    border: 1px solid #173a81;
    background: rgba(86, 142, 199,.8);
    color: white;
    margin-top: 2%;
    padding: 1% 0;
    position: relative;
    transition: all .5s;
}
.top_content_box .top_content_inner_box .top_content_inner__box .top_content_text a:after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f068";
    position: absolute;
    right: 10%;
    transition: all .5s;
}
.top_content_box .top_content_inner_box .top_content_inner__box .top_content_text a:hover{
    border: 1px solid #568fc8;
    background: rgba(255, 255, 255, 0.8);
    color: #5c96d2;
}
.top_content_box .top_content_inner_box .top_content_inner__box .top_content_text a:hover:after{
    right: -2%;
}

.top_content_box .top_content_inner_box .top_content_title{
    position: relative;
    z-index: 10;
}
.top_content_box .top_content_inner_box .top_content_title h2{
    text-align: left;
    margin: 0;
    font-size: 200%;
    z-index: 10;
}
.top_content_box .top_content_inner_box span{
    position: absolute;
    top: 20%;
    left: 0;
    z-index: 1;
    color: #dfeeff;
    font-size: 700%;
    transform: rotate(-4deg);
    font-family: 'Pinyon Script', cursive;
    animation-delay: 3s;
}
.top_content_box .top_content_inner_box span.show{
    animation-delay: 3s;
}


.top_content_box .top_content_inner_box img{
    display: table-cell;
    width: 100%;
    z-index: 10;
    position: relative;
}


#before_footer_widget{
    background: #558dc7;
    margin: 0;
    padding: 5%;
}

#before_footer_widget .cta_area_outer_box{
    display: table;
    width: 100%;
}
#before_footer_widget .cta_area_outer_box .cta_area_inner_box{
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}
#before_footer_widget .cta_area_outer_box .cta_area_inner_box .cta_area_inner__box{
    width: 80%;
    margin-left: 10%;
    border: 1px solid white;
    padding: 3%;
}
#before_footer_widget .cta_area_outer_box .cta_area_inner_box .cta_area_inner__box a{
    display: block;
    text-align: center;
    font-size: 150%;
    color: white;
    position: relative;
}

#before_footer_widget .cta_area_outer_box .cta_area_inner_box .cta_area_inner__box.to_contact a:after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1d8";
    position: absolute;
    right: 10%;
    transition: all .5s;
}
#before_footer_widget .cta_area_outer_box .cta_area_inner_box .cta_area_inner__box.to_tel a:after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f3cd";
    position: absolute;
    right: 10%;
    transition: all .5s;
}
#before_footer_widget .cta_area_outer_box .cta_area_inner_box .cta_area_inner__box a:hover:after{
    right: 5%;
}
.cta_box{
  margin-bottom: 5%;
}
.cta_box .top_title{
    background: none;
    border: none;
    border-radius: 0;
    color: inherit;
    letter-spacing: var(--swl-letter_spacing,.2px);
    padding: 0;
    position: relative;
    text-align: center;
    font-size: 2em;
    color: white;
    margin-bottom: 5%;
  }
.cta_box .top_title::before{
  border-top: none;
  border-block: none;
}

.works_outer_box{
    padding: 3%;
    border: 1px solid gray;
}
.works_outer_box .works_inner_box{}
.works_outer_box .works_inner_box ul.works_list{
    padding: 0;
}
.works_outer_box .works_inner_box ul.works_list li{
    list-style-type: none;
}
.works_outer_box .works_inner_box ul.works_list li.works_name p a{
    position: relative;
}
.works_outer_box .works_inner_box ul.works_list li a::after{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f35d";
  position: absolute;
  right: -8%;
  transition: all .5s;
  font-size: 70%;
}


.works_outer_box .works_inner_box ul.works_list ul.content_list{
    padding: 0;
    margin-top: 3%;
}
.works_outer_box .works_inner_box ul.works_list ul.content_list::after{
    content:'';
    display: block; 
    clear:both;
}

.works_outer_box .works_inner_box ul.works_list ul.content_list li{
    float: left;
    margin: .5%;
    padding: .5% 3%;
    color: white;
    border-radius: 5px;
    font-size: 90%;
}
.works_outer_box .works_inner_box ul.works_list ul.content_list li.content-design{background-color: #FF5500}
.works_outer_box .works_inner_box ul.works_list ul.content_list li.content-coding{background-color: #DFB200}
.works_outer_box .works_inner_box ul.works_list ul.content_list li.content-responsive{background-color: #009FFF}
.works_outer_box .works_inner_box ul.works_list ul.content_list li.content-lp{background-color: #0034FF}
.works_outer_box .works_inner_box ul.works_list ul.content_list li.content-customize{background-color: #8000FF}
.works_outer_box .works_inner_box ul.works_list ul.content_list li.content-shoot{background-color: #3D00C4}
.works_outer_box .works_inner_box ul.works_list ul.content_list li.content-adv{background-color: #0056C4}
.works_outer_box .works_inner_box ul.works_list ul.content_list li.content-dtp{background-color: #006F3B}
.works_outer_box .works_inner_box ul.works_list ul.content_list li.content-flyer{background-color: #595958}
.works_outer_box .works_inner_box ul.works_list ul.content_list li.content-logo{background-color: #663A01}
.works_outer_box .works_inner_box ul.works_list ul.content_list li.content-card{background-color: #800000}

.works_image_outer_box{
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px 0;
}
.works_image_outer_box figure{
    display: table-cell;
    padding: 1%;
    border: 1px solid #ddd;
}
.works_image_outer_box figure img{
    width: 100%;
    height: 150px;
    object-fit: contain;
}

.contact_form{
    text-align: center;
    margin-top: 10%;
}
.contact_form .contact_form_title{
    margin-top: 3%;
}
.contact_form .contact_form_title input{
    margin-left: 10%;
    width: 80%;
}
.contact_form .contact_form_body{
    padding-bottom: 2%;
}
.contact_form .contact_form_body input{
    width: 100%;
    background: none;
    border: 1px solid #ddd;
}
.contact_form .contact_form_body textarea{
    width: 100%;
    background: none;
    border: 1px solid #ddd;
}

#custom_html-3{
    margin-top: 0;
}
ul.footer_address_box{}
ul.footer_address_box li{position: relative;}
ul.footer_address_box li.footer_tel,ul.footer_address_box li.footer_contact{
    padding-left: 5%;
}
ul.footer_address_box li.footer_contact::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f1d8";
  position: absolute;
  left: 0%;
}


ul.footer_address_box li.footer_tel::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f3cd";
  position: absolute;
  left: 1%;
}




@media screen and (max-width: 782px) {
    .top_content_box .top_content_inner_box .top_content_title h2{
        font-size: 150%;
    }

    .top_content_box .top_content_inner_box span{
        font-size: 500%;
        top: 10%;
    }

    .top_content_box .top_content_inner_box .top_content_inner__box{
        width: 70%;
    }

    #before_footer_widget .cta_area_outer_box{display: block;}
    #before_footer_widget .cta_area_outer_box .cta_area_inner_box{
        display: block;
        width: 100%;
        margin-bottom: 3%;
    }
    #before_footer_widget .cta_area_outer_box .cta_area_inner_box .cta_area_inner__box {
        width: 100%;
        margin-left: 0;
    }.contact_form .contact_form_title input{
        margin-left: 0%;
        width: 100%;
    }

    .works_image_outer_box figure{
        display: block;
        margin-bottom: 3%;
    }
    .works_outer_box .works_inner_box ul.works_list{
        padding: 0;
        margin-bottom: 3%;
    }

}


@media screen and (max-width: 600px) {
    .top_content_box .top_content_inner_box span
    {
        font-size: 500%;
        top: 0;
        line-height: 100%;
        color: #edf6ff;
    }

    .wp-block-spacer{
        display: none;
    }
}