* {margin:0; padding:0;}

body {margin:0; padding:0; font-size:18px; line-height:1.4; background:#fff; font-family:"Trebuchet MS", Verdana, sans-serif;}
@media screen and (max-width: 480px) {
	body {font-size:14px;}
}
/* 一般タグの設定 */
table {width:100%; border-collapse:collapse;}
table td {vertical-align:top;}
th { background:url(header.gif) repeat-x bottom left; color:#fff; padding:3px; vertical-align:middle;}
th a, th a b {color:#ffcc00; text-decoration:none;}

h1,h2,h3,h4,h5,p,b,i,u,form {margin:0.5em 0;}

h1 {
  color: #ff7700;
  text-align:center;
  border: 3px solid #ff7700;
  width:100%;
  background-color: #fff;
  margin-top: 0px;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 480px) {
  h1 {width:98%;}
}
h2 {
  padding: 0.3rem 2rem;
  border-left: 12px double #db0000;
  background: #f4f4f4;
}

a:link {color: #000}   
a:visited {color: #000}
a:hover {color: #898989}  
a:active {color: #000} 
a.white:link, a.white:visited {color:#fff} a.white:hover {color:#EFFF00}


hr {height:0; border-bottom:1px solid #ddd;}

input.formButton {}

img {border:0}
@media screen and (max-width: 480px) {
	img {
  width: 100%;
}
}

#container {width:auto; margin:0 auto; text-align:left;}
@media screen and (max-width: 480px) {
	#container {width:auto; margin:0 auto; text-align:left;}
}

#header {height:55px; width:auto; border-top: solid 5px #ff7700;/*上線*/}
#header .title {padding:5px 0 0 15px; float:left; width:auto; height:50px; color:#000; font-size:35px; background-color: #fff;}
#header .title a {color:#ff8e2b; font-weight:bold; font-size: 40px; text-decoration:none;}

/*ハンバーガーアイコン*/
.btn-burger {
    cursor: pointer;
    display: block;
    width: 56px;
    height: 60px;
    position: absolute;
    top: 5px;
    right: 10px;
}
/*ハンバーガーアイコンを作る三本線*/
.icon, .icon:before, .icon:after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 2px; /*線の太さ*/
    width: 35px; /*線の長さ*/
    background-color: #444;
    border-radius: 2px;
    display: block;
    content: '';
    cursor: pointer;
    margin: auto;
}
/*三本線の間隔*/
.icon:before {
  top: 20px;
}
.icon:after {
  top: -20px;
}
/*チェックボックス非表示*/
.nav-toggle {
    display: none;
}
/*アイコンをクリックしたら*/
.nav-toggle:checked ~ .btn-burger .icon {
    background: transparent;
}
.nav-toggle:checked ~ .btn-burger .icon:before {
    transform: rotate(-45deg);
    top: 0;
}
.nav-toggle:checked ~ .btn-burger .icon:after {
    transform: rotate(45deg);
    top: 0;
}
.icon,
.icon:before,
.icon:after {
    transition: all .34s;
}
/*表示されるメニューの中身*/
.nav {
    background-color: #ff7700;
    
}
.nav-list a {
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    text-shadow: 1px 2px 3px #000;
    text-align: center;
}
.nav-list {
    list-style: none;
    display: none;
    margin: 0;
    padding-left: 20px;
}
.nav-list li {
    margin: 0;
    padding: 10px;
}
.nav-toggle:checked ~ .nav .nav-list {
    display: block;
}
/*メインイメージ*/
.top {
    height: 200px;
    margin-bottom: 50px;
    background-color: #f0f8ff;
}
/* --------------------------------------------------
  幅768px以上のスタイル指定 ここから
-------------------------------------------------- */
@media screen and (min-width: 768px) {
/* ハンバーガーボタン */
.btn-burger {
    display: none;  /*768px以上では使用しない */
}
header {
    padding: 30px 0 0;
}
.logo {
    width: auto;
    margin: 0 0 20px;
    padding: 0;
    text-align: center;
}
.nav-toggle:checked ~ .nav .nav-list {
    display: none;
}
.nav {
    height: 55px;
    margin-bottom: 2px;
}
.nav-list {
    display: flex;
    justify-content: center;
    height: 55px;
    align-items: center;
    font-size:18px;
}
.nav-list a {
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    text-shadow: 1px 2px 3px #000;
}
.nav-list li {
    width: 200px;
}
.nav-list li:hover {
    background:#ff8e2b;
}
.nav-list li:not(:last-child) {
    border-right: 1px solid #fff;
}
}

#main_content {background:#fff; width:100%; max-width: 1300px; padding-top:25px; margin-left: auto; margin-right: auto;}
@media screen and (max-width: 480px) {
#main_content {background:#fff; width:auto; padding-top:0px;}
}

/* 左ブロックの定義 */
#leftcolumn {width:175px; padding:0 10px;}
@media screen and (max-width: 479px) {
#leftcolumn {display: none;}
}

/*左ブロックタイトルの定義*/
#leftcolumn .blockTitle {padding:5px 0; color:#000; font-weight:bold;}
#leftcolumn .blockTitle img {vertical-align:0px;}
#leftcolumn .blockTitle {
  background: #6fa1c7;/*背景色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
  font-size:30px;
  font-weight: bold;
  font-size: 16px;
  font-weight:bold; 
}
/*左ブロックコンテンツの定義*/
#leftcolumn .blockContent {padding:5px; border-bottom: solid 1px #bfbfbf; border-left: solid 1px #bfbfbf; border-right: solid 1px #bfbfbf; margin-bottom: 5px; margin-top: 2px;}

/* メインメニューの定義 */
#mainmenu a {display:block; margin:0px; padding:4px;}
#mainmenu a:hover {}
#mainmenu a.menuTop {padding-left:3px;}
#mainmenu a.menuMain {padding-left:3px;}
#mainmenu a.menuSub {padding-left:9px;}

/* ユーザメニューの定義 */
#usermenu a {display:block; margin:0px; padding:4px;}
#usermenu a:hover {}
#usermenu a.menuTop {}
#usermenu a.highlight {background:#ffcccc;}


/* 中央ブロックの定義 */
#centercolumn {padding:0 10px; width:720px;}

/* 中央-中央ブロックの定義 */
#centerCcolumn {}
#centerCcolumn .blockTitle {display: none;}

#centerCcolumn .blockContent {padding:1px; margin-bottom:10px;}

/* 中央-左ブロックの定義 */
#centerLcolumn {width:50%; padding:0px 3px 0px 0px;}
#centerLcolumn .blockTitle {padding:3px 5px; background:url(header.gif) repeat-x bottom left; color:#000; font-weight:bold; overflow:hidden;}
#centerLcolumn .blockContent {padding:5px; margin-right:3px; margin-bottom:5px;}

/* 中央-右ブロックの定義 */
#centerRcolumn {width:50%; padding:0px 0px 0px 3px;}
#centerRcolumn .blockTitle {padding:3px 5px; background:url(header.gif) repeat-x bottom left; color:#000; font-weight:bold; overflow:hidden;}
#centerRcolumn .blockContent {padding:5px; margin-left:3px; margin-bottom:5px;}

/* メインコンテンツの定義 */
#content {text-align:left; padding:8px 0;}

/* 右ブロックの定義 */
#rightcolumn {width:175px; padding:0 10px;}
#rightcolumn .blockTitle {padding:5px 0; color:#000; font-weight:bold; border-top:1px solid #000000;}
#rightcolumn .blockTitle img {vertical-align:0px;}
#rightcolumn .blockContent {padding:5px;}

/* フッタブロックの定義 */
#footer {text-align:center; color:#fff; font-size:11px; padding:5px; background:#ff7700;}
#footer a {color:#fff;}
#f-1 {font-size:14px; text-shadow: 1px 2px 3px #000; padding:15px 15px; text-align: left; border-bottom: solid 1px #fff; line-height: 25px;}
#f-1:link {border-bottom: thick double #32a1ce;}
#f-2 {font-size:14px; text-shadow: 1px 2px 3px #000; padding:15px 15px; text-align: left; border-bottom: solid 1px #fff; line-height: 25px;}
#f-3 {font-size:14px; text-shadow: 1px 2px 3px #000; padding:15px 15px; text-align: left; border-bottom: solid 1px #fff; line-height: 25px;}
@media (min-width: 600px) {#parent {display: flex;} #f-1 {flex-grow: 1; width: 100%; font-size:18x;} #f-2 {flex-grow: 1; width: 100%;} #f-3 {flex-grow: 1; width: 100%;}}

.outer {border: 1px solid #999999;}
.head {background-color: #dddddd; padding: 4px; font-weight: bold;}

.even {background-color: #FEFEFE; padding: 4px;}
.odd {background-color: #F9F9F9; padding: 4px;}
.foot {background-color: #dddddd; padding: 5px; font-weight: bold;}

tr.even td {background-color: #FEFEFE; padding:}
tr.odd td {background-color: #F9F9F9; padding:}

/* 最新ニュースの枠 */
.item {}
/* 最新ニュースのタイトルバー */
.itemHead {padding:3px; background:url(header.gif) repeat-x bottom left; color:#000;}
/* 最新ニュースの投稿情報欄 */
.itemInfo {text-align:right; padding:3px; background:#efefef;}
/* 最新ニュースのタイトルの設定 */
.itemTitle a {font-size:120%; font-weight:bold; font-variant:small-caps; color:#000; text-decoration:none;}
/* 最新ニュースの投稿者 */
.itemPoster {font-size:90%;}
/* 最新ニュースの投稿日 */
.itemPostDate {font-size:90%;}
/* 最新ニュースのステータス */
.itemStats {font-size:90%;}
/* 最新ニュースのコンテンツ部分 */
.itemBody {padding:10px;}
.itemText {margin-top:5px; margin-bottom:5px; line-height:1.5;}
/* 最新ニュースの1文字目 */
.itemText:first-letter {}
/* 最新ニュースのフッター */
.itemFoot {text-align:right; padding:3px; background:#efefef;}
.itemAdminLink {font-size:90%;}
.itemPermaLink {font-size:90%;}

/* システムメッセージ */
div.errorMsg {background:#ffcccc; text-align:center; border-top:1px solid #ddddff; border-left:1px solid #ddddff; border-right:1px solid #aaaaaa; border-bottom:1px solid #aaaaaa; font-weight:bold; padding:10px;}
div.confirmMsg {background:#ddffdf; color:#136c99; text-align:center; border-top:1px solid #ddddff; border-left:1px solid #ddddff; border-right:1px solid #aaaaaa; border-bottom:1px solid #aaaaaa; font-weight:bold; padding:10px;}
div.resultMsg {background:#cccccc; color:#333333; text-align:center; border-top:1px solid silver; border-left:1px solid silver; font-weight:bold; border-right:1px solid #666666; border-bottom:1px solid #666666; padding:10px;}

/* Xoopsコードを記述する部分 */
div.xoopsCode {background:#ffffff; border:1px inset #000080; padding:0px 6px 6px 6px;}

/* 引用部分の定義 */
div.xoopsQuote {background:#ffffff; border:1px inset #000080; padding:0px 6px 6px 6px;}

.comTitle {font-weight:bold; margin-bottom:2px;}
.comText {padding:2px;}
.comUserStat {font-size:10px; color:#2f5376; font-weight:bold; border:1px solid silver; background:#ffffff; margin:2px; padding:2px;}
.comUserStatCaption {font-weight:normal;}
.comUserStatus {margin-left:2px; margin-top:10px; color:#2f5376; font-weight:bold; font-size:10px;}
.comUserRank {margin:2px;}
.comUserRankText {font-size:10px; font-weight:bold;}
.comUserRankImg {border:0px;}
.comUserName {}
.comUserImg {margin:2px;}
.comDate {font-weight:normal; font-style:italic; font-size:smaller;}
.comDateCaption {font-weight:bold; font-style:normal;}

.news {
	font-size: 12px;
	line-height: 14px;
	padding: .5em 0 .5em .5em;
	background-color: #D8D8D8;
}
.news1 {
color: #364e96;/*文字色*/
border: solid 3px #364e96;/*線色*/
padding: 0.5em;/*文字周りの余白*/
border-radius: 0.5em;/*角丸*/
margin-bottom: 0.5em;/*文字周りの余白*/
font-size: 22px;
text-align: center;
}
/*-----------------------------------------------
ページタイトル枠
-----------------------------------------------*/
.Ptitle {
  padding: 0.2em 1em;
  margin: 0 0 0.3em 0;
  background: #2e2e2e;
  border: solid 2px #5c5c5c;
	color: #fff;
  width:auto;
  font-size: 30px;
  border-radius: 3em 0.3em 3em 0.3em;
  text-align: center;
}
.Ptitle p {
  margin: 0; 
  padding: 0;
}
@media screen and (max-width: 480px) {
.Ptitle {
  font-size: 18px;
}
}
/*-----------------------------------------------
お問い合わせフォーム
-----------------------------------------------*/
.Form {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}
@media screen and (max-width: 480px) {
  .Form {
    margin-top: 20px;
  }
}
.Form-Item {

  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .Form-Item {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }
}
.Form-Item:nth-child(5) {

}
.Form-Item-Label {
  width: 100%;
  max-width: 248px;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
}
.Form-Item-Label.isMsg {
  margin-top: 8px;
  margin-bottom: auto;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label.isMsg {
    margin-top: 0;
  }
}
.Form-Item-Label-Required {
  border-radius: 6px;
  margin-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 48px;
  display: inline-block;
  text-align: center;
  background: #db0000;
  color: #fff;
  font-size: 14px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
  }
}
.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 15px;
    width: 100%;
    max-width: 400px;
  }
}
.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding: 0.5em 1em;
  height: 216px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Btn {
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 280px;
  display: block;
  letter-spacing: 0.05em;
  background: #545454;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}
@media screen and (max-width: 480px) {
  .Form-Btn {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 16px;
  }
}
#submit_button {
	width: 110px;
	height: 40px;
	font-size: 18px;
}
@media screen and (max-width: 480px) {
#submit_button {
	width: 110px;
	height: 40px;
	font-size: 14px;
	cursor: pointer;
}
}
/*-----------------------------------------------
カラーボタン
-----------------------------------------------*/
.btn-shine-b {
  font-family:'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; 
  text-align: center;
  padding: 10px;
  background-color: #005bb5;
  color: #fff;
  width: 330px;
  margin: 5px auto;
}

.btn-shine-blue {
  color: #FFF;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  width: 300px;
  padding: 10px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid transparent;
  outline: 2px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1.2s cubic-bezier(0.2, 1, 0.2, 1);
  background-color: #005bb5;
  text-align: center;
}

.btn-shine-blue:hover {
  color: #fff;
  border-color: #FFF;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: transparent;
  outline-offset: 12px;
  text-shadow: 2px 2px 3px #000;
}

.btn-shine-r {
  font-family:'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; 
  text-align: center;
  padding: 10px;
  background-color: #de4040;
  color: #fff;
  width: 330px;
  margin: 5px auto;
}

.btn-shine-red {
  color: #FFF;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  width: 300px;
  padding: 10px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid transparent;
  outline: 2px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1.2s cubic-bezier(0.2, 1, 0.2, 1);
  background-color: #de4040;
  text-align: center;
}

.btn-shine-red:hover {
  color: #fff;
  border-color: #FFF;
  text-shadow: 2px 2px 3px #e00364;/* text-shadowを背景色に変更する*/
  outline-color: transparent;
  outline-offset: 12px;
  text-shadow: 2px 2px 3px #000;
}
/*-----------------------------------------------
画像の上に文字を重ねる
-----------------------------------------------*/
.text-image {
  display: flex;
  background-repeat:  no-repeat;     
  background-size:contain;                               /* 画像のサイズを指定    */
    width:100%;                                            /* 横幅のサイズを指定    */
    height:746px; 
  text-align: center;
}

.text-image p {
  margin: auto;
  font-size: 60px;
  line-height: 60px;
  color: #ffffff;
  text-shadow:1px 1px 0 #000, -1px -1px 0 #000,
              -1px 1px 0 #000, 1px -1px 0 #000,
              0px 1px 0 #000,  0 -1px 0 #000,
              -1px 0 0 #000, 1px 0 0 #000;
}
@media screen and (max-width: 480px) {
.text-image {   
  background-size:100% auto;                               /* 画像のサイズを指定    */
    width:100%;                                            /* 横幅のサイズを指定    */
    height:150px; 
}
.text-image p {
  font-size: 18px;
  text-shadow:0.5px 0.5px 0 #000, -0.5px -0.5px 0 #000,
              -0.5px 0.5px 0 #000, 0.5px -0.5px 0 #000,
              0px 0.5px 0 #000,  0 -0.5px 0 #000,
              -0.5px 0 0 #000, 0.5px 0 0 #000;
}
}
/*-----------------------------------------------
スマートフォンとパソコンで見た時の画像を変える。
-----------------------------------------------*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; width:100%;}
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; width:100%; margin-top: 3px;}
}
/*-----------------------------------------------
利用規約のiframeの幅を調整。
-----------------------------------------------*/
.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* アスペクト比16:9の場合 */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 2rem; /* YouTubeの下に余白をつける */
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*-----------------------------------------------
ブロック
-----------------------------------------------*/
#child1 {
  width: 98%; 
  padding:5px 5px; 
  border-right: 1px solid #fff;
}
#child2 {
  width: 98%; 
  padding:5px 5px;
}
@media screen and (min-width: 480px)  {
  #parent {display: flex;} 
  #child1 {flex-grow: 1;} 
  #child2 {flex-grow: 1;}
}
/*-----------------------------------------------
制作の流れページ
-----------------------------------------------*/
h3.box_header{
  border: 2px solid #0094D6;
  background: #0094D6;
  color: #FFF;
  border-radius: 10px 10px 0 0;
  width: 90%;
  padding: 5px 10px;
  margin: auto;
  text-shadow: 1px 2px 3px #000;
}
.box{
  border: 2px solid #0094D6;
  width: 90%;
  padding: 5px 10px;
  margin: auto;

}
.box .inner{
  padding: 0px 10px;
}
.arrow{
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color:  transparent transparent #565656 #565656;
  transform: rotate(-45deg);
  margin-top: 0px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}