@charset 'utf-8'; /*文字コード指定*/
/*======================================================
  フォームの初期化
======================================================*/
html, body, 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, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table.table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}
ol, ul {list-style: none;}
table.table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

body {
/*	width:100%;*/
	max-width: 1280;
	margin-left:auto;
	margin-right:auto;
	background:#eee;
	font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Osaka, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro'; /*フォントの種類指定(左から優先順位)*/
	color: #888; /*文字色指定*/
}
a {
	color: #333; /*文字色指定*/
}
a:hover {
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
}

/*======================================================
  ＴＰＯ画像の表示エリア
======================================================*/
.top img {
	width:100%;
	height:auto;
}
/*======================================================
  ヘッダー設定
======================================================*/
/* ヘッダー全体 */
#header-wrapper {
	width: 100%;
	border-bottom: 1px solid #fff;
	background: #fff;
}

/* ヘッダー */
.header {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
    flex-direction: row;
	justify-content:space-between;
	width: 100%;
}

/* ロゴ */
.header__logo {
	padding: 10px 0 0 10px;
}
.header__logo img {
	width: 400px;
}
.header__logo-link {
	color: #333;
	font-size: 11px;
	font-size: 1.1rem;
	font-weight: normal;
}
/* タイトル */
.header__title {
	padding-top:20px;
	font-size:35px;
	font-weight:bold;
	text-align: center;
	line-height:1.4;
	letter-spacing: 0.2em;	/* 文字間隔 */
}
/* ロゴ+ラベル+電話番号+受付時間 */
.header__info {
	margin-right: 50px;
	text-align:right;
	font-size:14px;
}
.header__info .header__com {
	font-size: 1.2em;
}
.header__info .header__open {
	font-size: 1.2em;
}
.header__info .header__tel {
	padding:3px;
	font-size: 1.5em;
	font-weight:bold;
}
.header__info span {
	font-size:.6em;
	font-weight:normal;
}
.header__tel:before {
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	font-weight: 900;
	padding-right : 5px;/*文字との隙間*/
	color: #f89174;/*アイコンの色*/
}
/************************************************************************
	タブの設定
************************************************************************/ 
/* タブ機能の掲載領域の装飾 */
.tabbox {
	margin: 0px;
	padding: 1em;
	background-color: #f8f8ff;
	border-radius: 0.75em 0.75em 0px 0px;
}

/* タブ機能を制御するラジオボタン(非表示にする) */
.tabbox input[type=radio] { display: none; }

/* タブ(共通装飾＋非選択状態の装飾) */
.tab {
   display: inline-block;
   border-width: 1px 1px 0px 1px;
   border-style: solid;
   border-color: black;
   border-radius: 0.75em 0.75em 0px 0px;
   padding: 0.75em 1em;
   color: black;
   background-color: #e0e0e0;
   font-weight: bold;
}

/* タブにマウスポインタが載った際の装飾 */
.tab:hover {
   background-color: #ccffcc;
   color: green;
   cursor: pointer;
}

/* チェックが入っているラジオボタンの隣にあるタブの装飾(＝選択状態のタブ) */
input:checked + .tab {
   color: red;
   background-color: #ffffcc;
   position: relative;
   z-index: 10;
}

/* タブの中身(共通装飾＋非選択状態の装飾) */
.tabcontent {
   display: none;
   border: 1px solid black;
   margin-top: -1px;
   padding: 1em;
   position: relative;
   z-index: 0;
   background-color: #ffffcc;
}

/* チェックが入っているラジオボタンに対応するタブの中身を表示する */
#tabcheck1:checked ~ #tabcontent1 { display: block; }
#tabcheck2:checked ~ #tabcontent2 { display: block; }
#tabcheck3:checked ~ #tabcontent3 { display: block; } 

/************************************************************************
	見出しスタイル
************************************************************************/ 
h1 {
	position: relative;
	color: white;
    margin-top: 0.2em;
	padding:0.5em 0.5em 0.5em 2em;
/*	background-color: #102672; */
	background-color: #333;
    font-weight: bold;
	font-size: 18px;
	font-size: 1.8rem;
	height:40px;
}

h1::after {
	position: absolute;
	top: 50%;
	left:1em;
	transform:translateY(-50%);
	content: '';
	width: 13px;
	height:13px;
	background-color: white;
	border-radius:100%;
}

h2 {
    margin: 0.5em 0;
	padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
	color: #6b6363;/*文字色*/
	background: #f4f4f4;/*背景色*/
	border-left: solid 5px #7db4e6;/*左線*/
	border-bottom: solid 3px #d7d7d7;/*下線*/
    font-weight: bold;
	font-size: 14px;
	font-size: 1.4rem;
	height:30px;
}

