@charset "UTF-8";

/*==================================================
　ボタン設定
===================================*/


/*== ボタン共通設定 */


.btn {
    /*背景の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    width:100%;
    max-width: 250px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    outline: none;
}

/*ボタン内側の設定*/
.btn span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #666666;
    /* 重なりを3Dで表示 */
    transform-style: preserve-3d;
    /* アニメーションの設定 数字が少なくなるほど早く回転 */
    transition: 0.5s;
}

/*== くるっと回転 */

/* 回転前 */
.rotateback span:nth-child(1) {
    background: #fff;
    color: #000;
    transform: rotateX(0deg);/*はじめは回転なし*/
    transform-origin: 0 50%  -25px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotateback:hover span:nth-child(1) {
    transform: rotateX(-90deg);/* X軸に-90度回転 */
}

/* 回転後 */
.rotateback span:nth-child(2) {
    background: #666666;
    color: #fff;
    transform: rotateX(90deg);/*はじめはX軸に90度回転*/
    transform-origin: 0 50%  -25px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotateback:hover span:nth-child(2) {
    transform: rotateX(0deg);/* X軸に0度回転 */
}





/*==================================================
　info文字背景
===================================*/

.txt_bg_ocean_white{
    background:#0099ff;
    text-shadow: 1px 2px 3px #808080; 
    padding:10px 100px;
    border-radius:20px;
    color:white
;
}





/*==================================================
　フォームメール文字背景
===================================*/

.txt_bg_red_white{
    background:#f52e2e;
    padding:0.3em;
    border-radius:5px;
    color:white
;
}

.txt_bg_blue_white{
    background:#0099ff;
    padding:0.3em;
    border-radius:5px;
    color:white
;
}



/*==================================================
　リンク設定1
===================================*/

/*== 線の上を別の線が伸びる */

.footer{
    /*線の基点とするためrelativeを指定*/
  position:relative;
    /*リンクの形状*/ 
  color:#333;

  display:inline-block;
    text-decoration: none;
    outline: none;
}

/*線の設定*/
.footer::before,
.footer::after{
  content:'';
    /*絶対配置で線の位置を決める*/
  position:absolute;
  z-index:1;
  bottom:0;
  left:0;
     /*線の形状*/   
  background:#ffffff;
  width:100%;
  height:2px;
    /*アニメーションの指定*/
  transition:all 0.2s ease-in-out;
}

 /*hover時に伸びる線の形状*/   
.footer::after{
  width:0;
  background:#0099ff;
}

 /*hover時に100%に伸びる*/   
.footer:hover::after {
  width:100%;
}



/*==================================================
　リンク設定2
===================================*/

a:link {
	color: #0099ff;
text-decoration:none;

}

a:visited{
	Color: #0099ff;
text-decoration:none;
}

a:hover{
	color: #d500d5;
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}





/*==================================================
　グラデーション
===================================*/

.gradient-hedder {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  background-image: -moz-linear-gradient(to bottom, #0099ff, #ffffff);
  background-image: -ms-linear-gradient(to bottom, #0099ff, #ffffff);
  background-image: -o-linear-gradient(to bottom, #0099ff, #ffffff);
  background-image: -webkit-linear-gradient(to bottom, #0099ff, #ffffff);
  background: linear-gradient(to bottom, #0099ff, #ffffff);
}

.gradient-footer {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  background-image: -moz-linear-gradient(to bottom, #ffffff, #0099ff);
  background-image: -ms-linear-gradient(to bottom, #ffffff, #0099ff);
  background-image: -o-linear-gradient(to bottom, #ffffff, #0099ff);
  background-image: -webkit-linear-gradient(to bottom, #ffffff, #0099ff);
  background: linear-gradient(to bottom, #ffffff, #0099ff);
}

.gradient-title  {
  width: 100%;
  padding: 10px 0 5px 0;
    border-radius:5px;
  background-image: -moz-linear-gradient(left, #82cdff 20%, #0099ff 60%, #82cdff );
  background-image: -ms-linear-gradient(left, #82cdff 20%, #0099ff 60%, #82cdff );
  background-image: -o-linear-gradient(left, #82cdff 20%, #0099ff 60%, #82cdff );
  background-image: -webkit-linear-gradient(left, #82cdff 20%, #0099ff 60%, #82cdff );
  background-image: linear-gradient(left, #82cdff 20%, #0099ff 60%, #82cdff );
  text-shadow: 1px 2px 3px #808080; 
}

.gradient-subtitle  {
  width: 100%;
  padding: 10px 0 5px 0;
    border-radius:5px;
  background-image: -moz-linear-gradient(left, #0099ff 60%,#ffffff);
  background-image: -ms-linear-gradient(left, #0099ff 60%,#ffffff);
  background-image: -o-linear-gradient(left, #0099ff 60%,#ffffff);
  background-image: -webkit-linear-gradient(left, #0099ff 60%,#ffffff);
  background-image: linear-gradient(left, #0099ff 60%,#ffffff);
  text-shadow: 1px 2px 3px #808080; 
  font-size: 1.2rem;
}





/*==================================================
　罫線
===================================*/

.hr1 {

  background: #ffffff;
  background-image: -webkit-linear-gradient(left, #ffffff, #e2e2e2, #ffffff);
  background-image: -moz-linear-gradient(left, #ffffff, #e2e2e2, #ffffff);
  background-image: -ms-linear-gradient(left, #ffffff, #e2e2e2, #ffffff);
  background-image: -o-linear-gradient(left, #ffffff, #e2e2e2, #ffffff);
}