@charset "UTF-8";
/*------------------------------------------
■ 共通CSS-@import url("/css/common.css");
------------------------------------------*/
:root {
--waku:1100px;
}
/*=== レイアウト大枠 ==============================================*/
body {background-image:url(../images/header.png);background-repeat:no-repeat;background-size:contain;}
body.post-page{background-image:url(../images/header-post.png);}

/*=== ヘッダー・フッター ==============================================*/

/*- ページ上部に戻る -----------------------------------------------------*/
#pagetop{position:fixed;bottom:20px;right:20px;cursor:pointer;z-index:99;}
#pagetop:hover{filter:alpha(opacity=70);-moz-opacity:0.6;opacity:0.6;}
#pagetop p{width:80px;height:80px;border-radius:80px;background-color:#CCF8FF;border:solid 2px #fff; transition:0.5s;}
#pagetop p span{display:block;width:24px;height:24px;position:absolute;top:28px;left:28px;
border-top:2px solid #272343; border-left:2px solid #272343;transform:rotate(45deg);}
#pagetop p span:after{display:block;font-size:12px;color:#272343;content:"PageTop";transform:rotate(-45deg);text-align:center;margin-top:-7px;margin-left:-2px;}

/*
@media (max-width:959px){
.page_btn{position:fixed;bottom:0px;}
#pagetop{margin-right:10px;}
}*/

