@charset "UTF-8";
/*共通*/
html{
    scroll-behavior: smooth;
}
.wrapper{
    max-width:1150px;
    margin:0 auto;
}
.heading06 {
	position: relative;
	padding-top: 120px;
	padding-bottom: 50px;
	font-size: 26px;
	text-align: center;
    margin-top:0;
}

.heading06 span {
	position: relative;
	z-index: 2;
}

.heading06::before {
	content: attr(data-en);
	position: absolute;
	top: 110px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255,175,8,0.4);
	font-size: 80px;
	font-style: italic;
    font-family: 'Dancing Script', cursive;
}
a{
    text-decoration:none;
    color:#000;
}
li{
    list-style:none;
}
img{
    max-width:100%;
}

/*ページトップへ戻る*/
#top a{
    opacity:1;
    color:#fff;
    font-size:2rem;
}
.page_top{
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:fixed;
    right:10px;
    bottom:0px;
    opacity:1;
    background-color:rgba(255,175,8,0.4);
    color:#fff;
    padding:5px;
    width:50px;
    height:50px;
    border-radius:50%;
    font-family:'Century';
}
.arrow_top{
    border-top:3px solid #333;
    border-left:3px solid #333;
    width:20px;
    height:20px;
    transform:rotate(45deg);
    margin:10px auto 0 auto;
}

