@charset "UTF-8"; :root { --color-key: #008bab; --color-key-light: #4daec4; --color-yellow: #ffee11; --color-sky: #b2dce6; --color-gray: #f0f0eb; --color-gray-light: #cccccc; --color-news: #008bab; --color-news-light: #b2dce6; --color-works: #cc0000; --color-works-light: #f0b2b2; --color-media: #ea8700; --color-media-light: #f9dbb2; --color-talk: #669966; --color-talk-light: #d1e0d1; } .keyColor{ color: var(--color-key);} .keyColorBg{ background-color: var(--color-key);} /* NotoSans @import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css); .font_noto{ font-family: 'Noto Sans JP';} Mplus 1p @import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css); .font_noto{ font-family: 'Mplus 1p';} Rounded Mplus 1c @import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css); .font_noto{ font-family: 'Rounded Mplus 1c';} Hannari Min @import url(https://fonts.googleapis.com/earlyaccess/hannari.css); .font_noto{ font-family: 'Hannari';} >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YakuhanJP : NotoSans Type @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp-noto.min.css); body{ font-family: YakuHanJP_Noto, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;} YakuhanJP : YuGothic Type @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp-narrow.min.css); body{ font-family: YakuHanJP_Narrow, "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;} YakuhanJP : HiraginoGothic Type @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp.min.css); body{ font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;} >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YakuhanJP : NotoSerif Type @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp-noto.min.css); body{ font-family: YakuHanMP_Noto, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;} YakuhanJP : YuMin Type @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp.min.css); body{ font-family: YakuHanMP, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;} YakuhanJP : HiraginoMin Type @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp.min.css); body{ font-family: YakuHanMP, "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", YuMincho, serif;} >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YakuhanJP : M PLUS Rounded 1c Type @import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanrp.min.css); body{ font-family: YakuHanRP, "M PLUS Rounded 1c", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;} */ /*///////////////////////// base layout　 //////////////////////////*/ html,body { width: 100%; font-size: 16px; background: #f0f0eb; } body { font-family:YakuHanJP,"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif; font-style: normal; font-weight: 500; line-height: 1.6; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color:#333; width: 100%; text-align: left; overflow-y: scroll; letter-spacing: 0.03em; } body,a, a:link,a:hover, a:active ,a:visited { color: #333; } body.loadingFinish{} body.fixed{ overflow-x:hidden; overflow-y: scroll;} body.fixed #container{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 1;} html.touchDevice, .touchDevice body{ font-size: 30px;} #container{ position:relative; opacity: 0;} #base{ position:relative;} a, a:link, a:visited { text-decoration: none; outline: 0; } a:hover, a:active { text-decoration: none; } a.noline, a.noline:link { text-decoration: none !important; } /* tags ----------------------------------------------- */ h1, h2, h3, h4, h5, h6 { padding: 0; font-weight: 500; margin: 0 auto 20px auto; display: block; line-height: 1; } h1{ font-size: 2.5rem; line-height: 1.3;} h2{ font-size: 2rem;line-height: 1.3;} h3{ font-size: 1.75rem;line-height: 1.3;} h4{ font-size: 1.5rem;} h5{ font-size: 1.25rem;} h6{ font-size: 1.1rem;} section{ position: relative;width: 100%; padding:0; margin:0 auto 0px auto;} p { margin-bottom: 2em;} p:last-child{} p:nth-of-type(1){} ul{ margin-bottom: 2em;} ul li{} li:first-child {/* 親の最初にあったら*/} li:last-child {/* 親の最後にあったら*/} li:nth-of-type(1) {/* n番目*/} li:nth-child(odd) {/* 奇数*/} li:nth-child(even) {/* 偶数*/} button{ border: 0;} /* header ----------------------------------------------- */ #globalHeader{ position: fixed; top: 0; left:0; width: 100%; height: 0px; z-index: 10000; color: #008bac;} #globalHeader a{ color: #008bac;} #globalHeader:before{ background: #f2f2f2; content:""; display: block; width: 100%; height: 100%;position: fixed; top: 0; left:0;z-index: 100; opacity: 0; pointer-events: none;} #globalHeader .siteLogo{ width: 150px; height: 80px; position:absolute; top: 55px; left: 50%; transform:translate(-50%,0);z-index: 110; background: url(./img/common/logo.svg) center top no-repeat; background-size: contain; opacity: 0; } body.menuCover.menuOpen #globalHeader .siteLogo{ opacity: 1;} #globalHeader .menuBtn{ width: 80px; height: 80px; border-radius: 50%; position: absolute; top: 20px; right: 20px;z-index: 110;cursor: pointer; display: block; } #globalHeader #menuBtnFixed{background: #ffee11; opacity: 0; transform: scale(0); transition: all 250ms cubic-bezier(.50, .0, .50, 1);} #globalHeader #menuBtnFixed.active{opacity: 1; transform: scale(1);} #globalHeader .menuBtn hr{ transition: all 250ms cubic-bezier(.50, .0, .50, 1);transform: translate(-50%,0); left: 50%;} #globalHeader .menuBtn hr:nth-of-type(1), #globalHeader .menuBtn hr:nth-of-type(2), #globalHeader .menuBtn hr:nth-of-type(3){ width: 35px; height: 1px; background: #000; position: absolute;} #globalHeader .menuBtn hr:nth-of-type(1){ top: 30px;} #globalHeader .menuBtn hr:nth-of-type(2){ top: 50%; transform: translate(-50%,-50%);} #globalHeader .menuBtn hr:nth-of-type(3){ bottom: 30px;width: 17px; margin-left: -9px;} body.menuOpen #globalHeader .menuBtn{ background: #4daec4; } body.menuOpen #globalHeader .menuBtn hr:nth-of-type(1){ transform: translate(-50%,-50%) rotate(-35deg); top: 50%; left: 50%; } body.menuOpen #globalHeader .menuBtn hr:nth-of-type(2){ transform: translate(-50%,-50%) rotate(35deg); bottom: auto; top: 50%; left: 50%;} body.menuOpen #globalHeader .menuBtn hr:nth-of-type(3){ opacity: 0; } body #globalHeader .menu{ transition: all 250ms cubic-bezier(.50, .0, .50, 1); margin: 0;} body.menuPopup #globalHeader .menu{background: #aaa; padding: 40px; width: 400px; position: absolute; top: 60px; right: 0; transform: translate(100%,0); } body.menuPopup #globalHeader .menu li{ margin-bottom: 20px;} body.menuPopup #globalHeader .menu li a{ display: block; line-height: 40px; border: solid 1px #fff; text-decoration: none;} body.menuPopup.menuOpen #globalHeader .menu{ transform: translate(0,0);} body.menuCover #globalHeader{position:relative; height: 0;} body.menuCover #globalHeader .logo, body.menuCover #globalHeader #menuBtnFixed{ position: fixed; } body.menuCover #globalHeader .menuArea{ min-height: 100vh;background:#fff; width: 100%; position: relative; top: 0px; right: 0; z-index: 90; transform: translate(0,0); opacity: 0; pointer-events: none; text-align: left; padding:180px 40px 40px 40px;} body.menuCover #globalHeader .menuArea:after{ content: ''; display: block; width: 100px; min-height: 250px; background: url(./img/title/menu.svg) center top no-repeat; background-size: 100% auto; position: absolute; top: 160px; right: 90px; } body.menuCover #globalHeader .menu{border-top: solid 1px #ccc; margin-bottom: 40px;} body.menuCover #globalHeader .menu li{ padding: 25px 140px 25px 70px; margin-bottom: 0px;border-bottom: solid 1px #ccc; } body.menuCover #globalHeader .menu li .btnItem{ width:fit-content; margin: 0;} body.menuCover #globalHeader .menu li .btnItem .arrowR:after{background: url(./img/common/arrow_r_blue.svg) center center no-repeat; background-size: contain;} body.menuCover #globalHeader .menu li .btnItem .text{ width: 150px;} body.menuCover #globalHeader .menu li .parent{ padding: 0; margin: 0;} body.menuCover #globalHeader .menu li .parent.nolink{padding-left: 60px; } body.menuCover #globalHeader .menu li .parent.nolink{ margin-bottom: 20px;} body.menuCover #globalHeader .menu li a{ } body.menuCover #globalHeader .menu li .btnItem, body.menuCover #globalHeader .menu li .btnItem .text, body.menuCover #globalHeader .menu li .parent{height: 24px; } body.menuCover #globalHeader .menu li span{ display: none;} body.menuCover #globalHeader .menu li.info .text{ background: url(./img/common/text/info_blue.svg) left center no-repeat; background-size:auto 24px;} body.menuCover #globalHeader .menu li.about .parent{background: url(./img/common/text/about_blue.svg) 60px center no-repeat; background-size:auto 24px;} body.menuCover #globalHeader .menu li.department .text{background: url(./img/common/text/department_blue.svg) left center no-repeat; background-size:auto 24px;} body.menuCover #globalHeader .menu li.contact .text{background: url(./img/common/text/contact_blue.svg) left center no-repeat; background-size:auto 24px;} body.menuCover #globalHeader .menu .submenu a{ display: inline-block; margin-right: 30px; } body.menuCover #globalHeader .menu li.about a.top .text{ width: 200px; background: url(./img/common/text/about_top_blue.svg) left center no-repeat; background-size:auto 14px; } body.menuCover #globalHeader .menu li.about a.use .text{ width: 200px; background: url(./img/common/text/about_use_blue.svg) left center no-repeat; background-size:auto 14px; } body.menuCover #globalHeader .menu li.about a.company .text{ width: 100px; background: url(./img/common/text/about_company_blue.svg) left center no-repeat; background-size:auto 14px; } body.menuCover.menuOpen #globalHeader .menuArea{ opacity: 1; pointer-events: all;} #globalHeader .exWrap{ padding: 0 130px;} #globalHeader a.facebook{ display: block; width: 20px; height: 20px;background: url(./img/common/icon_facebook_blue.svg) center center no-repeat; background-size: contain;} #globalHeader a.facebook span{ display: none;} #globalHeader .share{ position: absolute; top: 20px; right: 80px; z-index: 200;} #globalHeader .share li{ display: inline-block;} #globalHeader .siteLogo, #globalHeader .menuArea{ pointer-events: none;} .menuOpen #globalHeader .siteLogo, .menuOpen #globalHeader .menuArea{ pointer-events: all;} #globalFooter{ text-align: center; padding: 50px 0 50px 0; background: #008bac; color: #fff; text-align: left;} #globalFooter a{ color: #fff; text-decoration: none !important;} #globalFooter .innerWrap{ width:90%; max-width: 960px; margin: auto; grid-gap: 0 50px; grid-template-columns: 1fr 590px;} #globalFooter .logo{ width: 120px; margin-bottom: 20px;} #globalFooter .logo img{ width: 100%; height: auto;} #globalFooter .gridItem.menu{ grid-column: 2 /3; grid-row: 1 / 2; grid-gap: 10px; padding-top: 35px;} #globalFooter .gridItem.company{ grid-column: 1 / 2; grid-row: 1 / 2; font-size: 0.9em;} #globalFooter .gridItem.menu .btnItem{ width:fit-content; margin: 0;} #globalFooter .gridItem.menu .btnItem .arrowR:after{background: url(./img/common/arrow_r_white.svg) center center no-repeat; background-size: contain;} #globalFooter .gridItem.menu .btnItem .text{ width: 230px; text-align: left;} #globalFooter .gridItem.menu .btnItem, #globalFooter .gridItem.menu .btnItem .text{height: 24px; } #globalFooter .gridItem.menu ul{ margin-bottom: 0;} #globalFooter .gridItem.menu > ul >li{ margin-bottom: 20px; line-height: 0; width: 49%;} #globalFooter .gridItem.menu > ul > li:nth-of-type(1) { float: left;} #globalFooter .gridItem.menu > ul > li:nth-of-type(2) { float: right;} #globalFooter .gridItem.menu > ul > li:nth-of-type(3) { float: left;} #globalFooter .gridItem.menu > ul > li:nth-of-type(4) { float: right;} #globalFooter .gridItem.menu ul li .contents{ padding-left: 50px;} #globalFooter .gridItem.menu ul li a{ display: inline-block;} #globalFooter .gridItem.menu ul li a span{ display: none;} #globalFooter .gridItem.menu ul li .info .text{background: url(./img/common/text/info_white.svg) left center no-repeat; background-size: auto 18px;} #globalFooter .gridItem.menu ul li .about .text{background: url(./img/common/text/about_white.svg) left center no-repeat; background-size: auto 18px;} #globalFooter .gridItem.menu ul li .about_top .text{background: url(./img/common/text/about_top_white.svg) left center no-repeat; background-size: auto 15px;;} #globalFooter .gridItem.menu ul li .about_use .text{background: url(./img/common/text/about_use_white.svg) left center no-repeat; background-size: auto 15px;;} #globalFooter .gridItem.menu ul li .about_company .text{background: url(./img/common/text/about_company_white.svg) left center no-repeat; background-size: auto 15px;;} #globalFooter .gridItem.menu ul li .department .text{background: url(./img/common/text/department_white.svg) left center no-repeat; background-size: auto 18px;} #globalFooter .gridItem.menu ul li .kijin .text{background: url(./img/common/text/kijin_white.svg) left center no-repeat; background-size: auto 15px;} #globalFooter .gridItem.menu ul li .mcp .text{background: url(./img/common/text/mcp_white.svg) left center no-repeat; background-size: auto 15px;} #globalFooter .gridItem.menu ul li .stc .text{background: url(./img/common/text/stc_white.svg) left center no-repeat; background-size: auto 15px;} #globalFooter .gridItem.menu ul li .shingen .text{background: url(./img/common/text/shingen_white.svg) left center no-repeat; background-size: auto 15px;} #globalFooter .gridItem.menu ul li .suikyo .text{background: url(./img/common/text/suikyo_white.svg) left center no-repeat; background-size: auto 15px;} #globalFooter .gridItem.menu ul li .contact .text{background: url(./img/common/text/contact_white.svg) left center no-repeat; background-size: auto 18px;} #globalFooter .gridItem.menu ul li a img{ width: auto; height: 16px;} #globalFooter .gridItem.menu ul ul { padding-left: 50px; padding-top: 10px;} #globalFooter .gridItem.menu ul ul li{ margin-bottom: 10px; } #globalFooter .gridItem.menu ul ul li a{padding-left: 10px;} #globalFooter .gridItem.menu ul ul li a:before{ content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #fff; position: absolute; top: 50%; left: 0; transform: translate(0,-50%); background-image: :none; } #globalFooter .gridItem.menu ul ul li .contents{ padding-left: 0;} #globalFooter .ex{ grid-template-columns: 20px 1fr; grid-gap: 10px; } #globalFooter a.facebook{display: block; width: 20px; background: url(./img/common/icon_facebook_white.svg) center center no-repeat; background-size: contain;} #globalFooter a.facebook span{ display: none;} #globalFooter a.privacy{ padding-left: 10px; font-size: 0.8em;} #globalFooter a.privacy:before{ content: ''; display: inline-block; width: 1px; height: 50%; background: #fff; position: absolute; top: 50%; left: 0; transform: translate(0,-50%);} #globalFooter .copy{ position: fixed; top: 560px; right:0; z-index:1000;width: 20px; height:auto; color:#ccc; display: none;} #globalFooter .copy span{ display: inline-block; position: absolute; top: 50%; left: 0; transform: translate(-50%,0%) rotate(90deg); white-space: nowrap; line-height: 1; font-size: 0.6rem; } #siteHeader{ width: 100%; height: 170px;} .home #siteHeader{ height: 150px;} #siteLogo{ width: 150px; height: 80px; position: absolute; top:55px; left: 50%; transform: translate(-50%,0); } #siteLogo a{ display: block; height: 100%; background: url(./img/common/logo.svg) center top no-repeat; background-size: contain;} .fixedCopyright{ position: fixed; top: 560px; right:0; z-index:1000;width: 20px; height:auto; color:#ccc; } .fixedCopyright span{ display: inline-block; position: absolute; top: 50%; left: 0; transform: translate(-50%,0%) rotate(90deg); white-space: nowrap; line-height: 1; font-size: 0.6rem; } /* contents ----------------------------------------------- */ .contentsWrap{ } section.area{ padding:0px 0; margin:0 auto 0px auto;z-index: 5; min-height: 300px; } body:not(.home) section.area{ padding:50px 0; } section.area .hideWrap{padding:0px 0; } .contentsWrap section.area:first-child{ padding-top: 0;} section#pageArea{min-height: 800px; } body#page section#pageArea{ padding-top: 100px;} section.area .innerWrap{ width:calc(100% - 25.2%); margin: auto; border: solid 0px #ccc;} section.area .hideWrap{ width: 100%; height: auto; overflow: hidden;} section.area .innerWrap.titleHeader{ position: absolute; top: 0; left: 50%; transform: translate(-50%,0); z-index: 2100;} section.area .innerWrap.titleHeader .sectionTitle{} .contentsW{ width:calc(100% - 17.6%); margin-left: auto;margin-right: auto; border: 0px dotted #c932e8; } .contentsW.entryBoxList, body.post-type-archive .contentsW, body.single .contentsW{ width:calc(100% - 23%); height: auto;} body.contents_contact .contentsW{ width:calc(100% - 27.2%);} .no_MainVisual section#pageArea .contentsW{ width:calc(100% - 200px); } .pageContentsWrap{ width:calc(100% - 33%); margin: auto; border: solid 0px #369;} .pageContentsWrap.entry{padding: 0 50px;} .inLeftContents .pageContentsWrap{ padding-left: 60px; padding-right: 60px;} .pageContentsWrap .content.novisual{ width: 88%; margin: auto;} .entry-content a, .entry-content a:link{ text-decoration: underline;} section .innerWrap p:last-child, section .innerWrap ul:last-child, section .innerWrap ol:last-child, section .innerWrap dl:last-child, section .innerWrap img:last-child{ margin-bottom: 0 !important;} section.area .sectionTitle{ position: absolute; top: 0; left: 0; width: 60px; z-index: 10; } section.area .sectionTitle.right{ left: auto; right: 0;} section.area .sectionTitle span{ display: none;} section.area .sectionTitle img.title{ width: 100px; height: auto; position: absolute; top: 0; left: 50%; transform: translate(-50%,0);} section.area .pageContentsWrap .sectionTitle.right{ transform: translate(50%,0)} /* top ----------------------------------------------- */ section#topContents{ padding-bottom: 70px;} #topContents-slide{ position: relative; margin-left: auto; margin-right: auto; width:100%; height: auto; position: relative; margin-bottom: 10px; z-index: 20; } #topContents-slide .slick-wrapper{transition-timing-function: cubic-bezier(0.480, 0.830, 0.065, 0.985); width:100%; overflow: hidden;} #topContents-slide .slick-container{ position: relative; top: 0;width: 100%; } #topContents-slide .slick-list{ border: solid 0px #f30; padding-top: 20px;} #topContents-slide .slick-slide{width: 73.8vw; margin: 0 20px;} .#topContents-slide slick-slide:after{ content:''; display: block; position: absolute; top: 0; left: 0;width: 100%; height: 0px; padding-top: 96%; background-size: contain; z-index: 10; pointer-events: none;} #topContents-slide .slick-slide{ opacity: 1 !important; cursor: pointer;} #topContents-slide .slick-slide a{ display: block;} #topContents-slide .slick-slide a, #topContents-slide .slick-slide img{ cursor: pointer; } .pcDevice #topContents-slide .slick-slide.hover{ } #topContents-slide .slick-dots, #topContents-slide .slick-prev, .slick-next { } #topContents-slide .slick-dots{ display: none !important; } #topContents-slide .slick-prev { left: 11.5%; transform: translate(0,-50%); } #topContents-slide .slick-next { right: 11.5%; transform: translate(0,-50%); } #topContents-slide .item{ padding-top: 52.1%;} #topContents-slide .slick-slide.about .item{background: url(./img/slide/3.jpg) center center no-repeat; background-size:cover; } #topContents-slide .slick-slide.department .item{background: url(./img/slide/1.jpg) center center no-repeat; background-size:cover; } #topContents-slide .slick-slide.use .item{background: url(./img/slide/2.jpg) center center no-repeat; background-size:cover; } #topContents-slide .item .spImage{ display: none;} #topContents-slide .item .image{ width: 100%; height: auto;} #topContents-slide .item .title{ width: 6%; height: auto; position: absolute; top: -20px; right: 3%; transform:translate(0%,0%);} #topContents-slide .item .text{ width: 25%; height: auto; position: absolute; top: 15%; left: 5%; transform: translate(0%,0%);} #topContents-slide .about .item .text{ width: 25%;} #topContents-slide .use .item .text{ width: 32%;} #topContents-slide .department .item .text{ width: 35%;} section#topContents .innerWrap.allforfreelance{ border-bottom: solid 1px #dc6666; padding-bottom: 30px; text-align: center; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0);} section#topContents .innerWrap.allforfreelance img{ width: 230px; margin: auto;} /* top : #news ----------------------------------------------- */ section#news{ } section#news > .hideWrap{ padding-bottom: 0px; padding-top: 50px;} section#news .innerWrap.titleHeader .sectionTitle{ top: 50px;} section#news .tori{ width: 20%; min-width: 200px; max-width: 300px;height: auto; position: absolute; right: 100%; top: 10%; transform: translate(20% , 0);} section#news .keijiban{ width: 20%; min-width: 200px; max-width: 300px;height: auto; position: absolute; left: 100%; bottom: 0%; transform: translate(-30% , 0);} /* top : #about ----------------------------------------------- */ section#about{min-height: 600px; background: url(./img/about/fune.jpg) center center no-repeat; background-size: cover;} section#about .hideWrap{min-height: 600px;} section#about .innerWrap.titleHeader .sectionTitle{ top: 60px;} section#about .read{ width: 40%; min-width: 300px; max-width: 500px; position: absolute; top: 30px; left: 0;} section#about .read .motto{ position: absolute; right: 20px; bottom: 30px; width: 240px; height: 70px; margin: 0;} section#about .read .motto div{ } section#about .read .motto .contents{padding-left: 70px;} section#about .read .motto .arrow, section#about .read .motto .arrow:after{ width: 55px; height: 40px; } section#about .read .motto .text{ width: 160px; padding-top: 40px; background-position: right center;background-size: 92%;} /* top : #department ----------------------------------------------- */ section#department{ background: url(./img/department/bg.png) center center; background-size: auto auto; } section#department .innerWrap.titleHeader .sectionTitle{ top: 60px;} section#department > .hideWrap{ padding-top: 66px; padding-bottom: 180px;} section#department .entryBoxList.boxLInk .item .meta .title img{ height: auto; width: 100%; max-width: 100%;} section#department .suikyo{ width: 25%; min-width: 150px; max-width: 200px; height: auto; position: absolute; right: 100%; top: 20%; transform: translate(4% , 0);} section#department .benkei{ width: 25%; min-width: 200px; max-width: 300px; height: auto; position: absolute; right: 100%; top: 45%; transform: translate(4% , 0);} section#department .ushiwaka{ width: 25%;min-width: 200px; max-width: 300px; height: auto; position: absolute; right: 100%; top: 85%; transform: translate(40% , 0);} section#department .monkey{ width: 26%; min-width: 200px; max-width: 300px;height: auto; position: absolute; left: 100%; top: 29%; transform: translate(-30% , 0);} section#department .goemon{ width: 30%; min-width: 200px; max-width: 300px;height: auto; position: absolute; left: 100%; top: 87%; transform: translate(-32% , 0);} section#department .matsu{ width: 27%; min-width: 200px; max-width: 400px; height: auto; position: absolute; right: 0; top: 0%; transform: translate(25% , 0);} section#department .matsu2{ width: 30%; min-width: 200px; max-width: 400px; height: auto; position: absolute; left: 0; bottom: -14%; transform: translate(15% , 0); z-index: 10;} section#department .kusa2{ width: 30%; min-width: 200px; max-width: 400px; height: auto; position: absolute; left: 0; bottom: 0%; transform: translate(0% , 0); z-index: 10;} section#department .entryBoxList .item .meta .title{ margin-bottom: 20px;} /* top : #talk ----------------------------------------------- */ section#talk{ background: #eff0eb; } section#talk > .hideWrap{ padding-bottom: 80px; padding-top: 60px;} section#talk .innerWrap.titleHeader .sectionTitle{ top: 60px;} section#talk .matsu_02{ width: 20%; min-width: 200px; max-width: 300px; height: auto; position: absolute; left: 0%; top: -1%; transform:translate(-3% , 0);} section#talk .saru_usagi{ width: 20%; min-width: 200px; max-width: 300px;height: auto; position: absolute; right: 100%; top:60%; transform: translate(40% , 0);} section#talk .shiro{ width: 24%; min-width: 200px; max-width: 300px;height: auto; position: absolute; right: 0; bottom: 0; transform:translate(4% , 28%);} /* top : #contact ----------------------------------------------- */ section#contact{ background: url(./img/contact/bg_top_pc.jpg) center bottom no-repeat; background-size: cover; min-height: 600px; } section#contact .innerWrap.titleHeader .sectionTitle{ top: 60px;} section#contact .hideWrap .innerWrap{min-height: 600px; } section#contact .read{ width: 500px; position: absolute; top: 100px; left: 50%; transform: translate(-50%,0);} section#contact .read img{ margin-bottom: 20px;} /* page ----------------------------------------------- */ section#topTitle{ background-color: #ccc; padding: 0; height: 250px; min-height: inherit; overflow: visible; z-index: 5;} body#archive #topTitle{ background: url(./img/info/info_mainvisual.png) center center no-repeat; background-size: cover; } body.post-type-archive-info section#topTitle{ background: url(./img/info/bg_pc.jpg) center center no-repeat; background-size: cover; } body.archive.info section#topTitle .bg{ background: url(./img/info/bg_sp.jpg) center center no-repeat; background-size: cover; } #topTitle .thumbImage{ display: none;} #topTitle .innerWrap{ height: 100%;width:calc(100% - 25.2%);} #topTitle .sectionTitle { position: absolute; top: auto; bottom: -50px; right: 20px; width: 60px; height: auto; z-index: 10; margin: 0; display: grid; } #topTitle .sectionTitle:before{ display: none; } #topTitle .sectionTitle .contentsTitle{ position: relative;align-self:end; transform: translate(0,0px);} #topTitle .sectionTitle .title{ position: relative; top: auto; bottom:0; left: 50%; transform: translate(-50%,0); width: 100px; height: auto; } #topTitle .sectionTitle .pageTitle{ position: absolute; top: 15px; right: 100px; transform: translate(0%,0); width: 96px; height: auto; } body.about_freelance #topTitle .sectionTitle .pageTitle{} body.about_how_to_use #topTitle .sectionTitle .pageTitle{} body.about_company #topTitle .sectionTitle .pageTitle{width: 30px;} body.service #topTitle .sectionTitle .pageTitle{} body.contact #topTitle .sectionTitle .pageTitle{} #topTitle .subTitle{ position: absolute; top: -12px; left: 0px; transform: translate(0,0); width: auto; height: 85px; } body.about_freelance #topTitle .subTitle{} body.about_how_to_use #topTitle .subTitle{} body.about_company #topTitle .subTitle{} body.service #topTitle .subTitle{} body.contact #topTitle .subTitle{} body.about_freelance{} body.about_freelance section#rinen .sectionTitle{ transform: translate(-50%,0);} body.about_freelance section.rinen{ padding: 100px 0;} body.about_freelance section.rinen .entry-content{} body.about_freelance section#rinen .entry-content{ min-height: 500px;} body.about_freelance section#rinen{ padding-bottom: 0;} body.about_freelance section#rinen .readTitle{ width:430px; height: auto; margin-bottom: 40px;} body.about_freelance section#rinen p.read{margin-bottom: 80px; font-size: 0.9rem;} body.about_freelance section#rinen p.read2{margin-bottom: 50px; font-size: 1.1rem;} dl.rinenList{ display: flex; flex-wrap: wrap; padding-bottom: 250px;} dl.rinenList dt{width: 100px;} dl.rinenList dt img{ width:100%; height: auto;} dl.rinenList dd { width:calc(100% - 100px);display: flex; align-items: center; padding-left: 20px; min-height: 100px;font-size: 1.1rem;} dl.rinenList dd span{ display: inline-block;} dl.rinenList dd:not(:last-child){ margin-bottom: 20px;} body.about_freelance section#rinen img.ship{ position: absolute; right: 0; bottom: 0; width: 450px; height: auto; transform: translate(100px , 0);} dl.rinenList2{} dl.rinenList2 dt{margin-bottom: 20px;} dl.rinenList2 dt img{ width:auto; height: 30px;} dl.rinenList2 dd:not(:last-child){ margin-bottom: 100px;} dl.rinenList2 dd img{ width:80%; height: auto;} #rinen3 .readTitle{ width: 80%; height: auto; margin-bottom: 30px;} #rinen3 .read{ margin-bottom: 50px;} #rinen3 .imageWfix{ width: 100%; position: relative; padding:10% 0 20% 0;} #rinen3 .about_freelance_rinen_3_image{ width: 100%; height: auto; transform: translate(0px,20px) scale(1.3);} #rinen3 .about_freelance_rinen_3_image2{width: 100%; margin: auto;} section#directory{ background: #fff; padding: 10px 0; min-height: 80px; box-sizing:border-box;z-index: 4; } section#directory a{ display: inline-block; margin: 0 5px; color: rgba(0,139,171,1) !important;} section#directory .breadcrumb{} section#directory .breadcrumb ul{} section#directory .breadcrumb ul li{ display: inline-block;} section#directory .breadcrumb ul li:not(.this):after{ content: '>'; display: inline-block; margin: 0 10px;} section#directory .breadcrumb ul li:last-child:after{ display: none;} /* profile ----------------------------------------------- */ section#relativeArea{ min-height: inherit; padding-bottom: 85px;} section#relativeArea .entryBoxList{ margin-bottom: 0px;padding-bottom:0px;} #relativeArea .entryBoxList.boxLInk .item{ padding-bottom: 0;} section#relativeArea a{} section#relativeArea a:hover{ opacity: .8;} /* profile ----------------------------------------------- */ section#profileArea{ background: #b2dde6; min-height: 500px;} section#profileArea .sectionTitle{ transform: translate(-50%,0);} section#profileArea .profileWrap{ grid-template-columns:1fr 1fr; grid-template-rows: auto auto; grid-gap: 0px;} section#profileArea .profileWrap .gridItem.name{ grid-row: 1 / 2; grid-column: 1 / 2; text-align: center;min-height: 320px;} section#profileArea .profileWrap .gridItem.photo{ grid-row: 1 / 3; grid-column: 2 / 3; text-align: center; } section#profileArea .profileWrap .gridItem.text{ grid-row: 2 / 3; grid-column: 1 / 2;} section#profileArea .profileWrap .gridItem.name img{ width: 70px; height: auto;} section#profileArea .profileWrap .gridItem.photo img{ width: 80%; height: auto; max-width: 340px;} section#profileArea .btnItem{ margin: 40px 0 0 0;max-width: 350px;} section#profileArea .btnItem.off{ opacity: 0; pointer-events: none;} section#profileArea .moreText{ padding: 50px 0; display: none;} section#profileArea .moreText.open{ display: block;} section#profileArea .moreText h4{ line-height: 1.8; font-size: 1.2em; font-weight: 700;} section#profileArea .moreText p{} /* archive ----------------------------------------------- */ section#archiveArea{ padding-top: 70px;} .categoryNav{ text-align: center; margin-bottom: 90px;} .categoryNav ul{} .categoryNav ul li{ display: inline-block; margin: 0 10px 10px 10px; letter-spacing: 0;} .categoryNav ul li a{ display: block; border: solid 1px #fff; padding: 0 5px; min-width: 120px;} .categoryNav ul li.active { background-color: rgb(255,255,255,0.8)} nav.pager{ display: flex;justify-content:space-between; width: 100%;} nav.pager a{ margin: 0 !important;} nav.pager .prev, nav.pager .center, nav.pager .next{ margin: 0; } /* single ----------------------------------------------- */ #singleArea .pageContentsWrap.entry article .content, #singleArea .pageContentsWrap.entry article nav{ padding: 0 50px;} #singleArea .pageContentsWrap.entry article .content{ border-bottom: solid 2px #fff;} #singleArea .pageContentsWrap.entry article navi{} #singleArea .pageContentsWrap.entry .entry-header .category{ display: inline-block; padding: 0 5px; min-width: 150px; text-align: center; margin-bottom: 65px;} article.info_category-news .category{ background: var(--color-news-light);} article.info_category-works .category{ background: var(--color-works-light);} article.info_category-media .category{ background: var(--color-media-light);} article.info_category-talk .category{ background: var(--color-talk-light);} #singleArea .pageContentsWrap.entry .entry-header .date{ font-size: 1rem;margin-bottom: 10px; text-align: left;grid-template-columns: auto 1fr; grid-gap: 10px;} #singleArea .pageContentsWrap.entry .entry-header .date .y{ font-size: 0.8em; display: inline-block;} #singleArea .pageContentsWrap.entry .entry-header .entry-title{ font-size: 2rem; margin-bottom: 20px;} #singleDetailTitle.innerWrap{ height:auto !important;} #singleDetailTitle .category{ display: inline-block; padding: 0 20px; min-width: 220px; text-align: center; margin-bottom: 30px;font-size: 0.8em; } #singleDetailTitle .date{ font-size: 1rem;margin-bottom: 10px; text-align: left;grid-template-columns: auto 1fr; grid-gap: 10px;} #singleDetailTitle .date .y{ display: inline-block; } #singleDetailTitle .entry-title{ font-size: 1.2rem; margin-bottom: 70px;} .entry-content, .entry-content p{ word-break: break-all;} #singleArea .pageContentsWrap.entry .entry-content{ padding-bottom: 50px;} #singleArea .pageContentsWrap.entry .thumbImage{ width: 100%; height: auto; margin-bottom: 2em;} #singleArea .pageContentsWrap.entry .thumbImage img{width: 100%; height: auto; max-width: 100%;} #singleArea .pageContentsWrap.entry .entry-content img{ width: 100%; height: auto; max-width: 100%;} #singleArea .pageContentsWrap.entry .entry-content p{ } #singleArea .pageContentsWrap.entry .entry-content .wp-caption {width: 100% !important; } #singleArea .pageContentsWrap.entry .entry-content p, #singleArea .pageContentsWrap.entry .entry-content figure{ margin-bottom:2rem; width: 100%;} #singleArea .pageContentsWrap.entry .entry-content figure img{ width: 100%; height: auto;} #singleArea .pageContentsWrap.entry .entry-content strong{ font-weight: bold;} #singleArea .pageContentsWrap.entry .entry-content ul{ list-style: disc; padding-left: 1.5em; margin-bottom: 2em;} #singleArea .pageContentsWrap.entry .entry-content ol{ list-style: decimal; padding-left: 1.5em;margin-bottom: 2em;} #singleArea .pageContentsWrap.entry .entry-content li{ line-height:1.5;margin-bottom: 0.5em;} #singleArea .pageContentsWrap.entry .entry-content blockquote{ padding: 20px;margin-bottom: 2em;} #singleArea .pageContentsWrap.entry .entry-content blockquote p:last-child{ margin-bottom: 0;} #singleArea .pageContentsWrap.entry .entry-content img{ width:100%; height: auto;margin-bottom:0.5rem;} #singleArea .pageContentsWrap.entry .entry-content img.size-full{ width:100%; height: auto;} #singleArea .pageContentsWrap.entry .entry-content div.alignnone{ width: 100% !important;float: none; margin: 0 0 2em 0;} #singleArea .pageContentsWrap.entry .entry-content img.alignleft, #singleArea .pageContentsWrap.entry .entry-content div.alignleft{ width: 40% !important; float: left; margin: 0 2em 2em 0;} #singleArea .pageContentsWrap.entry .entry-content img.alignright, #singleArea .pageContentsWrap.entry .entry-content div.alignright{ width: 40% !important; float: right; margin: 0 0 2em 2em;} #singleArea .pageContentsWrap.entry .entry-content img.aligncenter, #singleArea .pageContentsWrap.entry .entry-content div.aligncenter{ width: 40% !important; float: none; margin: 0 auto 2em auto; display: block;} #singleArea .pageContentsWrap.entry .entry-content figcaption{ line-height:1.5;} #singleArea .pageContentsWrap.entry .entry-content h1, #singleArea .pageContentsWrap.entry .entry-content h2, #singleArea .pageContentsWrap.entry .entry-content h3, #singleArea .pageContentsWrap.entry .entry-content h4, #singleArea .pageContentsWrap.entry .entry-content h5, #singleArea .pageContentsWrap.entry .entry-content h6{ font-weight: bold; padding: 0.25em 0.5em; margin-bottom: 0.5em; color:#000;background: transparent;} #singleArea .pageContentsWrap.entry .entry-content h1{ font-size: 1.5em;} #singleArea .pageContentsWrap.entry .entry-content h2{ font-size: 1.4em; } #singleArea .pageContentsWrap.entry .entry-content h3{ font-size: 1.3em;border-left: solid 5px #008bac; } #singleArea .pageContentsWrap.entry .entry-content h4{ font-size: 1.2em; } #singleArea .pageContentsWrap.entry .entry-content h5{ font-size: 1.1em; } #singleArea .pageContentsWrap.entry .entry-content h6{ font-size: 1.0em;} #singleArea .pageContentsWrap.entry .entry-content blockquote{ border: solid 1px #ccc; background: #fefefe; padding: 20px;} #singleArea .pageContentsWrap.entry .entry-content hr{ border-bottom: solid 1px #000; padding-top: 20px; margin-bottom: 20px} /* page - about ----------------------------------------------- */ body.contents_about{} body.contents_about .entryBoxList.boxLInk .item .meta .title img{ width: 90%; height: auto;} body.about_freelance{} body.about_how_to_use{} body.about_how_to_use article.pattern{ padding: 50px; margin-bottom: 100px; } body.about_how_to_use article.pattern:nth-child(even){background: var(--color-yellow);} body.about_how_to_use article.pattern:nth-child(odd){background: var(--color-sky)} body.about_how_to_use article.pattern_1{} body.about_how_to_use article.pattern_2{} body.about_how_to_use article.pattern_3{} body.about_how_to_use article.pattern_4{} body.about_how_to_use article h3{ font-size: 1.8vw; padding-left: 11vw; padding-top: 1vw; height: auto; line-height: 3vw; margin-bottom: 20px; } body.about_how_to_use article.pattern_1 h3{ background: url(./img/about/use_pattern_1.svg) center left no-repeat;background-size: auto 100%;} body.about_how_to_use article.pattern_2 h3{ background: url(./img/about/use_pattern_2.svg) center left no-repeat;background-size: auto 100%;} body.about_how_to_use article.pattern_3 h3{ background: url(./img/about/use_pattern_3.svg) center left no-repeat;background-size: auto 100%;} body.about_how_to_use article.pattern_4 h3{ background: url(./img/about/use_pattern_4.svg) center left no-repeat;background-size: auto 100%;} body.about_how_to_use article.pattern_5 h3{ background: url(./img/about/use_pattern_5.svg) center left no-repeat;background-size: auto 100%;} body.about_how_to_use article.pattern_6 h3{ background: url(./img/about/use_pattern_6.svg) center left no-repeat;background-size: auto 100%;} body.about_how_to_use article img.logo{ display:block; width: auto; height: 40px; margin: 10px auto 0 auto;} body.about_how_to_use article .bannerArea{ grid-gap: 20px;margin-bottom: 40px; width: 100%; max-width: 530px;} body.about_how_to_use article .bannerBox{ background: #fff; padding: 20px; min-height: 135px; text-align: center; font-size: 0.9em; display: grid; align-items: center; } body.about_how_to_use article .bannerBox img{} body.about_how_to_use article .theme{ font-size: 1.2em; line-height: 2; margin-bottom: 30px;} body.about_how_to_use article .point{ border: dotted 2px #000; padding: 20px; margin-bottom: 40px;} body.about_how_to_use article .point p, body.about_how_to_use article .point ul{ margin-bottom: 5px; padding-top: 10px;} body.about_how_to_use article .jobArea{border-bottom: dashed 1px #000; grid-gap:20px 40px; padding-bottom: 40px; margin-bottom: 40px; grid-template-columns:minmax(180px, 30%) 1fr ;font-size: 0.8em;} body.about_how_to_use article .jobArea dt{padding: 20px;background: #fff;text-align: center; display: grid; align-items: center;align-content: center; } body.about_how_to_use article .jobArea dt:after{ content:'▼'; display:inline-block; position: absolute; top: 50%; right: 0; transform: translate(200%,-50%) rotate(-90deg) scale(1.3,0.8); } body.about_how_to_use article .jobArea dd{padding: 20px;background: #fff; display: grid; align-items: center; } body.about_how_to_use article .jobArea ul{ margin: 0;} body.about_how_to_use article .jobArea ul li:last-child{ margin-bottom: 0;} body.about_how_to_use article .jobArea ol{} body.about_how_to_use article .guest{} body.about_company{} body.about_company section#pageArea{ padding-top: 100px;} body.about_company .infoTable{ grid-template-columns:70px 1fr ; grid-gap:10px 20px; margin-bottom: 50px; border: solid 2px var(--color-yellow); border-left:0; border-right:0; padding: 30px 0; } body.about_company .mapRead{ color: var(--color-key); font-size: 0.8em;} body.about_company iframe{ width: 100%; height: 300px; margin-bottom: 70px;} /* page - service ----------------------------------------------- */ body.contents_service{} body.contents_service article.departmentBlock{ padding: 50px; text-align: center; margin-bottom: 100px;} body.contents_service article.departmentBlock:nth-child(odd){background: var(--color-yellow);} body.contents_service article.departmentBlock:nth-child(even){background: var(--color-sky);} body.contents_service article.departmentBlock .illust{ content: ''; display: block; transform: translate(-100%,0); position: absolute; z-index: 20;} body.contents_service article.suikyo .nokogiri{ width: 180px; height: 160px; bottom: -3%; left: 0; transform: translate(-100%,0%); background: url(./img/illust/nokogiri.png) bottom left no-repeat;background-size: contain;} body.contents_service article.suikyo .oke{ width: 260px; height: 200px; top:100%; right: 0; transform: translate(70%,0); background: url(./img/illust/oke.png) center center no-repeat;background-size: contain;} body.contents_service article.kijin .seoi{ width: 140px; height: 180px; bottom: 40%; right: 0; transform: translate(110%,0); background: url(./img/illust/seoi.png) center center no-repeat;background-size: contain;} body.contents_service article.mcp .kuwa{ width: 180px; height: 180px; bottom: 30%; left: 0; transform: translate(-90%,0); background: url(./img/illust/kuwa.png) center left no-repeat;background-size: contain;} body.contents_service article.stc .kago{ width: 140px; height: 150px; top:35%; left: 0; transform: translate(-110%,0); background: url(./img/illust/kago.png) center left no-repeat;background-size: contain; } body.contents_service article.shingen .sukui{ width: 150px; height: 160px; bottom: 5%; right: 0; transform: translate(100%,0); background: url(./img/illust/sukui.png) center right no-repeat;background-size: contain;} body.contents_service article.departmentBlock .logo{ background: #fff; width: 250px; height: 250px; padding: 20px; box-sizing: border-box; margin:0 auto 50px auto;position: relative;} body.contents_service article.departmentBlock .logo.siteLink{ margin-bottom: 20px;} body.contents_service article.departmentBlock .logo:after{ content: ''; display: block; width: 100%; height: 0; padding-top:100%; position: absolute; z-index: 20; } body.contents_service article.suikyo .logo:after{ width: 85%; bottom: 0; left: 0;transform: translate(85%,15%) scale(-1,1); background: url(./img/illust/suikyo.png) center bottom no-repeat; background-size: contain;} body.contents_service article.kijin .logo:after{ bottom: 0; left: 0;transform: translate(-75%,10%); background: url(./img/illust/benkei.png) center bottom no-repeat; background-size: contain;} body.contents_service article.mcp .logo:after{ padding-top:120%;bottom: 0; right: 0;transform: translate(75%,10%); background: url(./img/illust/monkey.png) center bottom no-repeat; background-size: contain;} body.contents_service article.stc .logo:after{ bottom: 0; left: 0;transform: translate(-75%,10%); background: url(./img/illust/ushiwaka.png) center bottom no-repeat; background-size: contain;} body.contents_service article.shingen .logo:after{ width: 90%; bottom: 0; right: 0;transform: translate(85%,20%); background: url(./img/illust/goemon.png) center bottom no-repeat; background-size: contain;} body.contents_service article.departmentBlock .logo .job{ letter-spacing: 0} body.contents_service article.departmentBlock .logo .mark{width: 180px; height: 180px; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); } body.contents_service article.departmentBlock.suikyo .logo .mark{width: 160px; height: auto; transform: translate(-50%,-50%); } body.contents_service article.departmentBlock.mcp .logo .mark{width: 150px; height: 150px; transform: translate(-50%,-35%); } body.contents_service article.departmentBlock.stc .logo .mark{ transform: translate(-50%,-45%); } body.contents_service article.departmentBlock.shingen .logo .mark{width: 110px; height: 150px; transform: translate(-50%,-40%); } body.contents_service article.departmentBlock .logo img{ width: 100%; height: auto; position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); } body.contents_service article.departmentBlock a.link{ display: inline-block; margin-bottom: 10px; } body.contents_service article.departmentBlock dl{ text-align: left; } body.contents_service article.departmentBlock dl dt{ font-size: 1.4em; margin-bottom: 5px;} body.contents_service article.departmentBlock dl dd{ border: dashed 1px #000; padding: 20px; margin-bottom: 40px; font-size: 1em;} body.contents_service article.departmentBlock dl dt:before{ display: inline-block; margin-right: 0.5em;} body.contents_service article.departmentBlock dl dt:nth-of-type(1):before{ content:'1'; } body.contents_service article.departmentBlock dl dt:nth-of-type(2):before{ content:'2'; } body.contents_service article.departmentBlock dl dt:nth-of-type(3):before{ content:'3'; } body.contents_service article.departmentBlock dl dt:nth-of-type(4):before{ content:'4'; } body.contents_service article.departmentBlock dl dt:nth-of-type(5):before{ content:'5'; } body.contents_service article.departmentBlock dl dt:nth-of-type(6):before{ content:'6'; } body.contents_service article.departmentBlock dl dt:nth-of-type(7):before{ content:'7';} body.contents_service article.departmentBlock dl dt:nth-of-type(8):before{ content:'8';} body.contents_service article.departmentBlock dl dt:nth-of-type(9):before{ content:'9';} body.contents_service article.departmentBlock dl dt:nth-of-type(10):before{ content:'10';} body.contents_service .ex{ text-align: left; } /* page - contact ----------------------------------------------- */ body.contents_contact section.area .read{ margin-bottom:40px;} table.form{ width: 100%;} table.form th{ text-align: left; padding: 10px 0px 10px 10px; width: 206px;line-height: 2.3em;} table.form td{ text-align: left; padding: 10px 100px 10px 10px;} table.form th, table.form td{ border-top:solid 1px #333333; vertical-align: top;} .wpcf7-list-item.first{ margin-left:0;} .hissu{ display: inline-block; padding: 0 5px; font-size: 1.2em; color: #008bac;} .hissuMessage{ padding: 10px 10px; border-top:solid 1px #333333; margin-bottom: 30px;} .wpcf7-form-control{} nav.submit{ text-align: center; } .wpcf7-submit{ position: relative;margin: auto; border: 0; width: 450px; padding-right: 60px;height: 80px; line-height: 80px; text-align: center; background-color: var(--color-key); color:#fff; font-size: 1rem;transition: all 300ms cubic-bezier(.50,.0,.50,1); cursor: pointer;} nav.submit div.bt:hover .wpcf7-submit{background-color: var(--color-key-light);} .wpcf7-validation-errors{ display:none;} .wpcf7-not-valid-tip{ font-size:0.7rem; display: inline-block; padding:0px 0; color: #c00;} .wpcf7-text, .wpcf7-textarea{ width:100%; padding: 10px; border: solid 1px #ccc;box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2) inset;} .wpcf7-textarea{height:200px;} div.wpcf7-mail-sent-ok{ border:0 !important; text-align: left !important; padding:20px 0px !important;} form.wpcf7-form.sent{} form.wpcf7-form.sent .read, form.wpcf7-form.sent table, form.wpcf7-form.sent .hissuMessage, form.wpcf7-form.sent nav.form{display: none;} /* cloud ----------------------------------------------- */ .cloud{ display: none; width: 300px; height: 200px; pointer-events: none; position: absolute; z-index: 2000;transform: translate3d(0, 0, 0); } .menuOpen .cloud{ display: none !important;} .cloud.left{ left: 0; } .cloud.right{ right: 0;} .cloud.green.left{ background: url(./img/illust/komo_green_left.png) left center no-repeat; background-size: contain; } .cloud.yellow.left{ background: url(./img/illust/komo_yellow_left.png) left center no-repeat; background-size: contain;} .cloud.pink.left{} .cloud.green.right{} .cloud.yellow.right{ background: url(./img/illust/komo_yellow_right.png) right center no-repeat; background-size: contain;} .cloud.pink.right{ background: url(./img/illust/komo_pink_right.png) right center no-repeat; background-size: contain;} #cloudWrap{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2001; overflow: hidden;pointer-events: none; } body.home #cloud_left_1{ display: block; top: 1700px;} body.home #cloud_left_2{ display: block; top: 4800px;} body.home #cloud_left_3{ display: none;} body.home #cloud_right_1{ display: block; top: 700px;} body.home #cloud_right_2{ display: block; top: 3600px;} body.home #cloud_right_3{ display: none;} body.about_freelance #cloud_left_1{ display: block; top: 2000px;} body.about_freelance #cloud_left_2{ display: none;} body.about_freelance #cloud_left_3{ display: none;} body.about_freelance #cloud_right_1{ display: block; top: 1000px;} body.about_freelance #cloud_right_2{ display: none;} body.about_freelance #cloud_right_3{ display: none;} body.about_how_to_use #cloud_left_1{ display: block; top: 1700px;} body.about_how_to_use #cloud_left_2{ display: block; top: 4200px;} body.about_how_to_use #cloud_left_3{ display: block; top: 7200px;} body.about_how_to_use #cloud_right_1{ display: block; top: 700px;} body.about_how_to_use #cloud_right_2{ display: block; top: 3000px;} body.about_how_to_use #cloud_right_3{ display: block; top: 5700px;} body.about_company #cloud_left_1{ display: block; top: 1800px;} body.about_company #cloud_left_2{ display: none;} body.about_company #cloud_left_3{ display: none;} body.about_company #cloud_right_1{ display: block; top: 600px;} body.about_company #cloud_right_2{ display: none;} body.about_company #cloud_right_3{ display: none;} body.service_service #cloud_left_1{ display: block; top: 2200px;} body.service_service #cloud_left_2{ display: block; top: 4600px;} body.service_service #cloud_left_3{ display: none;} body.service_service #cloud_right_1{ display: block; top: 700px;} body.service_service #cloud_right_2{ display: block; top: 3100px;} body.service_service #cloud_right_3{ display: block; top: 6450px;} @media screen and (max-width:1000px) { #globalFooter{} #globalFooter .innerWrap.grid{grid-template-columns: 1fr;} #globalFooter .gridItem.menu{ grid-column:inherit; grid-row: 1 / 2; grid-template-columns: 1fr; width: 100%; padding: 0 5% 5% 5%;} #globalFooter .gridItem.company{grid-column: inherit; grid-row: 3 / 4; padding: 0 8% 0% 8%; font-size: 0.85em;} #globalFooter .gridItem.other{grid-column: inherit; grid-row: 2 / 3; padding: 0 8% 10% 8%; margin-bottom: 10%; border-bottom: solid 2px #fff;} #globalFooter .gridItem.copy{grid-column: inherit; grid-row:inherit; text-align: center;position: relative; top: 0; left: 0; width: auto; height: auto; display: block; } #globalFooter .gridItem.copy span{position: relative; top: 0; left: 0;transform: translate(0,0) rotate(0deg); font-size: 0.7em; color: #fff; } body.about_freelance .entry-content img.onlyPC{ display: none !important;} body.about_freelance .entry-content img.onlySP{ max-width: 500px; display: block !important;} .fixedCopyright{ display: none;} } @media screen and (max-width:750px) { #globalHeader .menuBtn{ background: transparent;} #siteHeader{ height: 120px; } .home #siteHeader{ height: 100px;} #siteHeader #siteLogo, #globalHeader .siteLogo{ top:25px; width: 138px;height: 75px;} body.menuCover #globalHeader .menuArea{padding-top:120px;} body.menuOpen #globalHeader .menuBtn{ background-color: transparent;} body.menuCover #globalHeader .menuArea:after, #globalHeader .exWrap .info{ display: none;} body.menuCover #globalHeader .menu{ border-top:0;} body.menuCover #globalHeader .menu{border-top: 0; margin-bottom: 40px;} body.menuCover #globalHeader .menu li{ padding: 7vw 3.5vw 7vw 3.5vw; margin-bottom: 0px;border-bottom: solid 1px #ccc; } body.menuCover #globalHeader .menu li .btnItem{ width:fit-content; margin: 0;} body.menuCover #globalHeader .menu li .btnItem .arrowR:after{background: url(./img/common/arrow_r_blue.svg) center center no-repeat; background-size: contain;} body.menuCover #globalHeader .menu li .btnItem .text{ width: 70vw;} body.menuCover #globalHeader .menu li .parent{ padding: 0; margin: 0;} body.menuCover #globalHeader .menu li .parent.nolink{padding-left: 70vw; margin-bottom: 5vw; } body.menuCover #globalHeader .menu li a{ } body.menuCover #globalHeader .menu li .btnItem{height: 4.2vw; } body.menuCover #globalHeader .menu li .btnItem .text, body.menuCover #globalHeader .menu li .parent{height: 4.2vw; } body.menuCover #globalHeader .menu li span{ display: none;} body.menuCover #globalHeader .menu li.info .text, body.menuCover #globalHeader .menu li.about .parent, body.menuCover #globalHeader .menu li.department .text, body.menuCover #globalHeader .menu li.contact .text{background-size: auto 100%; } body.menuCover #globalHeader .menu .submenu a{ margin-right: auto; margin-bottom: 5vw; } body.menuCover #globalHeader .menu .submenu a:last-child{ margin-bottom: 0;} body.menuCover #globalHeader .menu li.about a.top .text{width: 70vw;background-size: auto 100%;} body.menuCover #globalHeader .menu li.about a.use .text{ width: 70vw;background-size:auto 100%; } body.menuCover #globalHeader .menu li.about a.company .text{ width: 70vw; background-size:auto 100%; } body.menuCover #globalHeader .exWrap{ padding: 0 6vw;} body.menuCover #globalHeader a.facebook{ width: 12vw; height: 12vw;} body.menuCover #globalHeader a.facebook span{ display: none;} #globalFooter{ text-align: center; padding: 10vw 0; background: #008bac; color: #fff; text-align: left;} #globalFooter .innerWrap{ width:90%; max-width: 960px; margin: auto; grid-gap: 0 50px;} #globalFooter .logo{ width: 27vw; margin-bottom: 5vw;} #globalFooter .gridItem.menu > ul >li{ float: none; width: 100%;} #globalFooter .btnItem .arrow, #globalFooter .btnItem .arrow:after{height: 5vw; } #globalFooter .gridItem.menu{ grid-gap: 10px; padding-top: 0vw;} #globalFooter .gridItem.company{} #globalFooter .gridItem.company .text p:nth-of-type(1) { margin-bottom: 0;} #globalFooter .gridItem.menu .btnItem .text{ width: 70vw; } #globalFooter .gridItem.menu .btnItem, #globalFooter .gridItem.menu .btnItem .text{height: 4.5vw; } #globalFooter .gridItem.menu ul{ } #globalFooter .gridItem.menu ul li{ margin-bottom: 6vw; } #globalFooter .gridItem.menu ul li .contents{ padding-left: 8vw;} #globalFooter .gridItem.menu ul li a{} #globalFooter .gridItem.menu ul li a span{ } #globalFooter .gridItem.menu ul li .info .text{ background-size: auto 100%;} #globalFooter .gridItem.menu ul li .about .text{ background-size: auto 100%;} #globalFooter .gridItem.menu ul li .about_top .text{background-size: auto 90%;} #globalFooter .gridItem.menu ul li .about_use .text{background-size: auto 90%;} #globalFooter .gridItem.menu ul li .about_company .text{background-size: auto 90%;} #globalFooter .gridItem.menu ul li .department .text{background-size: auto 100%;} #globalFooter .gridItem.menu ul li .kijin .text{background-size: auto 90%;} #globalFooter .gridItem.menu ul li .mcp .text{background-size: auto 90%;} #globalFooter .gridItem.menu ul li .stc .text{background-size: auto 90%;} #globalFooter .gridItem.menu ul li .shingen .text{background-size: auto 90%;} #globalFooter .gridItem.menu ul li .suikyo .text{background-size: auto 90%;} #globalFooter .gridItem.menu ul li .contact .text{ background-size: auto 100%;} #globalFooter .gridItem.menu ul li a img{ } #globalFooter .gridItem.menu ul ul { padding-left: 8vw; padding-top: 3vw;} #globalFooter .gridItem.menu ul ul li{ margin-bottom: 3vw; } #globalFooter .gridItem.menu ul ul li:last-child{ margin-bottom: 0;} #globalFooter .gridItem.menu ul ul li a{padding-left: 3vw;} #globalFooter .gridItem.menu ul ul li a:before{ } #globalFooter .gridItem.menu ul ul li .contents{ } #globalFooter .ex{ grid-template-columns: 15vw 1fr; height: 10vw;} #globalFooter a.facebook{ width: 10vw;} #globalFooter a.facebook span{ } #globalFooter a.privacy{padding-left: 8vw; line-height: 12vw; font-size: 1em;} #globalFooter a.privacy:before{ } #globalFooter .copy{} .pcDevice #container{ min-width: 750px;} .pcDevice .slick-slide{ min-width: 750px; min-height: 560px;} .contentsW.entryBoxList, body.post-type-archive .contentsW, body.single .contentsW {width: calc(100% - 28%);} section.area .innerWrap{ width:calc(100% - 10%); } #singleArea .innerWrap{ width: calc(100% - 36%); padding: 0 !important; } .single-info #singleArea .innerWrap{ width: calc(100% - 28%); padding: 0 !important; } #singleArea .pageContentsWrap.entry article .content, #singleArea .pageContentsWrap.entry article nav{padding: 0 !important; width: 100%;} #singleArea .pageContentsWrap.entry article nav{ height: 230px; margin-bottom: 100px;} #singleArea .pageContentsWrap.entry article nav .prev{ } #singleArea .pageContentsWrap.entry article nav .next{} #singleArea .pageContentsWrap.entry article nav .center{ position: absolute; bottom: 0; left: 0; width: 100%;} #singleArea .pageContentsWrap.entry article nav .center .btnItem{width: 100%;} section.area .sectionTitle.right{ right: auto; left: 0; top:-20px; } section.area .sectionTitle{transform: translate(0px,0%); } section.area .sectionTitle img.title{ width: 120px;} #topContents-slide{ width: 100%;} #topContents-slide .swiper-container{ overflow: visible;} #topContents-slide .swiper-container .item{ padding: 0; } #topContents-slide .slick-slide{width: 100vw;} #topContents-slide .item{ padding-top: 74.7%;} #topContents-slide .slick-slide.about .item{background: none; } #topContents-slide .slick-slide.department .item{background: none; } #topContents-slide .slick-slide.use .item{background:none; } #topContents-slide .item .spImage{ display: block; position: absolute; width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%,-50%);} #topContents-slide .item .title{ right: auto; left: 5%; width: 70px;} #topContents-slide .item .text{ top: 50%; transform: translate(0%,0%); } #topContents-slide .about .item .text{width:40%; left: 41%;top: 50%; } #topContents-slide .department .item .text{width:56%; left: 42%;top: 68%; } #topContents-slide .use .item .text{width:48%; left: 18%;top: 30%; } #topContents-slide .slick-prev, #topContents-slide .slick-next{ display: none !important; opacity: 0; pointer-events: none;} #topContents-slide .slick-dots{display: block !important;} .entryBoxList .grid{ grid-template-columns: 1fr ; grid-gap: 80px;} section#topContents .innerWrap.allforfreelance{border-bottom-width: 2px;} .entryBoxList .item:not(.noneMore):before{border-bottom-width: 2px;} .entryBoxList .item .meta{border-top-width: 2px; box-sizing: border-box;} section#news > .innerWrap{padding-bottom:10vw;} section#news .tori{ width: 24%; top: 33%; transform: translate(59% , 0); min-width: inherit;} section#news .keijiban{ width: 30%; transform: translate(-60% , 0);} section#about{ background-image: none; background-color: #ffee11; padding: 0; overflow: visible;} section#about .innerWrap.titleHeader .sectionTitle{ top: -5vw; } section#about .innerWrap{ padding-top: 560px;} section#about:before { content: ''; display: block; width: 100%; min-height: 560px; background: url(./img/about/fune.jpg) center center no-repeat; background-size: cover; position: absolute; top: 0; left: 0; } section#about .sectionTitle{ top: -20px;} section#about .read{ display:block; position: relative; width: 100%; top: 0;max-width:none;} section#department{ padding-bottom: 0px;} section#department > .hideWrap{ padding-bottom: 0px;} section#department .innerWrap{padding-bottom: 80px;} section#department .innerWrap.titleHeader .sectionTitle{ top: -5vw; } section#department .suikyo{ width: 24%; top: 13%; transform: translate(42% , 0);} section#department .benkei{ width: 34%; top: 26%; transform: translate(42% , 0);} section#department .ushiwaka{ width: 34%; top: 64%; bottom:auto;transform: translate(52% , 0);} section#department .monkey{ width: 34%; top: 37%; transform: translate(-78% , 0);} section#department .goemon{ width: 90%; top: 81%; bottom:auto;transform: translate(-54% , 0);} section#department .matsu{ width: 42%; top: 0px; } section#department .matsu2{ width: 30%; left: 0; bottom: -4vw; transform: translate(-10% , 0); } section#department .kusa2{ width: 40%; } section#department .entryBoxList.boxLInk .item .meta .title img{ } section#talk{} section#talk .saru_usagi{ width: 18%; min-width: inherit; top: 64%; transform: translate(66% , 0);} section#contact{ background-image: none; background-color: #c3d6c2; padding: 0 0 1px 0; overflow: visible;} section#contact .innerWrap.titleHeader .sectionTitle{ top: -5vw; } section#contact .innerWrap{ padding-top: 400px;} section#contact:before { content: ''; display: block; width: 100%; min-height: 350px; background: url(./img/contact/bg_top_sp.jpg) center bottom no-repeat; background-size: cover; position: absolute; top: 0; left: 0; } section#contact .sectionTitle{ top: -20px;} section#contact .read{ display:block; position: relative; width: 90%; top: 0;max-width:none;} section#contact .btnItem{ width: 100%;} section#directory{ display: none;} body#page section#pageArea{ padding-top: 80px;} body#page.no_MainVisual section#pageArea{ padding-top: 0px; overflow: visible;} .pageContentsWrap{ width: calc(100% - 13.6vw);} .about_freelance .pageContentsWrap, .contact_contact .pageContentsWrap{width: calc(100% - 36%);} body.about_freelance section.rinen .pageContentsWrap{width: calc(100% - 36%); padding: 0;} .pageContentsWrap .content.novisual{ width: 64%;} section#topTitle{ height: 560px; background: transparent !important;} body#single section#topTitle{ height: auto; } body#single section#topTitle:after{ content: ''; display: block; clear: both;} section#topTitle .innerWrap{width:calc(100% - 18%); height: 560px; float:right; } body#single.single section#topTitle .innerWrap.imageWrap{ height: 0; padding-top: 58.3%; } section#topTitle .innerWrap .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* section#topTitle .innerWrap{width:calc(100% - 18%); height: auto; float:right; } section#topTitle .innerWrap.imageWrap{ height: 0px;padding-top: calc((100% - 18%) * 0.583); } section#topTitle .innerWrap .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } */ section.area .sectionTitle{ width: 70px;} section#topTitle .sectionTitle{ bottom: auto; top: -20px; right:auto; left: -50px; width:70px;transform: translate(-100%,0); } section#topTitle .sectionTitle .title{ width: 120px;} section#topTitle .sectionTitle .pageTitle{ right:auto; left: 130px; top: 30px; } body.about_freelance #topTitle .sectionTitle .pageTitle{ width:20vw !important;} body.about_how_to_use #topTitle .sectionTitle .pageTitle{ width:20vw !important;} body.about_company #topTitle .sectionTitle .pageTitle{ width:5vw !important;} section#topTitle .subTitle{ top: 50%; left: 30%; transform: translate(0,0); width: auto; height: 85px; } #relativeArea .entryBoxList.grid{ grid-template-columns: 1fr;} body.about_how_to_use article.pattern{ padding: 10vw 11.2vw;} body.about_how_to_use article h3{ padding-left: 0vw !important; padding-top: 13vw !important; height: auto; line-height: 1.3 !important; margin-bottom: 5vw !important; font-size: 5vw !important; background-size: auto 10vw !important; background-position: left top !important; text-indent: -2vw !important; } body.about_how_to_use article .bannerArea{grid-template-columns: 1fr;} body.about_how_to_use article .jobArea{grid-template-columns: 1fr;} body.about_how_to_use article .jobArea dt{ margin-bottom: 5vw;} body.about_how_to_use article .jobArea dt:after{ top: 105%; left: 50%; right: auto; transform: translate(-50%,0%) rotate(0deg) scale(1.3,0.8); } body.about_how_to_use article .jobArea dd{ margin-bottom: 10vw;} body.about_how_to_use article .bannerBox{ height: 192px; line-height: 1.2;} body.about_how_to_use article img.logo{height: 80px;} body.about_how_to_use article .theme{ font-size:1em; line-height: 1.8; margin-bottom: 8vw;} body.about_how_to_use article .point{ font-size:0.8em; line-height: 1.5; margin-bottom: 15vw;} body.about_how_to_use article .jobArea dt{ height: 192px;line-height: 1.2;} section#relativeArea{ padding-top: 10vw; padding-bottom: 20vw;} section#relativeArea .pageContentsWrap{width: calc(100% - 36vw);} section#profileArea{ overflow: visible;} section#profileArea:after{ content: ''; display: block; clear: both; } section#profileArea .sectionTitle{ transform: translate(-140%,0);} section#profileArea .sectionTitle img.title{ top:-80px; } section#profileArea .pageContentsWrap{width:calc(100% - 18%); float:right; } section#profileArea .profileWrap{grid-template-columns: 35% 1fr; } section#profileArea .profileWrap .gridItem.name{ align-items:flex-start; display: block;height: 100%; overflow: hidden;} section#profileArea .profileWrap .gridItem.name img{ width: 100px;} section#profileArea .profileWrap .gridItem.photo{ grid-row: 1 /2; height: 88%; overflow: hidden;} section#profileArea .profileWrap .gridItem.text{grid-column: 1/3; grid-row: 2 / 3; padding-right: 18%; font-size: 0.9em;} section#profileArea .moreText{padding-right: 18%; font-size: 0.9em;} section#profileArea .moreText h4{ line-height: 1.5;} section#profileArea .profileWrap .gridItem.photo img{ width: 100%; max-width: none;} section#profileArea .btnItem{ margin:50px auto 0 auto; max-width: none;} section#profileArea .btnItem.off{ display: none;} section#relativeArea .entryBoxList.boxLInk .item { padding-bottom: 0vw;} section#relativeArea .entryBoxList.boxLInk .item .meta{padding-top: 2vw; border: 0;} section#relativeArea .entryBoxList.boxLInk .item .meta .title{ font-size: 0; } section#relativeArea .entryBoxList.boxLInk .item .meta .title img{ width: 100%;} body.about_company .infoTable{ padding: 10vw 11.2vw; grid-template-columns: 5em 1fr;font-size: 0.85em; line-height: 1.8;} body.about_company .mapWrap{ padding: 0 11.2vw;font-size: 0.85em; line-height: 1.8} #singleArea .pageContentsWrap.entry .entry-header .entry-title{font-size: 1.2rem;} body.contents_service article.departmentBlock .logo{ width: 100%; height: 0; padding-top: 100%; margin-bottom: 15vw;} body.contents_service article.departmentBlock .logo .job{ position: absolute; top: 7%; left: 50% ; width: 100%; transform: translate(-50%,0); font-size: 4vw; line-height: 1.3;} body.contents_service article.departmentBlock .logo .mark{ width: 80%; height: auto;} body.contents_service article.departmentBlock.suikyo .logo .mark{width: 60%; height: auto; } body.contents_service article.departmentBlock.mcp .logo .mark{width: 60%; height: auto; top: 55%;} body.contents_service article.departmentBlock.shingen .logo .mark{width: 40%; height: auto; top:55%;} body.contents_service article.suikyo .logo:after{ width: 30vw; bottom: 0; left: 0;transform: translate(185%,15%) scale(-1,1); } body.contents_service article.kijin .logo:after{ width: 32vw; height: 41vw; padding-top: 0; transform: translate(-50%,34%); } body.contents_service article.kijin .nokogiri{ width: 16vw; height: 20vw; bottom: 0; left: 0; transform: translate(-50%,7%); } body.contents_service article.kijin .oke{ width: 20vw; height: 20vw; top: 68%; right: 0; transform: translate(50%,0); } body.contents_service article.mcp .logo:after{ width: 30vw; height: 45vw; padding-top: 0; transform: translate(45%,25%); } body.contents_service article.mcp .seoi{ width: 18vw; height: 28vw; bottom: -1%; right: 0; transform: translate(40%,0); } body.contents_service article.stc .logo:after{ width: 28vw; height: 38vw; padding-top: 0; bottom: 0; left: 0; transform: translate(-55%,40%); } body.contents_service article.stc .kuwa{ width: 28vw; height: 28vw; bottom: 0; left: 0; transform: translate(-27%,0); } body.contents_service article.shingen .logo:after{ width: 38vw; height: 38vw; padding-top: 0; transform: translate(50%,30%); } body.contents_service article.shingen .kago{ width: 17vw; height: 25vw; top: 32%; left: 0; transform: translate(-50%,0); } body.contents_service article.shingen .sukui{ width: 18vw; height: 28vw; bottom: 4%; right: 0; transform: translate(50%,0); } section#archiveArea{} .categoryNav{ text-align: center; margin-bottom: 60px; padding-top: 30px;} .categoryNav.contentsW{width: calc(100% - 28%);} .categoryNav ul{ display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr;} .categoryNav ul li{ display: block; margin: 0px; font-size: 0.8em;} .categoryNav ul li a{ display: block; border: solid 1px #fff; padding: 0 5px; min-width: 150px;} #singleArea{ padding-top: 80px;} #singleArea .pageContentsWrap.entry .entry-content { font-size: 0.94rem;} #singleArea .pageContentsWrap.entry .entry-content .entry-header{} #singleArea .pageContentsWrap.entry .entry-content .entry-header .entry-title{ padding: 0; margin-bottom: 2rem; font-weight: 500; font-size: 1rem; line-height: 1.6;} #singleArea .pageContentsWrap.entry .entry-content .entry-header .category{ margin-bottom: 1rem; line-height: 1; padding:0.1em 2em; font-size: 0.8rem;} #singleArea .pageContentsWrap.entry .entry-content img.alignleft, #singleArea .pageContentsWrap.entry .entry-content div.alignleft{ width: 100% !important; float: none; margin: 0 0em 2em 0;} #singleArea .pageContentsWrap.entry .entry-content img.alignright, #singleArea .pageContentsWrap.entry .entry-content div.alignright{ width: 100% !important; float: none; margin: 0 0 2em 0em;} #singleArea .pageContentsWrap.entry .entry-content img.aligncenter, #singleArea .pageContentsWrap.entry .entry-content div.aligncenter{ width: 100% !important; float: none; margin: 0 auto 2em auto; display: block;} body.home #cloud_left_1{ display: block; top: 2100px;} body.home #cloud_left_2{ display: block; top: 7000px;} body.home #cloud_left_3{ display: none;} body.home #cloud_right_1{ display: block; top: 900px;} body.home #cloud_right_2{ display: block; top: 5700px;} body.home #cloud_right_3{ display: none;} body.about_freelance #cloud_left_1{ display: block; top: 2000px;} body.about_freelance #cloud_left_2{ display: none;} body.about_freelance #cloud_left_3{ display: none;} body.about_freelance #cloud_right_1{ display: block; top: 1000px;} body.about_freelance #cloud_right_2{ display: none;} body.about_freelance #cloud_right_3{ display: none;} body.about_how_to_use #cloud_left_1{ display: block; top: 1700px;} body.about_how_to_use #cloud_left_2{ display: block; top: 4200px;} body.about_how_to_use #cloud_left_3{ display: block; top: 7200px;} body.about_how_to_use #cloud_right_1{ display: block; top: 700px;} body.about_how_to_use #cloud_right_2{ display: block; top: 3000px;} body.about_how_to_use #cloud_right_3{ display: block; top: 5700px;} body.about_company #cloud_left_1{ display: block; top: 1800px;} body.about_company #cloud_left_2{ display: none;} body.about_company #cloud_left_3{ display: none;} body.about_company #cloud_right_1{ display: block; top: 600px;} body.about_company #cloud_right_2{ display: none;} body.about_company #cloud_right_3{ display: none;} body.service_service #cloud_left_1{ display: block; top: 2300px;} body.service_service #cloud_left_2{ display: block; top: 4800px;} body.service_service #cloud_left_3{ display: none;} body.service_service #cloud_right_1{ display: block; top: 700px;} body.service_service #cloud_right_2{ display: block; top: 3300px;} body.service_service #cloud_right_3{ display: block; top: 6800px;} table.form th, table.form td{ display:block; width: 100%; text-align: left;} table.form th{ padding: 10px 0 0 0; } table.form td{ border-top:0;padding: 0 0 10px 0; } .hissuMessage{ padding: 10px;} .wpcf7-text, .wpcf7-textarea{ font-size: 1.5rem; padding: 10px; } nav.submit .btnItem{ width: 100%;} body.about_freelance{} body.about_freelance section#rinen .sectionTitle{ transform: translate(-50%,0);} body.about_freelance section.rinen{ padding: 100px 0;} body.about_freelance section.rinen .entry-content{ padding: 0 0vw; border: solid 0px #f30;} body.about_freelance section#rinen .entry-content{ min-height: 30vw;} body.about_freelance section#rinen .sectionTitle{ transform: translate(-140%,0);} body.about_freelance section#rinen .sectionTitle img.title{ top:-80px; } body.about_freelance section#rinen{ padding-bottom: 0;} body.about_freelance section#rinen .readTitle{ width:100%; height: auto; margin-bottom: 5vw;} body.about_freelance section#rinen p.read{margin-bottom: 10vw; font-size: 0.8rem;} body.about_freelance section#rinen p.read2{margin-bottom: 10vw; font-size: 0.9rem; text-align: center; background: #ffee11; padding: 3vw;} dl.rinenList{ padding-bottom: 50vw;} dl.rinenList dt{width: 100%; text-align: center; margin-bottom: 4vw;} dl.rinenList dt img{ width:20vw; height: auto;} dl.rinenList dd { width:100%;display: flex; align-items: center; padding-left: 0px; min-height: auto;font-size: 1.1rem;} dl.rinenList dd span{ display: inline-block;font-size: 0.9rem;} dl.rinenList dd:not(:last-child){ margin-bottom: 10vw;} body.about_freelance section#rinen img.ship{ position: absolute; right: 50%; bottom: 10vw; width: 60vw; height: auto; transform: translate(50% , 0);} dl.rinenList2{} dl.rinenList2 dt{margin-bottom: 2vw;} dl.rinenList2 dt img{ width:auto; height:7vw; margin-bottom: 2vw;} dl.rinenList2 dd:not(:last-child){ margin-bottom: 10vw;} dl.rinenList2 dd img{ width:100%; height: auto;} #rinen3 .readTitle{ width: 100%; height: auto; margin-bottom: 5vw;} #rinen3 .read{margin-bottom: 30vw;} #rinen3 .imageWfix{ width: 100%; position: relative; padding:25vw 0 30vw 0;} #rinen3 .about_freelance_rinen_3_image{ width: 100%; height: auto; transform: translate(0px,0) scale(1.6);} } /* ▲ max-width:750px */ @keyframes arrowdown { 0% { bottom: 10px;} 10% { bottom: 0px;} 30% { bottom: 10px;} 40% { bottom: 0px;} 50% { bottom: 10px;} 90% { bottom: 10px;} 100% { bottom: 10px;} }