/*- header部分 -----------------------------------------------------*/
.header-in{max-width:var(--waku);margin:0 auto;display:flex;padding-top:100px;}
.header-in div:nth-child(1){flex-basis:calc(100% - 450px);}
.header-in div:nth-child(2){flex-basis:400px;text-align:left;padding-left:30px;}
.header-in h1{font-size:38px;font-weight:700;padding:20px 0;}
.header-in h2{font-size:20px;font-weight:400;}
.header-in a{display:block;background-color:#ffd803;border-radius:100px;padding:30px;margin:30px;font-size:20px;font-weight:700;text-align:center; box-shadow:4px 4px 4px 0px rgba(39, 35, 67, 0.45);transition:0.3s;}
.header-in a:hover{transform:translateY(2px) translateX(2px);box-shadow:none;}

/*- navi部分 -----------------------------------------------------*/
#navi{padding:10px;background-color:rgba(255,255,255,0.7);position:sticky;top:0;z-index:98;}
.spmenu{max-width:var(--waku);margin:0 auto;}
.spmenu ul{margin:0;margin-left:auto;font-size:0;text-align:right;}
.spmenu li{display:inline-block;font-size:16px;padding:0 20px;text-align:center;}
.spmenu li:first-child{padding-left:0;}
.spmenu li:last-child{padding-right:0;}

#navi li a:hover,#navi li.current a:hover,#navi li a:active,#navi li.current a:active{opacity:0.5;transition:0.3s;}

@media (max-width:678px){
/* 全画面用のボタン装飾全取り消し */
#navi{margin-bottom:0;background-color:transparent;position:relative;}
.spmenu li{padding:0;}
#navi li a:hover,#navi li.current a:hover,#navi li a:active,#navi li.current a:active{opacity:1;}

/* スマホ画面用装飾・開閉挙動 */
#overflow{overflow:hidden;position:relative;}/* iOSでbodyにつけるとoverflowが効かないことがあるため全体を包むブロック要素追加 */

/* 開閉ボタン */
#navi .spmenu_btn{display:block;cursor:pointer;position:fixed;top:10px;right:15px;font-weight:bold;width:40px;height:30px;transition:0.5s;z-index:1;}
#navi .spmenu_btn.open{transition:0.5s;}

#navi .spmenu_btn span:after{content:"MENU";color:#272343;font-size:12px;position:relative;bottom:-15px;}

#navi .spmenu_btn:before,#navi .spmenu_btn:after,#navi .spmenu_btn span{display:block;content:" ";width:100%;height:5px;background-color:#272343;transition:0.5s;}
#navi .spmenu_btn:before{position:absolute;top:0;}
#navi .spmenu_btn span{position:absolute;top:calc(50% - 2px);}
#navi .spmenu_btn:after{position:absolute;bottom:0;}

#navi .spmenu_btn.open:before{position:absolute;top:calc(50% - 2px);transform:rotate(45deg);transition:0.5s;}
#navi .spmenu_btn.open span{transition:0.5s;background-color:transparent;}
#navi .spmenu_btn.open:after{position:absolute;top:calc(50% - 2px);transform:rotate(-45deg);transition:0.5s;}

/* 移動するメニュー */
#navi .spmenu{position:fixed;top:0px;right:-400px;width:300px;height:100vh;padding:80px 20px 0;background:rgb(39,35,67,0.8);transition:0.5s;z-index:0;}
#navi .open ~ .spmenu{position:fixed;right:0;transition:0.5s;}
#navi .spmenu li{display:block;margin:0;width:100%;text-align:left;}
#navi .spmenu ul li a{display:block;margin:0 5px;padding:10px 5px;width:auto;color:#fff;border-top:solid 1px #efefef;}
#navi .spmenu ul li:last-child a{border-bottom:solid 1px #efefef;}

#navi li a:hover,#navi li.current a:hover,#navi li a:active,#navi li.current a:active{background:rgb(39,35,67,1);}
/**/}

/*- footer部分 -----------------------------------------------------*/
#footer{background:#CCF8FF;padding:20px;}
#footer p{margin:10px auto;}

/*- プライバシーポリシー -----------------------------------------------------*/
.policy{text-align: left;padding-bottom: 80px;}
.policy h2{font-size:18px !important;margin-bottom:0 !important;padding-top:30px;}

/*=== index =============================================================================*/
.post-in,.policy{max-width:var(--waku);margin:0 auto;}
.service{padding-top:80px;}
.works,.skill,.others{margin-top:80px;padding:80px 0;background-color:rgba(204,248,255,0.3);}
.about,.contact{padding-top:80px;}
.contact{margin-bottom:80px;}

.main{position:relative;z-index:1;}
.main h2{font-size:32px;margin-bottom:30px;}
.main h2 span{display:block;color:#99DAC6;font-size:16px;font-weight:400;letter-spacing:2px;}

/*--service----------------------------*/
.list{display:flex;flex-wrap:wrap;gap:40px;}
.list > div{flex-basis:calc(calc(100% / 3) - 27px);}

.list div div{position:relative; background-color:#C3EFE2;border-radius:30px;font-size:20px;height:200px;}
.list h3{position:absolute;bottom:10px;width:320px; padding:10px;line-height:1.2;text-align:left;font-size:20px;z-index:2;}
.list h3 span{display:block;font-size:12px;font-weight:400;}
.list div:nth-child(even) h3{padding:5px 10px;}

/* 透過白背景→画像→h3文字の順にするためそれぞれbefore、after、h3で指定のうえz-index指示追加 */
.list div div:before{content:"";display:block;position:absolute;bottom:10px;width:100%;height:60px; background-color:rgba(255,255,255,0.5);z-index:0;}
.list div div:after{content:"";display:block;position:relative;width:100%;height:200px;background-repeat:no-repeat;background-position:right 20px top 10px;z-index:1;}

.list div:nth-child(1) div:after{background-image:url(../images/list01.png);}
.list div:nth-child(2) div:after{background-image:url(../images/list02.png);}
.list div:nth-child(3) div:after{background-image:url(../images/list03.png);}
.list div:nth-child(4) div:after{background-image:url(../images/list04.png);}
.list div:nth-child(5) div:after{background-image:url(../images/list05.png);}
.list div:nth-child(6) div:after{background-image:url(../images/list06.png);}

.list p{margin:10px;text-align:left;margin:10px 10px 0;}

/* スクロールとともにふわっと出現 */
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

.list01{animation-duration:1s;}
.list02{animation-duration:1.5s;}
.list03{animation-duration:2s;}
.list04{animation-duration:1s;}
.list05{animation-duration:1.5s;}
.list06{animation-duration:2s;}

@keyframes fadeUpAnime{
from {opacity: 0;transform: translateY(100px);}
to {opacity: 1;transform: translateY(0);}
}

.fadeUpTrigger{opacity: 0;}/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

/*--works----------------------------*/
.index-slider{margin-bottom: 30px;}
.slider-thumbnail{background:#C3EFE2;border-radius:20px;aspect-ratio: 1;padding:10px;margin:0 10px;display:flex;justify-content: center;align-items:center;}
.slider-thumbnail img{display: block;border-radius: 10px;margin:auto;}

.slider-category{border-radius:10px;background-color:#fff;text-align:left;padding:2px 5px;font-size:14px;margin:5px;}
.slider-category::before{content:"●";padding:0 5px;}
.index-slider .webdesign::before{color:#ED882A;}
.index-slider .coding::before{color:#C19421;}
.index-slider .ad::before{color:#CA78FC;}
.index-slider .sitebanner::before{color:#8150D7;}
.index-slider .thumbnail::before{color:#788DFC;}

.slider-title{padding:0 10px;text-align: left;}

.bx-wrapper {
margin:auto !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: none !important;
background: none !important;
}
div.bx-wrapper{max-width:100% !important;}

/*--about----------------------------*/
.about .post-in{display:flex;}
.about div:nth-child(1){order:2;margin-top:45px;}
.about div:nth-child(2){order:1;margin-top:-45px;}
.about p{text-align:left;padding-left:50px;max-width:700px;}

/*--skill----------------------------*/
.career{display:block;text-align:left;width:100%;margin:0 auto;}
.career th{vertical-align:top;}
.career td{padding:0 0 30px;word-break:break-all;}
.career tr:last-child td{padding-bottom:0;}

.career th{position:relative;}
.career th:after{content:"●";color:#99DAC6;padding-left:10px;}
.career th:before{content:" ";display:block;width:3px;height:100%;background-color:#99DAC6;position:absolute;right:7px;}
.career td{padding-left:15px;width:100%;}

.career td p{background-color:#fff;border-radius:10px;padding:2px;padding-left:35px;margin-top:5px;
background-image:url(../images/career.png);background-size:25px; background-position:left 5px top 2px;background-repeat:no-repeat;}

.level{margin-top:30px;display:flex;flex-wrap:wrap;gap:20px;}
.level div{flex-basis:calc(50% - 10px);background-color:#fff;border-radius:10px;}
.level h3{color:#fff; background-color:#99DAC6; border-radius:8px;margin:10px;padding:3px;}
.level h4,.level p{text-align:left;margin:0 10px;}
.level p{padding-bottom:10px;}
.memo{display:block;text-align:right;font-size:12px;margin-top:-10px;padding-right:10px;}

.level div h4{background-repeat:no-repeat;background-size:20px auto;background-position:left center;padding-left:25px;}
.level div:nth-child(1) h4{background-image:url(../images/level01.svg);}
.level div:nth-child(2) h4{background-image:url(../images/level02.svg);}
.level div:nth-child(3) h4{background-image:url(../images/level03.svg);}
.level div:nth-child(4) h4{background-image:url(../images/level04.svg);}

.level div h4{position:relative;}
.star{position:absolute;right:10px;top:0; color:#FFD803;text-align:right;}
.star span{color:#D9D8D6;}

/* 　スクロールとともに横回転(Y軸)で出現 */
.rotateY{
animation-name:rotateYAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes rotateYAnime{
from{opacity: 0;transform: rotateY(180deg);}
to{opacity: 1;transform: rotateY(0deg);}
}
.rotateYTrigger{opacity: 0;}

/*--contact----------------------------*/
.mailform{text-align: left;max-width:600px;margin:0 auto;}
.mailform .form-item{display: block;margin:30px 0 5px;}
.mailform .form-item span{color: red;}
.mailform input[type="text"],.mailform input[type="email"],textarea{background-color:#EAEAEA;border-radius:10px;border:solid 1px #D9D8D6;padding:10px;width:100%;}

.wpcf7-response-output{max-width:600px;margin:20px auto 0 !important;}

/* デフォルトのラジオボタンを調整 */
.wpcf7-radio{display:block;}
.wpcf7-list-item{display:block;width: 100%;margin: 0 !important;margin-bottom:5px !important;}
.mailform input[type="radio"] {opacity: 0;position: absolute;}
.wpcf7-list-item-label {cursor: pointer;display: flex;}

/* チェック前のラジオボタン */
.wpcf7-list-item-label::before {content: "";
background:#EAEAEA;border:solid 1px #D9D8D6;border-radius: 100%;
height: 1em;width: 1em;margin-right:.5em;margin-bottom: auto;margin-top: auto;
transition: background-color .3s;}

/* チェック後のラジオボタン */
input[type="radio"]:checked + .wpcf7-list-item-label::before {
background-color: #99dac6;box-shadow: inset 0 0 0 3px #fff;}

/* 送信ボタン */
.mailform input[type="submit"] {appearance: none;-webkit-appearance: none;-moz-appearance: none;cursor:pointer;}
span.wpcf7-spinner {display: none;}

.submit-btn{box-shadow:2px 2px 2px 0px rgba(39, 35, 67, 0.45);transition:0.3s;width:fit-content;margin:30px auto 0;border-radius:5px;}
.submit-btn:hover{transform:translateY(2px) translateX(2px);box-shadow:none;}
.wpcf7-submit{display: block; border: none;padding:10px 40px;border-radius:5px;background-color:#ffd803;font-weight:700;text-align:center;font-size: 16px;}

/*--下層ページ----------------------------*/
.works-h1{display:block;padding:130px 0 50px;}
.works-h1 h1{text-align:center;}

.works-post{display:flex;max-width:var(--waku);margin:40px auto 0;}
.works-post div{flex-basis:50%;}
.works-post div:nth-child(2){text-align:left;padding-left:40px;}
.works-post h2{font-size:16px;margin:0;padding:0 0 10px;}
.works-post p{margin-bottom:40px;}
.works-post p a{text-decoration: underline;transition:0.3s;}
.works-post p a:hover{color: #405771;}

a.list{display:block;width:fit-content;margin:0 auto;padding:5px 20px;border-radius:10px;background-color:#ffd803;font-size:20px;font-weight:700;text-align:center;box-shadow:2px 2px 2px 0px rgba(39, 35, 67, 0.45);transition:0.3s;}
a:hover.list{transform:translateY(2px) translateX(2px);box-shadow:none;}

.coding ul{margin-bottom:40px;}
.coding li:before{position:relative;top:-2px; content:"●";padding-right:0.5em;font-size:10px;}
.coding li{padding-left:1em;text-indent:-1em;}

.pagination{display: block;max-width:var(--waku);margin:0 auto 60px;}
.page-numbers{border: solid 1px #272343;border-radius:50%;padding:3px 11px;margin:0 2px;transition:0.3s;}
.page-numbers:hover{background-color: rgba(39, 35, 67, 0.7);color: #fff;}
.pagination .current{background-color: #272343;color: #fff;}
.next,.prev{border-radius:20px;}

/*--下層ページ：制作物一覧----------------------------*/
ul.works-category-link{max-width:var(--waku);margin:0 auto;}
.works-category-link li{display:inline-block;padding-right:24px;}
.works-category-link li:last-child{padding:0;}
.works-category-link li a{display:block;width:160px;color:#fff;border-radius:15px;text-align:center;padding:10px 0;transition:0.3s;}
.works-category-link li a:hover{opacity:0.7;transition:0.3s;}
.works-category-link li:nth-child(1) a{background-color:#99DAC6;}
.works-category-link li:nth-child(2) a{background-color:#ED882A;}
.works-category-link li:nth-child(3) a{background-color:#C19421;}
.works-category-link li:nth-child(4) a{background-color:#8150D7;}
.works-category-link li:nth-child(5) a{background-color:#CA78FC;}
.works-category-link li:nth-child(6) a{background-color:#788DFC;}

.works-list{max-width:var(--waku);margin:80px auto 60px;display:flex;flex-wrap:wrap;gap:40px;}
.post-summary{flex-basis:calc(50% - 20px);box-sizing:border-box;border:solid 2px #99DAC6;border-radius:10px;padding:10px;position: relative;}
.post-summary .post-category{border-radius:5px;color:#fff;text-align:left;padding:2px 5px;font-size:14px;}
.post-summary .post-category::before{content:"●";padding:0 5px; color:#fff;}
.post-summary .webdesign{background-color:#ED882A;}
.post-summary .coding{background-color:#C19421;}
.post-summary .ad{background-color:#CA78FC;}
.post-summary .sitebanner{background-color:#8150D7;}
.post-summary .thumbnail{background-color:#788DFC;}

.post-summary h3{font-size:24px;text-align:left;margin:5px 0;}

.post-thumbnail{display:flex;flex-wrap:wrap;}
.post-thumbnail div{flex-basis:50%;box-sizing:border-box;}
.post-thumbnail a img{transition:0.3s;}
.post-thumbnail a:hover img{opacity: 0.7;}

.post-excerpt{text-align:left;padding-left:10px;min-height:220px;}
.post-excerpt::before{content:"制作の意図／工夫した点";font-weight:bold;padding-bottom:10px;display: block;}
.cat-coding .post-excerpt::before{content:"業務概要";}

.post-excerpt p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient: vertical;overflow: hidden;}

a.more{position: absolute;right:10px;bottom:10px;width: fit-content;
display:block;background-color:#ffd803;border-radius:5px;padding:5px 20px;font-weight:700;text-align:center; box-shadow:2px 2px 2px 0px rgba(39, 35, 67, 0.45);transition:0.3s;}
a.more:hover{transform:translateY(2px) translateX(2px);box-shadow:none;}

/*------------------------------------------------------------------------
■ レスポンシブ用
------------------------------------------------------------------------*/
@media (max-width:1099px) {
.post-in{padding:0 10px;}
.career{width:calc(100% - 20px);}
}

@media (max-width:959px) {/*--デバイスサイズ 959px以下に適用--*/
/*--service----------------------------*/
.list > div{flex-basis:calc(calc(100% / 2) - 20px);}
.career th:after,.career th:before{display:none;}
.career tr{border-top:dashed 2px #99DAC6;padding-top:5px;}
.career tr:last-child{border-bottom:dashed 2px #99DAC6;}
.career td,.career tr:last-child td{padding:0px 10px 15px;}

.about .post-in{display:block;}
.about div:nth-child(1){margin-top:0px;}
.about div:nth-child(2){margin-top:0px;}
.about p{max-width:100%;padding-left:0;padding-bottom:10px;}

}

@media (max-width:678px) {
.main h2{font-size:24px;}
.header-in{display:block;margin: 0 10px;padding-top:50px;}
.header-in div:nth-child(2){padding-left:0;}

.header-in h1{font-size:24px;text-align: center;}

.list{margin:0 16px;}
.list > div{flex-basis:100%;}
.list h3{font-size:18px;}

.level{display:block;}
.level div{padding-top:1px;margin-bottom:20px;}/* 0にするとh3のmargingが効かないので*/
.level div:last-child{margin-bottom:0;}

ul.works-category-link{max-width:var(--waku);margin:0 auto;}
.works-category-link li,.works-category-link li:last-child{padding:5px;}

.works-list{display: block;padding: 0 10px;margin:40px 0;}
.post-summary h3{font-size:20px;}
.post-summary{margin-bottom: 20px;}
.post-thumbnail{display:block;}
.post-excerpt{display: none;}

a.more{position: relative;bottom:0;right:0;margin-left:auto;margin-right:0;margin-top:10px;}

.works-post{display:block;margin:0 10px;}
.works-post div:nth-child(2){padding-left:0px;padding-top: 40px;}
}

/*=== 下層各ページ =============================================================================*/