@charset "UTF-8";

.global-nav li {
	text-shadow: 3px 3px 3px #808080; 
}

/*デフォルトの余白、背景の色、文字のサイズ*/
body {
    margin: 0;
    padding: 0;
    background-color: #cccccc;
    color: #333333;
    font-size: 15px;
    line-height: 2;
}

/*デフォルトの余白を消す*/
p,h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
}
img {
    vertical-align: bottom;
}
ul {
    margin: 0;
    padding: 0;
}

/*訪れた（visited）サイトの文字の色を変える。下線をマウスおいた時だけひく。*/
a {
    color: #3583aa;
    text-decoration: none;
}
a:viseted {
    color: #788d98;
}
a:hover {
    text-decoration: underline;
}

/*ヘッダーの位置を設定。marginはwidthの後に書くらしい。*/
header {
    width: 960px;
    height: 100px;
    margin: 0 auto;
}

/*htmlで自分で指定した、logoとmenueの位置の設定*/
.logo {
    float: left;
    margin-top: 65px;
}
.global-nav {
    float: right;
    margin-top: 75px;
}

/*横並び、余白、サイズ、文字前のちょぼ無くす、書体*/
.global-nav li{
    float: left;
    margin: 0 20px;
    font-size: 20px;
    list-style: none;
    font-family: "Sawarabi Mincho"; 
}

/*リンクの色を白にする*/
.global-nav li a{
    color: #ffffff;
}

/*下線部の色変更、二重線にする、二重線の下だけ残す。*/
.global-nav li a:hover {
    border-bottom: 2px solid #ffffff;
    padding-bottom: 3px;
    text-decoration: none;
}

/*コンテンツエリアの設定*/
#wrap {
    clear: both;
    background-color: #ffffff;
    margin-top: 220px;
    padding: 35px 0;
}
.content {
    width: 960px;
    margin: 0 auto;
}

/*中央揃えにしてサイズを小さく*/
footer {
    text-align: center;
    color: #ffffff;
    padding: 20px 0;
}

/*small要素のみサイズを変更*/
footer small {
    font-size: 12px;
    font-family: "Sawarabi Mincho";
}


/*見出しのサイズ、書体、最後に本文との余白設定、最後にprofileページで設定したborderが残っているので消す。*/ 
#index h1 {
    font-size: 77px;
    line-height: 1;
    color: #ffffff;
    font-family: "Sawarabi Mincho";
    margin-bottom: 50px;
    border: none;
}

/*見出しの*/  
#index .content {
    margin-top: 150px;
}

/*本文のサイズと色。*/
#index p {
    font-size: 16px;
    color: #ffffff;
}

/*ボタン設定　”北方教室”の文字サイズ、色、フォント、ボタンサイズ位置、角をなくす、枠の色*/
.btn1 a {
    background-color: #009cd3;
    color: #ffffff;
    font-size: 20px;
    font-family: "Sawarabi Mincho";
    width: 185px;
    display: block;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;
    border-radius: 5px;
    border: 3px solid #009cd3;
}

/*ボタンを置いた時のデザイン*/
.btn1 a:hover {
    text-decoration: none;
    background-color: #ffffff;
    color: #009cd3;
}
/*ボタン設定　”笠松教室”の文字サイズ、色、フォント、ボタンサイズ位置、角をなくす、枠の色*/
.btn2 a {
    background-color: #009cd3;
    color: #ffffff;
    font-size: 20px;
    font-family: "Sawarabi Mincho";
    width: 185px;
    display: block;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;
    border-radius: 5px;
    border: 3px solid #009cd3;
}

/*ボタンを置いた時のデザイン*/
.btn2 a:hover {
    text-decoration: none;
    background-color: #ffffff;
    color: #009cd3;
}
/*ボタン設定　”谷汲教室”の文字サイズ、色、フォント、ボタンサイズ位置、角をなくす、枠の色*/
.btn3 a {
    background-color: #009cd3;
    color: #ffffff;
    font-size: 20px;
    font-family: "Sawarabi Mincho";
    width: 185px;
    display: block;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;
    border-radius: 5px;
    border: 3px solid #009cd3;
}

/*ボタンを置いた時のデザイン*/
.btn3 a:hover {
    text-decoration: none;
    background-color: #ffffff;
    color: #009cd3;
}
/*=============================*/

