@charset "utf-8";
/*------------------------------------------------------------
	デフォルトスタイル	全ページ共通css
------------------------------------------------------------*/

/**** フォントサイズ　*************

基本を12pxに、サイズは％指定。

====偶数====　　　====奇数====
■10px = 84%      ■11px = 92%
■12px = 100%     ■13px = 109%
■14px = 117%     ■15px = 125%
■16px = 134%     ■17px = 142%
■18px = 150%     ■19px = 159%
■20px = 167%     ■21px = 175%
■22px = 184%     ■23px = 192%
■24px = 200%     ■25px = 209%
■26px = 217%     ■27px = 226%

**********************************/

html,
body { margin: 0; padding: 0;}
body {
	font-size: 76%;
	background: #fff;
	-webkit-text-size-adjust: 100%;
}

html { font-size: 100%;}

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure, figcaption {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	color:#333333;
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, 'メイリオ', Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.5;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,main {
    display: block;
}

blockquote,
q { quotes: none;}

a {
	text-decoration: none;
	outline: none;
}

ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

del { text-decoration: line-through;}
abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

input,
select,
textarea {
	font-size: 100%;
	vertical-align: middle;
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, 'メイリオ', Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}

input[type=text],
input[type=tel],
input[type=password],
textarea{ -webkit-appearance:none;}

input[type=checkbox],
input[type=radio]{
	position:relative;
	top:-1px;
}

ul { list-style-type: none;}
img { vertical-align: middle;}

.img-responsive{
	width:100%;
	height:auto;
}

.opacity { transition:all 0.2s ease-out;}
.opacity:hover { opacity: .8;}

.clear { clear: both;}
.clearfix { width: 100%;}
.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	visibility:hidden;
	height:0.1px;
	font-size:0.1em;
	line-height:0;
}

.fl { float: left;}
.fr { float: right;}

.txtl { text-align: left;}
.txtr { text-align: right;}
.txtc { text-align: center;}

strong,
strong *,
.fwb { font-weight: bold;}