/*ヘッダー*/
header{
    background-color:#F7E3DA;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px;
}
header nav ul{
    display:flex;
}
header nav ul li{
    padding:0 15px;
}
header nav ul li a{
    transition:.3s;
}
header nav ul li a:hover{
    color:#d2691e;
    transform:translateY(-5px);
}
header nav ul li:first-child{
    display:none;
}
/* ↑ ヘッダー ↑ */
/*Youtube埋め込み*/
.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* アスペクト比16:9の場合 */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ↑ Youtube埋め込み ↑ */
/* お知らせ */
.sec-news{
    padding-bottom:50px;
    background-color:#F1F1F1;
}
.sec-news ul.news-list {
    padding: 0 !important;
    height: 350px;
    overflow-x: scroll;
}
.sec-news .news-item .flex{
    width: 95%;
    margin:30px auto;
    display:flex;
    align-items:center;
    background-color:white;
    border-radius: 15px;
    box-shadow:0px 0px 16px -6px rgba(0,0,0,0.6);
    padding:20px 0px;
}
.sec-news .news-item .flex:hover{
    box-shadow:none;
    transform:translate3d( 0,5px, 0);
    transition-duration:.3s;
    opacity:.8;
}
.sec-news .news-item .flex .day{
    width:20%;
    text-align:center;
}
.sec-news .news-item .flex .category{
    width:15%;
    text-align:center;
}
.sec-news .news-item .flex .content{
    width:60%;
    padding-left:15px;
}
.sec-news .news-item .flex .content span{
    border-bottom:1px solid #333;
}
.sec-news .news-item .flex #topics{
    background-color:#626262;
    color:white;
    padding:5px;
    font-size:.75rem;
}
/* ↑ お知らせ ↑ */
/*サービス一覧*/
.sec-service{
    background-color:rgb(255, 243, 229, .5);
}
.service-list{
    display:flex;
    justify-content:space-between;
    padding:50px 0;
}
.ser-items{
    width:28%;
    background-color:#fff;
    /* border:1px solid #481515; */
    padding:15px;
    border-radius:30px;
    box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
}
.ser-items p:nth-of-type(2){
    padding:0 10px;
    line-height:1.5;
    font-size:0.95rem;
}
.img-center,.s-title{
    display:block;
    text-align:center;
}
.s-title{
    font-weight:bold;
    font-size:1.25rem;
}
/* ↑ サービス一覧 ↑ */
/*制作実績*/
.sub-flow{
    font-size:13px;
    font-weight:normal;
    margin-left:15px;
}
.sub-sub-title{
    display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
	text-align: center;
}
.sub-sub-title:nth-of-type(2){
    margin-top:50px;
}
.sub-sub-title::before,.sub-sub-title::after{
    content:'';
    width:3px;
    height:40px;
    background-color:#e3bf00;
}
.sub-sub-title::before{
    margin-right:30px;
    transform:rotate(-35deg);
}
.sub-sub-title::after{
    margin-left:30px;
    transform:rotate(35deg);
}
.work-list{
    display:flex;
    justify-content:space-around;
    padding: 0;
}
.sub-sub-title::before{
    margin-right:20px;
}
.sub-sub-title::after{
    margin-left:20px;
}
.work-items{
    width:30%;
}
.work-items:hover{
    transform:scale(1.1,1.1); 
    transition:0.5s;
    filter:gray;
    filter:grayscale(0.5);
}
.work-items .flex-item .work-detail {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
.site-name{
    text-align:center;
    font-size:1rem;
    color:#000;
    line-height:1.2;
}
.site-name span{
    font-size:0.7rem;
}
.work-items .range{
    margin-top:5px;
    font-size:13px;
    color:#545454;
}
.work-items span{
    font-size:13px;
    display:block;
    text-align:center;
    line-height:1;
}
.day{
    padding-top: 5px;
}

/* ↑ 制作実績 ↑ */
/*制作の流れ*/
dl .dl-flow{
    background-color:rgba(255,231,204,0.5);
    /* border:1px solid #481515;
    border-radius:10px; */
    margin:20px 0;
    padding:5px;
}
dt,dd{
    padding:5px;
    margin:15px;
}
dt{
    border-bottom:1px solid #481515;
}
.flow-flex{
    display:flex;
    justify-content:space-between;
}
.flow-flex .flow-box{
    max-width:50%;
    padding:15px;
}
.flow-subtitle{
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:15px;
    text-align:center;
    font-weight:bold;
}
.flow-subtitle::before{
    content:'';
    width:3px;
    height:40px;
    background-color:#e3bf00;
    margin-right:30px;
    transform:rotate(-35deg);
}
.flow-subtitle::after{
    content:'';
    width:3px;
    height:40px;
    background-color:#e3bf00;
    margin-left:30px;
    transform:rotate(35deg);
}
.flow-box:nth-child(2){
    border-left:1px solid #481515;
}
/* ↑ 制作の流れ ↑ */
/*お問い合わせフォーム*/
#contact div{
    line-height:1.75;
}
.contact-time{
    font-size:0.75rem;
}
.contact-time span{
    background:linear-gradient(transparent 25%,#EEEEEE);
}
/**/
#contact .sentence{
    text-align:center;
}
.Form{
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    max-width:1150px;
}
.form-item{
    padding:24px 0;
    width: 100%;
    display:flex;
    /* align-items:center; */
}
.form-item-label{
    width:100%;
    max-width:248px;
    letter-spacing:0.05em;
    font-weight:bold;
    font-size:18px;
    margin-top:0;
}
.form-item-input{
    border:1px solid #ddd;
    border-radius:10px;
    margin-left:40px;
    padding-left:1em;
    padding-right:1em;
    height:48px;
    flex:1;
    width:100%;
    /* max-width:410px; */
    background:#eaedf2;
    font-size:18px;
}
.form-item-textarea{
    border:1px solid #ddd;
    border-radius:10px;
    margin-left:40px;
    padding-left:1em;
    padding-right:1em;
    height:216px;
    flex:1;
    width:100%;
    background:#eaedf2;
    font-size:18px; 
}
.form-btn{
    margin-left:auto;
    margin-right:auto;
    padding-top:10px;
    padding-bottom:10px;
    width:280px;
    display:block;
    letter-spacing:0.05em;
    background:#d96545;
    color:#fff;
    font-weight:bold;
    font-size:20px;
    border-radius:10px;
}
.radio-button{
    margin-left:40px;
}