h3 {
	position: relative;
    margin: 0.5em 0;
	padding: 0.5em;/*文字周りの余白*/
	border-bottom: 4px solid #DDD;
    font-weight: bold;
	font-size: 14px;
	font-size: 1.4rem;
	height:30px;
}
h3::after {
	position: absolute;
	content: " ";
	border-bottom: solid 4px #446689;
	bottom: -4px;
	width:10%;
	display: block;
}

textarea {
	font-size: 18px;
}

/************************************************************************
	テーブルスタイル
************************************************************************/ 
.registrationhistory_frame {
	display: none;
	position: relative;
	margin-bottom: 0.2em;
	width: 100%;
	height: 200px;
	overflow-y: scroll;
}

table {
    border-collapse:  collapse; /* セルの線を重ねる */
}
 
tr:nth-child(odd) {
    background-color:  #ddd;    /* 背景色指定 */
}
 
th,td {
    padding: 5px 10px;          /* 余白指定 */
}

.registrationhistory_frame table th:nth-child(1) {
	width: 10%;
}
.registrationhistory_frame table th:nth-child(2) {
	width: 20%;
}
.registrationhistory_frame table th:nth-child(3) {
	width: 15%;
}
.registrationhistory_frame table th:nth-child(4) {
	width: 30%;
}
.registrationhistory_frame table th:nth-child(5) {
	width: 25%;
}
/************************************************************************
	タグ見出しスタイル
************************************************************************/ 
.tag {
	position: relative;
	margin: 0 -5px;
	padding: 0.5rem 1rem;
	background: #f00;
	z-index: 600;
    text-align: center;
    color: #fff;
}
  
.tag:before,
.tag:after {
	position: absolute;
	content: '';
}
  
.tag:before {
	bottom: -10px;
	left: 0;
	width: 0;
	height: 0;
	border-top: 10px solid #c00;
	border-left: 10px solid transparent;
}
  
.tag:after {
	right: 0;
	bottom: -10px;
	width: 0;
	height: 0;
	border-top: 10px solid #c00;
	border-right: 10px solid transparent;
}

#contents p{
  position:absolute;
  line-height:30px;
  width:600px;
  text-align:center;
  top:50%;
  left:50%;
  margin-top:-15px;
  margin-left:-300px;
}

/************************************************************************
	入力項目
************************************************************************/ 
.contents-form {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 18px;
  font-family: sans-serif;
}
.contents-form .item {
  display: block;
  overflow: hidden;
  margin-bottom: 10px;
}
.contents-form .item.no-label {
  padding: 5px 0px 5px 60px;
}
.contents-form .item .label {
  float: left;
  padding: 5px 10px;
  margin:0;
  width: 200px;
}
.contents-form .item .radio-group{
  padding: 5px 0px 5px 60px;
}
.contents-form .item input[type=text],
.contents-form .item input[type=email],
.contents-form .item textarea {
  display: block;
  font: 15px/24px sans-serif;
  box-sizing: border-box;
  padding: 0.3em;
  transition: 0.3s;
  letter-spacing: 1px;
  color: black;
  border: 1px solid #ffffff;
  box-shadow: 1px 1px 2px 0 #707070 inset;
  border-radius: 4px;
}
.contents-form .item ::placeholder {
  color: #ccc;
}
.contents-form .item textarea {
  outline: none;
  border: 1px solid #ccc;
  resize: vertical;
}

.input_wrap {
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-justify-content:space-around;
    -moz-justify-content:space-around;
    justify-content:space-around;
}
.input_frame {
	position: relative;
	background: #888;
	margin: 1% 0 1% 0;
	padding: 10px 20px;
}
.input_frame label {
	/* ボタン部分の見た目（任意） */
	position: relative;
	background: #888;
	color:#fff;
	font-size: 18px;
	padding: 10px 20px;
	border-radius: 4px;
	transition: all 0.3s;
}

.input_item {
	margin: 10px 1%;
}
.input_item input,.input_item textarea {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	padding: 0.3em;
	transition: 0.3s;
	letter-spacing: 1px;
	color: black;
	border: 1px solid #ffffff;
	box-shadow: 1px 1px 2px 0 #707070 inset;
	border-radius: 4px;
}
.ef input:focus, .ef textarea:focus {
	outline: none;
	box-shadow: inset 1px 1px 2px 0 #c9c9c9;
}

.center{
	text-align: center;
}

#file-input {display: none;}

input[required] {
    background-color: rgb(170, 152, 155);
}
input[readonly] {
    background-color:#ccc;
}

/************************************************************************
	入稿画像表示
************************************************************************/ 
#preview, #preview_pdf, #preview_ai, #uploadpreview, #uploadpreview_pdf, #uploadpreview_ai {
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
	padding:10px;
}

#preview img, #uploadpreview img {
	width: 300px;
	height:auto;
	padding:10px;
	background: url("../images/icon_loader_a_ww_01_s1.gif") center center no-repeat;
}