.clrr { color: #FF0000;}
.clrb { color: #333;}
.clrw { color: #fff;}

.il { display: inline;}
.bl { display: block;}
.no { display: none;}

.li2 { line-height: 2;}

/* margin */
.mt10 { margin-top: 10px;}
.mt20 { margin-top: 20px;}
.mt30 { margin-top: 30px;}

.mr10 { margin-right: 10px;}
.mr20 { margin-right: 20px;}
.mr30 { margin-right: 30px;}

.mb10 { margin-bottom: 10px;}
.mb20 { margin-bottom: 20px;}
.mb30 { margin-bottom: 30px;}

.ml10 { margin-left: 10px;}
.ml20 { margin-left: 20px;}
.ml30 { margin-left: 30px;}

/* padding */
.pt10 { padding-top: 10px;}
.pt20 { padding-top: 20px;}
.pt30 { padding-top: 30px;}

.pr10 { padding-right: 10px;}
.pr20 { padding-right: 20px;}
.pr30 { padding-right: 30px;}

.pb10 { padding-bottom: 10px;}
.pb20 { padding-bottom: 20px;}
.pb30 { padding-bottom: 30px;}

.pl10 { padding-left: 10px;}
.pl20 { padding-left: 20px;}
.pl30 { padding-left: 30px;}

/* font-size */
.font10 { font-size: 84%;}
.font11 { font-size: 92%;}
.font12 { font-size: 100%;}
.font13 { font-size: 109%;}
.font14 { font-size: 117%;}
.font15 { font-size: 125%;}
.font16 { font-size: 134%;}
.font17 { font-size: 142%;}
.font18 { font-size: 150%;}
.font19 { font-size: 159%;}
.font20 { font-size: 167%;}
.font21 { font-size: 175%;}
.font22 { font-size: 184%;}
.font23 { font-size: 192%;}
.font24 { font-size: 200%;}
.font25 { font-size: 209%;}
.font26 { font-size: 217%;}
.font27 { font-size: 226%;}



/*------------------------------------------------------------
    スタイル
------------------------------------------------------------*/

.inner {
	width:auto;
	max-width: 980px;
	margin: 0 auto;
	padding-right:24px;
	padding-left:24px;
	position:relative;
}

.flex{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	   -ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-end{
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.flex-center{
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.flex-left{
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.flex-align{
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
}

.flex-align-bottom{
  -webkit-box-align: end;
     -ms-flex-align: end;
        align-items: flex-end;
}

.flex-column{
 -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
}

.flex-reverse{
 -webkit-box-orient: horizontal;
  -webkit-box-direction: row-reverse;
     -ms-flex-direction: row-reverse;
         flex-direction: row-reverse;
}

.hover figure{ overflow:hidden;}

.hover img{ transition:all 0.4s ease-out;}

.hover:hover img{ transform:scale(1.1);}

.tel-link a{ color:inherit;}

/*------------------------------------------------------------
    ヘッダー
------------------------------------------------------------*/

#header {
	width:100%;
	padding:15px 0 10px;
	overflow:hidden;
	border-top:5px solid #0074C1;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
	position:relative;
	z-index:10;
}

#logo{
	width:202px;
	height:auto;
}


/*------------------------------------------------------------
    コンテンツ
------------------------------------------------------------*/

.section{
	width:100%;
	padding:60px 0;
	background:#DFF0FF;
}

.section.bg-white{ background:#fff;}

.sectionHd{
	width:auto;
	padding:0 24px;
	margin-bottom:40px;
	text-align:center;
	color:#044A89;
	font-weight:bold;
	font-size:234%;
}

.requestBox{
	width:auto;
	padding:60px 24px;
	text-align:center;
}

.requestBox.first{
	color:#fff;
	background:#0068B5;
}

.requestBox.last{ padding:40px 24px 100px;}

.requestBox dt{
	font-size:134%;
	font-weight:bold;
	color:inherit;
}

.button{
	width:100%;
	max-width:480px;
	height:60px;
	margin:10px auto 0;
}

.button a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-size:200%;
	font-weight:bold;
	text-align:center;
	line-height:60px;
	background: #FF821B;
	box-shadow: 0px 2px 6px rgba(33, 33, 33, 0.25);
	border-radius: 4px;
	transition:all 0.2s ease-out;
}

.button a:hover{ background:#FFA643;}
.button a:active{ background:#ED6800;}

#mainHd.inner{ max-width:966px;}


/* クラウドワークスの翻訳なら */

.meritItem{
	width:calc(33.333333% - 14px);
	padding:24px;
	background:#fff;
	box-sizing:border-box;
}

.meritHd{
	width:100%;
	height:60px;
	text-align:center;
	color:#044A89;
	font-size:167%;
	font-weight:bold;
}

.meritImg{
	width:100px;
	margin:24px auto 26px;
}

.txt{ font-size:134%;}


/* さまざまなシーンで対応できる翻訳領域 */

#scene.inner{
	max-width:784px;
	overflow:hidden;
}

.sceneList{
	width:auto;
	margin:-22px -45px 0;
	overflow:hidden;
}

.sceneItem{
	padding:22px 45px 0;
	text-align:center;
}

.sceneImg{
	display:block;
	width:124px;
	height:124px;
	line-height:124px;
	background:#DFF0FF;
	border-radius:50%;
	margin:0 auto 10px;
}

.sceneTxt{
	color:#044A89;
	font-size:167%;
	font-weight:bold;
}


/* こんな翻訳者が対応します */

.personItem{
	width:calc(33.33333% - 36px);
	padding-top:10px;
}

.personHd{
	width:180px;
	height:180px;
	margin:0 auto 20px;
	text-align:center;
	border-radius:50%;
	background:#fff;
}

.personHd-img{
	width:79px;
	height:104px;
	margin:0 auto 10px;
}

.personHd-ttl{
	color:#044A89;
	font-size:200%;
	font-weight:bold;
	width:100%;
}

#erea{
	width:100%;
	max-width:1440px;
	margin:-50px auto 0;
	background:url(../img/bg-area-pc.png) no-repeat 50%;
	background-size:cover;
}

#erea + .sectionHd{ margin:-1em 0 0;}



/* 発注までの流れ */

.flowItem{ width:calc(25% - 63px);}

.flowHd-en{
	font-family:Arial, Helvetica, sans-serif;
	color:#044A89;
	font-size:184%;
	font-weight:bold;
	text-align:center;
}

.flowHd-jp{
	font-size:167%;
	font-weight:bold;
	text-align:center;
}

.flowImg{
	background:#fff;
	border-radius:50%;
	margin:10px auto;
	position:relative;
}

.flowItem:not(:last-child) .flowImg::after{
	display:block;
	content:"";
	width:19px;
	height:29px;
	background:url(../img/icon-arrow.svg) no-repeat;
	background-size:cover;
	position:absolute;
	top:50%;
	right:-51px;
	transform:translateY(-50%);
}

/* ご利用企業事例 */

#exampleInfo{ width:42.85714285714286%;}
#exampleImg{ width:51.02040816326531%;}

#exampleHd-ttl{
	color:#044A89;
	font-size:200%;
	font-weight:bold;
}

#exampleHd-txt{
	font-size:167%;
	font-weight:bold;
	padding:10px 0 20px;
}


/* よくある質問 */

.faqItem + .faqItem{ margin-top:40px;}

.faqHd{
	width:auto;
	margin-bottom:16px;
	padding:12px 16px 12px 0;
	background:#0068B5;
}

.faqStatus{
	width:64px;
	text-align:center;
	font-size:200%;
	line-height:24px;
	font-weight:bold;
	color:#044A89;
}

.faqTxt{ width:calc(100% - 64px);}

.faqHd .faqStatus{ color:#fff;}

.faqHd .faqTxt{
	color:#fff;
	font-size:167%;
	line-height:24px;
	font-weight:bold;
}


/*------------------------------------------------------------
    フッター
------------------------------------------------------------*/

#pagetop{
	display:none;
	width:60px;
	height:60px;
	position:fixed;
	right:24px;
	bottom:24px;
	z-index:500;
}

#pagetop a{
	display:block;
	width:100%;
	height:100%;
	background:rgba(52,141,211,.7);
	transition:background 0.2s ease-out;
	position:relative;
}

#pagetop a:hover{ background:#348DD3;}

.arrow-box{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	transform:rotate(-90deg);
}

.arrow-right{
	width:10px;
	height:18px;
	fill:none;
	position:absolute;
	margin:auto;
	top:0;
	right:0;
	bottom:0;
	left:0;
	stroke:#fff;
	stroke-width:2px;
}

#footer{
	width:100%;
	padding-top:26px;
	background:#005CA3;
}

.ftNaviItem{ margin:0 6px;}

.ftNaviItem a{ color:#fff;}
.ftNaviItem a:hover{ text-decoration:underline;}

#copyright{
	width:auto;
	margin-top:20px;
	text-align:center;
	padding:15px;
	border-top:1px solid #005CA3;
	background:#005798;
}

#copyright small{
	font-size:84%;
	color:#fff;
}