.contact-form{
    max-width:960px;
    margin:0 auto;
    padding:15px;
    font-size:20px;
    border-radius:20px;
    text-align:center;
    border:5px solid #eee;
}
.contact-form a:hover,.contact-form i:hover{
    color:#767676;
}
.contact-form i{
    padding-right:10px;
}
.contact-form a{
    text-decoration:underline;
    text-decoration-thickness:1px;
}
/* ↑ お問い合わせフォーム ↑ */
/*会社概要*/
table{
    border:1px solid #ddd;
    margin:60px auto;
    width:960px;
    padding:15px;
}
td,th{
    border-bottom:dotted 1px #ddd;
}
.last{
    border-bottom:none;
}
th{
    width:25%;
}
td{
    width:65%;
    padding:10px;
    line-height:1.5;
}
#company dl{
    margin:60px auto;
    padding:15px;
    max-width:960px;
    border:1px solid #ddd;
    overflow:hidden;
}
#company dl div{
    display:flex;
    border-bottom:dashed 1px #ddd;
}
#company dl dt{
    width:30%;
    border-bottom:none;
    text-align:center;
    font-weight:bold;
}
#company dl dd{
    width:60%;
}
#company dl div:nth-of-type(4){
    border-bottom:none;
}
/* ↑ 会社概要 ↑ */
/*フッター*/
footer{
    background-color:#EEEEEE;
    padding:20px 0 10px 0;
    text-align:center;
}
.footer-logo{
    padding-bottom:50px;
}
.copyright{
    font-size:0.75rem;
}
/* ↑ フッター ↑ */