#preview_pdf embed, #uploadpreview_pdf embed {
	padding:10px;
	background: url("../images/icon_loader_a_ww_01_s1.gif") center center no-repeat;
}

#preview_ai img, #uploadpreview_ai img {
	width: 300px;
	height:auto;
	padding:10px;
}

/************************************************************************
	分納配送先の設定
************************************************************************/ 
#distribute-table {
	width: 100%;
	font-size: 14px;
	border-collapse: collapse;
}
  
#distribute-table th,
#distribute-table td {
	border: 1px solid #ccc;
	padding: 12px 8px;
}
  
#distribute-table th {
	background-color: #888;
	color: #fff;
}
  
#distribute-table input,
#distribute-table select {
	cursor: pointer;
}
  
#distribute-table i {
	font-size: 18px;
	color: #7cb342;
}
  
#distribute-table input[type='button'] {
	background-color: #f0f0f0;
	border: 1px solid #aaa;
	border-radius: 2px;
	box-shadow: 0 1px 2px #999;
	font-size: 14px;
}
  
#distribute-tbody tr:first-child {
	display: none;
}
/************************************************************************
	実行中フォーム
************************************************************************/ 
#loading {
	display: table;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #fff;
	opacity: 0.8;
}
   
#loading .loadingMsg {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding-top: 140px;
	background: url("../images/icon_loader_a_ww_01_s1.gif") center center no-repeat;
}

/************************************************************************
	ボタン
************************************************************************/ 
.btnframe {
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-justify-content:space-around;
    -moz-justify-content:space-around;
    justify-content:space-around;	
}
.btn {
	padding: 0.25em 1.5em;
	text-decoration: none;
    font-size: 1.1em;
	color: #FFF;
	background: #fd9535;/*色*/
	border-radius: 30px;/*角の丸み*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
	font-weight: bold;
	border: solid 2px #d27d00;/*線色*/
	cursor: pointer;
}
  
.btn:active {
	/*押したとき*/
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

/************************************************************************
	履歴
************************************************************************/ 
.history_img {
	width:100px;
	height:auto;
}

/************************************************************************
	ＢＯＸ
************************************************************************/ 
.frame {
	display: block;
	width: auto;
	height: auto;
	margin: 30px auto 20px;
	padding: 30px 20px;
	border: 3px solid #aaa;
	position: relative;
	border-radius: 3px;
	background-color: #fff;
}
.frame-title {
	position: absolute;
	top: -1;
	left: -1;
	padding: 0 5px;
	background-color: #fff;
}
.frame-title .fa {
	margin-right: 5px;
}

/*　注意 */
.caution {
	background-color: #ff4500;
	border: 2px solid #ff4500;
	color: #fff;
}
.frame-red {
	border-color: #ff4500;
}
/*　情報 */
.infomation {
	background-color: #888;
	border: 2px solid #888;
	color: #fff;
}
.frame-grey {
	border-color: #888;
}

.hitokoto{
	background: rgba(215, 253, 205, 0.61);
	margin: 2em 0;
	padding: 25px;
	border-radius: 10px;
}
.hitokoto-circle1{
	font-size: 16px;
	line-height: 1.5;
	position: absolute;
	margin-top: -37px;
	font-weight: bold;
	color: #fff;
/*	background-color:#4caf50; */
	border-radius: 50%;
	text-align: center;
	width: 24px;
	height: 24px;
}
.hitokoto-circle1:after{
	content: "と";
	position: absolute;
	margin-top: .2em;
	font-weight: bold;
	color: #fff;
/*	background-color:#4caf50; */
	border-radius: 50%;
	text-align: center;
	width: 24px;
	height: 24px;
}
.hitokoto-circle2:before{
	content: "";
	position: absolute;
	top: 100%;
	margin-left: -12px;
	border: 5px solid transparent;
	border-top: 10px solid #4caf50;
	-ms-transform: rotate(-20deg);
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg);
}
.hitokoto-circle2{
	position: absolute;
	font-size: 16px;
	line-height: 1.5;
	margin-top: -37px;
	margin-left: 40px;
	font-weight: bold;
	color: #fff;
/*	background-color:#4caf50; */
	border-radius: 50%;
	text-align: center;
	width: 24px;
	height: 24px;
}
.hitokoto-circle2:after{
	content: "と";
	position: absolute;
	margin-top: .2em;
	font-weight: bold;
	color: #fff;
/*	background-color:#4caf50; */
	border-radius: 50%;
	text-align: center;
	width: 24px;
	height: 24px;
}
.hitokoto p{
	margin: 0;
	padding: 0;
}

.colorbox_frame {
	margin: 20px 0;
}