/*------------------------------------------------------------
    MediaQuery
------------------------------------------------------------*/

/* TABLET */
@media screen and (min-width: 789px){

.tb-show{ display:none;}

}

@media screen and (max-width: 788px){

.tb-hide{ display:none;}

.meritItem{ width:100%;}
.meritItem + .meritItem{ margin-top:24px;}
.meritHd{ height:auto;}

#scene.inner{ max-width:600px;}

.sceneList{ margin:-22px -30px 0;}
.sceneItem{
	width:33.333333%;
	padding:22px 22px 0;
	box-sizing:border-box;
}

.flowItem{
	width:100%;
	max-width:500px;
	margin:0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flowItem:not(:last-child){
	margin-bottom:69px;
	position:relative;
}

.flowItem:not(:last-child)::after{
	display:block;
	content:"";
	width:29px;
	height:19px;
	background:url(../img/icon-arrow-sp.svg) no-repeat;
	background-size:cover;
	position:absolute;
	bottom:-44px;
	left:50%;
	transform:translateX(-50%);
}

.flowHd{
	width:calc(100% - 140px);
	height:140px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
	-webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flowImg{
	width:140px;
	margin:0;
}

.flowItem:not(:last-child) .flowImg::after{ display:none;}

.flowImg + .txt{ margin-top:20px;}





}


/* SP */
@media screen and (min-width: 561px){

.sp-show{ display:none;}

}

@media screen and (max-width: 560px){

.sp-hide{ display:none;}

#header > .inner{ padding:0 10px;}
#logo{ width:177px;}

.requestBox{ padding:40px 24px;}
.requestBox dt{ font-size:117%;}

.button{ margin-top:8px;}
.button a{ font-size:134%;}

.sectionHd{
	font-size:184%;
	margin-bottom:24px;
}

.meritItem{ padding:24px 16px;}
.meritHd{ font-size:150%;}

.txt{
	font-size:117%;
	line-height:1.7;
}

#scene.inner{ padding:0 10px;}

.sceneList{
	margin:0;
	padding-top:16px;
}

.sceneItem{
	width:50%;
	padding:0;
}

.sceneItem:nth-child(n+3){ margin-top:24px;}

.sceneImg{ margin-bottom:8px;}
.sceneTxt{
	font-size:150%;
	line-height:2.3;
}

#section-person{ padding-bottom:40px;}

.personItem{
	width:100%;
	padding-top:16px;
}

.personItem + .personItem{ padding-top:40px;}

.personHd{
	width:160px;
	height:160px;
	margin-bottom:24px;
}

.personHd-img{
	width:68px;
	height:90px;
}

.personHd-ttl{ font-size:167%;}

.flowItem:first-child,
.faqItem:first-child{ padding-top:16px;}

#erea{
	margin:0;
	background-image:url(../img/bg-area-sp.png);
}

#exampleInfo{
	width:100%;
	padding-top:16px;
}

#exampleHd-ttl{ font-size:167%;}
#exampleHd-ttl::after{
	display:block;
	content:"";
	width:100%;
	margin-top:20px;
	padding-top:70.64220183486239%;
	background:url(../img/example-sp.png) no-repeat 50%;
	background-size:cover;
}

#exampleHd-txt{
	padding:20px 0 8px;
	font-size:134%;
}

.faqHd{ margin-bottom:24px;}

.faqStatus{
	width:48px;
	font-size:184%;
}

.faqTxt{ width:calc(100% - 48px);}

.faqHd .faqTxt{ font-size:134%;}

.requestBox.last{ padding:0 24px 60px;}


}

@media screen and (max-width: 340px){

.sceneTxt{ font-size:134%;}

}