/*フッターの余白や位置の設定。profileページで設定したフッターをなくす。*/
#index footer {
    width: 960px;
    margin: 0 auto;
    text-align: left;
    margin-top: 150px;
    background-color: transparent;
}

/*背景写真設定、写真繰り返しをなくす、画像表示位置、画像固定、coverでフルサイズにする。*/
#index {
    background-image: url(../images/shodou1.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

/*見出しのサイズ、書体、最後に本文との余白設定、最後にprofileページで設定したborderが残っているので消す。*/ 
#index h1 {
    font-size: 100px;
    line-height: 1;
    color: #ffffff;
    font-family: "Sawarabi Mincho";
    margin-bottom: 50px;
    border: none;
}

/*見出しの*/  
#index .content {
    margin-top: 150px;
}

/*本文のサイズと色。*/
#index p {
    font-size: 16px;
    color: #ffffff;
}

/*============================================================================================*/

/*教師紹介ページの設定*/
#about {
    background-image: url(../images/shodou2.JPG);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: 100% auto;
}

/*メインエリアの幅*/
main-center {
    width: 940px;
    margin: 0 auto;
}

/*見出しのフォント設定*/
h1 {
    font-family: "Sawarabi Mincho";
    font-size: 36px;
    border-bottom: 1px solid #cccccc;
}

/*中見出しのスタイル*/
h2 {
    font-family: "Sawarabi Mincho";
    font-size; 24px;
}

/*中見出しの前に薄緑の印をつける*/
.icon:before {
    content: "";
    padding-right: 10px;
    border-left: 7px solid #9cb4a4;
}

/*テキストと写真の位置の指定*/
#about .profile-txt {
    width: 540px;
    float: left;
}

/*span指定したところだけboldで太字にする。*/
#about .profile-txt span {
    font-weight: bold;
}

/*写真の位置設定*/
#about .profile-image {
    float: right;
}

/*clearfixで回り込みを解除する。*/
.clearfix:after {
    content:"";
    display:block;
    clear: both;
}

/*各セクション（見出し1見出し2の間の設定）*/
section {
    margin-bottom: 35px;
}

/*見出しセルの設定*/
#about .career th {
    width: 240px;
    background-color: #f0f0f0;
    padding: 12px 0;
    border: 1px solid #cccccc;
    text-align: center;
}

/*セルの横幅設定*/
#about .career td {
    width: 300px;
    padding: 12px 0 12px 9px;
    border: 1px solid #cccccc;
    text-align: center;
}

/*セルの隙間の設定、線の重なりをなくす*/
table {
    border-spacing: 0;
    border-collapse: collapse;
}

/*フッターの設定*/
footer {
    text-align: center;
    color: #ffffff;
    padding: 20px 0;
    background-color: #767671
}

/*============================================================================================*/

/*indexページとの互換性、バグの修正。*/
#index #wrap {
    background-color: transparent;
    margin-top: 0;
    padding: 0;
}

/*============================================================================================*/

/*詳細情報ページの設定*/
#portfolio {
    background-image: url(../images/bg-portfolio.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: 100% auto;
}

/*メインエリアの余白と位置設定*/
.main {
    width: 700px;
    margin: 0 10px;
    float: left;
}

/*サイドバーの余白と位置設定*/
.sidebar {
    width: 200px;
    margin:0 10px 0 30px;
    float: right;
    font-family: "Sawarabi Mincho";
}

/*画像の透明度設定*/
a img:hover {
    opacity: 0.8;
}

/*見出しの余白*/
.sidebar h2 {
    margin-bottom: 10px;
}

/*リストを整える*/
.sidebar ul a {
    color: #333333;
}

/*============================================================================================*/

/*作品＆練習風景ページの設定*/
#photograph {
    background-image: url(../images/shodou2.JPG);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: 100% auto;
}

/*画像位置と余白設定設定*/
#photograph .photograph-list li {
    float: left;
    list-style: none;
    margin: 0 20px 15px 0;
}

/*3の倍数（3n）写真を並べる余白設定。*/
#photograph .photograph-list li:nth-child(3n){
    margin-right: 0;
}

/*============================================================================================*/

