/* ===================================================================
--top.css--
=================================================================== */
@charset "utf-8";

/* ----------------------- imgTop */
div#imgTop{
	width:100%;
	height:auto;
	background-color: #ebebeb;
	text-align: center;
	/*padding-left:30px;*/
}

/* ----------------------- instantCont */

.instantInner{
	max-width:100%;
	height:auto;
	display: block;
	clear: both;
	margin: 0 auto;
	padding:25px 0;
}

.imgProfArea{
	width:297px;
	height:auto;
	display: block;
	font-size:12px;
	color: #4a4a4a;
	float: left;
	margin-right:28px;
}

.policyArea{
	width:645px;
	height:407px;
	display: block;
	float: left;
}

.btnComp{
	width:645px;
	height:133px;
	display: block;
	clear: both;
}

.btnCharac{
	width:302px;
	height:133px;
	float: left;
}

.mR{
	margin-right:11px;
}

.policyArea ul li{
	margin-bottom: 5px;
	padding-left:50px;
}

/* ----------------------- cheer */
.cheer{
	width:638px;
	height:312px;
	display: block;
	clear: both;
	margin-bottom:30px;
}

.cheerImg{
	width:155px;
	height:263px;
	display: block;
	float: left;
	padding-top:15px;
	padding-left:29px;
}

.cheerText{
	width:420px;
	height:263px;
	display: block;
	float: left;
	padding-top:20px;
	margin-left:25px;
	font-size:13px;
	line-height: 1.7;
	color:#565656;
}

/* ----------------------- news */
.newsCont{
	width:638px;
	height: 266px;
	display: block;
	clear: both;
	margin:0 0 25px;
	border-bottom:4px solid #ca0513; 
	border-left:4px solid #ca0513;
	border-right:4px solid #ca0513;
}

.newsContTitle{
	width:642px;
	height: 40px;
	display: block;
}

.newsContInner{
	width:636px;
	height: 224px;
	display: block;
	float: left;
	/*overflow: auto;*/
}

.row1{
    width:592px;
    height:auto;
    /*padding:10px 0;*/
    border-bottom:1px solid #f6bfbf;
    display:block;
    font-size:14px;
    clear: both;
    margin:0 auto;
}

.col{
    width:100px;
    line-height: 2;
    float: left;
    padding-top:15px;
    padding-bottom:15px;
    color:#4a4a4a;
    font-weight: bold;
    display: inline;
    font-size:12px;
}
.col2{
    width:100px;
    line-height: 2;
    float: left;
    padding-top:15px;
    padding-bottom:15px;
    color:#4a4a4a;
    font-weight: bold;
    display: inline;
    font-size:12px;
}

.c2{
    width:392px;
    line-height: 2;
    float: left;
    padding-top:15px;
    padding-bottom:15px;
    display: inline;
    color: #4a4a4a;
    font-size:12px;
}

iframe{
	border:0px;
}

.news{
	width: 72px;
	height:22px;
	display: block;
	background:url(../../tsukamoto/images/top/tagNews.gif);
	background-repeat: no-repeat;
}

.katudou{
	width: 72px;
	height:22px;
	display: block;
	background:url(../../tsukamoto/images/top/tagKatudouhoukoku.gif);
	background-repeat: no-repeat;
}

/* ----------------------- sns */
.snsContainer{
	width:646px;
	height:540px;
	display: block;
}

.fbBox{
	width:364px;
	height:532px;
	display: block;
	float: left;
	margin-right:10px;
	border-bottom:4px solid #435fb2; 
	border-left:4px solid #435fb2;
	border-right:4px solid #435fb2;
}

.fbTitle{
	width:368px;
	height:66px;
	display: block;
}

.twBox{
	width:364px;
	height:532px;
	display: block;
	float: left;
	border-bottom:4px solid #3fcdfd; 
	border-left:4px solid #3fcdfd;
	border-right:4px solid #3fcdfd;
}

.twTitle{
	width:368px;
	height:66px;
	display: block;
}



/* =================
ハンバーガーボタンの実装
================= */
 
.menu-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: black;
}
.menu-btn:hover {
  cursor: pointer;
}
/* 三本線の実装 */
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: "";
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
}
.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}
/* チェックボックスを非表示にする */
#menu-btn-check {
  display: none;
}
 
#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(
    255,
    255,
    255,
    0
  ); /*メニューオープン時は真ん中の線を透明にする*/
}
 
/* メニューを開いている時はハンバーガーボタンが×になる */
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}
/* =================
メニュー部分の実装
================= */
 
.menu-content {
  width: 80%;
  height: 100%;
  position: fixed;
  top: 0;
   /* メニューを外に出しておく */
  left: 100%;　
 
  z-index: 80;
  background-color: black;
  transition: all 0.5s; /*アニメーションを滑らかにする*/
}
.menu-content ul {
  padding: 70px 10px 0;
}
.menu-content ul li {
  border-bottom: solid 1px #ffffff;
  list-style: none;
}
.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  padding: 9px 15px 10px 0;
  position: relative;
}
 
#menu-btn-check:checked ~ .menu-content {
  left: 30%; /*メニューを画面内へ動かす*/
}