/*(ex.)  <span class="colorbox">NEW!</span> */
.colorbox {
	margin: 0 0 0 10px;
	padding:2px 10px;
	background-color: red;
	color: #ffffff;
	font-weight: bold;
	border-radius: 4px;
}
/************************************************************************
	ラインマーカー
************************************************************************/ 
.maker{
	margin: 2em 0 1em 0;
	font-weight: bold;
	background: linear-gradient(transparent 60%, #adff2f 0%);
}
.lc_fff{
	background: linear-gradient(transparent 60%, #ffff 0%);
}
.lc_red{
	background: linear-gradient(transparent 60%,red 0%);
}
/************************************************************************
	装飾
************************************************************************/ 
/*  文字の装飾 */
.bold {
	font-weight:bold;
}
.check:before {
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	font-weight: 900;
	padding-right: 5px;
	color: #f89174;/*アイコンの色*/
}
.f35b{
	font-size:35px;
	font-weight:bold;
	text-align: center;
}

.shadow{
	text-shadow: 0.1em 0.1em 0.1em 000;
}
.shadow-ccc{
	text-shadow: 0.1em 0.1em 0.1em #ccc;
}
.underline {
	background: linear-gradient(transparent 70%, #fecb81 70%);
}
.is-underline {
    text-decoration: underline;
}

/*  文字色 */
.c_red {
	color: red;
}
.c_black {
	color: black;
}
.c_white {
	color: white;
}
.c_green {
	color: green;
}
.c_orange {
	color: orange;
}
.c_red {
	color: red;
}

/*  背景色 */
.bc_blue {
	background-color: blue;
}
.bc_yellow {
	background-color: yellow;
}
.bc_green {
	background-color: green;
}
.bc_orange {
	background-color: orange;
}

/*  サイズ */
.w70 {
	width: 70px;
}
.w80 {
	width: 80px;
}
.w90 {
	width: 90px;
}
.w100 {
	width: 100px;
}
.w200 {
	width: 200px;
}
.w300 {
	width: 300px;
}
.w400 {
	width: 400px;
}
.w500 {
	width: 500px;
}
.w600 {
	width: 600px;
}
.w700 {
	width: 700px;
}
.w800 {
	width: 800px;
}
.w900 {
	width: 900px;
}
.w1000 {
	width: 1000px;
}
.wfull {
	width: 100%;
}
/************************************************************************
	ページトップに戻るボックスの設定
************************************************************************/ 
#topbutton {
	/* ▼ボタンの表示位置を画面の右下に固定 */
	position: fixed; /* ←表示場所を固定 */
	bottom: 18px;   /* ←下端からの距離 */
	right: 18px;    /* ←右端からの距離 */
	width: 7em;     /* ←横幅 */
 
	/* ▼最初は非表示にしておく */
	display: none;
 
	/* ▼配色・配置・文字の装飾など */
	background-color: #6b6363; /* ←背景色 */
	opacity: 0.75;        /* ←透明度 */
	border-radius: 24px;  /* ←角丸の半径 */
	text-align: center;  /* ←文字の位置 */
	font-size: 120%;     /* ←文字サイズ */
	font-weight: bold;   /* ←文字の太さ */
	margin: 0px;          /* ←外側の余白 */
	padding: 10px;       /* ←内側の余白 */
}
#topbutton a {
	/* ▼リンクの装飾 */
	color: white;          /* ←文字色 */
	text-decoration: none; /* ←下線なし */
}
#topbutton a:hover {
	/* ▼マウスが載ったときの装飾 */
	color: orange;              /* ←文字色 */
	text-decoration: underline; /* ←下線あり */
}

/* スマートフォン用 */
@media only screen and (max-width:640px){
	.header {
		flex-direction: column;
	}
	.header__info {
		display: none;		
	}
	.header__title {
		padding: 10px 0;
		font-size:16px;
	}
	#header-wrapper h1,.header__logo,.header__title,.header__info{
		text-align:center;
	}
	.header__logo,.header__info{
		margin:5px 0 0 0;
	}

	h1 {
		padding:0.1em 0.1em 0.1em 0.5em;
		font-size: 12px;
		font-size: 1.2rem;
		height:auto;
	}

	h2,h3 {
		font-size: 11px;
		font-size: 1.1rem;
		height:auto;
	}
	
	body {
		width:100%;
	}
	.input_wrap {
		flex-direction: column;
	}
	.input_item input,.input_item textarea {
		width:100%;
		margin-top: 10px;
	}

	.input_frame label {
		font-size: 16px;
	}
	
	.contents-form {
		font-size: 12px;
    }
    .contents-form .item input[type=text],
	.contents-form .item input[type=email],
	.contents-form .item textarea {
		width: 100%;
	}

	#drop-zone p{
		font-size:20px;
	}
}
.divide {
	/* ▼最初は非表示にしておく */
	display: none;
}