/*レスポンシブ*/
@media(max-width:767px){
    /*共通*/
    .heading06{
        padding-top:55px;
    }
    .heading06::before{
        top:25px;
    }
    /*ハンバーガーメニュー*/
    .hamburger{
        background-color:#F7E3DA;
        display:block;
        position:fixed;
        z-index:300;
        right:0;
        top: 0;
        width:52px;
        height:52px;
        cursor:pointer;
        text-align:center;
    }
    .hamburger span{
        display:block;
        position:absolute;
        width:40px;
        height:2px;
        left:6px;
        background:#82716c;
        -webkit-transition:.3s ease-in-out;
        -moz-transition:.3s ease-in-out;
        transition:.3s ease-in-out;
        border-radius:1px;
    }
    .hamburger .active > span{
        background-color:#fff;
    }
    .hamburger span:nth-child(1){
        top:13px;
    }
    .hamburger span:nth-child(2){
        top:26px;
    }
    .hamburger span:nth-child(3){
        top:39px;
    }
    header nav ul li:first-child{
        display:block;
    }
        /*ナビ開いている時のボタン*/
    .hamburger.active span:nth-child(1){
        top:26px;
        left:6px;
        
        -webkit-transform:rotate(-45deg);
        -moz-transform:rotate(-45deg);
        transform:rotate(-45deg);
    }
    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3){
        top:26px;

        -webkit-transform:rotate(45deg);
        -moz-transform:rotate(45deg);
        transform:rotate(45deg);
    }
    nav.globalMenuSp{
        position:fixed;
        z-index:200;
        top:0;
        left:0;
        text-align:end;
        transform:translate(100%);
        transition:all .6s;
        width:100%;
    }
    nav.globalMenuSp ul{
        background-color:rgba(247,227,218,.8);
        margin:0 auto;
        padding:0;
        width:40%;
        margin-right:0;
    }
    nav.globalMenuso ul li{
        list-style-type:none;
        padding:0;
        width:100%;
        border-bottom:1px dotted #e3bf00;
    }
    nav.globalMenuSp ul li:last-child{
        border-bottom:none;
    }
    nav.globalMenuSo ul li a{
        display:block;
        padding:1em 0;
        text-decoration:none;
    }
    header nav ul li{
        padding:15px;
        border-bottom:dashed 2px #82716c;
    }
        /*このクラスをjQueryで付与・削除する*/
    nav.globalMenuSp.active{
        padding-top:52px;
        transform:translateX(0%);
    }
    header nav ul{
        flex-direction:column;
        justify-content:center;
    }
    header .nav .globalMenuSp ul li a:hover{
        transform:none;
    }
    header .nav .globalMenuSp .back{
        display:block;
    }

    header {
        height:52px;
    }
    /* お知らせ */
    .sec-news .news-item .flex {
        flex-wrap:wrap;
    }
    .sec-news .news-item .flex .day {
        text-align: start;
        margin-left: 15px;
        font-size:0.7rem;
        width: 30%;
    }
    .sec-news .news-item .flex .category{
        width: 30%;
        margin: 0 0 0 10px;
    }
    .sec-news .news-item .flex .content{
        width: 90%;
        line-height: 2;
    }

    .sec-news .news-item {
        max-width: 960px;
        margin: 0 auto;
    }
    /*サービス一覧*/
    .sec-service{
        background-color:#fff;
    }
    .service-list{
        flex-direction:column;
        padding:0;
    }
    .ser-items{
        border:none;
        width:100%;
        padding:0;
        border-radius:0;
    }
    .img-center{
        padding-top:10px;
    }
    .ser-items p:nth-of-type(2){
        padding:5px;
    }
    .ser-items:nth-of-type(1),.ser-items:nth-of-type(3){
        background-color:#F3F1F1;
    }
    /*制作実績*/
    .work-list{
        flex-direction:column;
    }
    .work-list li{
        padding-bottom:20px;
    }
    .work-items{
        width:90%;
    }
    /*制作の流れ*/
    dl .dl-flow{
        border:none;
        border-radius:0;
        margin:10px 0;
        padding:10px 0;
    }
    .flow-flex{
        display:block;
    }
    .movie-flow{
        padding-top:15px;
    }
    .flow-flex .flow-box{
        max-width:100%;
        padding:0;
    }
    .flow-box:nth-child(2){
        border-left:none;
    }
    /*お問い合わせフォーム*/
    .sentence{
        padding:1%;
    }
    .Form{
        overflow:hidden;
        margin:0 auto;
    }
    .contact-time{
        font-size:0.5rem;
    }
    .contact-time span{
        font-size:11px;
    }
    .form-item{
        flex-direction:column;
        text-align:center;
        padding:0;
    }
    .form-item-input,.form-item-textarea{
        margin:5px auto;
        padding:0;
        max-width:95%;
    }
    textarea
    #office table tr{
        display:flex;
        flex-direction:column;
    }
    .form-item-label{
        margin-bottom:0;
        max-width:100%;
        text-align:center;
    }
    .radio-button{
        margin:0 30px;
    }
    .radio-button label{
        margin-right:30px;
    }
    .required{
        margin-top:0;
    }

    #newsWrap .info{
        flex-wrap:wrap;
    }
    #newsWrap .info div:first-child{
        width:30%;
    }
    #newsWrap .info div:nth-child(2){
        width:30%;
    }
    .form-btn{
        margin-top:10px;
        margin-bottom:50px;
    }
    /*会社概要*/
    table{
        width:100%;
        border-top:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-left:none;
        border-right:none;
        padding-left:0;
        padding-right:0;
        margin:auto;
    }
    td,th{
        display:flex;
        flex-direction:column;
        width:90%;
        margin: 0 !important;
    }
    td{
        border-bottom:dashed 1px #ddd;
        text-align:center;
    }
    th{
        border:none;
    }
    #company dl{
        border-left:none;
        border-right:none;
        padding:5px 0;
        margin-top:30px;
    }
    #company dl div{
        flex-direction:column;
    }
    #company dl dd,#company dl dt{
        width:100%;
        padding:5px 0;
        margin:0;
        text-align:center;
    }
}