/*ビデオページの設定*/
#video {
    background-image: url(../images/bg-video.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: 100% auto;
}

/*============================================================================================*/

/*ご連絡ページの設定*/
#contact {
    background-image: url(../images/bg-contact.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: 100% auto;
}

/*「アクセス」のエリア位置指定*/
#contact .access table {
    float: left;
}

/*表組みの設定*/
#contact .access th,
#contact .access td {
    text-align: left;
    vertical-align: top;
    line-height: 2.5;
}

/*表のレイアウト設定*/
#contact .access td {
    padding-left: 30px;
}

/*地図の位置設定*/
#contact .access iframe {
    width: 460px;
    float: right; 
}


/*「ご連絡フォーム」の背景色と余白の設定*/
#contact .form {
    background-color: #eaeaea;
    padding: 30px 50px;
}

/*項目名の表示エリア余白設定、横並びにする。*/
#contact .form dl dt {
    width: 165px;
    padding: 10px 0;
    float: left;
    clear: both;
}

/*フォームのレイアウト設定*/
#contact .form dl dd {
    padding: 10px 0;
}

/*各フォームのフレームの大きさを設定*/
#contact .form .name {
    width: 240px;
    height: 30px;
}
#contact .form .email {
    width: 300px;
    height: 30px;
}
#contact .form .tel {
    width: 240px;
    height: 30px;
}
#contact .form .type {
    width: 180px;
    height: 30px;
}
#contact .form .message {
    width: 660px;
    height: 150px;
}

/*「送信」ボタンの装飾*/
#contact .form button {
    background-color: #009cd3;
    color: #ffffff;
    font-size: 20px;
    font-family: "Sawarabi Mincho";
    width: 120px;
    display: block;
    text-align: center;
    line-height: 50px;
    border-radius: 5px;
    border: 3px solid #009cd3;
    margin-left: 165px;
}

/*マウスを置いた時に色を置き換える、ポインタを手の形に変える*/
#contact .form button:hover {
    background-color: #ffffff;
    color: #009cd3;
    cursor: pointer;
}

/*赤い印*をつける*/
#contact .form .required:after {
    content: " * ";
    color: #ff0000;
}

/*注意書きの表示位置を設定*/
#contact .form .attention {
    margin: 20px 0 0 165px;
}

/*============================================================================================*/

/*メディアクエリの記述、文字サイズ*/
@media screen and (max-width:600px) {
    /*画像のサイズが600px以下の場合に適用*/
    
    body {
        font-size: 3.5vw;
    }
    
    h1 {
        font-size: 7.2vw;
    }
    
    h2 {
        font-size: 6vw;
        margin: 0 8px;
    }
    
    header {
        width: auto;
        margin: 0 5%;
    }
    
    .logo {
        float: none;
        margin-top: 20px;
        text-align: center;
    }
    
    .global-nav {
        float: none;
        margin-top: 10px;
        text-align: center;
    }
    
    
    
    #wrap {
        margin-top: 40px;
        padding: 35px 0 0;
    }
    
    .content {
        width: 100%;
        margin: 0 9 0 9px;
        
    }
    
    .career {
        margin: 0 5px;
    }
/*==============================書き初めページのhome写真を中央に====================================*/
    .kakizome, img{
        width: 100%;
    }
/*==============================書き初めページのhome写真を中央に====================================*/

/*==============================その他ご依頼ページのhome写真を中央に↓====================================*/
    .tegami img{
        width: 100%;
    }
    .tamegaki img{
        width: 100%;
    }    
    .tshatsu img{
        width: 100%;
    }
    .sonotasakuhin img{
        width: 100%;
    }
/*=======================================その他ご依頼↑===============================================*/

    .main {
        float: none;
        width: auto;
        margin: 0 5%;
    }
    
    h2 img {
        max-width: 100%;
    }
    
    #photograph {
        background-image: url(../images/shodou-folio.jpg)
    }
    #about {
        background-image: url(../images/shodou-folio.jpg)
    }
    
    .map iframe {
        width: 100%;
        height: 100%;
        margin: 0 9 0 9px;
    }
    
    .sidebar {
        width: auto;
        float: none;
        margin: 0;
        padding: 30px 10% 10px;
        background-color: #f7f6f4;
    }
    
}